ngx-mat-input-tel 21.4.2 → 22.0.0

package/projects/demo/src/app/app.html

@@ -0,0 +1,123 @@
+<div style="margin: 50px">
+  <h3 id="phoneInput">Test International Telephone Input Form</h3>
+  <br />
+
+  <form #f1="ngForm" [formGroup]="phoneForm" (ngSubmit)="onSubmit()">
+    <mat-form-field>
+      <ngx-mat-input-tel
+        [cssClass]="'custom'"
+        [preferredCountries]="['CA', 'US']"
+        defaultCountry="US"
+        enablePlaceholder
+        enableSearch
+        formControlName="phone"
+        describedBy="phoneInput"
+        required
+        #phone
+        maxLength="20"
+      ></ngx-mat-input-tel>
+      <mat-hint>e.g. {{ phone.$selectedCountry().placeholder }}</mat-hint>
+      @if (phoneForm.controls.phone.errors?.required) {
+        <mat-error> Required Field </mat-error>
+      } @else if (phoneForm.controls.phone.errors?.maxlength) {
+        <mat-error>
+          Length:{{ phoneForm.controls.phone.errors?.maxlength.actualLength }}/{{
+            phoneForm.controls.phone.errors?.maxlength.requiredLength
+          }}
+        </mat-error>
+      } @else if (f1.submitted && phoneForm.controls.phone.errors?.validatePhoneNumber) {
+        <mat-error> Invalid Number </mat-error>
+      }
+    </mat-form-field>
+
+    <div class="buttons-container">
+      <button mat-stroked-button>Submit</button>
+      <button type="reset" mat-stroked-button (click)="onReset()">Reset</button>
+    </div>
+  </form>
+
+  <br />
+  <div class="value-container">
+    <strong>Is form valid:</strong>
+    <code>{{ phoneForm.valid }}</code>
+  </div>
+  <div class="value-container">
+    <strong>Is input valid:</strong>
+    <code>{{ !phoneForm.controls.phone.invalid }}</code>
+  </div>
+  <div class="value-container">
+    <strong>Is input touched:</strong>
+    <code>{{ phoneForm.controls.phone.touched }}</code>
+  </div>
+  <div class="value-container">
+    <strong>Form value:</strong>
+    <pre><code>{{ phoneForm.value | json }}</code></pre>
+  </div>
+  <div class="value-container">
+    <strong>Form validation errors:</strong>
+    @for (control of phoneForm.controls | keyvalue; track control) {
+      <pre><code> {{ control.key }}: {{ control.value.errors | json }} </code></pre>
+    }
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <form #f2="ngForm" [formGroup]="profileForm" class="second-form">
+    <h2>Required, PlaceHolder, Separated & OnlyCountries</h2>
+
+    <mat-form-field floatLabel="always" appearance="outline">
+      <mat-label>Phone</mat-label>
+      <ngx-mat-input-tel
+        [cssClass]="'custom'"
+        [preferredCountries]="['US', 'FR']"
+        [countriesName]="frCountriesName"
+        [onlyCountries]="$onlyCountries()"
+        [searchPlaceholder]="'Buscar...'"
+        [formControl]="profileForm.controls.phone"
+        resetOnChange
+        enablePlaceholder
+        enableSearch
+        #phone1
+      ></ngx-mat-input-tel>
+      <mat-hint>e.g. {{ phone1.$selectedCountry().placeholder }}</mat-hint>
+      @if (profileForm.controls.phone.errors?.required) {
+        <mat-error> Required Field </mat-error>
+      }
+      @if (profileForm.controls.phone.errors?.validatePhoneNumber) {
+        <mat-error> Invalid Number </mat-error>
+      }
+      @if (profileForm.controls.phone.errors?.invalidCountry) {
+        <mat-error> Country not allowed </mat-error>
+      }
+    </mat-form-field>
+  </form>
+
+  <div class="value-container">
+    <strong>Form value:</strong>
+    <pre><code>{{ f2.form.value | json }}</code></pre>
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <form [formGroup]="profileForm" class="second-form">
+    <h2>Separated Dial Code</h2>
+
+    <mat-form-field floatLabel="always" appearance="outline" class="separated-flag">
+      <mat-label>Phone</mat-label>
+      <ngx-mat-input-tel
+        resetOnChange
+        placeholder="Your number"
+        enableSearch
+        separateDialCode
+      ></ngx-mat-input-tel>
+    </mat-form-field>
+  </form>
+
+  <mat-divider></mat-divider>
+
+  <div>
+    <h2>Inside a modal</h2>
+
+    <button mat-raised-button (click)="openDialog()">Open Dialog</button>
+  </div>
+</div>

