{"_id":"@ngneat/input-mask","_rev":"36-4538941c8bee42d4bc30dc889e7196a1","name":"@ngneat/input-mask","dist-tags":{"release-4.x.x":"4.1.1","beta":"5.3.0-beta.1","release-5.x":"5.4.0","latest":"6.1.0"},"versions":{"1.0.0-beta.1":{"name":"@ngneat/input-mask","version":"1.0.0-beta.1","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"7ba402ee3dce49f5dbb31e02026d82b90075dd9a","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.0-beta.1.tgz","fileCount":36,"integrity":"sha512-9yFP+kt8CzXNGDwFbZOJt+knSZvNllj6mXgGyV5usIK8g9u9MvqrVMI7qjQpYx4FMbiEyl75kWx8xS/bPW4HsQ==","signatures":[{"sig":"MEUCIHUi4jnIsbvZ1HVk4C3eilM0y57DM81BugrKadVHrxasAiEA425iBhsdz8qI4KOtFYhWCBsSKdTp8pqcRtnBT/KKiIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiVXYCRA9TVsSAnZWagAAKaIP/Avm+RxyOmKY3p9zj7PW\nZEyetTWuFaj9zuBJgTcJHVBl1rf73QhuY5qXJ2p/P640OLrj4GvR3awwiYyb\nj/3Payk7h9Kx0759/Z4cMyGdkfLD+VJyKIM2xto5FJMku7Q0Aint5kSSfhBe\nIGZpw2+fzPN6hO8tamE4ypb2Qm0sMIhOkF0J9Gadsqdh2w3BsC3Tk1Alezwe\nOz9TZOugmz1z9zMjI0i5OkO93t49kJ9JtsDG4omuj0Uwa6FNkttR2CB8ndzj\nmZ8FQmcfVQAvmqx9sWvMnYrKg59RCe1dk/6L16Ml+vJLTv7xjCOxMxbaMkFX\nY2qhsWgwSPVIAgwecNVH9pKtm3nhPJk420iDiBFn3ImVkvQfidI9UImStWnz\nOYGBBcdBLUKrIHd32yuS2cfvc9AF8S4wVQJrKZcLkORs57ofc0QCJZv2uexy\nskoOnvLpai2SWeUqC/Gki6J944Gz7tzvQmlt9qOTedaJEqSeK5IJvSX4/2Go\nK8MBiFc7eYe9fnnPYl99QfRfEjoSAci/tpNDqS0C/ur6E0O5IsqprwXfh3Lk\ndgpAfUUbv5h0ZBLK7FCwVbm1pgMmyLvAPwKBqKactDfGFNUlDtpG62MyFlTK\ni9pvHk1nalVnl43+UA2xvpCKdieO9k7NnPnIJMjx16dS/uAul3Vngot1vJIC\n15Jp\r\n=GkN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"<p align=\"center\">  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\"> </p>","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.0-beta.1_1619613143643_0.9357539015249601","host":"s3://npm-registry-packages"}},"1.0.0-beta.2":{"name":"@ngneat/input-mask","version":"1.0.0-beta.2","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.0-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"ecbb48a886e722ab94a8338fa90dcf225c8c2586","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.0-beta.2.tgz","fileCount":36,"integrity":"sha512-+/YJw9xYFWfZco10xpsqTf4f9V1pJYlglQLHRo+j86adNPo7sJhJVdN3FlPAKWcfVgEh3rOdl3cy4LhkCeAkHg==","signatures":[{"sig":"MEUCIQDlj7PFqYBWcXANqljxsrpI71IjJguFRlMeAvhnN7gPZQIgWS+1C8FJJsZyto/y9mkktJuz/E8NVAoauUcNdBHhmpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiYzWCRA9TVsSAnZWagAAdnUP/itXd0CvlkHqjBGIfEtB\n9esabyrOjNwaENm+Qlbdj//QCRDwxnmpSGbRmGU1qlY6FcT9+dm76MFPkzvm\nKXd9ZaGbgJ0EFmaArHyJcQ2gmY+JLQwPPQVj0sAzxfnIL7e12C9pRaLScSxe\nMoa5FPXNT4JA1aURF9WRkMzVlxNBdcONO3gLmevg3ufm64KbrybXYn2wnSo+\nBSa+4fg5rj1bFGmBjRHGioOSabRSKC6adAFGReuQIKIKh/6obLn/AGwaS1Hb\nZ1O0JB9YOGL1925czjVspNb1Zpxt4Xn/Qyj9SYI4mGrbNw7hEOzzCaHdGmFR\noTDkQQiF4ttV3//X8m7J1lSy7WVwFkzL2cgOe+sXRTKcqc7DDJGn0Vs1NLpJ\naMhvu4eaS4ps+arUtrHCJFX9gxssm8AmneJ5ybbTbp09aedqYe3BUw9diCiW\nk+GrDWMl4YZ7X4HHQuUpkUBl0yrRAflxywf0tvK4O4FiYlBI01CDBl6cNGJU\nMw+x/sAB241c0ZmGSkL5Nz40n5OpVezNckunBi4XtzVTa9bImL8RbDWjsAel\nxk5tyAvdnf23RJ8wVUI2W2tXj9y/CrbE+fSQ6KFfgA5d6eNPa8l7STq43ltM\nvf0uawPikiIoTZu5f7rIlN9CUkUXxfIS69OfaOVz+XLSeFvlp8EUOqSeF3mC\nyhqp\r\n=Yk/Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<p align=\"center\">\n <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> The Library Slogan\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\nAccusantium aliquid corporis cupiditate dolores eum exercitationem illo iure laborum minus nihil numquam odit officiis possimus quas quasi quos similique, temporibus veritatis? Exercitationem, iure magni nulla quo sapiente soluta. Esse?\n\n## Features\n\n- ✅ One\n- ✅ Two\n- ✅ Three\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n\n## Installation\n\n### NPM\n\n`npm install @ngneat/input-mask --save-dev`\n\n### Yarn\n\n`yarn add @ngneat/input-mask --dev`\n\n## Usage\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\n\n```ts\nfunction helloWorld() {}\n```\n\n## FAQ\n\n## How to ...\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ips\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n<div>Icons made by <a href=\"http://www.freepik.com/\" title=\"Freepik\">Freepik</a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com</a></div>\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"<p align=\"center\">  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\"> </p>","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.0-beta.2_1619627221877_0.12171156329648491","host":"s3://npm-registry-packages"}},"1.0.0-beta.3":{"name":"@ngneat/input-mask","version":"1.0.0-beta.3","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.0-beta.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"20dd07b4511eab5df6992600a298e1e6c1010018","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.0-beta.3.tgz","fileCount":36,"integrity":"sha512-pRk0Ptig6IiE+pJn7veGN5MbIOARBuwt1jdp+eOxdjEqnHAQFny3Nswc2uD7fDmixSOPnTDZMXSm18v4FLmvZw==","signatures":[{"sig":"MEUCIQCxLhfwm16G/42BT2NrzzB4oyZDErffecBQGgrT5gGjzwIgXKTwRgD6uQB0NJVQHs+Tjv5wuLT6DsBOqWtbWG52mSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiZVkCRA9TVsSAnZWagAAz2EP/2bDOsVDMPFTcKUdWQWw\nRUnmBjIQGWVYMf9ZCslytba+e33xvhBgZ3G6JM0QRra+hxrEN9lbR+rZF4yp\n3KkCaY0RodSMPwEQ4kUgbZU4gF6WqhDW9HA7+PqNggL8/VEr0A3A71m3KzTS\nqZHfZIrW+U3IHTeHtNasocwBFWPcd1Wm0jzVKzdkNTQ+AF/Jks7DcV9uyx5J\n1Hpk1bFhIeo6oeTeYcCBk2HT8+8fXWkXaGvaZxpq8XyhfiGysfgtkjbiZmYZ\n/x7mHrLQ/HdPhvtYQt4e/uJQu+tGkKcDbsNVIuFYi6N+7fVpuqxY/e8SKWnf\no867I8EDUsk6Pc5Fe8pIYxpn/9RtoOFEe+kEAfO+TbW7khiTWdLQciGe+TUN\n7abONxbW/ed6j+Fu1FPqEjHqFGexvuwxt1SzByDD1I2wYIDxg64PIHTmrmwD\nY3eseVgrf8LEI/S4MCH3BHLAGbQlm13wTqHx3CB1fDpUd3UbDyepk1eBcQ4/\nAmvybtX2dP09BMPK08VppFhOGzj7mqX9hGv65Tsn0JtQHv1DjJZ0+OOg/hDN\neU2clnc7FAbkqLX74f/HtVuoISfpy0W/pBD9T8efX9PWVAs0TwOf83sGAoYE\nfm2mZUPZa6FrK6XuDw3fpmSYYN16jM0BhCXyq0rKJChKyEUtIa5QH/+IHSQd\noyao\r\n=ekCR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<p align=\"center\">\n <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> The Library Slogan\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\nAccusantium aliquid corporis cupiditate dolores eum exercitationem illo iure laborum minus nihil numquam odit officiis possimus quas quasi quos similique, temporibus veritatis? Exercitationem, iure magni nulla quo sapiente soluta. Esse?\n\n## Features\n\n- ✅ One\n- ✅ Two\n- ✅ Three\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n\n## Installation\n\n### NPM\n\n`npm install @ngneat/input-mask --save-dev`\n\n### Yarn\n\n`yarn add @ngneat/input-mask --dev`\n\n## Usage\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\n\n```ts\nfunction helloWorld() {}\n```\n\n## FAQ\n\n## How to ...\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ips\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n<div>Icons made by <a href=\"http://www.freepik.com/\" title=\"Freepik\">Freepik</a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com</a></div>\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"<p align=\"center\">  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\"> </p>","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.0-beta.3_1619629411903_0.546763320627057","host":"s3://npm-registry-packages"}},"1.0.0-beta.4":{"name":"@ngneat/input-mask","version":"1.0.0-beta.4","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.0-beta.4","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"d5f090d0bbdd762c1d85153fa83562860c4354a2","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.0-beta.4.tgz","fileCount":36,"integrity":"sha512-WYUaIfDkU9IZcQ1alKTSIMjXKDrszLCsLPxpYFNfwH+ay/nOM7khS+1oEV5SLY6j2rC8batIJfzxJyQ/O22OUw==","signatures":[{"sig":"MEUCIQCmkZS3+SV90GXD9PZBmAk2cL4XprDtNPO/Zp1S9+DrbQIgWWQxHds/KuLuwHO+hQ3n5tN8VN36PGv/Z2G73AK6qYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglScNCRA9TVsSAnZWagAAK8EP/0yJrOd8a1skRV+1vh2h\nNQpr7sIeBmMtMwIfg6h017hl+kWwUwuFHgJO0FfB+DZCLj0Uq/jdcYLNpAip\nfF1GRioPX+gJd/4oTH9GbyxtNcopzFWd190AbfC3BsMn0ghLRuN3P9RaYan9\n9zHgTFUR9EqH27G9ks8Hn1lOzamvGCSxywEacxASNIo7XlvyQ+H61HBEyWr/\noxNZQRiR35S2fjnijP4BHTTpN+9s4Q++JtRUv43rJzfNMdcvJgFxRyDwmw8j\nqcutXyw16yupnJ5IStLy0FYsyIC8SH5tIyToQnWf5Nea+CLMXjiWLqlHabRE\n28Br9nVvhKZEtGdcQHOlweResDIdn8C41TRBMGbsmj0iyZkZBSvqpZCjb2Lf\ncnyfYmdFdDaQ51IWgvu56KTyxED6uy692aoOlfAl0M3SsBkScwJXtRrs7G/I\nFNOSoXDb1Md+FEBPX9bVr3mUeK90VfAo7/vSS6+ewtIWE7GpEYwWZ+sEe83l\nXEYSuGGcl6IMRcjYNLqM5EajX/FGrUqB6M09K8tCv65QHJr6g/Fe97L0rY5x\nud53ogje2EY9Io4cnlVY7BvFYGJw5RsHDDfcnFZ77TR8Jkz3qC1XNyXLqpL7\nDMsTiGbhWlxmiKW8WpfWExxus42X1SCINVko0VQ2AFxLBGmQFbowUKLlQfkz\n5czD\r\n=bQJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<p align=\"center\">\n <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> The Library Slogan\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\nAccusantium aliquid corporis cupiditate dolores eum exercitationem illo iure laborum minus nihil numquam odit officiis possimus quas quasi quos similique, temporibus veritatis? Exercitationem, iure magni nulla quo sapiente soluta. Esse?\n\n## Features\n\n- ✅ One\n- ✅ Two\n- ✅ Three\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n\n## Installation\n\n### NPM\n\n`npm install @ngneat/input-mask --save-dev`\n\n### Yarn\n\n`yarn add @ngneat/input-mask --dev`\n\n## Usage\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\n\n```ts\nfunction helloWorld() {}\n```\n\n## FAQ\n\n## How to ...\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ips\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n<div>Icons made by <a href=\"http://www.freepik.com/\" title=\"Freepik\">Freepik</a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com</a></div>\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"<p align=\"center\">  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\"> </p>","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.0-beta.4_1620387597446_0.3522344610587722","host":"s3://npm-registry-packages"}},"1.0.0-beta.5":{"name":"@ngneat/input-mask","version":"1.0.0-beta.5","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.0-beta.5","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"1a1229a044a23f816e398e946636d12c266c1882","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.0-beta.5.tgz","fileCount":36,"integrity":"sha512-JLNiMj7f7PmlerFfwWVaSf5ReOmImJaXj+6nDRgGXozeW5ECJfjMwCiBsh8d+6/fWiA0P853p+V/+6dNk/hp6A==","signatures":[{"sig":"MEUCIBnszwokvE/rvUAJLnmKhxLQTNI3ErWBGir7HzT48Oe5AiEA7mXv66kKxjIT4PYpTq2FtTU+zaJyrCq2oi+bU2eMHw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm6sYCRA9TVsSAnZWagAAPuEP/16GxZaKd+KMWPsSP0dk\n/dph9LfgBStb3JME5awfAUcDVjIXHF6MtIHSVwbsBq5KrEpI3z21a75KIjNd\nngwDCEW3L3KVYwW6BG7hAAcYc7Ewg0PmFxQZNGXOSTdyL0MI3CY3f46E/+YE\nFEyUr1h78XKMsylYuuLdcKI0/wkuFKow3ergbRdrv3d6Rf3u5loJw5f/K59K\nBN5ngTDDyzEAQNX4XJyh1w1hXYVbN/yOR/PZTaRUFBOM810i9dZ/O8dfdWHS\n693Pk21r9niSDgXj72K/j9p3ZTVOo045tSz3HyqlVZg5NhFl9Uf4T43Hm8gl\nqJHW7FEzIXEop3rl1zJlyQDk/Tq/yHWZfMq+kayb9Y4hvAPddNme3We4Oe+w\nbG0x8fqvKysZJhuDK3ZGDWgg56e+gO33sGpIlLrhiMx1Q/+Z+npFVjI0h/hv\nMJBuOaWI9U5eQVyY3QPhRJmlLIEFar9hVg37iO5BjXJyxNTGHQyGXfQKh20M\nHYab6vPQEHMQrU8Uciuc+iC8Tjt/TkvANqRmlVQyq8cR1diEJRDU9WglbjKV\nG25e3vUKqO/DJvW85zx74zOHcdjDow8QTU8wtKTyZ+U9Uuamj1fiK3IDnCWz\n2odG0YJTgVoZ4kaSarw+ggns7moNbp9F9Sojo9DuEdv4544PnjmLOkuTez1k\nn9zv\r\n=NlmW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<p align=\"center\">\n <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> The Library Slogan\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\nAccusantium aliquid corporis cupiditate dolores eum exercitationem illo iure laborum minus nihil numquam odit officiis possimus quas quasi quos similique, temporibus veritatis? Exercitationem, iure magni nulla quo sapiente soluta. Esse?\n\n## Features\n\n- ✅ One\n- ✅ Two\n- ✅ Three\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n\n## Installation\n\n### NPM\n\n`npm install @ngneat/input-mask --save-dev`\n\n### Yarn\n\n`yarn add @ngneat/input-mask --dev`\n\n## Usage\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ipsam iste iure, maxime modi molestiae nihil obcaecati odit officiis pariatur quibusdam suscipit temporibus unde.\n\n```ts\nfunction helloWorld() {}\n```\n\n## FAQ\n\n## How to ...\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque blanditiis cum delectus eligendi ips\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n<div>Icons made by <a href=\"http://www.freepik.com/\" title=\"Freepik\">Freepik</a> from <a href=\"https://www.flaticon.com/\" title=\"Flaticon\">www.flaticon.com</a></div>\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"<p align=\"center\">  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\"> </p>","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.0-beta.5_1620814615566_0.9097908244885544","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@ngneat/input-mask","version":"1.0.0","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"427b5fe0decc28390c9642573cd1dda2dddeadd4","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.0.tgz","fileCount":36,"integrity":"sha512-gtGmhBQpPsU4ARcOYIkgndtdRXrXwLtojX4PKygQKEVjSYoUG8V+VLABuo67RwbepMwhbDaGfaErXucsdzfiJg==","signatures":[{"sig":"MEUCIHavjVe4dEdaOLmLOqMNiSepgVdrzrNxdHe+FYnzGW3SAiEA5roMVAV3JnJuL4xlpKjqrDgmWIcg6PAttSK8IIUU5YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo1S/CRA9TVsSAnZWagAAW64P/RGJqGvJKSHzX+jrHeEe\nve+s6O05qvhPoC6JfPCfqnWuDFQobjctSANUmjBQu47Jm/cOxYOkuqXAWsed\ni3MH6q5SLtOenrB70vf0f4yb1tZHeQisDSyzVxJ1jS9TETQ43ESdKzuIZSSP\n15Z6T1gxNdks9amYbLCfsnVS8JtkvSNlKcL7C4gIJmRCmRPVjDoa//o4pR9k\nM/Rrlan8wKORaufzq7EZKXZhc6Yswgu0wd6GsKN2NgO5Uq3VF7l1zRsbZHzp\nvQUfOvX6xgnykDp8Jyuzr/yWrUL6VysMsDWdYRZfdylMzJJyDcMiweAwQwBt\n1XNYRf5hzNmblJymxaRA/aSPHaHD3577lRCOBeyca5uYeGarZ4HVNXyCjmwF\n/JAyuD5KcoDrfT6rzhfQLviXspTFNoVSEK0UaaQN19Hl5LaX5jufVseNmcb2\nTeMOQF58qf8q/4w6Vqk722dfXzXf1nRdaEIbf7MX2XGgSDAWvdmmuEQx54wZ\nEcxJTmNauWOUl7F66c5XhuWIOynrMmnHy/knPncuFLjPSCMo77tBCjT06RTR\nlmH+WnUCgOunJSxY3gz4yhMNCzlvYRSrzjZVVQ+pQ54aP3/hALVRuyYLkJWU\n+gOumIyjPOumY+MM7oX8ExGXrvN19/nbNyLj/1RJE04P/xl7rhKuAn6V0StD\nRdeA\r\n=mmzC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.0_1621316799132_0.270898154377194","host":"s3://npm-registry-packages"}},"1.0.1-beta.1":{"name":"@ngneat/input-mask","version":"1.0.1-beta.1","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.1-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"5ef49d63c38bfceb79ac8ed23bcfd5c846d49465","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.1-beta.1.tgz","fileCount":36,"integrity":"sha512-Lo3Div5S9FZrZJ/q5zS/a069gCpNohahKh1jxRDKQzXUNX7hlxE1gwiTXFN4JCipg9VHLBCCanQ017JRjBKBrw==","signatures":[{"sig":"MEUCIA46fM7A+3Y8DX7g/qhnPSecGQLMCc0+HzRS9gFu9c6wAiEA1rDL+mXdLDW/xc9Gh4aTgkxM1N5SoOKeWbhxCrlFjFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0XYJCRA9TVsSAnZWagAAifYP/2GQZADQw2WsFlWo9dzm\nTki4wzpqtTibh11bBb4On59NDcLtuTtZKULKlU25yOmzMa7E5xqhQnhQ1OUz\npENyRAdK10OghXDb2Svzp+chKSBg8tfHDl/AzIYKOhfAz2sCrSiKPzQqTDfB\nB5c4p1Au8cAcIHSgaM2d6KrqqCE8sAJ16p+9QimazT0JTA8ZBHp99b3WJasW\nWjOkoXTBeWkL9mNWrw8qm6y4CZv1zi7/qqUr4C7fGz78GXkf0CwR3zztl2Qm\naBMKr7aXIDmszg0ZyvLCIG+dOcp06VuaL2YquBXnqe7vALBzXmP5d/45BXE8\nEzIpAc5y3TfqW16N9MsSecQnlL5W2hBHiQ3vvZMdzZmx83kWLyp1bFLZ3hNp\nFrQjL3QeyLPn5CygJ6p9l8dhpcGjWJgvbEysKaY4B7AnNQ78JF74j523UPR/\nWvhZ5dD+v0rkffM+BOjyJtjBl8HotY/aFksferxtj87WCp8yPLlHsXJ1KXu6\nLhTvz9ckUbTRRMLM8PJP1HbjHhRFsSaLW91VOjKpeZAbhT0TKHTJjwkPCMpM\nytXSwsP8cfQmR/yJauOgF0xb3RFMuWYdlN5ydlx70+y8ozO8cVDKhPW95S96\n991GswXb4Qr5SFUBjUzUUDNSppuDPMxmx53JQTO8VmMWf4lxxhBJofCCvlTB\nGUPd\r\n=evu6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Features\n\n- 🔡  **Support for form validation**\n- 🎭  **Wrapper function to easily create input-masks**\n- 🔁  **Helps you to convert final values to desired format**\n- ☝️  **Single directive to handle everything**\n- 🛠  **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\nYou can install it through **Angular CLI**\n\n```\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input [inputMask]=\"dateInputMask\" [formControl]=\"dateFC\" placeholder=\"dd/mm/yyyy\">\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input [inputMask]=\"ipAddressMask\" [formControl]=\"ipFC\" placeholder=\"_._._._\">\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input [inputMask]=\"currencyInputMask\" [formControl]=\"currencyFC\" placeholder=\"$ 0.00\">\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input [inputMask]=\"licenseInputMask\" [formControl]=\"licenseFC\" placeholder=\"___-___\">\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input [inputMask]=\"emailInputMask\" [formControl]=\"emailFC\" placeholder=\"_@_._\">\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email'});\n  emailFC = new FormControl('');\n}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ inputMask: false }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input [inputMask]=\"dateInputMask\" [formControl]=\"dateFC\" placeholder=\"dd/mm/yyyy\">\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/@ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/@ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/@ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/@ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.1-beta.1_1624339976695_0.1401997210615915","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@ngneat/input-mask","version":"1.0.1","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"36b3f3f24a2430b5f083af78f0831bea8f2af0e5","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.1.tgz","fileCount":36,"integrity":"sha512-Qd2TPVM6aapj0EFR8bR+aOqFNhFIHIj1/NtWTMnkoE4Ag8sVfemyiif5GnpXQgYYVLnMd2mGKYEFghvXjhHoFQ==","signatures":[{"sig":"MEUCIQDevdyR+Vukmr1ytkqhGvfkq2p34SKpVw6JcH7GxuXd+wIgDP4jtjwL9qDw9unaW3Dp4X6SsEqHYIpI5K7/rYKGjk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0XeICRA9TVsSAnZWagAATcQP/1R6qiiBmzNlHx+iMj/C\n8mcIQidwpF8eBWlVs8ZV1VvxFnOdo/qCI4wMBjYT2nuOydYGpCfhkoc3UicO\neOj/UyzxW83mGdqXgfPzfHKuYxB3Th7tz7Bh9WtOuWfAwnG55pGmyJh54Yrt\nxGFXujmY2Ax7RolOJElVry5Zatd5yX+nTQpNKkDMcWb6cXXgYerUczpWTXRZ\nsXGNBbr+Ym+0FhR34EqsCle+ZujpsEGDcByTz707a6a6Rmx5dlQ/M7XPuTdt\nUnQWVOoYc07EXuLXRs0dBiyRZeQY9DKfwqoeqTJOPACMj3jwSppZEXMyvaCg\nG0bCpvc9TtPVnGog7cbOxcaQ6YB3ema6mIdmMgTiHempMQFMJxY4reqjTBa7\n70HjBJbjJkat5Zk47R1TVeBCH4qVEzgQMo/l1OadQfWeypBSzt7uH41Flfzw\n2BSDQbH/3+UdkV8VEc6P/vsFwrNcNfm1MyaIqnbqpqos/bxwHB5hYHeu2Gcu\nK2lzUsia8P3Rc6zGWSLbaIZ3GL9M9wNx57F+z33h5hfWmzNTAD3OWD36r7M1\nCbXV+6+oNu6Xys930VXCDq0GMjA/UfBH5nzJW7WJJDGJPBFJrcxv3zu0yl7A\nsJOEz6gErfQ0+NUGb+kgGl5U3ygabOidyGqF4L8TVXkMZjAxQBxYTRLoyYsZ\n2L+J\r\n=oT58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.1_1624340359824_0.6101219560058522","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@ngneat/input-mask","version":"1.0.2","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.0.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"8645f6fd001c9c480b46c37871663cd98203726c","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.0.2.tgz","fileCount":36,"integrity":"sha512-st0ywNZe7WGAsFd/EtD8WLX3+2C2pU0iS+dfiwVOEHSJbq/A3T9wW03zvCQ4UQaVYZrQDMyQPEktnbomQV8Czg==","signatures":[{"sig":"MEUCIQCjWR3CjOoUPRyUEzlXRqNSoq7raCVnqx6LqEO8Y9gO2wIgeufsaF+r4dvE6HVb0oXWWHsaZkXaYybFYeoC9Z+mYVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Fc4CRA9TVsSAnZWagAAvFwQAIYrl0sRm/BYQDQ/Tj7v\n32INaoUkxjAlme7oTJnOk8HpYTjzpYkCkw704KspEpwc1OCAaf/TrMjvzg/C\nPJWfjiKNBe/nOwvkZgAQKs1CS+reMEGuuE8ZMw03BUuF57PavwEEap1PXZAh\npAJMmDs+naGoRM02dBW8waI/ReIQLj+FDFmjVQn80zCjn+UYKG3hMBlOHq9S\nQWxPcuC2BFZ8EhdTdmyUuJEfymbcShbPMaR2kpqZ/nz+eECDozx+V5UmqnS6\nt1MbQBCujaMgqm+PldjKYusLicN5h2lFThRy+kFDZREcOiqyC/Ddj6NW6VZy\n6vRmq6gO7jWpnhBT7unk648mhPJvoKw6grOuca5Wul6fS9YIE3H2tr5DUJsk\nIrqUas+Yo7Ugd3x4XYuReMV6zujRTE2p8XuAvW/TGsI7Qh5RPuMXGY/Q94Zr\nWMZbsUm6m9ELa9vqeFYBhhDMBH7trruX0XaqZay65FG7fPZpUdWaFw17SQbD\nrUUjhJEqk5e4ym64gdMPgQHD/dmfivLdUm6aX3tL+V8Fz0J4alERCz/JEuwW\n/UgesyfRonXJTadj58SI1pEfpmtvbrzmItlvs91oqbfH1ppNgvp8UbnwxwbJ\nHtecvHlq5/J4A94asNGjIoR0H1FU73JhVcp04AqgCQJJO34OL7BmB1WXLDAo\nNGr0\r\n=TanH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":"^11.2.7","@angular/common":"^11.2.7"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.0.2_1625577272267_0.40429442455862885","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@ngneat/input-mask","version":"1.1.0","keywords":["angular","angular 2","input-mask"],"license":"MIT","_id":"@ngneat/input-mask@1.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"2104965eb6b7e6dbb63c105de518637d65d05b23","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.1.0.tgz","fileCount":36,"integrity":"sha512-FXigFtMqG95H51u+KCJZrwN3LnSigp9MqspGyPA6xj+j7uRh2GAfek2m01DY0aP1O/ej94pc7PnwogHUIrzBdQ==","signatures":[{"sig":"MEUCIFr+Ryq+vGzQul+EVPWIO5UeOQ3FrpDNyIB0dCYg4xpWAiEAmWkM/FvDIfH6VLonsvy0e3V76+xzbgi3IA4hhrUpxQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE5MNCRA9TVsSAnZWagAAeMwP/0TwVPreJPPjP89d/c7X\nlfZOuYcB+mZAJBoYPRUeRI/YaVPWQYt3Mw8sdwpbiiQweRbqrtkVEpotW6Cp\n8btCsDIgwBPtist9Fw6mgvLB8t55yH87M0BLcxGDL1qHgl/ix3EiAbjZmXtd\nQgj3MmxQrgRjVLePVJc3pLYxpGvOAdNDaLPzygy7HSf7dNiSm3ZINHc/S5zd\nuOa8SFwtT7gpJVcstUmIOySrxTwVell4KZmKj8PvjAth86ArIbYPusfT5NWZ\nW2BKUAAg9PYLkqO+dHUCESm2CZnBClogHskzGJIr+NdyewLkKTGbJn3jxWUs\ngHQM4Y61pK45Ob7Y0UCmPH4410eNwp5rZUKF2xeF8kJBfGkC3NyOGEemBad1\nUJRT3JPqCVs7TPUxHDL0Ylk9tQdYB95UbOl7aOB0fR5jPESbQoqhmApHVAR2\n5rNv3Ho3g13dQI9Yu067InMjCWLL4ne2TxHCM94ygOZ3Yr1aF++kpQ4X12gC\nlvSYPFTw+7m+BnqMH3oAD961rdTqnAWwhqo8YP26qVccBeHdr52m/gQqlrx0\nFOK78ovLPWaeJf36Wf30i3AWkt+zcSTeC/128YEDS6jMEu3IaLSa8JKhxL90\n8YZh+P0Q3UY9CzAornU5hIh+96vlByoXz9TIYHmtBimYBcooDcxtYxJBk52W\nkavw\r\n=udpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.1.0_1628672781431_0.6015769975057446","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@ngneat/input-mask","version":"1.2.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@1.2.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"1ddd7c345887fb7c274f009e8f4dd6c3ad58a00f","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-1.2.0.tgz","fileCount":44,"integrity":"sha512-2wxGsvpnZ6vZc0Z4x/3SsTmcc6LX3TB249FIPUUgMjNHEP2pj4CILM+Ikzc/JW3JpgQGjQ+sMf7aUOICy6ts8A==","signatures":[{"sig":"MEUCIQCIWPgvwL+Mz4hdhiVgRJ+nDTBitIEs1lC4SW8JVWeKiwIgQpLJ2Yk19UOR3r0CnAwF5vhNIWjlkdVU2SqUBV5ML7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO7FiCRA9TVsSAnZWagAAALkP/21kNs6uTpiGzmobuWhS\ngNOi7xiv4Iu2KAKn3GkmxXf7UXS9SyCvHl67KmP93BZrQ6XW0RWIzahkG4n4\nVwJu1l0ov4k5R73RaOhSv4dEs28BntTm8jFI/zybmNFHnaeGBZtGIbPAYQkg\nsSSLyP/Z88SpqEZI0sNkAQoM9IU9wsOf3z/+OjxmCCCDalv8nzAvqq7vyHNn\n57dAi32oqwvBzc58SPXa6A7PtYphbuu68X6pHZJB3CHQIVlAaAPC1MSY6mcd\nhpxc3H9CdtWZtT0ifcsl4iFMFZhEykaQQR/PO71gRsX2IyEZOLbuFbDJYjgE\n5fUXhfaFS0h8Zx3/8O6TPrcQel/CirZiN9Ch10CrSxnxwMPckhbRnvy/mGZq\npUUtTKaHdkkZDjPTvkiySfmCnjD7coPa6qUIvlr/dwon221Sj0KnmGQIda/v\nHo/yQpb2Gp4udvctiLOdR1eHq4SHJde0iN9fz0OLX+RmAFf6OwCRessoJeM3\naLaw8+cGYShY+90ZP5UhxtohHl728v9Jg3f+0RmJFA5BhsXBRceGW+/4lubv\nIKMkkB9lTVvwokLKOAguUdsWa4b8XxnIWgbEqOFOYWkCX07907BY+5YiNIDM\n9ldJpSFKIH+t44Due04p5gf3FXm6a2QIs6Fku22MFUaKDjRwafKt1CWJL64w\neEds\r\n=4QnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@ionic/angular":"^5.7.0","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_1.2.0_1631301985857_0.09795647365731486","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@ngneat/input-mask","version":"2.0.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@2.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"449019d3f7a4778a17dc3685854c8d6c0986765c","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-2.0.0.tgz","fileCount":40,"integrity":"sha512-vWP1rKJNr7sUvM4bkxxKWQ27/5tkZlQpjV1Se80jZ7GHeXlxwjH1CuO8UuJsWfh5cufiN2wssERYdJK3diLC4g==","signatures":[{"sig":"MEYCIQD4lXOyef4zzltKClIqw6kpCb2pJS26fg8Pb8qTxZ0nvQIhAKakvHigybP16+UzSj02j9T8V+j3/GxVxVjvm+lhJn1J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhPxIpCRA9TVsSAnZWagAAjbcP/28vr9+dax8E9m/zaD97\noh+Ya2h6SG2zYP9F0jne1cZA6vm1HRWApqulFHllrxP+/AlBgj0L68ZMl1kn\n254b00iqfO7m11BCdf9ZPB5MBZtk+3ISpl84DLxbbz9l+gvBt/oER234/pl/\nInyCL2TB403Zp472W02J+O8urMEBgvMHq4smZ7Q91Je6IB80Ykskh7238Imv\n9/JHH3vpfCIcAcDk1gdDCe8QE45BYIJb0+RlvBqmgi87In+DIgIJivzyhtNk\nO7mLgWJMG83c7EnBTEfzSdihmNtMFl7oXIR8XDHuTrQ64movQ5zFB3HYFM05\nW6P3npIf8FPPxZUiWWu6oEKIv/SPNt34hErkvrOeCwnNj4dydAk2JraNQAqe\nnmOkhEkMT75GsLmyg8tzLYJjjHltdeDGrOX8W324TxbFOPEyN2y2pOoiKdn3\n94S/AniWvbJiSWoDwlf06DfK5Qb94rqCeBqEcQ+66EMHMAMUjm7OprZKfmR2\ngcv2IM53xWiBvu+FLUnxILbElH91P/9dkbI455f5ds0UbbbUCIhbNXX6OZO9\nhlezVbRoL/KPibsYKSyHDF3MnY+a6A+vPXxR3/bD/sQQhI8gT5kox5TtD3X6\nddFcvHx9EFKVKy495lpVQKjGeIshszokTeppbaK97Q2fZJmUu5Vj6xaRCCX/\nVk6y\r\n=NLky\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_2.0.0_1631523369009_0.028928895092749762","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@ngneat/input-mask","version":"3.0.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@3.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"d58766f1098c0900d9efaffaea2a970fffb510e5","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-3.0.0.tgz","fileCount":42,"integrity":"sha512-7Kk/hswAATwmZn7zzigYcsoUEnykh5KKsTcqpz0fztRm4B1eZCwpxSme7jc6cGViLNBwUHwB22YIq9UIBpBBCA==","signatures":[{"sig":"MEUCIQD6UMrCrjteF5v3T1KXgGM1zoYYiKy5oiTBerltutGp4wIgH3d4HrGZHy8dqVZds/5Fj0y/+SuPAHFFqpHAB7DZlY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175096},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_3.0.0_1631873729096_0.4101934615595464","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@ngneat/input-mask","version":"3.0.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@3.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"2ac1a64fa2fa2c865cf0176f0c7dabbe5996dc5d","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-3.0.1.tgz","fileCount":42,"integrity":"sha512-heZP3D2JfosZmt+K9lyn6xNS5cH9kT7uJ00pme0fRjUFPwXgU4GplHj8lLbViOJSKrO5jwmsFpkJGgCKxZCOGg==","signatures":[{"sig":"MEUCIQCkAxZxwZeh/agqxkTDlswOp7/liU3Z5lvWZp/lA+Pq6QIgY0ahR/4jyg9ubJ4LIkiQ2diXWu05NuL9WnuS5ZHuEE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176597},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_3.0.1_1631883981147_0.6856317755522015","host":"s3://npm-registry-packages"}},"3.0.2":{"name":"@ngneat/input-mask","version":"3.0.2","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@3.0.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"11b63d67f8c8572ac0cdd028d7eb5cfd7c17d0fc","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-3.0.2.tgz","fileCount":42,"integrity":"sha512-tR+5Wz0jCNjrGYnR43kr6m/9N/rm8Rp06LJjfo++MfRLQLiXQxr9pULlyyIWbVKofp+uU0d2UxC4DaM8yPXHmw==","signatures":[{"sig":"MEQCIHuh0W+04W/AP+A31Zl5CzilcbjgbC0wQNqLZYjcX/ClAiBOh+7O3c9DwuWBRKj3qV7qmvkdsLU7U4JOzT6No5SgJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":180775},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_3.0.2_1632222619075_0.13108307766660743","host":"s3://npm-registry-packages"}},"3.0.3":{"name":"@ngneat/input-mask","version":"3.0.3","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@3.0.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"25bd65ccc5d8ec436914f9ce2a98ae07745b7148","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-3.0.3.tgz","fileCount":42,"integrity":"sha512-Ys4OARRiFsaQmoIlXTzsM68rA+TNbmolTF/+5VpOrDpBDlY3zpZ/PKGwJK3HBZl2OMXSl27MJit5HlNe/Lo/8A==","signatures":[{"sig":"MEUCIEFmxzGqfsIStzMFiT23xG8Pqx/8BOocSLGjetevh7lZAiEA5DXTGGB7ifua4DWJFaGDO0PXTJhYqy6sZ5A1D8/ouRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181821},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_3.0.3_1635145528053_0.21743506717996142","host":"s3://npm-registry-packages"}},"3.0.4":{"name":"@ngneat/input-mask","version":"3.0.4","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@3.0.4","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"55d58239132aaf12e008eb849a3e55f6378704bb","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-3.0.4.tgz","fileCount":42,"integrity":"sha512-TDd3hRjIWL8/jL1A/H/MOPdUTI4K1B/L3/ze26a/kJFneVUX5SozEYzj3MpuXKshoCtmc0g0m+oglgh4Nri+2g==","signatures":[{"sig":"MEUCIQDTXg3hJrlstV4XkDqpn3WayG9iScAG1Hyu9b6NeWsO/QIga1sA4vFyAMPEynBWtflKWMfl5QFbDIvTKqW8Pj1tPpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182251},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_3.0.4_1635438551236_0.8053558256520417","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@ngneat/input-mask","version":"4.0.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@4.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"00bef6e0052f9ddb040cf988886bda8512f6f337","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-4.0.0.tgz","fileCount":39,"integrity":"sha512-XxxUK2idRU/Oh5bFBe/jEQgHkbUsS78dTmpLY332hnnVrKtSE/Vj5pAQ8mBc8mBOdxCjbAp2LK0F6zedNbrXfA==","signatures":[{"sig":"MEYCIQDJEhPYJpjyhXh1e/bRqxAK7htEGUduXyz13Cfjz8dXIQIhAInHgOPo//VwQqlAeEAD8rkUMadeo3YQu5EsN8TMvsXd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":111464},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"00616c12ff623193274cb4107069f433e57236f8","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_4.0.0_1636725176146_0.17523895581722582","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"@ngneat/input-mask","version":"4.0.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@4.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"7e629c90ab9fa29b45215aee4b990811baf0c80f","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-4.0.1.tgz","fileCount":42,"integrity":"sha512-fuN/qEYkNbr2XDnFo4fD24Qt0KrUVXktiNJjQgQHg15OZLbZ6wjuvJkiwbp/Krqs29HAnKWXpPXHZleC5emzwQ==","signatures":[{"sig":"MEUCIA7t3GVq58JDwzxPilqGaeqdrBsE2hqnFLZfHU5bZq0jAiEA5f2HFWO0ilKL+Dtg6Ylpd5YVrZPuFzb7dCAjQgG2HPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182797},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_4.0.1_1636978415231_0.777877703999249","host":"s3://npm-registry-packages"}},"5.0.0-beta.1":{"name":"@ngneat/input-mask","version":"5.0.0-beta.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"567342e8c9e40675c4eef418382aedd98eb8075b","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.0.0-beta.1.tgz","fileCount":39,"integrity":"sha512-2eCclMaN+sXZAIGRQ5ZXVljq1m4aIpeprT70Jjc1xERRWUECo5KBiLXicenO/P8KRw5ENWp5pcmb3hDKQArq/Q==","signatures":[{"sig":"MEYCIQD+yKVv4GgpuJqcDWAEGwxnEwgcr1vNdDOsiIdgNnhI6QIhAN6vN/Lhz2lXC1Lsfyzn9olJGkMlE/D+dS26vbasR8jt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhkpRACRA9TVsSAnZWagAArmEP/RtKsUgSkyZW8zgv6NOj\nqueVaRXEKdeztwNABIDBZ+xttOgjaHbOno27m5U/Dc85R0t7S03fz670ikSG\nR8cSQ3hXMIsU0NYbX/Azibzi+lbP4OyDk3f6T9ETl7AwUkVzL9yYVYk58BL0\nIu5GIk7TVA4y8U9i6OUzybf13FHHnSIqXTSP/ODZGDy3oYs4cMMSkMYUmUKJ\nKcz293q+mwwG4lqHc+1shmmrpUJT1QitW/DiN8nI4VFrw32y7+CgWZUGe9bF\n4MAjwnkUa6tfxqbQeQ7QdByRm/+UBIsFZhcq/TLDnJL6jRG3MmutaU7UVtaj\nrhxTaslKLnEvCfkV+4ttKr4EOOSjPXoK5poobNxo/ZYpL8JdK4mNuEPiwIxC\n73iUW6RRiiUnmCxjCAVI4StPMtrno0imGWMPHojOjBfvgxaUuZU5F2c5oSZP\nJah66kLj53x16/XuwxRH9BUyEN+H/pxJBOHAnFnethbBH1lMUruZmoZgK2pF\njFr24a+hdh3mEIAZRRgxDGxfjOaaBJA86FwgzIyet67hRAmuQp3+XdnK82o9\nGJ1CizkwYsvF8At6/Za92VOBFKxMhq4mGKVqo0cBmXJQuCDHqy34N6Difhw7\nkoLd4g6W6kWefpcyCRg5UzyjTiYsll10pgA8n2VPB9ULYTqeXirz/idcJ4bS\npxaB\r\n=jJ3u\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n<table>\n  <thead>\n    <tr>\n      <th>@ngneat/input-mask</th>\n      <th>Angular</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        3.x\n      </td>\n      <td>\n        >= 11.2.7 < 13\n      </td>\n    </tr>\n    <tr>\n      <td>\n        4.x\n      </td>\n      <td>\n        >= 13\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"1ea7f608b2a36b915e81ff52911275cba474ba98","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.0.0-beta.1_1636996160652_0.12123670470125947","host":"s3://npm-registry-packages"}},"5.0.0-beta.2":{"name":"@ngneat/input-mask","version":"5.0.0-beta.2","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.0.0-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"c3877ac9a9dd934d9d6cf789a865e25ed1ce6674","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.0.0-beta.2.tgz","fileCount":39,"integrity":"sha512-gQffRgbBJfVkf/DJONnCaTU0jkodwfapnPCrzlW1sxLkMhwmapGrMtV/TIW75R3uufVvM/JZDWNdF1Sk5QnYfA==","signatures":[{"sig":"MEUCIGLR2n7dYaxexfjMl8Uk5ytqsOFIVTlH++WYIubz0XEmAiEA4WZ2VXJkbNObBUx8+rBRkZOTpGRJHulZvbaH2hqtE7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnHpqCRA9TVsSAnZWagAAP0gP/RIVUNBh5lVknRuo3htF\nVujqIbUDjDJasci6h8KRWM7IVbBD5L7hV08jQSlkHNcKvw7bd0Gs36r7kKDk\ngFCMmBOB77+acREWmFU/SsDmPBn5rj8hGRDVGagi1KhkAyjkIJTsarY7zT2q\nT2n9z7RGT0cI9qugQ6mJiLZ8CCTq/EGg+c4HZXVCTJ+TuRTE2//1zX8Sr/Qm\nqiZU+lEn0abYjKVEwy3mtTnbEy2WeuhUZ3ow7TURYIGOi/HRAsvcp31UlIkr\nt1uMIV8YmjqBb/NWGznhxhdkJGBebtj+o8cXkEdKTHE+LQ6MWrtZ1Vlml1iy\nYDx3pM9BSB23p8P9vXsXqJtPhI0kmj/CCYtVfOmXXLaLYwT6YqYH2/EE0h+y\nsoRJiBV0SZyEYhJ7beVoyWH5Zcaas+QbE/5LifbUCCl379dGlZeddEANWvhV\nMv9I6oLY8JXGRg1EQBFn3AcpXVX48luqcU0tVjqsCJcf0qKesgLJ9e5++/WV\nhVz9Sqn8Omat8g3JvqDJsS97mWomlp5qfUoqisdyGI58cMGx7idEWCp+Iwhj\nclbPKYC4ECqXoUviurfPGxiwwdOSs+7WXFMt9/8Eyo6MDtvxSD8aIpCaTsnm\nWuHfkZ/J5K12IKNUoVzukV3pu+5HeUGD8hyDVNLAjbBT1eF2nb3PZgNqJwq2\n9w6w\r\n=UqWQ\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n<table>\n  <thead>\n    <tr>\n      <th>@ngneat/input-mask</th>\n      <th>Angular</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        3.x\n      </td>\n      <td>\n        >= 11.2.7 < 13\n      </td>\n    </tr>\n    <tr>\n      <td>\n        4.x\n      </td>\n      <td>\n        >= 13\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"88714aa75c399c5e2d46ca7b89618a66f7936254","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.0.0-beta.2_1637644905870_0.37706872743868924","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@ngneat/input-mask","version":"5.0.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"4c3848f19871e8c2dbdb1acd8bda351d68e24dbf","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.0.0.tgz","fileCount":39,"integrity":"sha512-X9/DWDiPrVm5VIXwBO1ADps9Vpzrasu8LiLJPNzXT78QwIpowllpslA5jwJH/A0pDeZXmIlgo10HIG+vZOy4vQ==","signatures":[{"sig":"MEUCIADnjJLo7rTYqiRxLiidHbzOIGuFJpQXpBga6ovIczEEAiEAlgKqDy3cMl9ro/nkkfTaKpa5mAePokgRZeEdo410KO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnIwACRA9TVsSAnZWagAAZSIP/07N2QwlXIpyysE1uhWc\n+86u6CTJWHcM/uXCRE5kBcmyi55KeSGAUTq6fQ+7X1XFC0xT++BCtMyvy9kv\nfJuUGaSfXXRPnee6seE+qJwOalZGQVni7FMy2M3xja6wadbc3/i4yrLFHfei\nCQG6mn5xHoA++EKNykCKYhLI0925NVelK48JaQDWS4vdWfvsAnosa/TemGEE\nB6CbilrN3FoHqryr0KYvDi9rTh0tpP2YB0r6yaUGXyPJQ5TKXNwE8DEiV0uL\nb7wUryKo5dk89RJVSKryqWyJ6no4U5CH9eY9+J3fLdW7R9w9V8jkJ331/jPx\nvnnbeQ2Hu+67p5QZ2AIEkicIeSUjew4kbwuEJX9abk4I0UGM/QNQYupAw3vy\nXPvz84m6PBusyZ5L+wQDAV/Alt8O7ifKTFewpN9L7C3cQ94gu7iSZlLh/+gW\n0VhJnYS0+X2HaBzcV2xiUfoYKpFW+gsOBg5I3mcqQqhkqW84dZRPoOOpouoz\nvoNHWL8PSBdCcuAeId1zGfDlQffgTqd6azZJVD6U/lxb556lJlU36mcjKNhu\n9nzXCkIclDRyNRQ7djwo7StitF9FPa/e2zKM/w2ALyMctq9TwPYMhoKS3HLS\nmNJwdPxSsOFE4E/+DXXScoNDQblhP1xKcKGmBaW1ZmKXEvKD6v3/mnZvnTRh\n2jgw\r\n=rEbd\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"317fba18bbe9918adc4af98272dba8fbc699eec7","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.0.0_1637649408756_0.4069457334547719","host":"s3://npm-registry-packages"}},"5.0.1":{"name":"@ngneat/input-mask","version":"5.0.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"96d28ed29be12840b36817ac33a9f988d84e35d1","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.0.1.tgz","fileCount":39,"integrity":"sha512-xCZY2w/IkAjwhQtGxEKzwWcp3Srz8G7hymQZBov/QcdGHmzGyDf4xmfCdEb/ej+rxBj8lPo79zKySXkMH7LMRQ==","signatures":[{"sig":"MEYCIQDzhZUllLbwZJZ5H6MCMZt/DDCwaB1LcMQN5wc+CE1nnwIhALao37GI/0qAhK3LeeXp9Tx0kB9E2JNZHAx4oOlHVexO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnwCMCRA9TVsSAnZWagAAwEQP+we6lpVXKfhvzQc0kSJl\nnKzbsq3tQfbLju+4kpLBOYKJVeLG2moayRQ5eF0mqj9OS4Ptl+fqszRTZTeb\nnZ8yK479+olI7oGPaxcdi1c+oG1oVRhwKfMGHjwx/z1J6eFL2IaqBVz1czvl\nC2k15gb6rDiNIY0v59u3Dw9Z30hRRg+WVEXuRATfDxYuSO0l752W91Xk4mDS\nyj3iqFsKlkGjSvqkseLhzRqk5BZMR6Fbl1fZ78zTHYrQSf+dAGQGb3xvUB7N\nNTxxkAeBR8ssiQDZowpmW9Wht5Fd4xzBVkLHk9iU3kgwl4PEMaU11/BZH/CT\nDMPHnSwAiOhZ2Y1KNflTnjtk9G5aauUyUgJrosCJczoJdBz+JlTA0TnoB0wH\nvx+M+/HpB5IDeNktvNKHOVKcE3wc/VbAUE+LvveMPgcTRFL5TJXI45hT0MIe\nvFoRTrNkbbMSx4nXmFtcbm+wjGFoHU/uk7bs0St4umZAIPo0D44bAz/lUcXW\nljg6WPiQvBSzoNzwA9wtaCPpqlnS5OGuI2EJDNedGEfa/rN+Y0JF+g9ZTgzz\nCV8V81StsHk2SQAWsCNUC5P1imR2w1iUldth/FCh15EZxcPplLdqiHtWny/c\nwUDiILAE6VztpL1+x4Fv+6IXv6Vefu/E4dQxGp8SWCOlevJ+HupS8PyFsj/A\nsSNB\r\n=qsE3\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"7254c695e948f7f757534fcfac4a880ba7f16afb","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.0.1_1637810315906_0.0999365254900284","host":"s3://npm-registry-packages"}},"5.1.0-beta.1":{"name":"@ngneat/input-mask","version":"5.1.0-beta.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.1.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"a72a7bfb1e63e721c258f9871b1ff89e0939f9da","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.1.0-beta.1.tgz","fileCount":39,"integrity":"sha512-172mwtW5pPuAy1MkNfoDkmXfJ1vAoZfHQ3r5j3RIqWrSK4nh9gFnCWZGkH/Dh8Hkqylt0HGApioyF8FSznpEqw==","signatures":[{"sig":"MEUCIHfDSeZpvKAXFRvQsWIq1FbRcDnOdOKG6km4i3NDGmvZAiEAuIEfrfZkb0GoWAthrm/hbrBzPvixCkU3P3Y/HWO3FhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Z63CRA9TVsSAnZWagAA5u4P/jdgh8Skm30f/AKAqhfO\nPJLBn1cYRrra9sWNMQRCB5MdkwP8bkM9mauBUhmV3Op+Pm/+b1vDLJ6mokEp\nXQYbLwCzc8SHcsmflVQsOVB79WFW/dWnCDXmlZXf68TBdrjNTAYTjOmvM4og\nlrSjgrTe3XJDsSATVNdtnnndeDzHH73l0K8BxFsMgwJWdth7YnP+48r1x2f0\nIuIGgCeiMsQVRWjGuwLaodKKz2JPiBn919qnh+bsQ/lLrmnWV3AtbTCV3iMt\nY/8/VRy1Ct3HD7o2vOrgPFPjXhZ07wr+kZ8iIeXdKUn4tBhcPfbrEFXEx+Q5\n8yKYiFUpvajFlXJbMtzsP+RTCKZI7sbLWCcF6eOJu9FuCV+o/ThQqxghrX47\nJorYowNPO4+Ldv2rVxmyzsr1vf0imUSobNh206HR5JaaTWwuVJcuBNNQptaC\n5hD71KLIy5MBLlplxgC4DguKDTLe8R0ECAq6QFiZhY5gJnIGQFc4Vb+NVB0h\nEARdTHwD7EDG0Xk+iRvSB3srbXVq/nMV3RSz+qxTmQG0tsB0Z1uVSqJwLgKz\nl2PRek8uJcpZHcA7o7kaHscANgDZo3oJB3xrcBKhnmNW+AcpsfRn5+l89X6H\n8POv2N6qAkTAOP+JdDcZOJsiq77dIHFiq0wsjZzJlIXmXEIqmLqZGFTlGXOc\n4pHk\r\n=bh5U\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n| @ngneat/input-mask | Angular        |\n| ------------------ | -------------- |\n| 4.x.x              | >= 11.2.7 < 13 |\n| 5.x.x              | >= 13          |\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"81a7f30f1b80bc850a0e811e625a24f23b1592e8","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.8","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.1.0-beta.1_1641389750837_0.5134262329383004","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@ngneat/input-mask","version":"5.1.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"9de9e5a0357d7fbc40aff00f3a04a255281dbd83","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.1.0.tgz","fileCount":39,"integrity":"sha512-Aznkiu6pEDQpeoKgPGD1ehWdoB+4Mfns2J1dCEkOm3p9DVxoDl1CqOEyyI0DO5Plqgv+ro84jXjvrEdIAnIa0A==","signatures":[{"sig":"MEQCICBUuqvrSzPO/2bYgJjYQyl4MA3kCoHjVtQFnr1WDwqkAiA5Pvxu2Y75CH8nMRLaN6BAV6AesCLmIX5MkGOwBzyT/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1b1RCRA9TVsSAnZWagAAY88P/imLm4UjuzAeshO0LaXp\nXiXVO5lM0+wRP2XBVQ5jyUHqvKk5QygDn126RAPxn7bIq/0vW0c+GApdZ1vw\nNJr/B1a5+gqCOSc4uoMAcfrKq6xFJdQVeabMd6XKf4HCIcpVBVRpE+TqiVoF\nXVHrFp0zvrWzv1QV2bo2x9g0fzPoYx673Z9zTGsSMOAd7i8++YvkKlexsoH4\n6/rBPCkn4K0wcVJ76JlLYQAQy9g6jE4hnXX/Lp2JlB5QGkeAiLEPQxsJaoms\n9RHBrgyND4409pcMtB8kfUIlWNwNaczewoxBaXlpM8ygoluBNRQBWed1KIs3\nyedB9WoN6r993OwDQdBV2taHKS03WlevIa+Yv0XYtwazQjX0gLyvIBXSPMwE\nIF43HiiNz0vunbcUbzdOoqNCs85ILcARgnTdBQYG4umE9xY4IdhysQNqPTNv\ndruaxkFtj9bOp8tghndcjmr5gQHGCb2F6S6kkeFioaK0Vndaoy1ePJgQxmdy\nFpOx6kcP3BU9qKX0siVRVvznh50YtZH3v9M5C4WZ/1WvFJ61X4RAa0l5FRl0\n3AqYay7GDy+wZyC8jV1SrZ6qOprtJ69VmZbI6Lk084QW23ao8wZlFM1B0GE3\nNPfRyhdOmE+FKwbxy/WjJYW4w9YoVrDncCXr6yx/erbAln2d/Lo89mRqHNhH\nm8zG\r\n=RkWv\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"554a8a839a27adc09b6ec6fd4ea74e9542b19c45","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.8","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.1.0_1641397585532_0.9682468366152412","host":"s3://npm-registry-packages"}},"4.1.0":{"name":"@ngneat/input-mask","version":"4.1.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@4.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"8f75199e5b9502d8a6585222c56867ec11ac658d","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-4.1.0.tgz","fileCount":42,"integrity":"sha512-fmK6bv/aL7g/sEuDjV+5M5e13GxTDd3+OZiC+i5RjzayqS2pghCD91t4N9NkTZ049yGnEY92WQu5nNo8vxJuCw==","signatures":[{"sig":"MEUCIC8kVjTMPOpVw6i8Xw+ZeCvZ4IKHxGisBSZ3lxzLxJTLAiEAo2v0iTRwfP3aGIL6G+lJ5x+W7CYqYDduBmBbLNRXB0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1b9jCRA9TVsSAnZWagAAuVcQAI4Arn1RkE1PKTsNeOLG\nzQRZp1ni2Snx4Fhfq/6CmEYMEWydD9Gkw/Uz2Me1czBJ2iov/HHsZEFd0/Dx\nUgh2mBnOFsVcyTfKO7hsy5UDk9cGDbPuUms7zDmO4vS+LhDV7ObtM8L6jk66\n9wmNU3h3iF08aLiWRh9XunbC4Tb2l57XsOf3pDrGzUuLyYSMcw2x3yRfBxqG\nb2gQGvjKeLqHi7VQHimd2HRbZ+uOLMSGdUTbWWZjuRztDXDt2qRzaYByhuQq\nMbUS2c+Hwve4GVxVh4O0JMVmSSQJDvhRytFJl/f+/6SIN3wcqQvxkKwZxfL/\nuN+r7SjvpRJO3YW4MDMyIgF8FwYy/2zBUPXUh/wrBpv0epN64u/e1tAfe6RU\nwbUNwl9vXtAxRpRwB3d6dIYbM5NfRYDrFjaQlMWn6HQTdQ7u+nXE5X7XlRFK\nFiiQ0zy9EK69PGZ6OjQH9vi32rqKcyX5OCsCe6WmQ074m39N+Ui4r5TdDTVb\nBkKJSl6zThbmhexnM17TIJbbr7vvix6buhaY6pIcK9QG/Go8SaMQ4tX1SF2Q\n2Q1X7v6QiMzjDfPflVbYtsLa1OVF3kb5eOMgWnSxVLrmZaQVC2pa3oBksCB/\nWQtF/ByrB6NJFJg08LQ3QnD1H0TtU30m/Nu6gGLAQ5hC3Jg2AclmSE7Px9+I\nkyHA\r\n=Z2tf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n<table>\n  <thead>\n    <tr>\n      <th>@ngneat/input-mask</th>\n      <th>Angular</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        3.x\n      </td>\n      <td>\n        >= 11.2.7 < 13\n      </td>\n    </tr>\n    <tr>\n      <td>\n        4.x\n      </td>\n      <td>\n        >= 13\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.8","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_4.1.0_1641398115594_0.6515727126325506","host":"s3://npm-registry-packages"}},"4.1.1":{"name":"@ngneat/input-mask","version":"4.1.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@4.1.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"ba74f12a8156a170dac13bde631a43c0b033d84d","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-4.1.1.tgz","fileCount":42,"integrity":"sha512-WBRlPF2QYRzxu6PnH1+SVBbDI4r3Gd2LeegtQ4dlojf+o6A1bSnQiaAgEZPx2YELuL/8jMJWjfiEqkK0p4RERg==","signatures":[{"sig":"MEUCIQDxrKrj8OjS2EFWiimxMw7FJuPl+N2D+LHB+uq/W5UZwgIgdOh5PCoDyL+8EjLSupaI1rpnb5S1O63xW87H2FvbwaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLFU9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPbQ//QQA+OFds4s8fDA5dxER/I+rrOrgIWu7nNPeND3HbLvGTuiZG\r\nzL9nTFEO6Cfjg/sgJ/wG4ka8obMvJnmGwwYeg8qaNpX3Wv9dGhGTDMO69QSM\r\n+WbHKMUjNCTnQALVy6Lq3nUPtYEp3Vrqz/fgKt3kk5zo5INLO3CjZxWd5eHa\r\nTyNzAaVLE4qB6MyrViRJiDWKT9xevHW2lPcDIWFq38tf+L5cVxutXIkOQq33\r\nSiY6zfnR1jRx5Wf06AvBqyNMR6GXhNWgHs5PK1M2yaQv/lOsUWA1mfHbqYpH\r\nQgzkqwKnkMW9eURYwmiil/oVYXEy2jCgmLypjovDe0qM+mjFCPJvZ2h8J5xr\r\n2fi7x5wFGW0K+n0tDrGTeoYeWEpeHLi8Xe4Ghs/GwKL/kwaySt8xROh2pzTZ\r\nFLlPuEW5xIBpfTWG/qtXrmjHFBR+/TapqdjTXMaFZ3p0rdHJM7YC26RrX+Of\r\nS/92SYhlCz52KvUTOJw+p91qUb2FJfrMLlX6bvlBrVbeq3tOrZzQU8xL/RaW\r\n4jwT+FAHQKLwTscF/AWvJxAVxHUynaTjt4nEX6lE7PAobUZFmpjKGyBmenRL\r\ntQqttLqDX+jOuGVAmPk1THp5VOmYznFAMkMKHNgyXxGBeLhxQvH0e69vixgN\r\niy4yBIjl4kh+KjKwkKITgYyTpZJR8uOdI0E=\r\n=86ga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-input-mask.umd.js","es2015":"fesm2015/ngneat-input-mask.js","module":"fesm2015/ngneat-input-mask.js","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n<table>\n  <thead>\n    <tr>\n      <th>@ngneat/input-mask</th>\n      <th>Angular</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        3.x\n      </td>\n      <td>\n        >= 11.2.7 < 13\n      </td>\n    </tr>\n    <tr>\n      <td>\n        4.x\n      </td>\n      <td>\n        >= 13\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2015":"esm2015/ngneat-input-mask.js","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.js","metadata":"ngneat-input-mask.metadata.json","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.12","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.10","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":">= 11.2.7 < 13","@angular/common":">= 11.2.7 < 13"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_4.1.1_1647072573740_0.9262642541727601","host":"s3://npm-registry-packages"}},"5.2.0":{"name":"@ngneat/input-mask","version":"5.2.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.2.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"296abf03327b9d27faefe31f44e594e1ad39e35d","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.2.0.tgz","fileCount":39,"integrity":"sha512-zrKjhAYe+zvvqQOs0sappBhO+iPDlZq4OIIp4WD78hS0tYQzHZnScrUk4l7ygTzkWgolIdL+PxBJEcivFDg6xQ==","signatures":[{"sig":"MEQCIAn8Wpwr/j7m08NIReOvB1TCgeUctZyoKp871QmQqR1MAiBJEazE1clJFzryysUbElU3t9P1b2j6yuOlrkMuNsUvYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiLFbtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg7w//fH74SMUrvBbZyb+6kw2ZYzmWqivfGWRSer7dOeTq2xPzK5gt\r\n9QjRDJt6l7l0/A19JqhQdP+bPmU1r3gnhFMcegEWsLwYdSxh7zdmHnFbBsTk\r\nwww/88IOsFDgM9KDyhadvU9keXl7sodFXY1PBHciVt6GyRrr48bIN5Mwk5OE\r\nAELkFEEzUpp/6rQStP7crLU8S5Pq00QIuZBYmmtuo9kTAMQ5T84pLbtLQQPq\r\nOUsFf9cQy9KLnbN3dXjxl87CMCqt0gQA12pVQVrTRWEhELZrR2ab62GljAv1\r\nPjUH3TT5XQAz8HNva5oGZagBcMCXS/JVhYz8iFSZWsT2tQxTiQWYnbHOj8cm\r\n17KuUAn0qIQKe9+5QCArRU0juAD0g/Bb4Yg4Z7Ye3H1A0UXV8WpEamIhmx7j\r\nErMs5kl8kZjL7t5Q6VLI0slHFM4bRj74v5hollQ9Bpw06XQTVqWy9B5Ruj+I\r\nALWGxzGO51cRoCA8M9i1Cbbj4AAGFkEPTpwRbUwo/8J5foXeBYJvq+BoLbby\r\nWnOS1y6XgNbF7JN8BkGMQkMMIt/wtXk3yI3neIiL1JrZ8f3nF0CNd5C0OXXb\r\ngKIlyx+YNHJtdMSjuIZACBJVlMUAAVYAdNAg1zRpl2JPe8GjjQuJDZ6Zs7Kn\r\nRNenKXJLzPMOnxQMFQsVDARex3oqe78QpkM=\r\n=Junp\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"4d29bdd01b52227451baf1b19d4be9163b4e49bd","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.10","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.2.0_1647073005700_0.3438618726319822","host":"s3://npm-registry-packages"}},"5.3.0-beta.1":{"name":"@ngneat/input-mask","version":"5.3.0-beta.1","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.3.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"5d60f98c16e4f484fe9ac914e36c506313d89a9a","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.3.0-beta.1.tgz","fileCount":39,"integrity":"sha512-uFTTtBavmvYmY5vPLSaceQRZos6OxLvznl88hjCz+A7Vu4r8T3MJk9DuM0ktqWSQRI2maUUOeODBCLMtrElxIQ==","signatures":[{"sig":"MEYCIQDKvNsSWC3LvpDlYXQMKVMdmvMVhbJrICYcTFuxFQQMewIhALk1QDSuEoy6GNf6lk3MqkoRQDlQPxrP7bjMqquHAn0C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYnQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplMw/+M7w6ZAbGkHk89lttYIP/MRA4lFb4FgcfSXmayayRXpj3jbB6\r\n8P8iJOxxwJQ/iVvwd7LqTlwmu/AvmwX8q/LgFlI0HpSfuWKdnSE+MG+AoWB+\r\nDzLGYdUz/vWmGdnQ8wk9EHaf77Ylt75d4uYyEU0it1EfH0kpBEOn3Hv+6Oy5\r\nVJATf2oHHntAnPOY/8gc0ImJ/BICBcounNn5VTuDxQKDr5YbC2/F3l9fqMxY\r\n/fEVPSeIkD/LBW0vVnhJs6lW87cCUreZNIlO/9xa2q3Q9d9/AltjcoRAPZLV\r\nHgy4b+bqFwQsw/jnmC8/R2z7dXkYHXNLMTzdzNwfwkIrWU9nMMXkto+WsIJh\r\n1HHGyIqMKmhWtHQvAJKltcUQJT1YCDbEJmFzbYMv1S2lVmJs5cLP3zQr8hmc\r\nWmwGDJ3US3/6DsZevdzq2P4wZt7qi3PknK1yadMuGyFjw7ska3Ywf74bEthI\r\nPNqNzT9QIxWD/gY+fHMcZfmxWIXZDNY5MbzBhTDHOTXjtTuJOvDMWIaY3oA1\r\nZBeuCGiLLJ/WTjLXb5MqKzk9+eWTf1lx08S4HuPjCffNJnfMvai774OKQ5V3\r\nPGYf1zkcXnRYOcMupMzQEh4v3S0ItbFjblzTOytJwGu3UDa7HV+lqyoRgRYE\r\nhVEMJdcGPsdzqzkyILbzxT6M2yVz+0Phvrs=\r\n=mLCg\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n| @ngneat/input-mask | Angular        |\n| ------------------ | -------------- |\n| 4.x.x              | >= 11.2.7 < 13 |\n| 5.x.x              | 13             |\n| 6.x.x              | 14             |\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n    <td align=\"center\"><a href=\"https://github.com/bogusweb\"><img src=\"https://avatars.githubusercontent.com/u/5169399?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Pawel Boguslawski</b></sub></a><br /><a href=\"#maintenance-bogusweb\" title=\"Maintenance\">🚧</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a1c3375adbe16d1dd9a250248389d6751a875b3c","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.7","@angular/core":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.3.0-beta.1_1667396636143_0.31306052033773324","host":"s3://npm-registry-packages"}},"5.3.0":{"name":"@ngneat/input-mask","version":"5.3.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.3.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"8e7c2aa4a2d040a15b5480028f3c1c848f4f89d4","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.3.0.tgz","fileCount":39,"integrity":"sha512-OAVSjfFCxWFooqrYWNL5vk0YfBNhOm3oLFcML+9gLl8hvPX7R+/1aWaKeoaQQnLiOedrQ6jSCbVYSyXhERZofQ==","signatures":[{"sig":"MEYCIQDOvAESSJ4M1NxOpc/RoHCZ4fyALzaz0vCBOHBlVvW5JwIhAJXF0BD3TZ5u495yV9QncaE67NNdNw/0IKXOnQdAxVAd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZid0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGmQ//fzwPBo8yeDSGzN0QntozPchijydznthBzp73ThKUDKbbASkt\r\nPkvq5nBGjLzuZ40ROVZOAbM4s2YozgybmWvjQ2vbhocrcWYzwnuNQ6HZMEbt\r\n9TzOk1lSG6689o3uVBmkc89E9QvR57SMtdfQQor8xKUHHFhsXFFkobxWDCJ9\r\ncKBtKXJ6kB8qAYZGAuYIdkooSxNz3E6gyOKIpeFcZUvKrpcEbZm5VqCzk0Xm\r\nlelzNuiIpNkiEoiXpnEvZF6wATz6HofITycI13Evvd/M7IzWaU7KIR2Xg2e3\r\nfYuO1TVqoRFawZe7WYI4EcAYpqjXbqq1KD0+kwtMW0ruEJLuZfepcwF5gayP\r\nWTGgYYLqgsdsfFUccmFnJCip8UOvDyb1cd72HSULL+YzRBYzl0HZm2BtGXLd\r\nM0EHI1VmaIYDUucOxqyChLJbEBRPXFSeHjrENZ7U2rmwcaFb9uYM8oTma7wG\r\nEnRQbNya50yo+impZIPDGmRGRLfWevnQ/cUjGjqbXB4cMeB8UnnpNSxjSEC8\r\nHKO/lbgrdq/eYIQJYmLfz6SXXkfl/sRdTMbmcCa/Cof3X6RMHsgcl6n5XBi+\r\nPsZGHlFk9GTunYN2WbCSnghFlZon6oHjpMzR3SYOys3aXDQ49+uDXP7wfaD+\r\nJ8XZ2z5ROTUjioyPS5GPpHZiwWHB9LKpHpw=\r\n=xQ3m\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"4e09cc86ba09868bfe3df65c4537fda8e56739b1","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.7","@angular/core":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.3.0_1667639156785_0.9481514860908453","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@ngneat/input-mask","version":"6.0.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@6.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"8d5d90c3dda450c3a2d50fb1026326e34b30dca6","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-6.0.0.tgz","fileCount":39,"integrity":"sha512-JaQU4qJP4rfelCMmpr+vpyKVNXlOEwCBqyxfI6OJIrXl9E2mu3xYm+XyTMVZJRtMikKSLpZP5+dzoX++9viltA==","signatures":[{"sig":"MEUCIQDBAfgZcBe4Kc554ANqHdrsgT/ec+tZIgCdgzV65tLJpgIgF9nQ1en4aj4osXZZ4FbsA2VoAw0wh+2dMtPXsWRPWAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZjRaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre2Q//Sg7KWJk+lEWbeO6cD3fWfBurog19FROSRCajEBFZHtKHx+yh\r\nKmUfdUrgBCEqERTH4SgZnQInTGuDs2o1AxeLGPDuntUP7fknxHYZvH9FkmLV\r\nTfaWOhYjhJNdJZ2g0RBKeGKPPl2pDfV7t+B+Y4YLIjQrKdmi2zHvc6Qkdfq1\r\nxNi8iZFnNHEXCbUp3StRSsPmbwaWog377/9GVWnBv0P1Au1r6t0NV2/KlLQi\r\n1yby7FWHvz5fESjL1qzWG6Z77iE+fyUHstFfVMk4S3zUS+EwBZb8ekf5bqUa\r\nsHVQ641+Xsfi7hxIdwTATRpUKv56uP53vIPczdit2ffvaF51OnanPy6QuR6g\r\nxpgJl5urykg5JyLw+YLoM0y/vWT+Z9Rj7B0BkQF850Duujgpu03gt3Ycyd/p\r\nzCd09iXvc+rN4/m+WAgOS9cUQQvCOORxWfpY0w3aVCRDmDXEFmFp7LxxvajW\r\nOS5GJS+SDeNBLC6FSjJ3cXZe02JQfFI5HvwH15JiJuz+CbchIFEqzT3oViUt\r\nU2nQk2SL/byc3sunYm+WYkrXFwSsIiHNGqV6breATTPYsSEFMuj5vDB0SATt\r\nqAFRleq2wI4dRt8K+MGOW2g+VbY/DFTbFxazZPKy2kmecSIxwm6LK7t6MXbX\r\nbaNT96rKw7rE4cb4g1G6G9BrFW3oC4y9G4I=\r\n=CsnW\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"e52c764e0e27e5f6363ba15215a78df3e4632a35","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.7","@angular/core":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_6.0.0_1667642458697_0.473655202068346","host":"s3://npm-registry-packages"}},"5.4.0":{"name":"@ngneat/input-mask","version":"5.4.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@5.4.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"00b7db9a9f5d713b885719fde8b3782ccb658467","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-5.4.0.tgz","fileCount":39,"integrity":"sha512-kxQj8Ia0ve3ECEcd2G1AfySxvnjpzbq6vMZZEL/FLhPpv2jzilVBpF0pumyoIGVM2Uu925h1jBFhP0ZLYs344g==","signatures":[{"sig":"MEUCIQDXy7h12q1alYWR1HnETw4CY9WnPT2DY+AvYErxpKJ+eAIgHnyI7fAp/6jOLnBf+Ld6Npva4JN6bkRgZAFYCY0ELDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjafYuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB1w/9EvNMWUKewo0XM9+DfWvUwuTB7r/qvvo2nTPnM3psyQ7lg0vi\r\nLwHtv2a2VExx40d0ykc41BAilkTlDtRvPdygCNJpM9oyGrSykkZBAQ5oNmS5\r\nsutHhq04fL3rSlBYZ8vYFfurXTu8WD5bAbjwXw9anfzVv1OOSkp+0IyV/2S/\r\nSwyQmMV010u8/GbDX2hNX3eFSARUsjVT+EKayXaaGYk/2iKkD416ZrnjJjgK\r\nfngYsaIEHRSapNe9RuTImV53XNeKzlnoLNJMsMtViP1qdUvUPy9KPpmGtEYv\r\nCekN9cFXuprG3TS2BQGJlcApFkNXo6/k9kQpzjh6y1Lifes6dhM/KBO+tz2v\r\n8rhb4+sXkwCoBhTUDHl2vL623Emovrie4Ulx7KYy8yyizZmf1UA0VpXwcPpa\r\n4KVYYVDSzwVbAkfb4eqDS9oE4byh5C4gr1AA7e4EVeb7dHm9M3SCDDnCKslX\r\nEbQv8j+GDe0mwJguJwskIPbfxtXrExsdd47xF9+VUOVtEOLz2Tb09d5fQWfW\r\n4YDlWiMaoepWVxu1GEqJWTE6hrJRkenCXdM8hhhEm5J/cL1u12UWTBaSzWwT\r\nUkCC4XW/DWITDO24jgPHZ78zL3EBmYOBP+a1T1+uSdowlW40HVyw3lzfklJO\r\nTNcawEqrUPu8VFdAZ17wbOeoY6RUQ9qokco=\r\n=G13p\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n| @ngneat/input-mask | Angular        |\n| ------------------ | -------------- |\n| 4.x.x              | >= 11.2.7 < 13 |\n| 5.x.x              | >= 13          |\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n    <td align=\"center\"><a href=\"https://github.com/bogusweb\"><img src=\"https://avatars.githubusercontent.com/u/5169399?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Pawel Boguslawski</b></sub></a><br /><a href=\"#maintenance-bogusweb\" title=\"Maintenance\">🚧</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./ngneat-input-mask.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"1202b40a9853eebcb8d7f9786d5b7fb1e36d0ffb","typings":"ngneat-input-mask.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"inputmask":"^5.0.5","@angular/core":">=13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_5.4.0_1667888686526_0.19598135411051043","host":"s3://npm-registry-packages"}},"6.1.0":{"name":"@ngneat/input-mask","version":"6.1.0","keywords":["angular","angular 2","input-mask","ionic"],"license":"MIT","_id":"@ngneat/input-mask@6.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/input-mask#readme","bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"dist":{"shasum":"de2a2db845ae67e9ac04b50cf260a130f6b94643","tarball":"https://registry.npmjs.org/@ngneat/input-mask/-/input-mask-6.1.0.tgz","fileCount":39,"integrity":"sha512-h6C32+yDG+Wr/ZEL3PtiPIqnEfEkGZmkxYCAXFm9J4kEYczmU4OrBy2bYYghHp+eCVx683AQLzVRvicrh0zw0w==","signatures":[{"sig":"MEYCIQC+glPnUaFu1f0EnQO1OyBvzUQpxgYUazT2Q8Sd2YhSVQIhALiETYozWNBPZINFzFSvJ9VvNb9aF2T8117mcQrWIrvg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0AmWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpETQ//dTmTMGj91pTSjPVVvRMK7byFz0+hOg6wZJ4M8tn0YqpPkz2e\r\n/jAf7R+kLEP+uJiQxs1jETfObvEIuUmVBV/G7OwMqUEOYDJ8vYAWHSguFCXo\r\nPOuz8mewRG2C6+xhl2a5/UXt8kk6tqGkjUa/sVFJoI/nmkSvQ5eDs4OroikL\r\nu5AvRbjFV8TLN8UOpUiqlhEuPNISiDwgG12NcVpdKHPewBHOmT/sMxQ8aorm\r\nWMO4tD25yq3dWct0YjdgnvrM4p58tSU2nJcYVwnQXF99DveA4tWaNzh+drtx\r\nJpiNavRrcMDPel9wRnWQQXIPiyUGkP4+18i4w5yQKciix1yMdjHq983+qZL+\r\nBy+xP5zMerOdnEZtnGzksGFqcHRKFcCGE5pjCmVwUPlvPRF/IsxFbf4RPYB4\r\nbXohZY/6Q3BlSbqFHNTX363WQ2ZrTLz9X74v/wrSg+UfyA6Zp+0T+8wNY6wc\r\nPpevQ240zQP7lOmbr1ggi728+iwgdKZmu/tDBzOS88yR13pgeuXllH8Dydej\r\nBdn/t/RDdPNvhIV383jZU7XjG80iD2u4T3vP7BqZcPpMMDddoFOzr2UI97LF\r\nGivoNjDJQgeulfVpAe0QeYOzYYy473KNh6lRRdln7aLD3vtQ49W6KbS5aeme\r\nFDeUgL6jpSrIu8gh902LWN7S82moAyGtUNo=\r\n=X3Hc\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-input-mask.mjs","module":"fesm2015/ngneat-input-mask.mjs","esm2020":"esm2020/ngneat-input-mask.mjs","exports":{".":{"node":"./fesm2015/ngneat-input-mask.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-input-mask.mjs","es2020":"./fesm2020/ngneat-input-mask.mjs","default":"./fesm2020/ngneat-input-mask.mjs","esm2020":"./esm2020/ngneat-input-mask.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3ec01e0339ca2bcdedbed43789015d0a799ab01a","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-input-mask.mjs","fesm2020":"fesm2020/ngneat-input-mask.mjs","repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"@ngneat/input-mask is an angular library that creates an input mask.","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"inputmask":"^5.0.7","@angular/core":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/input-mask_6.1.0_1674578326603_0.7777504918238909","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-04-28T12:32:23.373Z","modified":"2024-08-06T07:10:01.425Z","1.0.0-beta.1":"2021-04-28T12:32:23.776Z","1.0.0-beta.2":"2021-04-28T16:27:02.050Z","1.0.0-beta.3":"2021-04-28T17:03:32.041Z","1.0.0-beta.4":"2021-05-07T11:39:57.595Z","1.0.0-beta.5":"2021-05-12T10:16:55.710Z","1.0.0":"2021-05-18T05:46:39.305Z","1.0.1-beta.1":"2021-06-22T05:32:56.850Z","1.0.1":"2021-06-22T05:39:20.002Z","1.0.2":"2021-07-06T13:14:32.385Z","1.1.0":"2021-08-11T09:06:21.627Z","1.2.0":"2021-09-10T19:26:26.068Z","2.0.0":"2021-09-13T08:56:09.205Z","3.0.0":"2021-09-17T10:15:29.247Z","3.0.1":"2021-09-17T13:06:21.322Z","3.0.2":"2021-09-21T11:10:19.282Z","3.0.3":"2021-10-25T07:05:28.225Z","3.0.4":"2021-10-28T16:29:11.424Z","4.0.0":"2021-11-12T13:52:56.307Z","4.0.1":"2021-11-15T12:13:35.390Z","5.0.0-beta.1":"2021-11-15T17:09:20.807Z","5.0.0-beta.2":"2021-11-23T05:21:46.000Z","5.0.0":"2021-11-23T06:36:48.904Z","5.0.1":"2021-11-25T03:18:36.069Z","5.1.0-beta.1":"2022-01-05T13:35:51.079Z","5.1.0":"2022-01-05T15:46:25.756Z","4.1.0":"2022-01-05T15:55:15.715Z","4.1.1":"2022-03-12T08:09:33.900Z","5.2.0":"2022-03-12T08:16:45.912Z","5.3.0-beta.1":"2022-11-02T13:43:56.313Z","5.3.0":"2022-11-05T09:05:56.897Z","6.0.0":"2022-11-05T10:00:58.854Z","5.4.0":"2022-11-08T06:24:46.695Z","6.1.0":"2023-01-24T16:38:46.799Z"},"bugs":{"url":"https://github.com/ngneat/input-mask/issue"},"license":"MIT","homepage":"https://github.com/ngneat/input-mask#readme","keywords":["angular","angular 2","input-mask","ionic"],"repository":{"url":"git+https://github.com/ngneat/input-mask.git","type":"git"},"description":"@ngneat/input-mask is an angular library that creates an input mask.","maintainers":[{"email":"netanel77999@gmail.com","name":"netanel-ngneat"}],"readme":"<h1 align=\"center\">\n  @ngneat/input-mask\n</h1>\n\n<p align=\"center\">\n  <img width=\"20%\" height=\"20%\" src=\"./logo.svg\">\n</p>\n\n<br />\n\n[![npm (scoped)](https://img.shields.io/npm/v/@ngneat/input-mask?style=flat-square)](https://www.npmjs.com/package/@ngneat/input-mask)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/input-mask/blob/main/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/input-mask/pulls)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat-lib](https://img.shields.io/badge/made%20with-%40ngneat%2Flib-ad1fe3?logo=angular)](https://github.com/ngneat/lib)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n> @ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses [inputmask](https://github.com/RobinHerbots/Inputmask).\n\n## Compatibility with Angular Versions\n\n| @ngneat/input-mask | Angular        |\n| ------------------ | -------------- |\n| 4.x.x              | >= 11.2.7 < 13 |\n| 5.x.x              | 13             |\n| 6.x.x              | 14             |\n\n## Features\n\n- 🔡 **Support for form validation**\n- 🎭 **Wrapper function to easily create input-masks**\n- 🔁 **Helps you to convert final values to desired format**\n- ☝️ **Single directive to handle everything**\n- 🛠 **All the configurations of [inputmask](https://github.com/RobinHerbots/Inputmask) provided**\n\n## Installation\n\n### Angular\n\nYou can install it through **Angular CLI**, which is recommended:\n\n```bash\nng add @ngneat/input-mask\n```\n\nor with **npm**\n\n```bash\nnpm install @ngneat/input-mask inputmask@5\nnpm install -D @types/inputmask@5\n```\n\nWhen you install using **npm** or **yarn**, you will also need to import `InputMaskModule` in your `app.module`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule],\n})\nclass AppModule {}\n```\n\n## Config\n\nThere few configuration options available with `InputMaskModule`:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })],\n})\nclass AppModule {}\n```\n\n| Option          | Type      | Description                                                                                                                                                                                   | Default Value |\n| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `inputSelector` | `string`  | CSS selector, which will be used with `querySelector` to get the native input from host element. This is useful when you want to apply input-mask to child `<input>` of your custom-component | `input`       |\n| `isAsync`       | `boolean` | If set `true`, `MutationObserver` will be used to look for changes until it finds input with `inputSelector`                                                                                  | `false`       |\n\n## Usage examples\n\n### 1. Date\n\n![](./date.gif)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { createMask } from '@ngneat/input-mask';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\n### 2. IP Address\n\n![](./ip.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"ipAddressMask\"\n      [formControl]=\"ipFC\"\n      placeholder=\"_._._._\"\n    />\n  `,\n})\nexport class AppComponent {\n  ipAddressMask = createMask({ alias: 'ip' });\n  ipFC = new FormControl('');\n}\n```\n\n### 3. Currency\n\n![](./currency.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"currencyInputMask\"\n      [formControl]=\"currencyFC\"\n      placeholder=\"$ 0.00\"\n    />\n  `,\n})\nexport class AppComponent {\n  currencyInputMask = createMask({\n    alias: 'numeric',\n    groupSeparator: ',',\n    digits: 2,\n    digitsOptional: false,\n    prefix: '$ ',\n    placeholder: '0',\n  });\n  currencyFC = new FormControl('');\n}\n```\n\n### 4. License Plate\n\n![](./license.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"licenseInputMask\"\n      [formControl]=\"licenseFC\"\n      placeholder=\"___-___\"\n    />\n  `,\n})\nexport class AppComponent {\n  licenseInputMask = createMask('[9-]AAA-999');\n  licenseFC = new FormControl('');\n}\n```\n\n### 5. Email\n\n![](./email.gif)\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"emailInputMask\"\n      [formControl]=\"emailFC\"\n      placeholder=\"_@_._\"\n    />\n  `,\n})\nexport class AppComponent {\n  emailInputMask = createMask({ alias: 'email' });\n  emailFC = new FormControl('');\n}\n```\n\n### 6. Custom Component\n\nIf you have some component and you want to apply input-mask to the inner `<input>` element of that component, you can do that.\n\nFor example, let's assume you have a `CustomInputComponent`:\n\n```typescript\n@Component({\n  selector: 'app-custom-input',\n  template: `\n    <input\n      [formControl]=\"formControl\"\n      [inputMask]=\"inputMask\"\n      [placeholder]=\"placeholder\"\n    />\n  `,\n})\nexport class CustomInputComponent {\n  @Input() formControl!: FormControl;\n  @Input() inputMask!: InputmaskOptions<any>;\n  @Input() placeholder: string | undefined;\n}\n```\n\nAnd your `AppComponent` looks like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    <app-custom-input\n      [formControl]=\"dateFCCustom\"\n      [inputMask]=\"dateInputMaskCustom\"\n      placeholder=\"Date\"\n    ></app-custom-input>\n  `,\n})\nexport class AppComponent {\n  dateInputMaskCustom = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n  dateFCCustom = new FormControl('');\n}\n```\n\nSo to apply input-mask on `CustomInputComponent`, use configuration with `InputMaskModule` like below:\n\n```typescript\nimport { InputMaskModule } from '@ngneat/input-mask';\n\n@NgModule({\n  imports: [\n    InputMaskModule.forRoot({\n      isAsync: false, // set to true if native input is lazy loaded\n      inputSelector: 'input',\n    }),\n  ],\n})\nclass AppModule {}\n```\n\n### More examples\n\nAll examples are available on [stackblitz](https://stackblitz.com/edit/angular-ivy-6greu1?file=src/app/app.component.ts).\n\nYou can create any type of input-mask which is supported by [InputMask plugin](https://github.com/RobinHerbots/inputmask).\n\n## Validation\n\nWhen `[inputMask]` is used with `[formControl]`, it adds validation out-of-the box. The validation works based on [`isValid`](https://github.com/RobinHerbots/Inputmask#isvalid) function.\n\nIf the validation fails, the form-control will have below error:\n\n```json\n{ \"inputMask\": true }\n```\n\n## `createMask` wrapper function\n\nThis library uses [inputmask](https://github.com/RobinHerbots/Inputmask) plugin to handle mask related tasks. So, you can use all the [options](https://github.com/RobinHerbots/Inputmask#options) available there.\n\nThe recommended way to create an inputmask is to use the `createMask` function provided with this library.\n\n### `parser` function\n\nApart from inputmask options, we have added one more option called `parser`. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.\n\nFor example, you want your users to enter date in `input[type=text]` with `dd/mm/yyyy` format and you want to store a `Date` value in the form-control:\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/mm/yyyy',\n    parser: (value: string) => {\n      const values = value.split('/');\n      const year = +values[2];\n      const month = +values[1] - 1;\n      const date = +values[0];\n      return new Date(year, month, date);\n    },\n  });\n\n  dateFC = new FormControl('');\n}\n```\n\nIn above example, whenver you try to access `dateFC.value`, it won't be the string which user entered, but rather a `Date` created based on the `parser` function.\n\n### `formatter` function\n\nApart from the parser function, we have added one more option called `formatter`. This helps you if you want to change the format of a date you receive from the Database.\n\nFor example, you receive a date from your database in the format 'yyyy-MM-dd' but you want to display it 'dd/MM/yyyy'.\n\n```typescript\n@Component({\n  template: `\n    <input\n      [inputMask]=\"dateInputMask\"\n      [formControl]=\"dateFC\"\n      placeholder=\"dd/mm/yyyy\"\n    />\n  `,\n})\nexport class AppComponent {\n  dateInputMask = createMask<Date>({\n    alias: 'datetime',\n    inputFormat: 'dd/MM/yyyy',\n    formatter: (value: string) => {\n      const values = value.split('-');\n      const date = +values[2];\n      const month = +values[1] - 1;\n      const year = +values[0];\n      return formatDate(new Date(year, month, date), 'dd/MM/yyyy', 'en-US');\n    },\n  });\n\n  dateFC = new FormControl('1990-12-28');\n}\n```\n\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/shhdharmen\"><img src=\"https://avatars.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Code\">💻</a> <a href=\"#content-shhdharmen\" title=\"Content\">🖋</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=shhdharmen\" title=\"Documentation\">📖</a> <a href=\"#example-shhdharmen\" title=\"Examples\">💡</a> <a href=\"#maintenance-shhdharmen\" title=\"Maintenance\">🚧</a> <a href=\"#platform-shhdharmen\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://www.netbasal.com/\"><img src=\"https://avatars.githubusercontent.com/u/6745730?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href=\"https://github.com/ngneat/input-mask/issues?q=author%3ANetanelBasal\" title=\"Bug reports\">🐛</a> <a href=\"#business-NetanelBasal\" title=\"Business development\">💼</a> <a href=\"#ideas-NetanelBasal\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"#mentoring-NetanelBasal\" title=\"Mentoring\">🧑‍🏫</a> <a href=\"#projectManagement-NetanelBasal\" title=\"Project Management\">📆</a> <a href=\"https://github.com/ngneat/input-mask/pulls?q=is%3Apr+reviewed-by%3ANetanelBasal\" title=\"Reviewed Pull Requests\">👀</a></td>\n    <td align=\"center\"><a href=\"https://github.com/RobinHerbots\"><img src=\"https://avatars.githubusercontent.com/u/318447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Robin Herbots</b></sub></a><br /><a href=\"#ideas-RobinHerbots\" title=\"Ideas, Planning, & Feedback\">🤔</a></td>\n    <td align=\"center\"><a href=\"https://github.com/pzontrop\"><img src=\"https://avatars.githubusercontent.com/u/7068447?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>P. Zontrop</b></sub></a><br /><a href=\"#platform-pzontrop\" title=\"Packaging/porting to new platform\">📦</a></td>\n    <td align=\"center\"><a href=\"https://medium.com/@overthesanity\"><img src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Artur Androsovych</b></sub></a><br /><a href=\"#maintenance-arturovt\" title=\"Maintenance\">🚧</a> <a href=\"https://github.com/ngneat/input-mask/commits?author=arturovt\" title=\"Tests\">⚠️</a></td>\n    <td align=\"center\"><a href=\"https://github.com/bogusweb\"><img src=\"https://avatars.githubusercontent.com/u/5169399?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Pawel Boguslawski</b></sub></a><br /><a href=\"#maintenance-bogusweb\" title=\"Maintenance\">🚧</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!!\n","readmeFilename":"README.md"}