fix(enablePlaceholder): working again

README.md

@@ -99,10 +99,10 @@ If you want to show the sample number for the country selected or errors , use m
 
 | Options            | Type       | Default      | Description                                                                         |
 | ------------------ | ---------- | ------------ | ----------------------------------------------------------------------------------- |
-| enablePlaceholder  | `boolean`  | `true`       | Input placeholder text, which adapts to the country selected.                       |
+| enablePlaceholder  | `boolean`  | `false`      | 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    |
-| inputPlaceholder   | `string`   | `undefined`  | Placeholder for the input component.                                                |
+| placeholder        | `string`   | `undefined`  | Placeholder for the input component.                                                |
 | maxLength          | `number`   | `15`         | max length of the input.                                                            |
 | onlyCountries      | `string[]` | `[]`         | List of manually selected country abbreviations, which will appear in the dropdown. |
 | preferredCountries | `string[]` | `[]`         | List of country abbreviations, which will appear at the top.                        |
@@ -116,10 +116,12 @@ If you want to show the sample number for the country selected or errors , use m
 | countryChanged | `EventEmitter<Country>` | `undefined` | On country change |
 
 ## Css variable
-| Name                            | Default        | Explanation                                         |
-| ------------------------------- | -------------- | --------------------------------------------------- |
-| `--ngxMatInputTel-opacity`      | `0`            | If you wish the country flag to be shown by default |
-| `--ngxMatInputTel-flag-display` | `inline-block` | If you wish to hide the country flag                |
+| Name                                   | Default        | Explanation                                                                   |
+| -------------------------------------- | -------------- | ----------------------------------------------------------------------------- |
+| `--ngxMatInputTel-opacity`             | `0`            | If you wish both, the country flag and the placeholder to be shown by default |
+| `--ngxMatInputTel-selector-opacity`    | `0`            | If you wish the country flag to be shown by default                           |
+| `--ngxMatInputTel-placeholder-opacity` | `0`            | If you wish the placeholder flag to be shown by default                       |
+| `--ngxMatInputTel-flag-display`        | `inline-block` | If you wish to hide the country flag                                          |
 
 ## Library Contributions
 

projects/ngx-mat-input-tel-tester/src/app/app.component.html

@@ -10,16 +10,21 @@ <h3 id="phoneInput">Test International Telephone Input Form</h3>
         enablePlaceholder
         enableSearch
         [formControl]="phoneForm.controls.phone"
-        placeholder="Enter Number"
         describedBy="phoneInput"
         required
         #phone
+        maxLength="20"
       ></ngx-mat-input-tel>
       <mat-hint>e.g. {{ phone.selectedCountry.placeHolder }}</mat-hint>
       <mat-error *ngIf="phoneForm.controls.phone.errors?.required"> Required Field </mat-error>
       <mat-error *ngIf="f.submitted && phoneForm.controls.phone.errors?.validatePhoneNumber">
         Invalid Number
       </mat-error>
+      <mat-error *ngIf="phoneForm.controls.phone.errors?.maxlength">
+        Length:{{ phoneForm.controls.phone.errors?.maxlength.actualLength }}/{{
+          phoneForm.controls.phone.errors?.maxlength.requiredLength
+        }}
+      </mat-error>
     </mat-form-field>
 
     <div class="buttons-container">
@@ -64,8 +69,7 @@ <h2>Required & PlaceHolder</h2>
         [searchPlaceholder]="'Buscar...'"
         [formControl]="profileForm.controls.phone"
         resetOnChange
-        placeholder="Enter Number"
-        enablePlaceholder
+        placeholder="Your number"
         enableSearch
         #phone1
       ></ngx-mat-input-tel>

projects/ngx-mat-input-tel-tester/src/app/app.component.ts

