ngx-dial-input 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dial-input",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Allows users to select a country and automatically formats the phone number input based on the selected country.",
   "author": "CroemInc",
   "license": "MIT",

package/projects/phone-input/package.json

@@ -1,12 +1,9 @@
 {
-  "name": "phone-input",
-  "version": "0.0.1",
+  "name": "ngx-dial-input",
+  "version": "2.0.2",
   "peerDependencies": {
-    "@angular/common": "15.1.1",
-    "@angular/core": "15.1.1"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
+    "@angular/common": "15.2.10",
+    "@angular/core": "15.2.10",
+    "@angular/forms": "^15.1.1"
+  }
 }

package/projects/phone-input/src/lib/phone-input.component.ts

@@ -55,14 +55,14 @@ import {
     <!-- Phone Input (80%) -->
     <input
       type="tel"
-      pattern="[0-9]*"
+      pattern="[0-9\\s\\-]*"
       inputmode="numeric"
       class="phone-input"
       [placeholder]="placeholder"
       [(ngModel)]="phoneNumber"
       [ngClass]="{ 'error-border': isInvalid }"
       (input)="onPhoneInput()"
-      (keypress)="allowOnlyNumbers($event)"
+      (keypress)="allowPhoneCharacters($event)"
     />
   </div>
 
@@ -257,13 +257,15 @@ export class PhoneInputComponent implements ControlValueAccessor {
     }
   }
 
-  onSearchChange() {
+ onSearchChange() {
     const term = this.searchTerm.toLowerCase();
     this.countriesList = countries.filter(c =>
-      c.name.toLowerCase().includes(term)
+      c.name.toLowerCase().includes(term) ||
+      (c.native?.toLowerCase().includes(term))
     );
   }
 
+
   selectCountry(country: any) {
     this.selectedCountry = country;
     this.searchTerm = '';
@@ -277,23 +279,28 @@ export class PhoneInputComponent implements ControlValueAccessor {
   }
 
   private emitPhoneChange() {
-    const digitsOnly = this.phoneNumber.replace(/\D/g, '');
-    const length = digitsOnly.length;
+    const raw = this.phoneNumber || '';
+    const digitsOnly = raw.replace(/\D/g, '');
+    const hyphenCount = (raw.match(/-/g) || []).length;
+    const spaceCount = (raw.match(/ /g) || []).length;
 
-    const expectedLength = this.selectedCountry?.phoneLength;
+    const totalChars = this.phoneNumber.length;
+    const maxAllowedLength = this.selectedCountry?.phoneLength + hyphenCount + spaceCount;
 
-    if (expectedLength) {
-      this.isInvalid = length !== expectedLength;
-    } else {
-      // fallback validation
-      this.isInvalid = length < 7 || length > 12;
+    if (digitsOnly.length !== this.selectedCountry?.phoneLength) {
+      this.isInvalid = true;
     }
-
-    const fullPhone = this.selectedCountry.dialCode + this.phoneNumber;
+    else if (totalChars > maxAllowedLength) {
+      this.isInvalid = true;
+    }
+    else {
+      this.isInvalid = false;
+    }
+    const fullPhone = this.selectedCountry.dialCode + raw;
 
     const structuredValue = {
       e164Number: fullPhone,
-      nationalNumber: this.phoneNumber,
+      nationalNumber: raw,
       dialCode: this.selectedCountry.dialCode,
       countryCode: this.selectedCountry.iso2,
       isValid: !this.isInvalid,
@@ -326,13 +333,16 @@ export class PhoneInputComponent implements ControlValueAccessor {
   registerOnTouched(fn: any): void {
     this.onTouched = fn;
   }
-  allowOnlyNumbers(event: KeyboardEvent) {
-  const charCode = event.charCode;
+  allowPhoneCharacters(event: KeyboardEvent) {
+    const allowedChars = [' ', '-'];
+    const charCode = event.charCode;
+
+    // Allow digits 0–9
+    if (charCode >= 48 && charCode <= 57) return;
+
+    // Allow hyphen and space
+    if (allowedChars.includes(event.key)) return;
 
-  // Allow only digits (0–9)
-  if (charCode < 48 || charCode > 57) {
     event.preventDefault();
   }
 }
-
-}