ngx-mat-input-tel 21.4.2 → 21.4.3

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

@@ -0,0 +1,42 @@
+<div class="ngx-mat-input-tel-container">
+  <button
+    type="button"
+    matRipple
+    (click)="openCountrySelector()"
+    (focus)="onDialCodeFocus()"
+    (blur)="onDialCodeBlur()"
+    class="country-selector"
+    [class.separate]="separateDialCode"
+    [class.focused]="separateDialCode && isDialCodeFocused"
+    [disabled]="disabled"
+    [attr.aria-label]="ariaLabel"
+  >
+    <ngx-mat-input-tel-flag
+      class="main-flag"
+      [country]="{
+        iso2: $selectedCountry().iso2,
+        dialCode: $selectedCountry().dialCode,
+      }"
+    ></ngx-mat-input-tel-flag>
+  </button>
+
+  <input
+    class="ngx-mat-input-tel-input"
+    matInput
+    type="tel"
+    inputmode="tel"
+    [name]="name || 'tel'"
+    [autocomplete]="autocomplete"
+    [ngClass]="cssClass"
+    (blur)="onPhoneInputBlurAndTouch()"
+    (focus)="onPhoneInputFocus()"
+    (keypress)="onInputKeyPress($event)"
+    [(ngModel)]="phoneNumber"
+    (ngModelChange)="onPhoneNumberChange()"
+    [errorStateMatcher]="errorStateMatcher"
+    [placeholder]="placeholder || ($selectedCountry() | removeIso) || ''"
+    [disabled]="disabled"
+    #focusable
+    [maxlength]="maxLength"
+  />
+</div>

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

@@ -0,0 +1,122 @@
+:host {
+  &.ngx-floating {
+    .country-selector,
+    input.ngx-mat-input-tel-input::placeholder {
+      opacity: 1;
+    }
+  }
+
+  .ngx-mat-input-tel-container {
+    display: flex;
+    height: var(--ngxMatInputTel-height, 24px);
+  }
+
+  input {
+    border: none;
+    background: none;
+    outline: none;
+    font: inherit;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 0;
+
+    &.ngx-mat-input-tel-input {
+      &::placeholder {
+        opacity: var(--ngxMatInputTel-placeholder-opacity, var(--ngxMatInputTel-opacity, 0));
+      }
+    }
+  }
+
+  .mdc-button__label {
+    margin-right: auto;
+  }
+
+  .dialCode-text {
+    white-space: nowrap;
+  }
+
+  .country-selector {
+    display: flex;
+    align-items: center;
+    border-radius: 0;
+    flex-shrink: 0;
+    height: initial;
+    line-height: unset;
+    padding: 1px;
+    opacity: var(--ngxMatInputTel-selector-opacity, var(--ngxMatInputTel-opacity, 0));
+    transition: opacity 200ms;
+    border: unset;
+    background-color: transparent;
+    font: {
+      size: inherit;
+      weight: inherit;
+    }
+    background: {
+      image: url(assets/arrow_drop_down_grey600_18dp.png);
+      position: right center;
+      repeat: no-repeat;
+      size: 18px auto;
+    }
+
+    &:disabled {
+      color: rgba(#000, 0.38);
+    }
+
+    &.separate {
+      position: absolute;
+      left: 0;
+      width: 114px;
+      border-color: var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline));
+      border-width: var(--mat-form-field-outlined-outline-width, 1px);
+      border-style: solid;
+      height: 100%;
+      padding-top: var(--mat-form-field-container-vertical-padding, 16px);
+      padding-bottom: var(--mat-form-field-container-vertical-padding, 16px);
+      min-height: var(--mat-form-field-container-height, 56px);
+      top: 0;
+      padding-right: max(
+        16px,
+        var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))
+      );
+      padding-left: max(
+        16px,
+        var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small)) + 4px
+      );
+      transform: translate(calc(-100% - var(--ngxMatInputTel-gap, 32px)));
+      border-radius: var(
+        --mat-form-field-outlined-container-shape,
+        var(--mat-sys-corner-extra-small)
+      );
+      outline: none;
+
+      &.focused {
+        border-color: var(--mat-form-field-outlined-focus-outline-color, var(--mat-sys-primary));
+        border-width: var(--mat-form-field-outlined-focus-outline-width, 2px);
+      }
+    }
+  }
+
+  .country-selector-code {
+    color: var(--mdc-outlined-text-field-input-text-color);
+    padding-right: 18px;
+  }
+
+  .country-list-button {
+    color: rgba(#000, 0.87);
+    direction: ltr;
+    font-size: 16px;
+    font-weight: 400;
+    height: initial;
+    line-height: normal;
+    min-height: 48px;
+    padding: 14px 24px;
+    text-align: left;
+    text-transform: none;
+    width: 100%;
+  }
+
+  .main-flag {
+    padding-right: 20px;
+  }
+}

package/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.spec.ts

