Merge pull request #156 from pavlikxor/angular-14-support

Angular 14 support
tanansatpal · Aug 2, 2022 · dfbf3e3 · dfbf3e3
2 parents 9b42c79 + dd0ae7b
commit dfbf3e3
Show file tree

Hide file tree

Showing 29 changed files with 5,999 additions and 6,127 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -28,5 +28,6 @@ jobs:
         cache: 'npm'
     - run: npm ci
     - run: npm run lint
-    - run: npm run build --if-present
+    - run: npm run build ngx-mat-intl-tel-input-tester
+    - run: npm run build_lib
     - run: npm run test-headless
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -57,3 +57,12 @@ This release supports the Angular version 13.
 ### Features
 
 * Upgraded to Angular version 13 ([#131](https://github.com/tanansatpal/ngx-mat-intl-tel-input/issues/131))
+
+<a name="5.0.0"></a>
+# 5.0.0 (2022-08-02)
+
+This release supports the Angular version 14.
+
+### Features
+
+* Upgraded to Angular version 14 ([#155](https://github.com/tanansatpal/ngx-mat-intl-tel-input/issues/155))
diff --git a/README.md b/README.md
@@ -4,8 +4,8 @@ An Angular Material package for entering and validating international telephone
 
 **Supports:**
 
-- Angular 13
-- Angular Material 13
+- Angular 14
+- Angular Material 14
 - ReactiveFormsModule
 - FormsModule
 - Validation with [libphonenumber-js](https://github.com/catamphetamine/libphonenumber-js)
@@ -14,42 +14,37 @@ An Angular Material package for entering and validating international telephone
 
 ### Install Dependencies
 
-```$ npm install libphonenumber-js --save```
+`$ npm install libphonenumber-js --save`
 
 ### Install This Library
 
-```$ npm install ngx-mat-intl-tel-input --save```
+`$ npm install ngx-mat-intl-tel-input --save`
 
 ## Usage
 
 ### Import
 
-Add ```NgxMatIntlTelInputModule``` to your module file:
-
-```javascript
-
-imports: [
-    NgxMatIntlTelInputModule,
-  ]
+Add `NgxMatIntlTelInputComponent` to your component file:
 
+```ts
+imports: [NgxMatIntlTelInputComponent];
 ```
 
 ## Example
 
 Refer to main app in this repository for working example.
 
 ```html
-
 <form #f="ngForm" [formGroup]="phoneForm">
   <ngx-mat-intl-tel-input
-  [preferredCountries]="['us', 'gb']"
-  [enablePlaceholder]="true"
-  [enableSearch]="true"
-  name="phone"
-  describedBy="phoneInput"
-  formControlName="phone"></ngx-mat-intl-tel-input>
+    [preferredCountries]="['us', 'gb']"
+    [enablePlaceholder]="true"
+    [enableSearch]="true"
+    name="phone"
+    describedBy="phoneInput"
+    formControlName="phone"
+  ></ngx-mat-intl-tel-input>
 </form>
-
 ```
 
 ```html
@@ -75,45 +70,50 @@ If you want to show the sample number for the country selected or errors , use m
     [onlyCountries]="['us', 'gb', 'es']"
     [enablePlaceholder]="true"
     name="phone"
-    formControlName="phone" #phone></ngx-mat-intl-tel-input>
+    formControlName="phone"
+    #phone
+  ></ngx-mat-intl-tel-input>
   <mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>
-  <mat-error *ngIf="f.form.controls['phone']?.errors?.required">Required Field</mat-error>
-  <mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber">Invalid Number</mat-error>
+  <mat-error *ngIf="f.form.controls['phone']?.errors?.required"
+    >Required Field</mat-error
+  >
+  <mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber"
+    >Invalid Number</mat-error
+  >
 </form>
 ```
 
 ## Options
 
-| Options                       | Type                   | Default            | Description                                                                         |
-| ------------------------------|------------------------|--------------------|-------------------------------------------------------------------------------------|
-| preferredCountries            | ```string[]```         | ```[]```           | List of country abbreviations, which will appear at the top.                        |
-| onlyCountries                 | ```string[]```         | ```[]```           | List of manually selected country abbreviations, which will appear in the dropdown. |                    |
-| inputPlaceholder              | ```string```           | ```undefined```    | Placeholder for the input component.                                                |
-| enablePlaceholder             | ```boolean```          | ```true```         | Input placeholder text, which adapts to the country selected.                      |
-| enableSearch                  | ```boolean```          | ```false```        | Whether to display a search bar to help filter down the list of countries          |
-| format                        | ```string```           | ```default```      | Format of "as you type" input. Possible values: national, international, default    |
-| describedBy                   | ```string```           | ```undefined```      | Use aria-described by with the input field    |
-
+| Options            | Type       | Default     | Description                                                                         |
+| ------------------ | ---------- | ----------- | ----------------------------------------------------------------------------------- | --- |
+| preferredCountries | `string[]` | `[]`        | List of country abbreviations, which will appear at the top.                        |
+| onlyCountries      | `string[]` | `[]`        | List of manually selected country abbreviations, which will appear in the dropdown. |     |
+| inputPlaceholder   | `string`   | `undefined` | Placeholder for the input component.                                                |
+| enablePlaceholder  | `boolean`  | `true`      | Input placeholder text, which adapts to the country selected.                       |
+| enableSearch       | `boolean`  | `false`     | Whether to display a search bar to help filter down the list of countries           |
+| format             | `string`   | `default`   | Format of "as you type" input. Possible values: national, international, default    |
+| describedBy        | `string`   | `undefined` | Use aria-described by with the input field                                          |
 
 ## Library Contributions
 
 - Fork repo.
-- Go to ```./projects/ngx-mat-intl-tel-input```
-- Update ```./src/lib``` with new functionality.
+- Go to `./projects/ngx-mat-intl-tel-input`
+- Update `./src/lib` with new functionality.
 - Update README.md
 - Pull request.
 
 ### Helpful commands
 
-- Build lib: ```$ npm run build_lib```
-- Copy license and readme files: ```$ npm run copy-files```
-- Create package: ```$ npm run npm_pack```
-- Build lib and create package: ```$ npm run package```
+- Build lib: `$ npm run build_lib`
+- Copy license and readme files: `$ npm run copy-files`
+- Create package: `$ npm run npm_pack`
+- Build lib and create package: `$ npm run package`
 
 ### Use locally
 
 After building and creating package, you can use it locally too.
 
 In your project run:
 
-```$ npm install --save {{path to your local '*.tgz' package file}}```
+`$ npm install --save {{path to your local '*.tgz' package file}}`
diff --git a/angular.json b/angular.json
@@ -8,6 +8,15 @@
       "sourceRoot": "projects/ngx-mat-intl-tel-input/src",
       "projectType": "library",
       "prefix": "lib",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "standalone": true
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
@@ -62,7 +71,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "projects/ngx-mat-intl-tel-input-tester/src/styles.css"
+              "projects/ngx-mat-intl-tel-input-tester/src/styles.scss"
             ],
             "scripts": []
           },
@@ -124,7 +133,7 @@
               "projects/ngx-mat-intl-tel-input-tester/src/assets"
             ],
             "styles": [
-              "projects/ngx-mat-intl-tel-input-tester/src/styles.css"
+              "projects/ngx-mat-intl-tel-input-tester/src/styles.scss"
             ],
             "scripts": []
           }
@@ -153,8 +162,7 @@
       }
     }
   },
-  "defaultProject": "ngx-mat-intl-tel-input",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }