ngx-mat-input-tel 21.4.2 → 22.0.0

package/.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "efaea235-e218-4957-bfff-e4741220fd1a",
+  "lastSync": 0
+}

package/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: rbalet
+# patreon: RaphaelBalet
+# open_collective: # Replace with a single Open Collective username
+# ko_fi: # Replace with a single Ko-fi username
+# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+# liberapay: # Replace with a single Liberapay username
+# issuehunt: # Replace with a single IssueHunt username
+# otechie: # Replace with a single Otechie username
+# lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: https://www.buymeacoffee.com/widness

package/.github/instructions/copilot-instructions.md

@@ -0,0 +1,58 @@
+# Copilot Instructions for ngx-mat-input-tel
+
+## Project Overview
+
+- This is an Angular Material library for international telephone input, with country flag dropdown, validation, and formatting using `libphonenumber-js`.
+- Main library code is in `projects/ngx-mat-input-tel/src/lib/`.
+- Demo/test app is in `projects/demo/`.
+- Country data and phone formats are in `src/lib/data/country-code.const.ts`.
+
+## Key Components & Data Flow
+
+- `NgxMatInputTelComponent` is the core input component, using Angular signals and forms.
+- Country selection, phone formatting, and validation are handled in the component, with country data from `ALL_COUNTRIES` and examples from `EXAMPLES`.
+- Country flags are rendered via `NgxMatInputTelFlagComponent` and assets in `src/lib/assets/`.
+- Validation uses a custom validator: `ngxMatInputTelValidator`.
+
+## Developer Workflows
+
+- **Build library:** `npm run build_lib`
+- **Build + package:** `npm run package`
+- **Test:** Use Angular's default test commands in the tester app.
+- **Local usage:** Build and package, then install `.tgz` in another project.
+- **Demo:** Run the tester app for live examples.
+
+## Project-Specific Patterns
+
+- Country data is stored as arrays; see `ALL_COUNTRIES` for structure.
+- Inputs use Angular's new signals API and template syntax (`@if`, `@for`).
+- Boolean inputs can be passed as attributes (e.g., `enablePlaceholder`) or with `[enablePlaceholder]="true"`.
+- Preferred and only countries are filtered via input arrays.
+- Custom CSS variables control flag/placeholder display.
+
+## Integration Points
+
+- Relies on `libphonenumber-js` for phone parsing/validation.
+- Angular Material modules are imported directly in component decorators.
+- Country data and phone examples are tightly coupled to input logic.
+
+## Conventions
+
+- All country codes are lowercase ISO2 (e.g., `us`, `gb`).
+- Country data arrays: `[name, iso2, dialCode, priority?, areaCodes?]`.
+- Use signals for reactive state in components.
+- Use `mat-hint` and `mat-error` for displaying validation and placeholders.
+
+## Example: Adding a Country
+
+- Update `ALL_COUNTRIES` in `country-code.const.ts`.
+- Add example number to `EXAMPLES`.
+- Ensure flag asset exists if needed.
+
+## Key Files
+
+- `src/lib/ngx-mat-input-tel.ts` (main logic)
+- `src/lib/data/country-code.const.ts` (country data)
+- `src/lib/ngx-mat-input-tel.validator.ts` (validation)
+- `src/lib/ngx-mat-input-tel-flag/ngx-mat-input-tel-flag.ts` (flag rendering)
+- `projects/demo/src/app/app.html` (usage examples)

package/.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    uses: ./.github/workflows/test.yml
+    permissions:
+      contents: read
+    secrets: inherit
+
+  publish:
+    needs: test
+    uses: ./.github/workflows/publish.yml
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    secrets: inherit

package/.github/workflows/publish.yml

@@ -0,0 +1,41 @@
+name: Publish
+
+on:
+  workflow_call:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+
+    steps:
+      - name: ⬇️ Get latest code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: ⬇️ Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: ⬇️ Get Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: "pnpm"
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🏗️ Build
+        run: pnpm run build && pnpm run copy-files
+
+      - name: 🚀 release
+        run: pnpm exec semantic-release --branches main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true

package/.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_call:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: ⬇️ Get latest code
+        uses: actions/checkout@v6
+
+      - name: ⬇️ Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: ⬇️ Get Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: "pnpm"
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🧪 Run tests
+        run: pnpm run test:ci
+
+      - name: 📊 Upload coverage to Codecov
+        uses: codecov/codecov-action@v6
+        with:
+          files: ./coverage/ngx-back-button/lcov.info
+          flags: unittests
+          name: ngx-back-button-coverage
+          fail_ci_if_error: false

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

package/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/.prettierrc

