Skip to content

Commit

Permalink
Merge pull request #5 from juanjotorres90/develop
Browse files Browse the repository at this point in the history
feat: ✨ add support for Angular 18
  • Loading branch information
juanjotorres90 authored May 26, 2024
2 parents fd6e464 + d076c79 commit 4b37ef4
Show file tree
Hide file tree
Showing 21 changed files with 6,578 additions and 4,739 deletions.
10 changes: 8 additions & 2 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,18 @@
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:@nx/typescript"],
"rules": {}
"rules": {
"@typescript-eslint/no-extra-semi": "error",
"no-extra-semi": "off"
}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:@nx/javascript"],
"rules": {}
"rules": {
"@typescript-eslint/no-extra-semi": "error",
"no-extra-semi": "off"
}
},
{
"files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
Expand Down
21 changes: 21 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,27 @@ 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).

## [18.0.0] - 2024-05-26

### Added

- Add support for Angular 18.
- Add 'includeDialCode' option to include the dial code in the phone number input.
- Auto select number input after changing country code.
- Add support for Material 3 theming.
- Use of Signal Inputs to dynamically change the disabled or required state of the phone field.
- Add 'currentValue' output event to retrieve the current phone number value without using a FormControl.

### Fixed

- Fix Northern Mariana Islands number format.

### Changed

- Upgrade project to nx 19.1.
- Use of Signal Inputs for component options.
- The component is now zoneless.

## [17.3.0] - 2024-03-16

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

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

## Installation

`$ npm install ngx-material-intl-tel-input --save`