package/projects/demo/src/app/app.scss

@@ -0,0 +1,16 @@
+.second-form ngx-mat-input-tel {
+  --ngxMatInputTel-opacity: 1;
+}
+
+.buttons-container {
+  display: flex;
+  gap: 16px;
+}
+
+mat-divider {
+  margin-bottom: 16px;
+}
+
+.separated-flag {
+  margin-left: 128px;
+}

package/projects/demo/src/app/app.spec.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from "@angular/common";
+import { TestBed, waitForAsync } from "@angular/core/testing";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatMenuModule } from "@angular/material/menu";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app";
+
+describe("AppComponent", () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatDividerModule,
+        BrowserAnimationsModule,
+        CommonModule,
+        AppComponent,
+      ],
+    }).compileComponents();
+  }));
+
+  it("should create the app", () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElementInstance;
+    expect(app).toBeTruthy();
+  });
+});

package/projects/demo/src/app/app.ts

@@ -0,0 +1,100 @@
+import { JsonPipe, KeyValuePipe } from "@angular/common";
+import { AfterViewInit, Component, inject, signal } from "@angular/core";
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialog } from "@angular/material/dialog";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { NgxMatInputTelComponent } from "../../../ngx-mat-input-tel/src/lib/ngx-mat-input-tel";
+import { DialogComponent } from "./dialog/dialog";
+
+interface PhoneForm {
+  phone: FormControl<string | null>;
+}
+
+interface ProfileForm {
+  phone: FormControl<string | null>;
+}
+
+@Component({
+  selector: "ngx-root",
+  templateUrl: "./app.html",
+  styleUrls: ["./app.scss"],
+  imports: [
+    // Forms
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+
+    // Components
+    NgxMatInputTelComponent,
+
+    // Pipes
+    JsonPipe,
+    KeyValuePipe,
+
+    // Mat
+    MatButtonModule,
+    MatDividerModule,
+  ],
+})
+export class AppComponent implements AfterViewInit {
+  readonly #matDialog = inject(MatDialog);
+
+  phoneForm = new FormGroup<PhoneForm>({
+    phone: new FormControl(null, [Validators.required, Validators.maxLength(12)]),
+  });
+
+  profileForm = new FormGroup<ProfileForm>({
+    phone: new FormControl(null),
+  });
+
+  $onlyCountries = signal(["US", "DE"]);
+
+  frCountriesName: Record<string, string> = {
+    US: "États-Unis",
+    FR: "France",
+    DE: "Allemagne",
+  };
+
+  constructor() {
+    setTimeout(() => {
+      // Fake onlyCountries change - add FR
+      this.$onlyCountries.set(["US", "DE", "FR"]);
+    }, 1000);
+  }
+
+  onSubmit() {
+    this.phoneForm.markAllAsTouched();
+  }
+
+  onReset() {
+    this.phoneForm.reset();
+  }
+
+  ngAfterViewInit() {
+    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);
+    });
+  }
+
+  openDialog() {
+    const dialogRef = this.#matDialog.open(DialogComponent);
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log("The dialog was closed", result);
+    });
+  }
+}

package/projects/demo/src/app/dialog/dialog.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title>Inside a dialog</h2>
+
+<mat-dialog-content [formGroup]="phoneForm">
+  <mat-form-field>
+    <mat-label>Phone Number</mat-label>
+    <ngx-mat-input-tel formControlName="phone" enableSearch></ngx-mat-input-tel>
+  </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button matButton [mat-dialog-close]="phoneForm.getRawValue()" cdkFocusInitial>Close</button>
+</mat-dialog-actions>