@@ -0,0 +1,15 @@
+{
+  "printWidth": 100,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "semi": true,
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/angular.json

@@ -0,0 +1,170 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-mat-input-tel": {
+      "root": "projects/ngx-mat-input-tel",
+      "sourceRoot": "projects/ngx-mat-input-tel/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "standalone": true
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "tsConfig": "projects/ngx-mat-input-tel/tsconfig.lib.json",
+            "project": "projects/ngx-mat-input-tel/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-mat-input-tel/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "buildTarget": "ngx-mat-input-tel:build",
+            "tsConfig": "projects/ngx-mat-input-tel/tsconfig.spec.json",
+            "runner": "vitest",
+            "coverageReporters": ["lcov", "text-summary"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ngx-mat-input-tel/**/*.ts",
+              "projects/ngx-mat-input-tel/**/*.html"
+            ]
+          }
+        }
+      }
+    },
+    "demo": {
+      "root": "projects/demo/",
+      "sourceRoot": "projects/demo/src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "aot": true,
+            "outputPath": {
+              "base": "dist/demo"
+            },
+            "index": "projects/demo/src/index.html",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "assets": ["projects/demo/src/favicon.ico", "projects/demo/src/assets"],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "projects/demo/src/styles.scss"
+            ],
+            "scripts": [],
+            "browser": "projects/demo/src/main.ts"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/demo/src/environments/environment.ts",
+                  "with": "projects/demo/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
+            },
+            "testing": {
+              "aot": false,
+              "optimization": false,
+              "extractLicenses": false,
+              "styles": ["projects/demo/src/styles.scss"]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "buildTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "projects/demo/tsconfig.spec.json",
+            "reporters": ["default"],
+            "setupFiles": ["projects/demo/src/test.ts"],
+            "buildTarget": ":build:testing",
+            "runner": "vitest"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["projects/demo//**/*.ts", "projects/demo//**/*.html"]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}

package/commitlint.config.ts

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+};

package/eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "ngx",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "ngx",
+          style: "kebab-case",
+        },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+      "@angular-eslint/prefer-inject": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+  },
+);

package/package.json

@@ -1,61 +1,90 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "21.4.2",
-  "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.12.31"
+  "version": "22.0.0",
+  "dependencies": {
+    "@angular/animations": "22.0.0",
+    "@angular/cdk": "22.0.0",
+    "@angular/common": "22.0.0",
+    "@angular/compiler": "22.0.0",
+    "@angular/core": "22.0.0",
+    "@angular/forms": "22.0.0",
+    "@angular/material": "22.0.0",
+    "@angular/platform-browser": "22.0.0",
+    "@angular/platform-browser-dynamic": "22.0.0",
+    "@angular/router": "22.0.0",
+    "libphonenumber-js": "1.13.6",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/rbalet/ngx-mat-input-tel"
+  "devDependencies": {
+    "@angular-devkit/core": "22.0.0",
+    "@angular-devkit/schematics": "22.0.0",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "22.0.0",
+    "@angular/compiler-cli": "22.0.0",
+    "@angular/language-service": "22.0.0",
+    "@commitlint/cli": "21.0.2",
+    "@commitlint/config-conventional": "21.0.2",
+    "@semantic-release/commit-analyzer": "13.0.1",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/github": "12.0.8",
+    "@semantic-release/npm": "13.1.5",
+    "@semantic-release/release-notes-generator": "14.1.1",
+    "@types/jasmine": "5.1.15",
+    "@types/jasminewd2": "2.0.13",
+    "@types/node": "24.13.1",
+    "@vitest/coverage-v8": "4.1.8",
+    "angular-eslint": "22.0.0",
+    "eslint": "9.39.4",
+    "eslint-config-prettier": "10.1.8",
+    "husky": "9.1.7",
+    "istanbul-lib-instrument": "^6.0.3",
+    "jasmine-core": "5.13.0",
+    "jasmine-spec-reporter": "7.0.0",
+    "jsdom": "29.1.1",
+    "karma": "6.4.4",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.2.0",
+    "lint-staged": "17.0.7",
+    "ng-packagr": "22.0.0",
+    "prettier": "3.8.4",
+    "semantic-release": "25.0.5",
+    "ts-node": "10.9.2",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.61.0",
+    "vitest": "4.1.8"
   },
-  "keywords": [
-    "angular",
-    "material",
-    "ng15",
-    "ng16",
-    "ngx-mat-intl-tel-input",
-    "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"
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{js,css,md}": "prettier --write"
   },
-  "module": "fesm2022/ngx-mat-input-tel.mjs",
-  "typings": "types/ngx-mat-input-tel.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ngx-mat-input-tel.d.ts",
-      "default": "./fesm2022/ngx-mat-input-tel.mjs"
-    }
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/npm",
+        {
+          "pkgRoot": "dist/ngx-mat-input-tel",
+          "access": "public"
+        }
+      ],
+      "@semantic-release/github"
+    ]
   },
-  "sideEffects": false,
-  "type": "module"
-}
+  "scripts": {
+    "ng": "ng",
+    "dev": "ng serve",
+    "build": "ng build ngx-mat-input-tel --configuration production",
+    "test": "ng test ngx-mat-input-tel --watch=false",
+    "test:ci": "ng test ngx-mat-input-tel --watch=false --coverage",
+    "lint": "ng lint",
+    "copy-files": "cp README.md dist/ngx-mat-input-tel && cp LICENSE dist/ngx-mat-input-tel",
+    "format": "prettier --write ."
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,19 @@
+packages:
+  - "projects/*"
+
+allowBuilds:
+  "@parcel/watcher": true
+  esbuild: true
+  lmdb: true
+  msgpackr-extract: true
+minimumReleaseAgeExclude:
+  - "@vitest/coverage-v8@4.1.8"
+  - "@vitest/expect@4.1.8"
+  - "@vitest/mocker@4.1.8"
+  - "@vitest/pretty-format@4.1.8"
+  - "@vitest/runner@4.1.8"
+  - "@vitest/snapshot@4.1.8"
+  - "@vitest/spy@4.1.8"
+  - "@vitest/utils@4.1.8"
+  - vitest@4.1.8
+  - semantic-release@25.0.5

package/projects/demo/eslint.config.js

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

package/projects/demo/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/demo"),
+      reports: ["html", "lcovonly", "text-summary"],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};