Skip to content

Commit

Permalink
Merge pull request #32 from juanjotorres90/feature/current-country-code
Browse files Browse the repository at this point in the history 
feat: ✨ add 'currentCountryCode' output event to retrieve the current country code number selected
  • Loading branch information
@juanjotorres90
juanjotorres90 authored Dec 21, 2024
2 parents a34d6e9 + c814f56 commit 13937e6
Show file tree
Hide file tree
Showing 15 changed files with 4,094 additions and 1,959 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ jobs:

strategy:
matrix:
node-version: [20.x]
node-version: [22.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
Expand Down
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [19.1.0] - 2024-12-21

### Added

- Add 'currentCountryCode' output event to retrieve the current country code number selected ([#30](https://github.com/juanjotorres90/ngx-material-intl-tel-input/issues/30)).
- Add 'currentCountryISO' output event to retrieve the current country ISO code selected ([#31](https://github.com/juanjotorres90/ngx-material-intl-tel-input/issues/31)).

## [19.0.0] - 2024-12-07

### Added
Expand Down
14 changes: 8 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber

| ngx-material-intl-tel-input | Angular |
| --------------------------- | --------- |
| 19.0.0 | >= 19.0.0 |
| 19.0.0 - 19.1.0 | >= 19.0.0 |
| 18.0.0 - 18.2.1 | >= 18.0.0 |
| 0.0.1 - 17.3.0 | >= 17.2.0 |

Expand Down Expand Up @@ -74,15 +74,17 @@ imports: [NgxMaterialIntlTelInputComponent];
| iconMakeCall | `boolean` | `true` | Click on phone icon to trigger call action. |
| initialValue | `string` | `''` | Sets initial telephone number value |
| useMask | `boolean` | `false` | Use mask for phone number input. |
| forceSelectedCountryCode | `string` | `false` | If useMask is active it forces the selected country code to be displayed |
| showMaskPlaceholder | `string` | `false` | If useMask is active it shows the placeholder for the mask |
| forceSelectedCountryCode | `boolean` | `false` | If useMask is active it forces the selected country code to be displayed |
| showMaskPlaceholder | `boolean` | `false` | If useMask is active it shows the placeholder for the mask |
| textLabels | `TextLabels` | {mainLabel: 'Phone number', codePlaceholder: 'Code', searchPlaceholderLabel: 'Search', noEntriesFoundLabel: 'No countries found', nationalNumberLabel: 'Number', hintLabel: 'Select country and type your phone number', invalidNumberError: 'Number is not valid', requiredError: 'This field is required'} | Overrides all component text labels |

## Events

| Event | Type | Default | Description |
| ------------ | -------- | ------- | -------------------------------------------- |
| currentValue | `string` | `''` | Emitted when the value of the input changes. |
| Event | Type | Default | Description |
| ------------------ | -------- | ------- | -------------------------------------------------------------------- |
| currentValue | `string` | `''` | Full phone number value emitted when the value of the input changes. |
| currentCountryCode | `string` | `''` | Country code value emitted when the value of the input changes. |
| currentCountryISO | `string` | `''` | Country ISO value emitted when the value of the input changes. |

## Contribute and develop locally

Expand Down
14 changes: 14 additions & 0 deletions apps/ngx-material-intl-tel-input/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<form [formGroup]="formTestGroup" (ngSubmit)="onSubmit()">
<ngx-material-intl-tel-input
(currentValue)="getValue($event)"
(currentCountryCode)="getCountryCode($event)"
(currentCountryISO)="getCountryISO($event)"
fieldControlName="phone"
[emojiFlags]="false"
[includeDialCode]="false"
Expand Down Expand Up @@ -30,6 +32,18 @@
<div>
Returned value: <br /><mat-chip>{{ currentPhoneValue() }}</mat-chip>
</div>
<div class="current-country-code-container">
@if (currentCountryCode()) {
<div>
Country code: <br /><mat-chip>{{ currentCountryCode() }}</mat-chip>
</div>
}
@if (currentCountryISO()) {
<div>
Country ISO: <br /><mat-chip>{{ currentCountryISO() }}</mat-chip>
</div>
}
</div>
} @else {
<div>No value returned</div>
}
Expand Down
12 changes: 12 additions & 0 deletions apps/ngx-material-intl-tel-input/src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,18 @@
margin: 0 auto;
}
}
.current-country-code-container {
display: flex;
flex-direction: row;
gap: 8px;
div {
display: flex;
gap: 8px;
align-items: center;
flex: 1;
width: auto;
}
}
ngx-material-intl-tel-input,
div {
max-width: 400px;
Expand Down
20 changes: 20 additions & 0 deletions apps/ngx-material-intl-tel-input/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';
export class AppComponent {
title = 'ngx-material-intl-tel-input';
currentPhoneValue = signal<string>('');
currentCountryCode = signal<string>('');
currentCountryISO = signal<string>('');
submittedPhoneValue = signal<string>('');
formTestGroup: FormGroup;
showSetPhoneInput = signal<boolean>(false);
Expand Down Expand Up @@ -74,4 +76,22 @@ export class AppComponent {
toggleShowSetPhoneInput(): void {
this.showSetPhoneInput.set(!this.showSetPhoneInput());
}

/**
* Sets the current country code to the provided value.
*
* @param value - The new country code to set.
*/
getCountryCode(value: string): void {
this.currentCountryCode.set(value);
}

/**
* Sets the current country ISO code to the provided value.
*
* @param value - The new ISO code to set.
*/
getCountryISO(value: string): void {
this.currentCountryISO.set(value);
}
}
4 changes: 2 additions & 2 deletions eslint.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ module.exports = [
})
.map((config) => ({
...config,
files: ['**/*.ts', '**/*.tsx'],
files: ['**/*.ts', '**/*.tsx', '**/*.cts', '**/*.mts'],
rules: {
...config.rules,
'@stylistic/no-extra-semi': 'error'
Expand All @@ -46,7 +46,7 @@ module.exports = [
})
.map((config) => ({
...config,
files: ['**/*.js', '**/*.jsx'],
files: ['**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs'],
rules: {
...config.rules,
'@stylistic/no-extra-semi': 'error'
Expand Down
13 changes: 12 additions & 1 deletion jest.preset.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
const nxPreset = require('@nx/jest/preset').default;

module.exports = { ...nxPreset };
module.exports = {
...nxPreset,
passWithNoTests: true,
coverageReporters: ['html', 'lcov', 'text-summary'],
collectCoverage: true,
collectCoverageFrom: [
'**/*.{ts,js,jsx}',
'!**/node_modules/**',
'!**/vendor/**'
],
testTimeout: 60000
};
14 changes: 8 additions & 6 deletions libs/ngx-material-intl-tel-input-lib/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber

| ngx-material-intl-tel-input | Angular |
| --------------------------- | --------- |
| 19.0.0 | >= 19.0.0 |
| 19.0.0 - 19.1.0 | >= 19.0.0 |
| 18.0.0 - 18.2.1 | >= 18.0.0 |
| 0.0.1 - 17.3.0 | >= 17.2.0 |

Expand Down Expand Up @@ -74,15 +74,17 @@ imports: [NgxMaterialIntlTelInputComponent];
| iconMakeCall | `boolean` | `true` | Click on phone icon to trigger call action. |
| initialValue | `string` | `''` | Sets initial telephone number value |
| useMask | `boolean` | `false` | Use mask for phone number input. |
| forceSelectedCountryCode | `string` | `false` | If useMask is active it forces the selected country code to be displayed |
| showMaskPlaceholder | `string` | `false` | If useMask is active it shows the placeholder for the mask |
| forceSelectedCountryCode | `boolean` | `false` | If useMask is active it forces the selected country code to be displayed |
| showMaskPlaceholder | `boolean` | `false` | If useMask is active it shows the placeholder for the mask |
| textLabels | `TextLabels` | {mainLabel: 'Phone number', codePlaceholder: 'Code', searchPlaceholderLabel: 'Search', noEntriesFoundLabel: 'No countries found', nationalNumberLabel: 'Number', hintLabel: 'Select country and type your phone number', invalidNumberError: 'Number is not valid', requiredError: 'This field is required'} | Overrides all component text labels |

## Events

| Event | Type | Default | Description |
| ------------ | -------- | ------- | -------------------------------------------- |
| currentValue | `string` | `''` | Emitted when the value of the input changes. |
| Event | Type | Default | Description |
| ------------------ | -------- | ------- | -------------------------------------------------------------------- |
| currentValue | `string` | `''` | Full phone number value emitted when the value of the input changes. |
| currentCountryCode | `string` | `''` | Country code value emitted when the value of the input changes. |
| currentCountryISO | `string` | `''` | Country ISO value emitted when the value of the input changes. |

## Contributors

Expand Down
2 changes: 1 addition & 1 deletion libs/ngx-material-intl-tel-input-lib/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-material-intl-tel-input",
"version": "19.0.0",
"version": "19.1.0",
"license": "MIT",
"repository": {
"type": "git",
Expand Down
Loading

0 comments on commit 13937e6

Please sign in to comment.