Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bump to support intl tel input 21 #54

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Bump to support intl tel input 21 #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
97d54ab
Bump to support intl-tel-input 20
Mar 18, 2024
7e8c806
Add intl-tel-input 21 support
Apr 4, 2024
1e6b8c0
Use types from intl-tel-input
Apr 5, 2024
9c549d8
Update README
Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -41,6 +41,7 @@ $ npm install intl-tel-input-ng --save / yarn add intl-tel-input-ng
- `labelCssClass`: The CSS class used to style the label associated to the input.
- `required`: Sets the `required` && `aria-required` attributes for the input.
- `[(E164PhoneNumber)]`: Outputs the phone number in E164 format if valid.
- `isMobileOnly`: (true by default) Allow `intl-tel-input` to check the number as a mobile number or not [isMobileOnly](https://github.com/jackocnr/intl-tel-input/issues/1535)

See the [intl-tel-input repository](https://github.com/jackocnr/intl-tel-input) for more documentation.

Expand All @@ -60,6 +61,7 @@ See the [intl-tel-input repository](https://github.com/jackocnr/intl-tel-input)
i18n: { ch: 'Suisse' },
onlyCountries: ['fr', 'ch']
}"
[isMobileOnly]=false
Copy link
Owner

@mpalourdio mpalourdio Apr 7, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please reindent and set to true as we'll switch to false by default

[(E164PhoneNumber)]="E164PhoneNumber"></intl-tel-input>
</form>
```
648 changes: 295 additions & 353 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Expand Up @@ -36,7 +36,7 @@
"@angular/common": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"intl-tel-input": "^19.0.0"
"intl-tel-input": "^21.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0",
Expand All @@ -59,7 +59,7 @@
"@typescript-eslint/parser": "6.10.0",
"eslint": "^8.53.0",
"eslint-plugin-rxjs": "^5.0.2",
"intl-tel-input": "^19.0.0",
"intl-tel-input": "^21.0.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
Expand Down
1 change: 0 additions & 1 deletion src/lib/@types/intl-tel-input/index.d.ts
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions src/lib/components/intl-tel-input.component.spec.ts
View file
Open in desktop
Expand Up @@ -43,6 +43,7 @@ describe('IntlTelInputComponent', () => {

it('should convert phone number to E164 format', () => {
component.options = {
initialCountry: 'ch',
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose we can't do better, uh

preferredCountries: ['ch'],
onlyCountries: ['ch', 'fr']
};
Expand All @@ -55,6 +56,7 @@ describe('IntlTelInputComponent', () => {

it('should re-set E164 phone number on countryChange', () => {
component.options = {
initialCountry: 'ch',
preferredCountries: ['ch'],
onlyCountries: ['ch', 'fr']
};
Expand Down
19 changes: 10 additions & 9 deletions src/lib/components/intl-tel-input.component.ts
View file
Open in desktop
Expand Up @@ -9,9 +9,7 @@

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
import intlTelInput from 'intl-tel-input';
import { IntlTelInputOptions } from '../model/intl-tel-input-options';
import { IntlTelInput } from "../model/intl-tel-input";
import intlTelInput, {Iti, SomeOptions} from 'intl-tel-input';
Copy link
Owner

@mpalourdio mpalourdio Apr 7, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With v21.0.6, tsconfig.json needs to be changed, like this

    "paths": {
      "intl-tel-input": [
        "node_modules/intl-tel-input/build/js/intlTelInput"
      ]
    },

and old path must be removed

    "paths": {
      "intl-tel-input": [
        "src/lib/@types/intl-tel-input"
      ]
    }

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is an error from upstream, will open a PR for discussion. We shouldn't need that

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jackocnr/intl-tel-input#1561

Copy link
Owner

@mpalourdio mpalourdio Apr 7, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

21.0.8+ fixes this, so not needed (old path must still be cleaned up). You may npm update anyway, and see how it goes.


@Component({
selector: 'intl-tel-input',
Expand All @@ -26,19 +24,22 @@ export class IntlTelInputComponent implements AfterViewInit {
@Input() label!: string;
@Input() labelCssClass!: string;
@Input() name = 'intl-tel-input-name';
@Input() options: IntlTelInputOptions = {};
@Input() options: SomeOptions = {};
@Input() required!: boolean;
@Input() isMobileOnly: boolean = true;
Copy link
Owner

@mpalourdio mpalourdio Apr 7, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should go in a dedicated commit, and tests should be added.Also, I think that it should be false by default to be the least breaking as possible


@Output() private E164PhoneNumberChange = new EventEmitter<string | null>();

@ViewChild('intlTelInput') private _inputElement!: ElementRef;

private _phoneNumber!: string;
private _intlTelInput!: IntlTelInput;
private _intlTelInput!: Iti;

ngAfterViewInit(): void {
const intlTelInputInstance = intlTelInput;
this._intlTelInput = intlTelInputInstance(this._inputElement.nativeElement, this.options);
this._intlTelInput = intlTelInput(this._inputElement.nativeElement, this.options);
}

get intlTelInput(): IntlTelInput {
get intlTelInput(): Iti {
return this._intlTelInput;
}

Expand All @@ -56,7 +57,7 @@ export class IntlTelInputComponent implements AfterViewInit {

i18nizePhoneNumber(): void {
this.E164PhoneNumber = null;
if (this._intlTelInput.isValidNumber()) {
if (this._intlTelInput.isValidNumber(this.isMobileOnly)) {
this.E164PhoneNumber = this._intlTelInput.getNumber();
}
this.E164PhoneNumberChange.emit(this.E164PhoneNumber);
Expand Down
169 changes: 0 additions & 169 deletions src/lib/model/intl-tel-input-options.ts
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions src/lib/model/intl-tel-input.ts
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions src/public_api.ts
View file
Open in desktop
Expand Up @@ -3,6 +3,4 @@
*/

export * from './lib/components/intl-tel-input.component';
export * from './lib/model/intl-tel-input-options';
export * from './lib/model/intl-tel-input';
export * from './lib/intl-tel-input-ng.module';