@@ -0,0 +1,318 @@
+/// <reference types="vitest/globals" />
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { MatDividerModule } from "@angular/material/divider";
+import { vi } from "vitest";
+
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatInputModule } from "@angular/material/input";
+import { E164Number, NationalNumber } from "libphonenumber-js";
+import { NgxMatInputTelComponent } from "./ngx-mat-input-tel";
+
+describe("NgxMatInputTelComponent", () => {
+  let component: NgxMatInputTelComponent;
+  let fixture: ComponentFixture<NgxMatInputTelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        FormsModule,
+        MatInputModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatDividerModule,
+        ReactiveFormsModule,
+        NgxMatInputTelComponent,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxMatInputTelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("Separated Dial Code Focus", () => {
+    beforeEach(() => {
+      component.separateDialCode = true;
+      fixture.detectChanges();
+    });
+
+    it("should set isDialCodeFocused to true when dial code button receives focus", () => {
+      expect(component.isDialCodeFocused).toBe(false);
+      component.onDialCodeFocus();
+      expect(component.isDialCodeFocused).toBe(true);
+    });
+
+    it("should set isDialCodeFocused to false when dial code button loses focus", () => {
+      component.isDialCodeFocused = true;
+      component.onDialCodeBlur();
+      expect(component.isDialCodeFocused).toBe(false);
+    });
+
+    it("should set isPhoneInputFocused to true when phone input receives focus", () => {
+      expect(component.isPhoneInputFocused).toBe(false);
+      component.onPhoneInputFocus();
+      expect(component.isPhoneInputFocused).toBe(true);
+    });
+
+    it("should set isPhoneInputFocused to false when phone input loses focus", () => {
+      component.isPhoneInputFocused = true;
+      component.onPhoneInputBlur();
+      expect(component.isPhoneInputFocused).toBe(false);
+    });
+
+    it("should not set component.focused when dial code button gets focus in separated mode", () => {
+      component.focused = false;
+      component.onDialCodeFocus();
+      expect(component.focused).toBe(false);
+    });
+
+    it("should set component.focused when phone input gets focus in separated mode", () => {
+      component.focused = false;
+      component.onPhoneInputFocus();
+      expect(component.focused).toBe(true);
+    });
+
+    it("should verify separateDialCode and focus state in separated mode", () => {
+      component.onDialCodeFocus();
+      fixture.detectChanges();
+
+      // Verify component state
+      expect(component.separateDialCode).toBe(true);
+      expect(component.isDialCodeFocused).toBe(true);
+      expect(component.isPhoneInputFocused).toBe(false);
+      expect(component.focused).toBe(false); // mat-form-field should not be focused
+    });
+
+    it("should not have focused class on button when phone input has focus", () => {
+      component.onPhoneInputFocus();
+      fixture.detectChanges();
+
+      const button = fixture.nativeElement.querySelector(".country-selector");
+      expect(button.classList.contains("focused")).toBe(false);
+      expect(component.isDialCodeFocused).toBe(false);
+      expect(component.isPhoneInputFocused).toBe(true);
+      expect(component.focused).toBe(true); // mat-form-field should be focused
+    });
+
+    it("should handle rapid focus switching between elements", () => {
+      // Focus button
+      component.onDialCodeFocus();
+      expect(component.isDialCodeFocused).toBe(true);
+      expect(component.focused).toBe(false);
+
+      // Switch to input without blur event (edge case)
+      component.onPhoneInputFocus();
+      expect(component.isPhoneInputFocused).toBe(true);
+      expect(component.focused).toBe(true);
+
+      // Now blur button
+      component.onDialCodeBlur();
+      expect(component.isDialCodeFocused).toBe(false);
+      expect(component.focused).toBe(true); // Should stay true because input is focused
+    });
+  });
+
+  describe("enablePlaceholder", () => {
+    it("should populate selectedCountry placeholder when enablePlaceholder is set before ngOnInit", () => {
+      // Create a new fixture so we can set the input before the component initialises
+      const localFixture = TestBed.createComponent(NgxMatInputTelComponent);
+      const localComponent = localFixture.componentInstance;
+
+      localComponent.enablePlaceholder = true;
+      localComponent.defaultCountry = "US";
+
+      // detectChanges triggers ngOnInit
+      localFixture.detectChanges();
+
+      expect(localComponent.$selectedCountry().placeholder).toBeTruthy();
+    });
+
+    it("should leave selectedCountry placeholder empty when enablePlaceholder is not set", () => {
+      const localFixture = TestBed.createComponent(NgxMatInputTelComponent);
+      const localComponent = localFixture.componentInstance;
+
+      localComponent.defaultCountry = "US";
+      localFixture.detectChanges();
+
+      expect(localComponent.$selectedCountry().placeholder).toBeFalsy();
+    });
+
+    it("should populate placeholders when onlyCountries is set and enablePlaceholder is true", () => {
+      const localFixture = TestBed.createComponent(NgxMatInputTelComponent);
+      const localComponent = localFixture.componentInstance;
+
+      localComponent.enablePlaceholder = true;
+      localComponent.onlyCountries = ["US", "GB"];
+      localComponent.defaultCountry = "US";
+      localFixture.detectChanges();
+
+      expect(localComponent.$selectedCountry().placeholder).toBeTruthy();
+      expect(localComponent.$availableCountries().US.placeholder).toBeTruthy();
+      expect(localComponent.$availableCountries().GB.placeholder).toBeTruthy();
+    });
+  });
+
+  describe("Input and Label Bindings", () => {
+    it("should render input element", () => {
+      const input = fixture.nativeElement.querySelector("input");
+      expect(input).toBeTruthy();
+      expect(input.type).toBe("tel");
+    });
+
+    it("should bind placeholder input correctly", () => {
+      component.placeholder = "Enter phone number";
+      fixture.detectChanges();
+
+      const input = fixture.nativeElement.querySelector("input");
+      // When placeholder is set, it should be used (or country name if empty)
+      expect(component.placeholder).toBe("Enter phone number");
+    });
+
+    it("should render country selector button", () => {
+      const button = fixture.nativeElement.querySelector(".country-selector");
+      expect(button).toBeTruthy();
+    });
+
+    it("should bind aria-label input correctly", () => {
+      const customLabel = "Choose your country";
+      component.ariaLabel = customLabel;
+      fixture.detectChanges();
+
+      // Verify the property is set on the component
+      expect(component.ariaLabel).toBe(customLabel);
+    });
+  });
+
+  describe("ControlValueAccessor Implementation", () => {
+    it("should implement writeValue to update the phone number", () => {
+      const testPhoneNumber = "+33123456789";
+      component.writeValue(testPhoneNumber);
+      fixture.detectChanges();
+
+      expect(component.phoneNumber).toBeTruthy();
+      expect(component.numberInstance).toBeTruthy();
+      expect(component.numberInstance?.country).toBe("FR");
+    });
+
+    it("should update component phoneNumber when writeValue is called", () => {
+      const testPhoneNumber = "+33123456789";
+      component.writeValue(testPhoneNumber);
+      fixture.detectChanges();
+
+      expect(component.phoneNumber).toBeTruthy();
+      expect(component.numberInstance).toBeTruthy();
+    });
+
+    it("should handle empty value in writeValue", () => {
+      // First set a value
+      component.writeValue("+33123456789");
+      fixture.detectChanges();
+      expect(component.phoneNumber).toBeTruthy();
+      expect(component.value).toBeTruthy();
+
+      // writeValue with null/undefined/empty triggers onPhoneNumberChange
+      // which calls _setCountry. If phoneNumber is cleared manually, value becomes null
+      component.phoneNumber = "" as E164Number | NationalNumber;
+      component.onPhoneNumberChange();
+      fixture.detectChanges();
+
+      // After clearing phoneNumber and calling onPhoneNumberChange, value should be null
+      expect(component.value).toBeNull();
+    });
+
+    it("should register onChange callback", () => {
+      const mockCallback = vi.fn();
+      component.registerOnChange(mockCallback);
+
+      component.phoneNumber = "+33123456789" as E164Number | NationalNumber;
+      component.onPhoneNumberChange();
+
+      expect(mockCallback).toHaveBeenCalled();
+    });
+
+    it("should call onChange when user types in input", () => {
+      const mockCallback = vi.fn();
+      component.registerOnChange(mockCallback);
+
+      const input = fixture.nativeElement.querySelector("input");
+      input.value = "+33123456789";
+      input.dispatchEvent(new Event("input"));
+      fixture.detectChanges();
+
+      expect(mockCallback).toHaveBeenCalled();
+    });
+
+    it("should register onTouched callback", () => {
+      const mockCallback = vi.fn();
+      component.registerOnTouched(mockCallback);
+
+      expect(component.onTouched).toBe(mockCallback);
+    });
+  });
+
+  describe("Country Selection", () => {
+    it("should emit countryChanged when country is selected", () => {
+      vi.spyOn(component.countryChanged, "emit");
+
+      const country = component.getCountry("US");
+      component.onCountrySelect({
+        key: "US",
+        value: country,
+      });
+      fixture.detectChanges();
+
+      expect(component.countryChanged.emit).toHaveBeenCalledWith(country);
+    });
+
+    it("should update selected country when selecting a different country", () => {
+      const usCountry = component.getCountry("US");
+      component.onCountrySelect({
+        key: "US",
+        value: usCountry,
+      });
+      fixture.detectChanges();
+
+      expect(component.$selectedCountry().iso2).toBe("US");
+    });
+  });
+
+  describe("Disabled State", () => {
+    it("should set disabled state when setDisabledState is called with true", () => {
+      component.setDisabledState(true);
+      fixture.detectChanges();
+
+      expect(component.disabled).toBe(true);
+    });
+
+    it("should clear disabled state when setDisabledState is called with false", () => {
+      component.setDisabledState(true);
+      fixture.detectChanges();
+      component.setDisabledState(false);
+      fixture.detectChanges();
+
+      expect(component.disabled).toBe(false);
+    });
+
+    it("should respect disabled state for country selector", () => {
+      component.setDisabledState(true);
+      fixture.detectChanges();
+
+      expect(component.disabled).toBe(true);
+
+      // Verify that openCountrySelector respects disabled state
+      vi.spyOn(component["_dialog"], "open");
+      component.openCountrySelector();
+      expect(component["_dialog"].open).not.toHaveBeenCalled();
+    });
+  });
+});