Ensure to include `provideAnimations()` in the providers array of your main.ts file to initialize your application with animations. Refer to the [Angular Docs](https://angular.io/api/platform-browser/animations/provideAnimations) for detailed instructions.
Ensure to include `provideAnimations()` and `provideHttpClient()` in the providers array of your main.ts file to initialize your application with animations and auto getting country code capabilities. Refer to the Angular Docs [provideAnimations](https://angular.dev/api/platform-browser/animations/provideAnimations#) and [provideHttpClient](https://angular.dev/api/common/http/provideHttpClient#) for detailed instructions.

Additionally, it's essential to incorporate an Angular Material theme by importing the necessary CSS for styling. Please consult the [Angular Material Theming guide](https://material.angular.io/guide/theming) for instructions on how to set up the theme.

Expand Down Expand Up @@ -60,6 +61,7 @@ imports: [NgxMaterialIntlTelInputComponent];
| autoSelectedCountry | `CountryISO \| string` | `''` | Sets the country to be auto selected. |
| numberValidation | `boolean` | `true` | Enables or disables phone number validation. |
| enableSearch | `boolean` | `true` | Enables or disables country search. |
| includeDialCode | `boolean` | `false` | Includes the dial code in the phone number input. |
| preferredCountries | `(CountryISO \| string)[]` | `[]` | Shows the specified countries on top of the list. |
| visibleCountries | `(CountryISO \| string)[]` | `[]` | Shows only the specified countries. |
| excludedCountries | `(CountryISO \| string)[]` | `[]` | Exclude the specified countries from the list. |
Expand All @@ -68,6 +70,12 @@ imports: [NgxMaterialIntlTelInputComponent];
| initialValue | `string` | `''` | Sets initial telephone number value |
| 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. |

## Contribute and develop locally

<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
Expand All @@ -86,7 +94,7 @@ To start your development once you have cloned this project, you must execute:

- Using Nodejs:

Node 20 is required.
Node 20.13.1 is required.

```bash
npm install
Expand Down
1 change: 0 additions & 1 deletion apps/ngx-material-intl-tel-input/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"outputPath": "dist/apps/ngx-material-intl-tel-input",
"index": "apps/ngx-material-intl-tel-input/src/index.html",
"browser": "apps/ngx-material-intl-tel-input/src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "apps/ngx-material-intl-tel-input/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
Expand Down
10 changes: 9 additions & 1 deletion apps/ngx-material-intl-tel-input/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,10 @@
<ngx-material-intl-tel-input></ngx-material-intl-tel-input>
<ngx-material-intl-tel-input
(currentValue)="getValue($event)"
></ngx-material-intl-tel-input>

@if (currentPhoneValue()) {
<div>Returned value: {{ currentPhoneValue() }}</div>
} @else {
<div>No value returned</div>
}
<router-outlet></router-outlet>
8 changes: 7 additions & 1 deletion apps/ngx-material-intl-tel-input/src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
:host {
display: flex;
flex-direction: column;
gap: 32px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
ngx-material-intl-tel-input {
ngx-material-intl-tel-input,
div {
max-width: 400px;
padding: 16px;
box-sizing: border-box;
display: block;
width: 100%;
}
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';
import { provideHttpClient } from '@angular/common/http';

describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent, RouterTestingModule],
imports: [AppComponent],
providers: [provideHttpClient()]
}).compileComponents();
});

Expand Down
8 changes: 7 additions & 1 deletion apps/ngx-material-intl-tel-input/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';

Expand All @@ -8,7 +8,13 @@ import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';
selector: 'ngx-material-intl-tel-input-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
title = 'ngx-material-intl-tel-input';
currentPhoneValue = signal<string>('');

getValue(value: string): void {
this.currentPhoneValue.set(value);
}
}
16 changes: 14 additions & 2 deletions apps/ngx-material-intl-tel-input/src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
import { ApplicationConfig } from '@angular/core';
import {
ApplicationConfig,
provideExperimentalZonelessChangeDetection
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
provideHttpClient,
withInterceptorsFromDi
} from '@angular/common/http';

export const appConfig: ApplicationConfig = {
providers: [provideRouter(appRoutes), provideAnimations()],
providers: [
provideRouter(appRoutes),
provideAnimations(),
provideHttpClient(withInterceptorsFromDi()),
provideExperimentalZonelessChangeDetection()
]
};
163 changes: 163 additions & 0 deletions apps/ngx-material-intl-tel-input/src/m3-theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #209ffc, secondary: #023871
$_palettes: (
primary: (
0: #000000,
10: #001d35,
20: #003256,
25: #003e68,
30: #00497a,
35: #00558d,
40: #0062a0,
50: #007bc8,
60: #0096f2,
70: #5db0ff,
80: #9ccaff,
90: #d0e4ff,
95: #e9f1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff
),
secondary: (
0: #000000,
10: #001b3d,
20: #003063,
25: #003b77,
30: #00468b,
35: #15529a,
40: #285ea7,
50: #4577c2,
60: #6191dd,
70: #7cacfa,
80: #a9c7ff,
90: #d6e3ff,
95: #ecf0ff,
98: #f9f9ff,
99: #fdfbff,
100: #ffffff
),
tertiary: (
0: #000000,
10: #241432,
20: #3a2948,
25: #463454,
30: #514060,
35: #5d4b6c,
40: #6a5779,
50: #836f93,
60: #9e89ad,
70: #b9a3c9,
80: #d5bee5,
90: #f1daff,
95: #faecff,
98: #fff7fe,
99: #fffbff,
100: #ffffff
),
neutral: (
0: #000000,
10: #1a1c1e,
20: #2f3033,
25: #3a3b3e,
30: #45474a,
35: #515255,
40: #5d5e61,
50: #76777a,
60: #909094,
70: #ababae,
80: #c6c6ca,
90: #e2e2e6,
95: #f1f0f4,
98: #f9f9fc,
99: #fdfcff,
100: #ffffff,
4: #0c0e11,
6: #121316,
12: #1e2022,
17: #282a2d,
22: #333538,
24: #38393c,
87: #dadadd,
92: #e8e8eb,
94: #eeedf1,
96: #f4f3f7
),
neutral-variant: (
0: #000000,
10: #171c22,
20: #2c3137,
25: #373c42,
30: #42474e,
35: #4e535a,
40: #5a5f66,
50: #73777f,
60: #8c9199,
70: #a7abb3,
80: #c2c7cf,
90: #dfe3eb,
95: #edf1f9,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff
)
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error)
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary
),
typography: (
brand-family: Roboto,
bold-weight: 400
)
)
);
$dark-theme: mat.define-theme(
(
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary
),
typography: (
brand-family: Roboto,
bold-weight: 400
)
)
);
Loading

0 comments on commit 4b37ef4

Please sign in to comment.