ngx-mat-input-tel 21.4.2 → 22.0.0

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

@@ -0,0 +1,12 @@
+export interface CountryFlag {
+  iso2: string;
+  dialCode: string;
+  name?: string;
+  areaCodes?: string[];
+}
+
+export interface Country extends CountryFlag {
+  name: string;
+  priority: number;
+  placeholder?: string;
+}

package/projects/ngx-mat-input-tel/src/lib/model/phone-number-format.model.ts

@@ -0,0 +1 @@
+export type PhoneNumberFormat = "default" | "national" | "international";

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

@@ -0,0 +1,82 @@
+<div class="country-select-dialog">
+  <div class="dialog-header">
+    <h2 mat-dialog-title>{{ data.ariaLabel }}</h2>
+    <button
+      matIconButton
+      type="button"
+      class="close-button"
+      [mat-dialog-close]
+      aria-label="Close dialog"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <mat-dialog-content>
+    @if (data.enableSearch) {
+      <mat-form-field class="search-field" appearance="outline" subscriptSizing="dynamic">
+        <mat-label>{{ data.searchPlaceholder }}</mat-label>
+        <input
+          #searchInput
+          matInput
+          type="text"
+          [(ngModel)]="$searchCriteria"
+          [placeholder]="data.searchPlaceholder"
+          autocomplete="off"
+        />
+        @if ($searchCriteria()) {
+          <button
+            matSuffix
+            matIconButton
+            type="button"
+            aria-label="Clear search"
+            (click)="$searchCriteria.set('')"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </mat-form-field>
+    }
+
+    <div class="country-list-container">
+      <mat-list>
+        @for (
+          country of $selectablePreferredCountriesInDropDown() | keyvalue: null;
+          track country.key
+        ) {
+          <mat-list-item
+            class="country-list-item"
+            (click)="onCountrySelect(country)"
+            role="button"
+            tabindex="0"
+            (keydown.enter)="onCountrySelect(country)"
+            (keydown.space)="onCountrySelect(country); $event.preventDefault()"
+          >
+            <ngx-mat-input-tel-flag
+              class="country-flag"
+              [country]="country.value"
+            ></ngx-mat-input-tel-flag>
+          </mat-list-item>
+        }
+        @if ($showDivider()) {
+          <mat-divider></mat-divider>
+        }
+        @for (country of $selectableCountries() | keyvalue: null; track country.key) {
+          <mat-list-item
+            class="country-list-item"
+            (click)="onCountrySelect(country)"
+            role="button"
+            tabindex="0"
+            (keydown.enter)="onCountrySelect(country)"
+            (keydown.space)="onCountrySelect(country); $event.preventDefault()"
+          >
+            <ngx-mat-input-tel-flag
+              class="country-flag"
+              [country]="country.value"
+            ></ngx-mat-input-tel-flag>
+          </mat-list-item>
+        }
+      </mat-list>
+    </div>
+  </mat-dialog-content>
+</div>

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

@@ -0,0 +1,91 @@
+:host {
+  .country-select-dialog {
+    display: flex;
+    flex-direction: column;
+    max-height: 80vh;
+    width: 100%;
+  }
+
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 8px 0 24px;
+    min-height: 64px;
+
+    h2 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 500;
+      flex: 1;
+      padding-left: 0;
+    }
+
+    .close-button {
+      flex-shrink: 0;
+    }
+  }
+
+  mat-dialog-content {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: calc(80vh - 64px);
+  }
+
+  .search-field {
+    width: 100%;
+    margin: 0;
+    padding: 8px 24px;
+    box-sizing: border-box;
+  }
+
+  .country-list-container {
+    overflow-y: auto;
+    flex: 1;
+    min-height: 200px;
+    max-height: calc(80vh - 64px - 80px);
+  }
+
+  .country-list-item {
+    cursor: pointer;
+    min-height: 48px;
+    padding: 8px 24px;
+    transition: background-color 0.2s ease;
+
+    &:hover,
+    &:focus {
+      background-color: rgba(0, 0, 0, 0.04);
+      outline: none;
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .country-flag {
+    width: 100%;
+  }
+
+  mat-divider {
+    margin: 8px 0;
+  }
+
+  // Responsive adjustments
+  @media (max-width: 599px) {
+    .country-select-dialog {
+      max-height: 100vh;
+    }
+
+    mat-dialog-content {
+      max-height: calc(100vh - 64px);
+    }
+
+    .country-list-container {
+      max-height: calc(100vh - 64px - 80px);
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+import { KeyValuePipe } from "@angular/common";
+import {
+  Component,
+  ElementRef,
+  Inject,
+  OnInit,
+  ViewChild,
+  computed,
+  signal
+} from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatListModule } from "@angular/material/list";
+import { Country } from "../model/country.model";
+import { NgxMatInputTelFlagComponent } from "../ngx-mat-input-tel-flag/ngx-mat-input-tel-flag";
+
+export interface NgxMatInputTelDialogData {
+  selectedCountry: Country;
+  availableCountries: Record<string, Country>;
+  preferredCountriesInDropDown: Record<string, Country>;
+  enableSearch: boolean;
+  searchPlaceholder: string;
+  ariaLabel: string;
+}
+
+@Component({
+  selector: "ngx-mat-input-tel-dialog",
+  templateUrl: "./ngx-mat-input-tel.dialog.html",
+  styleUrls: ["./ngx-mat-input-tel.dialog.scss"],
+  imports: [
+    // Forms
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+
+    // Mat
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatDividerModule,
+    KeyValuePipe,
+
+    // Components
+    NgxMatInputTelFlagComponent,
+  ],
+})
+export class NgxMatInputTelDialog implements OnInit {
+  @ViewChild("searchInput", { static: false }) searchInput?: ElementRef<HTMLInputElement>;
+
+  $searchCriteria = signal<string>("");
+
+  $selectableCountries = computed(() => {
+    let countries: Record<string, Country> = {};
+    if (!this.$searchCriteria() || this.$searchCriteria() === "") {
+      countries = this.data.availableCountries;
+    } else {
+      countries = this._getOnSearchCountries(
+        this.$searchCriteria().toLowerCase(),
+        this.data.availableCountries,
+      );
+    }
+
+    // Remove preferred countries from the main list by creating a new object
+    const preferredKeys = Object.keys(this.data.preferredCountriesInDropDown);
+    const result: Record<string, Country> = {};
+    for (const [iso2, country] of Object.entries(countries)) {
+      if (!preferredKeys.includes(iso2)) {
+        result[iso2] = country;
+      }
+    }
+
+    return result;
+  });
+
+  $selectablePreferredCountriesInDropDown = computed(() => {
+    if (!this.$searchCriteria() || this.$searchCriteria() === "") {
+      return this.data.preferredCountriesInDropDown;
+    }
+
+    return this._getOnSearchCountries(
+      this.$searchCriteria().toLowerCase(),
+      this.data.preferredCountriesInDropDown,
+    );
+  });
+
+  $showDivider = computed(() => {
+    return (
+      Object.entries(this.data.preferredCountriesInDropDown).length > 0 &&
+      Object.entries(this.$selectableCountries()).length > 0
+    );
+  });
+
+  constructor(
+    public dialogRef: MatDialogRef<NgxMatInputTelDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: NgxMatInputTelDialogData,
+  ) {}
+
+  ngOnInit(): void {
+    // Focus search input after view init
+    if (this.data.enableSearch) {
+      setTimeout(() => {
+        this.searchInput?.nativeElement?.focus();
+      }, 0);
+    }
+  }
+
+  onCountrySelect(country: { key: string; value: Country }): void {
+    this.dialogRef.close({
+      ...country.value,
+      iso2: country.key,
+    });
+  }
+
+  private _getOnSearchCountries(
+    searchTerm: string,
+    countries: Record<string, Country>,
+  ): Record<string, Country> {
+    const result: Record<string, Country> = {};
+    for (const country of Object.values(countries)) {
+      if (
+        country.name.toLowerCase().includes(searchTerm) ||
+        country.dialCode.includes(searchTerm) ||
+        (country.areaCodes && country.areaCodes.join(",").includes(searchTerm))
+      ) {
+        result[country.iso2] = country;
+      }
+    }
+    return result;
+  }
+}

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

@@ -0,0 +1,319 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+
+  .menu-flag {
+    display: var(--ngxMatInputTel-menu-flag-display);
+  }
+  @media print {
+    --ngxMatInputTel-flag-display: none;
+  }
+
+  $country-flags: (
+    KY: 0,
+    AC: -14px,
+    AE: -28px,
+    AF: -42px,
+    AG: -56px,
+    AI: -70px,
+    AL: -84px,
+    AM: -98px,
+    AO: -112px,
+    AQ: -126px,
+    AR: -140px,
+    AS: -154px,
+    AT: -168px,
+    AU: -182px,
+    AW: -196px,
+    AX: -210px,
+    AZ: -224px,
+    BA: -238px,
+    BB: -252px,
+    BD: -266px,
+    BE: -280px,
+    BF: -294px,
+    BG: -308px,
+    BH: -322px,
+    BI: -336px,
+    BJ: -350px,
+    BL: -364px,
+    BM: -378px,
+    BN: -392px,
+    BO: -406px,
+    BQ: -420px,
+    BR: -434px,
+    BS: -448px,
+    BT: -462px,
+    BV: -476px,
+    BW: -490px,
+    BY: -504px,
+    BZ: -518px,
+    CA: -532px,
+    CC: -546px,
+    CD: -560px,
+    CF: -574px,
+    CG: -588px,
+    CH: -602px,
+    CI: -616px,
+    CK: -630px,
+    CL: -644px,
+    CM: -658px,
+    CN: -672px,
+    CO: -686px,
+    CP: -700px,
+    CR: -714px,
+    CU: -728px,
+    CV: -742px,
+    CW: -756px,
+    CX: -770px,
+    CY: -784px,
+    CZ: -798px,
+    DE: -812px,
+    DG: -826px,
+    DJ: -840px,
+    DK: -854px,
+    DM: -868px,
+    DO: -882px,
+    DZ: -896px,
+    EA: -910px,
+    EC: -924px,
+    EE: -938px,
+    EG: -952px,
+    EH: -966px,
+    ER: -980px,
+    ES: -994px,
+    ET: -1008px,
+    EU: -1022px,
+    FI: -1036px,
+    FJ: -1050px,
+    FK: -1064px,
+    FM: -1078px,
+    FO: -1092px,
+    FR: -1106px,
+    GA: -1120px,
+    GB: -1134px,
+    GD: -1148px,
+    GE: -1162px,
+    GF: -1176px,
+    GG: -1190px,
+    GH: -1204px,
+    GI: -1218px,
+    GL: -1232px,
+    GM: -1246px,
+    GN: -1260px,
+    GP: -1274px,
+    GQ: -1288px,
+    GR: -1302px,
+    GS: -1316px,
+    GT: -1330px,
+    GU: -1344px,
+    GW: -1358px,
+    GY: -1372px,
+    HK: -1386px,
+    HM: -1400px,
+    HN: -1414px,
+    HR: -1428px,
+    HT: -1442px,
+    HU: -1456px,
+    IC: -1470px,
+    ID: -1484px,
+    IE: -1498px,
+    IL: -1512px,
+    IM: -1526px,
+    IN: -1540px,
+    IO: -1554px,
+    IQ: -1568px,
+    IR: -1582px,
+    IS: -1596px,
+    IT: -1610px,
+    JE: -1624px,
+    JM: -1638px,
+    JO: -1652px,
+    JP: -1666px,
+    KE: -1680px,
+    KG: -1694px,
+    KH: -1708px,
+    KI: -1722px,
+    KM: -1736px,
+    KN: -1750px,
+    KP: -1764px,
+    KR: -1778px,
+    KW: -1792px,
+    AD: -1806px,
+    KZ: -1820px,
+    LA: -1834px,
+    LB: -1848px,
+    LC: -1862px,
+    LI: -1876px,
+    LK: -1890px,
+    LR: -1904px,
+    LS: -1918px,
+    LT: -1932px,
+    LU: -1946px,
+    LV: -1960px,
+    LY: -1974px,
+    MA: -1988px,
+    MC: -2002px,
+    MD: -2016px,
+    ME: -2030px,
+    MF: -2044px,
+    MG: -2058px,
+    MH: -2072px,
+    MK: -2086px,
+    ML: -2100px,
+    MM: -2114px,
+    MN: -2128px,
+    MO: -2142px,
+    MP: -2156px,
+    MQ: -2170px,
+    MR: -2184px,
+    MS: -2198px,
+    MT: -2212px,
+    MU: -2226px,
+    MV: -2240px,
+    MW: -2254px,
+    MX: -2268px,
+    MY: -2282px,
+    MZ: -2296px,
+    NA: -2310px,
+    NC: -2324px,
+    NE: -2338px,
+    NF: -2352px,
+    NG: -2366px,
+    NI: -2380px,
+    NL: -2394px,
+    NO: -2408px,
+    NP: -2422px,
+    NR: -2436px,
+    NU: -2450px,
+    NZ: -2464px,
+    OM: -2478px,
+    PA: -2492px,
+    PE: -2506px,
+    PF: -2520px,
+    PG: -2534px,
+    PH: -2548px,
+    PK: -2562px,
+    PL: -2576px,
+    PM: -2590px,
+    PN: -2604px,
+    PR: -2618px,
+    PS: -2632px,
+    PT: -2646px,
+    PW: -2660px,
+    PY: -2674px,
+    QA: -2688px,
+    RE: -2702px,
+    RO: -2716px,
+    RS: -2730px,
+    RU: -2744px,
+    RW: -2758px,
+    SA: -2772px,
+    SB: -2786px,
+    SC: -2800px,
+    SD: -2814px,
+    SE: -2828px,
+    SG: -2842px,
+    SH: -2856px,
+    SI: -2870px,
+    SJ: -2884px,
+    SK: -2898px,
+    SL: -2912px,
+    SM: -2926px,
+    SN: -2940px,
+    SO: -2954px,
+    SR: -2968px,
+    SS: -2982px,
+    ST: -2996px,
+    SV: -3010px,
+    SX: -3024px,
+    SY: -3038px,
+    SZ: -3052px,
+    TA: -3066px,
+    TC: -3080px,
+    TD: -3094px,
+    TF: -3108px,
+    TG: -3122px,
+    TH: -3136px,
+    TJ: -3150px,
+    TK: -3164px,
+    TL: -3178px,
+    TM: -3192px,
+    TN: -3206px,
+    TO: -3220px,
+    TR: -3234px,
+    TT: -3248px,
+    TV: -3262px,
+    TW: -3276px,
+    TZ: -3290px,
+    UA: -3304px,
+    UG: -3318px,
+    UM: -3332px,
+    UN: -3346px,
+    US: -3360px,
+    UY: -3374px,
+    UZ: -3388px,
+    VA: -3402px,
+    VC: -3416px,
+    VE: -3430px,
+    VG: -3444px,
+    VI: -3458px,
+    VN: -3472px,
+    VU: -3486px,
+    WF: -3500px,
+    WS: -3514px,
+    XK: -3528px,
+    YE: -3542px,
+    YT: -3556px,
+    ZA: -3570px,
+    ZM: -3584px,
+    ZW: -3598px,
+  );
+
+  .flag {
+    display: var(--ngxMatInputTel-flag-display, inline-block);
+    margin-right: 0.5ex;
+    background: {
+      image: url(../assets/flags_sprite_2x.png);
+      size: 100% auto;
+    }
+    filter: drop-shadow(1px 1px 1px rgba(#000, 0.54));
+    height: 14px;
+    width: 24px;
+    min-width: 24px;
+
+    @each $country-class, $flag-position in $country-flags {
+      &.#{$country-class} {
+        background-position: 0 $flag-position;
+      }
+    }
+  }
+
+  .country-selector-name {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .country-selector-code {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .area-codes-badge {
+    flex-shrink: 0;
+    padding: 2px 8px;
+    margin-left: 4px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    background-color: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));
+    color: var(--mat-list-list-item-label-text-color, var(--mat-sys-on-surface));
+    white-space: nowrap;
+    cursor: help;
+    transition: background-color 0.2s ease;
+  }
+}

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

@@ -0,0 +1,72 @@
+import { NgClass } from "@angular/common";
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { CountryFlag } from "../model/country.model";
+
+@Component({
+  selector: "ngx-mat-input-tel-flag",
+  imports: [NgClass, MatTooltipModule],
+  template: `
+    <div class="flag" [ngClass]="country.iso2"></div>
+
+    @if (country.name) {
+      <span class="country-selector-name">
+        {{ country.name }}
+      </span>
+    }
+
+    @if (country.dialCode) {
+      <span class="country-selector-code"> +{{ country.dialCode }} </span>
+    }
+
+    @if (country.areaCodes && country.areaCodes.length > 0) {
+      <span
+        class="area-codes-badge"
+        [matTooltip]="getAreaCodesFullList()"
+        matTooltipPosition="above"
+        [attr.aria-label]="'Area codes: ' + country.areaCodes.join(', ')"
+      >
+        {{ getAreaCodesDisplay() }}
+      </span>
+    }
+  `,
+  styleUrl: "./ngx-mat-input-tel-flag.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxMatInputTelFlagComponent {
+  @Input({ required: true }) country!: CountryFlag;
+
+  /**
+   * Returns a compact display string for area codes
+   * Examples:
+   * - "Area: 201, 202 +4" (shows first 2 codes and count of remaining)
+   * - "Area: 684" (shows single code)
+   * - "Area: 201, 202" (shows 2 codes when there are only 2)
+   */
+  getAreaCodesDisplay(): string {
+    if (!this.country.areaCodes || this.country.areaCodes.length === 0) {
+      return "";
+    }
+
+    const codes = this.country.areaCodes;
+    const displayLimit = 2;
+
+    if (codes.length <= displayLimit) {
+      return `Area: ${codes.join(", ")}`;
+    }
+
+    const displayCodes = codes.slice(0, displayLimit).join(", ");
+    const remainingCount = codes.length - displayLimit;
+    return `Area: ${displayCodes} +${remainingCount}`;
+  }
+
+  /**
+   * Returns the full list of area codes for tooltip display
+   */
+  getAreaCodesFullList(): string {
+    if (!this.country.areaCodes || this.country.areaCodes.length === 0) {
+      return "";
+    }
+    return `Area codes: ${this.country.areaCodes.join(", ")}`;
+  }
+}