@@ -44,7 +44,7 @@ export class AppComponent implements AfterViewInit {
   @ViewChild(NgxMatInputTelComponent) phoneInput: NgxMatInputTelComponent | undefined
 
   phoneForm = new FormGroup<PhoneForm>({
-    phone: new FormControl(null, [Validators.required, Validators.maxLength(9)]),
+    phone: new FormControl(null, [Validators.required, Validators.maxLength(12)]),
   })
 
   profileForm = new FormGroup<ProfileForm>({
@@ -67,6 +67,12 @@ export class AppComponent implements AfterViewInit {
     }
 
     this.phoneForm.valueChanges.subscribe((value) => {
+      // Only emitting correct number
+      console.log('phoneForm.valueChanges', value)
+    })
+
+    this.profileForm.valueChanges.subscribe((value) => {
+      // Only emitting correct number
       console.log('phoneForm.valueChanges', value)
     })
   }

projects/ngx-mat-input-tel/README.md

@@ -99,10 +99,10 @@ If you want to show the sample number for the country selected or errors , use m
 
 | Options            | Type       | Default      | Description                                                                         |
 | ------------------ | ---------- | ------------ | ----------------------------------------------------------------------------------- |
-| enablePlaceholder  | `boolean`  | `true`       | Input placeholder text, which adapts to the country selected.                       |
+| enablePlaceholder  | `boolean`  | `false`      | 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    |
-| inputPlaceholder   | `string`   | `undefined`  | Placeholder for the input component.                                                |
+| placeholder        | `string`   | `undefined`  | Placeholder for the input component.                                                |
 | maxLength          | `number`   | `15`         | max length of the input.                                                            |
 | onlyCountries      | `string[]` | `[]`         | List of manually selected country abbreviations, which will appear in the dropdown. |
 | preferredCountries | `string[]` | `[]`         | List of country abbreviations, which will appear at the top.                        |

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

@@ -89,6 +89,7 @@
   </mat-menu>
 
   <input
+    class="ngx-mat-input-tel-input"
     matInput
     type="tel"
     inputmode="tel"
@@ -99,7 +100,7 @@
     [(ngModel)]="phoneNumber"
     (ngModelChange)="onPhoneNumberChange()"
     [errorStateMatcher]="errorStateMatcher"
-    [placeholder]="inputPlaceholder"
+    [placeholder]="placeholder || $any(selectedCountry.placeHolder)"
     [disabled]="disabled"
     #focusable
     [maxlength]="maxLength"

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

@@ -3,8 +3,11 @@
     --ngxMatInputTel-flag-display: none;
   }
 
-  &.ngx-floating .country-selector {
-    opacity: 1;
+  &.ngx-floating {
+    .country-selector,
+    input.ngx-mat-input-tel-input::placeholder {
+      opacity: 1;
+    }
   }
 
   .ngx-mat-input-tel-container {
@@ -23,6 +26,12 @@
     padding-left: 4px;
     position: relative;
     z-index: 0;
+
+    &.ngx-mat-input-tel-input {
+      &::placeholder {
+        opacity: var(--ngxMatInputTel-placeholder-opacity, var(--ngxMatInputTel-opacity, 0));
+      }
+    }
   }
   .icon-wrapper {
     padding-right: 24px;
@@ -54,7 +63,7 @@
     height: initial;
     line-height: unset;
     padding: 1px;
-    opacity: var(--ngxMatInputTel-opacity, 0);
+    opacity: var(--ngxMatInputTel-selector-opacity, var(--ngxMatInputTel-opacity, 0));
     transition: opacity 200ms;
     border: unset;
     background-color: transparent;

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

@@ -118,35 +118,25 @@ export class NgxMatInputTelComponent
   @Input() autocomplete: 'off' | 'tel' = 'off'
   @Input() cssClass?: string
   @Input() errorStateMatcher: ErrorStateMatcher = this._defaultErrorStateMatcher
-  @Input() inputPlaceholder: string = ''
+  @Input() placeholder: string = ''
   @Input() maxLength: string | number = 15
   @Input() name?: string
   @Input() onlyCountries: string[] = []
   @Input() preferredCountries: string[] = []
   @Input() searchPlaceholder = 'Search ...'
-  @Input({ transform: booleanAttribute }) enablePlaceholder = true
+  @Input({ transform: booleanAttribute }) enablePlaceholder = false
   @Input({ transform: booleanAttribute }) enableSearch = false
   @Input({ transform: booleanAttribute }) resetOnChange = false
   @Input()
   set format(value: PhoneNumberFormat) {
     this._format = value
-    this.phoneNumber = this.formattedPhoneNumber
+    this.phoneNumber = this.formattedPhoneNumber()
     this.stateChanges.next()
   }
   get format(): PhoneNumberFormat {
     return this._format
   }
 
-  private _placeholder?: string
-  @Input()
-  set placeholder(value: string) {
-    this._placeholder = value
-    this.stateChanges.next(undefined)
-  }
-  get placeholder(): string {
-    return this._placeholder || ''
-  }
-
   private _required = false
   @Input({ transform: booleanAttribute })
   set required(value: boolean) {
@@ -188,14 +178,6 @@ export class NgxMatInputTelComponent
   private _previousFormattedNumber?: string
   private _format: PhoneNumberFormat = 'default'
 
-  static getPhoneNumberPlaceHolder(countryISOCode: any): string | undefined {
-    try {
-      return getExampleNumber(countryISOCode, Examples)?.number.toString()
-    } catch (e) {
-      return e as any
-    }
-  }
-
   onTouched = () => {}
   propagateChange = (_: any) => {}
 
@@ -221,13 +203,14 @@ export class NgxMatInputTelComponent
       this.stateChanges.next()
     })
 
-    this.fetchCountryData()
     if (this.ngControl != null) {
       this.ngControl.valueAccessor = this
     }
   }
 
   ngOnInit() {
+    this.fetchCountryData()
+
     if (this.preferredCountries.length) {
       this.preferredCountries.forEach((iso2) => {
         const preferredCountry = this.allCountries
@@ -282,17 +265,21 @@ export class NgxMatInputTelComponent
   }
 
   public onPhoneNumberChange(): void {
-    if (this.phoneNumber)
+    if (!this.phoneNumber) this.value = null
+    else
       try {
         this.numberInstance = parsePhoneNumberFromString(
           this.phoneNumber.toString(),
           this.selectedCountry.iso2.toUpperCase() as CC,
         )
+
         this.formatAsYouTypeIfEnabled()
         this.value = this.numberInstance?.number
+        if (!this.value) throw new Error('Incorrect phone number')
+
         if (this.numberInstance && this.numberInstance.isValid()) {
-          if (this.phoneNumber !== this.formattedPhoneNumber) {
-            this.phoneNumber = this.formattedPhoneNumber
+          if (this.phoneNumber !== this.formattedPhoneNumber()) {
+            this.phoneNumber = this.formattedPhoneNumber()
           }
           if (
             this.selectedCountry.iso2 !== this.numberInstance.country &&
@@ -305,11 +292,8 @@ export class NgxMatInputTelComponent
       } catch (e) {
         // if no possible numbers are there,
         // then the full number is passed so that validator could be triggered and proper error could be shown
-        this.value = this.phoneNumber.toString()
+        this.value = this.formattedPhoneNumber().toString()
       }
-    else {
-      this.value = null
-    }
 
     this.propagateChange(this.value)
     this._changeDetectorRef.markForCheck()
@@ -362,15 +346,21 @@ export class NgxMatInputTelComponent
       }
 
       if (this.enablePlaceholder) {
-        country.placeHolder = NgxMatInputTelComponent.getPhoneNumberPlaceHolder(
-          country.iso2.toUpperCase(),
-        )
+        country.placeHolder = this._getPhoneNumberPlaceHolder(country.iso2.toUpperCase())
       }
 
       this.allCountries.push(country)
     })
   }
 
+  private _getPhoneNumberPlaceHolder(countryISOCode: any): string | undefined {
+    try {
+      return getExampleNumber(countryISOCode, Examples)?.number
+    } catch (e) {
+      return e as any
+    }
+  }
+
   registerOnChange(fn: any): void {
     this.propagateChange = fn
   }
@@ -390,26 +380,24 @@ export class NgxMatInputTelComponent
       this.numberInstance = parsePhoneNumberFromString(value)
       if (this.numberInstance) {
         const countryCode = this.numberInstance.country
-        this.phoneNumber = this.formattedPhoneNumber
-        if (!countryCode) {
-          return
+        this.phoneNumber = this.formattedPhoneNumber()
+
+        if (!countryCode) return
+
+        this.selectedCountry = this.getCountry(countryCode)
+        if (
+          this.selectedCountry.dialCode &&
+          !this.preferredCountries.includes(this.selectedCountry.iso2)
+        ) {
+          this.preferredCountriesInDropDown.push(this.selectedCountry)
         }
-        setTimeout(() => {
-          this.selectedCountry = this.getCountry(countryCode)
-          if (
-            this.selectedCountry.dialCode &&
-            !this.preferredCountries.includes(this.selectedCountry.iso2)
-          ) {
-            this.preferredCountriesInDropDown.push(this.selectedCountry)
-          }
-          this.countryChanged.emit(this.selectedCountry)
+        this.countryChanged.emit(this.selectedCountry)
 
-          // Initial value is set
-          this._changeDetectorRef.markForCheck()
-          this.stateChanges.next()
-        }, 1)
+        // Initial value is set
+        this.stateChanges.next()
       } else {
         this.phoneNumber = value
+        this.stateChanges.next(undefined)
       }
     }
     // Angular bug
@@ -419,7 +407,6 @@ export class NgxMatInputTelComponent
 
     // Value is set from outside using setValue()
     this._changeDetectorRef.markForCheck()
-    this.stateChanges.next(undefined)
   }
 
   setDescribedByIds(ids: string[]) {
@@ -440,7 +427,7 @@ export class NgxMatInputTelComponent
     this.stateChanges.next(undefined)
   }
 
-  private get formattedPhoneNumber(): E164Number | NationalNumber {
+  private formattedPhoneNumber(): E164Number | NationalNumber {
     if (!this.numberInstance) {
       return (this.phoneNumber?.toString() || '') as E164Number | NationalNumber
     }