Merge commit '252497ff105b011b1f89c200f50891ca68fc9a7b' into develop

.prettierrc

@@ -3,5 +3,13 @@
   "singleQuote": true,
   "trailingComma": "all",
   "semi": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.4.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -25,7 +25,7 @@
     "@angular/platform-browser-dynamic": "^18.2.5",
     "@angular/router": "^18.2.5",
     "core-js": "^3.38.1",
-    "libphonenumber-js": "^1.11.8",
+    "libphonenumber-js": "^1.11.11",
     "rxjs": "~7.8.1",
     "tslib": "^2.7.0",
     "zone.js": "~0.14.10"
@@ -63,6 +63,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^18.2.1",
+    "prettier": "^3.3.3",
     "protractor": "~7.0.0",
     "semantic-release": "^24.1.1",
     "ts-node": "^10.9.2",

projects/ngx-mat-input-tel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.2.0",
+  "version": "18.4.0",
   "author": {
     "name": "Raphaël Balet",
     "email": "[email protected]"
@@ -14,7 +14,7 @@
     "@angular/forms": ">=15.x",
     "@angular/platform-browser": ">=15.x",
     "@angular/platform-browser-dynamic": ">=15.x",
-    "libphonenumber-js": "^1.11.8"
+    "libphonenumber-js": "^1.11.11"
   },
   "repository": {
     "type": "git",

projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html

@@ -8,63 +8,70 @@
     (menuOpened)="menuSearchInput?.nativeElement?.focus()"
   >
     <span class="country-selector-flag flag" [ngClass]="selectedCountry.flagClass"></span>
-    <span class="country-selector-code" *ngIf="selectedCountry?.dialCode"
-      >+{{ selectedCountry.dialCode }}</span
-    >
+
+    @if (selectedCountry.dialCode) {
+      <span class="country-selector-code">+{{ selectedCountry.dialCode }}</span>
+    }
   </button>
 
   <mat-menu
     #menu="matMenu"
     class="ngx-mat-input-tel-overlay-pane"
     [backdropClass]="'ngx-mat-input-tel-overlay-backdrop'"
   >
-    <input
-      #menuSearchInput
-      *ngIf="enableSearch"
-      class="country-search"
-      [(ngModel)]="searchCriteria"
-      type="text"
-      [placeholder]="searchPlaceholder"
-      (click)="$event.stopPropagation()"
-      style="
-        width: calc(100% - 4px);
-        height: 34px;
-        border-top: none;
-        border-right: none;
-        border-left: none;
-        border-image: initial;
-        border-bottom: 1px solid rgb(221, 221, 221);
-        font-size: 14px;
-        padding: 20px 10px 24px;
-        box-sizing: border-box;
-        background: transparent;
-        margin: 2px;
-      "
-    />
-    <button
-      type="button"
-      mat-menu-item
-      class="country-list-button"
-      *ngFor="let country of preferredCountriesInDropDown"
-      (click)="onCountrySelect(country, focusable)"
-    >
-      <div class="icon-wrapper">
-        <div class="flag" [ngClass]="country.flagClass"></div>
-      </div>
-      <div class="label-wrapper">
-        {{ country.name }}
-        <span [style]="!searchCriteria ? 'white-space: nowrap' : ''" *ngIf="country?.dialCode"
-          >+{{ country.dialCode }}
-          <ng-container *ngIf="country.areaCodes">
-            {{ country.areaCodes.join(', ') }}
-          </ng-container>
-        </span>
-      </div>
-    </button>
+    @if (enableSearch) {
+      <input
+        #menuSearchInput
+        class="country-search"
+        [(ngModel)]="searchCriteria"
+        type="text"
+        [placeholder]="searchPlaceholder"
+        (click)="$event.stopPropagation()"
+        style="
+          width: calc(100% - 4px);
+          height: 34px;
+          border-top: none;
+          border-right: none;
+          border-left: none;
+          border-image: initial;
+          border-bottom: 1px solid rgb(221, 221, 221);
+          font-size: 14px;
+          padding: 20px 10px 24px;
+          box-sizing: border-box;
+          background: transparent;
+          margin: 2px;
+        "
+      />
+    }
+    @for (country of preferredCountriesInDropDown; track $index) {
+      <button
+        type="button"
+        mat-menu-item
+        class="country-list-button"
+        (click)="onCountrySelect(country, focusable)"
+      >
+        <div class="icon-wrapper">
+          <div class="flag" [ngClass]="country.flagClass"></div>
+        </div>
+        <div class="label-wrapper">
+          {{ country.name }}
 
-    <mat-divider *ngIf="preferredCountriesInDropDown?.length"></mat-divider>
+          @if (country?.dialCode) {
+            <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
+              >+{{ country.dialCode }}
 
-    <ng-container *ngFor="let country of allCountries | search : searchCriteria">
+              @if (country.areaCodes) {
+                {{ country.areaCodes.join(', ') }}
+              }
+            </span>
+          }
+        </div>
+      </button>
+    }
+    @if (preferredCountriesInDropDown.length) {
+      <mat-divider></mat-divider>
+    }
+    @for (country of allCountries | search: searchCriteria; track $index) {
       <button
         type="button"
         mat-menu-item
@@ -76,15 +83,19 @@
         </div>
         <div class="label-wrapper">
           {{ country.name }}
-          <span [style]="!searchCriteria ? 'white-space: nowrap' : ''" *ngIf="country?.dialCode"
-            >+{{ country.dialCode }}
-            <ng-container *ngIf="country.areaCodes">
-              {{ country.areaCodes.join(', ') }}
-            </ng-container>
-          </span>
+
+          @if (country?.dialCode) {
+            <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
+              >+{{ country.dialCode }}
+
+              @if (country.areaCodes) {
+                {{ country.areaCodes.join(', ') }}
+              }
+            </span>
+          }
         </div>
       </button>
-    </ng-container>
+    }
   </mat-menu>
 
   <input

projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y'
 import { coerceBooleanProperty } from '@angular/cdk/coercion'
-import { NgClass, NgFor, NgIf } from '@angular/common'
+import { NgClass } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -81,8 +81,6 @@ const _ngxMatInputTelMixinBase: typeof ngxMatInputTelBase = mixinErrorState(
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
-    NgFor,
     NgClass,
 
     // Forms
@@ -195,7 +193,7 @@ export class NgxMatInputTelComponent
   ) {
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, _ngControl)
 
-    _focusMonitor.monitor(_elementRef, true).subscribe((origin) => {
+    _focusMonitor.monitor(_elementRef, true).subscribe((origin: any) => {
       if (this.focused && !origin) {
         this.onTouched()
       }
@@ -406,6 +404,7 @@ export class NgxMatInputTelComponent
     // }
 
     // Value is set from outside using setValue()
+    this.onPhoneNumberChange()
     this._changeDetectorRef.markForCheck()
   }