package/projects/demo/src/app/dialog/dialog.ts

@@ -0,0 +1,31 @@
+import { DialogModule } from "@angular/cdk/dialog";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { NgxMatInputTelComponent } from "projects/ngx-mat-input-tel/src/public-api";
+
+@Component({
+  selector: "ngx-dialog",
+  imports: [
+    // Forms
+    ReactiveFormsModule,
+    MatFormFieldModule,
+
+    // Mat
+    DialogModule,
+    MatButtonModule,
+    MatDialogModule,
+
+    // Components
+    NgxMatInputTelComponent,
+  ],
+  templateUrl: "./dialog.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogComponent {
+  phoneForm = new FormGroup({
+    phone: new FormControl(null, [Validators.required, Validators.maxLength(12)]),
+  });
+}

package/projects/demo/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

package/projects/demo/src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};

package/projects/demo/src/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ngxMatInputTelTester</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <link
+      rel="stylesheet"
+      href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900&display=swap"
+      defer
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
+  <body class="mat-typography mat-app-background">
+    <ngx-root></ngx-root>
+  </body>
+</html>

package/projects/demo/src/main.ts

@@ -0,0 +1,16 @@
+import { enableProdMode, provideZonelessChangeDetection } from "@angular/core";
+import { bootstrapApplication } from "@angular/platform-browser";
+import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
+import { AppComponent } from "./app/app";
+import { environment } from "./environments/environment";
+
+if (environment.production) {
+  enableProdMode();
+}
+
+const bootstrap = () =>
+  bootstrapApplication(AppComponent, {
+    providers: [provideZonelessChangeDetection(), provideAnimationsAsync()],
+  });
+
+bootstrap().catch((err) => console.error(err));

package/projects/demo/src/styles.scss

@@ -0,0 +1,32 @@
+@use "@angular/material" as mat;
+
+@include mat.elevation-classes();
+@include mat.app-background();
+
+$theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: mat.$violet-palette,
+    ),
+    typography: (
+      brand-family: "Roboto",
+      bold-weight: 900,
+    ),
+    density: (
+      scale: -1,
+    ),
+  )
+);
+
+html {
+  @include mat.all-component-themes($theme);
+
+  @include mat.elevation-classes();
+  @include mat.app-background();
+
+  // Somehow fix the menu not showing
+  .mat-mdc-menu-panel {
+    height: fit-content;
+  }
+}

package/projects/demo/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}

package/projects/demo/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["node", "vitest/globals"]
+  },
+  "files": ["src/test.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
+}

package/projects/ngx-mat-input-tel/eslint.config.js

@@ -0,0 +1,3 @@
+const baseConfig = require("../../eslint.config.js");
+
+module.exports = [...baseConfig];

package/projects/ngx-mat-input-tel/karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage-istanbul-reporter"),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require("path").join(__dirname, "../../coverage/ngx-mat-input-tel"),
+      reports: ["html", "lcovonly"],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

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

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-mat-input-tel",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "cssUrl": "inline"
+  }
+}

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

@@ -0,0 +1,48 @@
+{
+  "name": "ngx-mat-input-tel",
+  "version": "22.0.0",
+  "author": {
+    "name": "Raphaël Balet",
+    "email": "raphael.balet@outlook.com"
+  },
+  "maintainers": [
+    "raphael.balet@outlook.com"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=19.x",
+    "@angular/core": ">=19.x",
+    "@angular/forms": ">=19.x",
+    "@angular/platform-browser": ">=19.x",
+    "@angular/platform-browser-dynamic": ">=19.x",
+    "libphonenumber-js": "^1.13.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rbalet/ngx-mat-input-tel"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "ngx-mat-intl-tel-input",
+    "ngx-mat-input-tel",
+    "ngx-tel",
+    "intl-tel-input",
+    "ng-intl-tel-input",
+    "phone number",
+    "phone",
+    "validation",
+    "international",
+    "i18n",
+    "country",
+    "dial",
+    "code",
+    "telephone",
+    "mobile",
+    "input",
+    "flag"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^2.x"
+  }
+}