{"_id":"@antonmynch/mat-phone-number-input","_rev":"3-2012828ccd41c47dc8d8886d53c502e2","name":"@antonmynch/mat-phone-number-input","dist-tags":{"latest":"19.0.2"},"versions":{"19.0.0":{"name":"@antonmynch/mat-phone-number-input","version":"19.0.0","license":"MIT","_id":"@antonmynch/mat-phone-number-input@19.0.0","maintainers":[{"name":"antonmynch","email":"code.inside.us@gmail.com"}],"dist":{"shasum":"074bdb5866bcddcc46bb70a6930557d620c7972d","tarball":"https://registry.npmjs.org/@antonmynch/mat-phone-number-input/-/mat-phone-number-input-19.0.0.tgz","fileCount":125,"integrity":"sha512-LxtZwuFHiRULggvKwBZSAk/rq4a1hZ00lT+CnC8QPJeZpMeYYKMPHHwR85TyKuf3Z+KiLIC9N6L+kJVg5XPqMw==","signatures":[{"sig":"MEUCIClQgmoIkACM+e2/jO7VBbsp2H5/2shcwunZB0Uk+BEYAiEAgS0AzTLHeRcTObdCWeL9dUtWsAzWa5EeC2CPYJHMRHw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2301819},"gitHead":"3f6d89f6fd8dd82a748dd458120752b88027581f","scripts":{"publish":"yarn build-many && npx nx release publish","build-many":"nx run-many -t build","copy-files":"cp README.md libs/mat-phone-number-input && cp LICENSE libs/mat-phone-number-input"},"_npmUser":{"name":"antonmynch","email":"code.inside.us@gmail.com"},"_npmVersion":"10.1.0","description":"An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.","directories":{},"_nodeVersion":"20.9.0","dependencies":{"rxjs":"~7.8.0","zone.js":"~0.15.0","@angular/cdk":"^19.0.3","@angular/core":"~19.0.0","@angular/forms":"~19.0.0","@angular/common":"~19.0.0","@angular/router":"~19.0.0","@angular/compiler":"~19.0.0","@angular/material":"^19.0.3","libphonenumber-js":"^1.11.16","@angular/animations":"~19.0.0","@angular/platform-browser":"~19.0.0","@angular/platform-browser-dynamic":"~19.0.0"},"_hasShrinkwrap":false,"packageManager":"yarn@4.5.3","devDependencies":{"nx":"20.2.2","jest":"^29.7.0","tslib":"^2.3.0","@nx/js":"20.2.2","eslint":"^9.8.0","@nx/web":"20.2.2","postcss":"^8.4.5","ts-jest":"^29.1.0","ts-node":"10.9.1","@nx/jest":"20.2.2","prettier":"^3.4.2","@swc/core":"~1.5.7","@eslint/js":"^9.8.0","@nx/eslint":"20.2.2","ng-packagr":"~19.0.0","typescript":"~5.6.2","@nx/angular":"20.2.2","@types/jest":"^29.5.12","@types/node":"18.16.9","postcss-url":"~10.1.3","tailwindcss":"^3.0.2","@angular/cli":"~19.0.0","@swc/helpers":"~0.5.11","autoprefixer":"^10.4.0","@nx/workspace":"20.2.2","angular-eslint":"^19.0.2","@nx/eslint-plugin":"20.2.2","typescript-eslint":"^8.13.0","@swc-node/register":"~1.9.1","@schematics/angular":"~19.0.0","jest-preset-angular":"~14.4.0","jsonc-eslint-parser":"^2.1.0","@angular-devkit/core":"~19.0.0","@angular/compiler-cli":"~19.0.0","eslint-config-prettier":"^9.0.0","jest-environment-jsdom":"^29.7.0","@typescript-eslint/utils":"^8.13.0","@angular/language-service":"~19.0.0","@typescript-eslint/parser":"^8.18.0","@angular-devkit/schematics":"~19.0.0","@angular-devkit/build-angular":"~19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-phone-number-input_19.0.0_1774870773402_0.2952423678955709","host":"s3://npm-registry-packages-npm-production"}},"19.0.1":{"name":"@antonmynch/mat-phone-number-input","version":"19.0.1","license":"MIT","_id":"@antonmynch/mat-phone-number-input@19.0.1","maintainers":[{"name":"antonmynch","email":"code.inside.us@gmail.com"}],"dist":{"shasum":"feb7e44e9199c7693b607b6da9a30c0760a0cae3","tarball":"https://registry.npmjs.org/@antonmynch/mat-phone-number-input/-/mat-phone-number-input-19.0.1.tgz","fileCount":125,"integrity":"sha512-V0Q2W+Q0FTYUykJ0uRz88yqtoIsecvOHFn75hDEL05avLq/tCF/RNZ73T1bAQrJ9XRA1SmK55kF1fIAk2CONDg==","signatures":[{"sig":"MEQCIFMqgQZV9mqqkLn23jAcQsyns25JsIw25g+N4APT72J1AiAYq2UgdIedbtLBL2UU5v959N2wUsrAQwmBdc3EI5uNQw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2301840},"gitHead":"3f6d89f6fd8dd82a748dd458120752b88027581f","scripts":{"publish":"npx nx run-many --target=build --all && npx nx release publish","build-many":"nx run-many -t build","copy-files":"cp README.md libs/mat-phone-number-input && cp LICENSE libs/mat-phone-number-input"},"_npmUser":{"name":"antonmynch","email":"code.inside.us@gmail.com"},"_npmVersion":"10.1.0","description":"An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.","directories":{},"_nodeVersion":"20.9.0","dependencies":{"rxjs":"~7.8.0","zone.js":"~0.15.0","@angular/cdk":"^19.0.3","@angular/core":"~19.0.0","@angular/forms":"~19.0.0","@angular/common":"~19.0.0","@angular/router":"~19.0.0","@angular/compiler":"~19.0.0","@angular/material":"^19.0.3","libphonenumber-js":"^1.11.16","@angular/animations":"~19.0.0","@angular/platform-browser":"~19.0.0","@angular/platform-browser-dynamic":"~19.0.0"},"_hasShrinkwrap":false,"packageManager":"yarn@4.5.3","devDependencies":{"nx":"20.2.2","jest":"^29.7.0","tslib":"^2.3.0","@nx/js":"20.2.2","eslint":"^9.8.0","@nx/web":"20.2.2","postcss":"^8.4.5","ts-jest":"^29.1.0","ts-node":"10.9.1","@nx/jest":"20.2.2","prettier":"^3.4.2","@swc/core":"~1.5.7","@eslint/js":"^9.8.0","@nx/eslint":"20.2.2","ng-packagr":"~19.0.0","typescript":"~5.6.2","@nx/angular":"20.2.2","@types/jest":"^29.5.12","@types/node":"18.16.9","postcss-url":"~10.1.3","tailwindcss":"^3.0.2","@angular/cli":"~19.0.0","@swc/helpers":"~0.5.11","autoprefixer":"^10.4.0","@nx/workspace":"20.2.2","angular-eslint":"^19.0.2","@nx/eslint-plugin":"20.2.2","typescript-eslint":"^8.13.0","@swc-node/register":"~1.9.1","@schematics/angular":"~19.0.0","jest-preset-angular":"~14.4.0","jsonc-eslint-parser":"^2.1.0","@angular-devkit/core":"~19.0.0","@angular/compiler-cli":"~19.0.0","eslint-config-prettier":"^9.0.0","jest-environment-jsdom":"^29.7.0","@typescript-eslint/utils":"^8.13.0","@angular/language-service":"~19.0.0","@typescript-eslint/parser":"^8.18.0","@angular-devkit/schematics":"~19.0.0","@angular-devkit/build-angular":"~19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-phone-number-input_19.0.1_1774871011496_0.4834473682522278","host":"s3://npm-registry-packages-npm-production"}},"19.0.2":{"name":"@antonmynch/mat-phone-number-input","version":"19.0.2","license":"MIT","scripts":{"copy-files":"cp README.md libs/mat-phone-number-input && cp LICENSE libs/mat-phone-number-input","build-many":"nx run-many -t build","publish":"npx nx run-many --target=build --all && npx nx release publish"},"dependencies":{"@angular/animations":"~19.0.0","@angular/cdk":"^19.0.3","@angular/common":"~19.0.0","@angular/compiler":"~19.0.0","@angular/core":"~19.0.0","@angular/forms":"~19.0.0","@angular/material":"^19.0.3","@angular/platform-browser":"~19.0.0","@angular/platform-browser-dynamic":"~19.0.0","@angular/router":"~19.0.0","libphonenumber-js":"^1.11.16","rxjs":"~7.8.0","zone.js":"~0.15.0"},"devDependencies":{"@angular-devkit/build-angular":"~19.0.0","@angular-devkit/core":"~19.0.0","@angular-devkit/schematics":"~19.0.0","@angular/cli":"~19.0.0","@angular/compiler-cli":"~19.0.0","@angular/language-service":"~19.0.0","@eslint/js":"^9.8.0","@nx/angular":"20.2.2","@nx/eslint":"20.2.2","@nx/eslint-plugin":"20.2.2","@nx/jest":"20.2.2","@nx/js":"20.2.2","@nx/web":"20.2.2","@nx/workspace":"20.2.2","@schematics/angular":"~19.0.0","@swc-node/register":"~1.9.1","@swc/core":"~1.5.7","@swc/helpers":"~0.5.11","@types/jest":"^29.5.12","@types/node":"18.16.9","@typescript-eslint/parser":"^8.18.0","@typescript-eslint/utils":"^8.13.0","angular-eslint":"^19.0.2","autoprefixer":"^10.4.0","eslint":"^9.8.0","eslint-config-prettier":"^9.0.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","jest-preset-angular":"~14.4.0","jsonc-eslint-parser":"^2.1.0","ng-packagr":"~19.0.0","nx":"20.2.2","postcss":"^8.4.5","postcss-url":"~10.1.3","prettier":"^3.4.2","tailwindcss":"^3.0.2","ts-jest":"^29.1.0","ts-node":"10.9.1","tslib":"^2.3.0","typescript":"~5.6.2","typescript-eslint":"^8.13.0"},"packageManager":"yarn@4.5.3","_id":"@antonmynch/mat-phone-number-input@19.0.2","gitHead":"0999713db4bc4b21081cc0190a0f510f11eff4c6","description":"An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-15jXdX3xrAeSdJPXS12zLQojgZOhOpJNOHPWi8T3+YfrSSXHLYJg4cmyrpjWTL1rTt4SwzbcsvIn8+yDv0YpwQ==","shasum":"24cc7d27494e49a949a3d205a2fc8761936623a0","tarball":"https://registry.npmjs.org/@antonmynch/mat-phone-number-input/-/mat-phone-number-input-19.0.2.tgz","fileCount":125,"unpackedSize":2301904,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFXSsIljaDmCE3dydSpkDWQ6MIxOnKWqparZMnKTxQnsAiAggQ/3VmKnLcry7GQfO3gXWJvtmsBcLes+2Zq0CEFkLA=="}]},"_npmUser":{"name":"antonmynch","email":"code.inside.us@gmail.com"},"directories":{},"maintainers":[{"name":"antonmynch","email":"code.inside.us@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mat-phone-number-input_19.0.2_1774871715750_0.33488409416376874"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-30T11:39:33.322Z","modified":"2026-03-30T11:55:16.058Z","19.0.0":"2026-03-30T11:39:33.592Z","19.0.1":"2026-03-30T11:43:31.762Z","19.0.2":"2026-03-30T11:55:15.964Z"},"license":"MIT","description":"An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.","maintainers":[{"name":"antonmynch","email":"code.inside.us@gmail.com"}],"readme":"# International Telephone Input for Angular Material (mat-phone-number-input)\r\n\r\nAn Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.\r\n\r\n[![npm version](https://img.shields.io/npm/v/mat-phone-number-input.svg)](https://www.npmjs.com/package/mat-phone-number-input)\r\n![NPM](https://img.shields.io/npm/l/mat-phone-number-input)\r\n![npm bundle size](https://img.shields.io/bundlephobia/min/mat-phone-number-input)\r\n![npm](https://img.shields.io/npm/dm/mat-phone-number-input)\r\n\r\n## Caution\r\n\r\nThis is a fork from [ngx-mat-input-tel](https://github.com/rbalet/ngx-mat-input-tel) which is a fork from the [ngx-mat-intl-tel-input](https://github.com/tanansatpal/ngx-mat-intl-tel-input) library whish does not seems to be maintained anymore. _Last commit is over a year_\r\n\r\n**Supports:**\r\n\r\n- Angular v19\r\n- Angular Material v19\r\n- ReactiveFormsModule\r\n- FormsModule\r\n- Validation with [libphonenumber-js](https://github.com/catamphetamine/libphonenumber-js)\r\n\r\n## Installation\r\n\r\n### Install This Library\r\n\r\n`$ npm i mat-phone-number-input@latest`\r\n\r\n### Install Dependencies _Optional_\r\n\r\n`$ npm i libphonenumber-js@latest`\r\n\r\n## Usage\r\n\r\n### Import\r\n\r\nAdd `MatPhoneNumberInput` to your component file:\r\n\r\n```ts\r\nimports: [MatPhoneNumberInput];\r\n```\r\n\r\n## Example\r\n\r\nRefer to main app in this repository for working example.\r\n\r\n```html\r\n<mat-form-field [floatLabel]=\"'always'\">\r\n  <mat-label>Phone</mat-label>\r\n  <mat-phone-number-input [preferredCountries]=\"['us', 'tz']\" [enablePlaceholder]=\"true\" [enableSearch]=\"true\" name=\"phone\" describedBy=\"phoneInput\" formControlName=\"phone\" />\r\n</mat-form-field>\r\n```\r\n\r\n```html\r\n\r\n<mat-form-field [floatLabel]=\"'always'\">\r\n  <mat-label>Phone</mat-label>\r\n  <mat-phone-number-input\r\n    [preferredCountries]=\"['us', 'gb']\"\r\n    [enablePlaceholder]=\"true\"\r\n    [enableSearch]=\"true\"\r\n    name=\"phone\"\r\n    autocomplete=\"tel\"\r\n    (countryChanged)=\"yourComponentMethodToTreatyCountryChangedEvent($event)\" // $event is a instance of current select Country\r\n    formControlName=\"phone\"\r\n  />\r\n</mat-form-field>\r\n\r\n```\r\n\r\nIf you want to show the sample number for the country selected or errors , use mat-hint anf mat-error as\r\n\r\n```html\r\n<mat-form-field [floatLabel]=\"'always'\">\r\n  <mat-label>Phone</mat-label>\r\n  <mat-phone-number-input [preferredCountries]=\"['us', 'tz']\" [enablePlaceholder]=\"true\" [enableSearch]=\"true\" name=\"phone\" describedBy=\"phoneInput\" formControlName=\"phone\" />\r\n  <mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>\r\n  <mat-error *ngIf=\"f.form.controls['phone']?.errors?.required\">Required Field</mat-error>\r\n  <mat-error *ngIf=\"f.form.controls['phone']?.errors?.validatePhoneNumber\">Invalid Number</mat-error>\r\n</mat-form-field>\r\n```\r\n\r\n## Inputs\r\n\r\n| Options            | Type       | Default      | Description                                                                         |\r\n| ------------------ | ---------- | ------------ | ----------------------------------------------------------------------------------- |\r\n| initialCountry     | `string`   | `undefined`  | Sets the initially selected country by its ISO 3166-1 code (e.g. 'us', 'pl').       |\r\n| enablePlaceholder  | `boolean`  | `false`      | Input placeholder text, which adapts to the country selected.                       |\r\n| enableSearch       | `boolean`  | `false`      | Whether to display a search bar to help filter down the list of countries           |\r\n| format             | `string`   | `default`    | Format of \"as you type\" input. Possible values: national, international, default    |\r\n| placeholder        | `string`   | `undefined`  | Placeholder for the input component.                                                |\r\n| maxLength          | `number`   | `15`         | max length of the input.                                                            |\r\n| onlyCountries      | `string[]` | `[]`         | List of manually selected country abbreviations, which will appear in the dropdown. |\r\n| preferredCountries | `string[]` | `[]`         | List of country abbreviations, which will appear at the top.                        |\r\n| resetOnChange      | `boolean`  | `false`      | Reset input on country change                                                       |\r\n| searchPlaceholder  | `string`   | `Search ...` | Placeholder for the search input                                                    |\r\n\r\n## Outputs\r\n\r\n| Options        | Type                    | Default     | Description       |\r\n| -------------- | ----------------------- | ----------- | ----------------- |\r\n| countryChanged | `EventEmitter<Country>` | `undefined` | On country change |\r\n\r\n## Css variable\r\n\r\n| Name                                  | Default        | Explanation                                                                   |\r\n| ------------------------------------- | -------------- | ----------------------------------------------------------------------------- |\r\n| `--mat-phone-number-input-opacity`             | `1`            | If you wish both, the country flag and the placeholder to be shown by default |\r\n| `--mat-phone-number-input-selector-opacity`    | `1`            | If you wish the country flag to be shown by default                           |\r\n| `--mat-phone-number-input-placeholder-opacity` | `1`            | If you wish the placeholder flag to be shown by default                       |\r\n| `--mat-phone-number-input-flag-display`        | `inline-block` | If you wish to hide the country flag                                          |\r\n\r\n## Validator\r\n\r\nIn case you had to manually remove the validator, the library exported it so you could add it back again.\r\n\r\n| Name                   | Description                                     | Example                                              |\r\n| ---------------------- | ----------------------------------------------- | ---------------------------------------------------- |\r\n| `matPhoneNumberInputValidator` | The actual phone validator used for the control | `phoneControl.addValidators([matPhoneNumberInputValidator])` |\r\n\r\n## Library Contributions\r\n\r\n- Fork repo.\r\n- Go to `./libs/mat-phone-number-input`\r\n- Update `./src/lib` with new functionality.\r\n- Update README.md\r\n- Pull request.\r\n\r\n### Helpful commands\r\n\r\n- Copy license and readme files: `$ npm run copy-files`\r\n- Publish package: `$ npm run publish`\r\n\r\n<!-- ### Use locally\r\n\r\nAfter building and creating package, you can use it locally too.\r\n\r\nIn your project run:\r\n\r\n`$ npm install --save {{path to your local '*.tgz' package file}}` -->\r\n\r\n## Authors and acknowledgment\r\n\r\n- Maintainer [Munir I Said](https://github.com/Muneersahel)\r\n- Forked from [ngx-mat-input-tel](https://github.com/rbalet/ngx-mat-input-tel)\r\n","readmeFilename":"README.md"}