ngxsmk-tel-input 1.0.6 → 1.0.8

package/README.md

@@ -18,9 +18,9 @@ An Angular component for entering and validating **international telephone numbe
 ## Screenshots
 
 <p align="left">
-  <img src="https://unpkg.com/ngxsmk-tel-input@1.0.4/docs/valid.png" alt="Valid phone number" width="420" />
+  <img src="https://unpkg.com/ngxsmk-tel-input@1.0.4/docs/valid.png" alt="Angular international phone input - valid" width="420" />
   &nbsp;&nbsp;
-  <img src="https://unpkg.com/ngxsmk-tel-input@1.0.4/docs/invalid.png" alt="Invalid phone number" width="420" />
+  <img src="https://unpkg.com/ngxsmk-tel-input@1.0.4/docs/invalid.png" alt="Angular international phone input - Invalid" width="420" />
 </p>
 
 ---
@@ -90,13 +90,14 @@ Restart your dev server after editing `angular.json`.
 ```ts
 // app.component.ts
 import { Component } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { NgxsmkTelInputComponent } from 'ngxsmk-tel-input';
+import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { NgxsmkTelInputComponent } from '../../../ngxsmk-tel-input/src/lib/ngxsmk-tel-input.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [ReactiveFormsModule, NgxsmkTelInputComponent],
+  imports: [ReactiveFormsModule, CommonModule, NgxsmkTelInputComponent],
   template: `
     <form [formGroup]="fg" style="max-width:420px;display:grid;gap:12px">
       <ngxsmk-tel-input
@@ -107,19 +108,21 @@ import { NgxsmkTelInputComponent } from 'ngxsmk-tel-input';
         [preferredCountries]="['US','GB','AU']"
         (countryChange)="onCountry($event)">
       </ngxsmk-tel-input>
-
-      <p *ngIf="fg.get('phone')?.hasError('phoneInvalid') && fg.get('phone')?.touched">
-        Please enter a valid phone number.
-      </p>
-
       <pre>Value: {{ fg.value | json }}</pre>
     </form>
   `
 })
 export class AppComponent {
-  fg = this.fb.group({ phone: ['', Validators.required] });
-  constructor(private readonly fb: FormBuilder) {}
+  fg: FormGroup;
+
+  constructor(private readonly fb: FormBuilder) {
+    this.fg = this.fb.group({
+      phone: ['', Validators.required]
+    });
+  }
+
   onCountry(e: { iso2: any }) { console.log('Country changed:', e.iso2); }
+
 }
 ```
 

package/package.json

@@ -1,18 +1,51 @@
 {
   "name": "ngxsmk-tel-input",
-  "version": "1.0.6",
+  "version": "1.0.8",
+  "description": "Angular international telephone input with country flag dropdown, formatting & validation (intl-tel-input + libphonenumber). ControlValueAccessor. Supports Angular 17–19.",
+  "keywords": [
+    "angular",
+    "angular-forms",
+    "controlvalueaccessor",
+    "phone-input",
+    "telephone",
+    "tel-input",
+    "international",
+    "intl-tel-input",
+    "libphonenumber",
+    "e164",
+    "phone-number-validation",
+    "country-flag"
+  ],
+  "homepage": "https://github.com/toozuuu/ngxsmk-tel-input#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toozuuu/ngxsmk-tel-input.git"
+  },
+  "bugs": {
+    "url": "https://github.com/toozuuu/ngxsmk-tel-input/issues"
+  },
   "author": {
-    "email": "sachindilshan040@gmail.com",
     "name": "Sachin Dilshan",
+    "email": "sachindilshan040@gmail.com",
     "url": "https://www.linkedin.com/in/sachindilshan"
   },
-  "description": "Angular telephone input with intl-tel-input + libphonenumber-js",
   "license": "MIT",
   "private": false,
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "bundles/",
+    "fesm*",
+    "esm*",
+    "schematics/",
+    "migrations/",
+    "src/",
+    "README.md",
+    "LICENSE",
+    "docs/"
+  ],
   "peerDependencies": {
     "@angular/common": ">=17",
     "@angular/core": ">=17",

package/src/lib/ngxsmk-tel-input.component.ts

@@ -32,12 +32,12 @@ type IntlTelInstance = any;
   standalone: true,
   imports: [],
   template: `
-    <div class="ngx-tel" [class.disabled]="disabled" [attr.data-size]="size" [attr.data-variant]="variant">
+    <div class="ngxsmk-tel" [class.disabled]="disabled" [attr.data-size]="size" [attr.data-variant]="variant">
       @if (label) {
-        <label class="ngx-tel__label" [for]="resolvedId">{{ label }}</label>
+        <label class="ngxsmk-tel__label" [for]="resolvedId">{{ label }}</label>
       }
 
-      <div class="ngx-tel__wrap" [class.has-error]="showError">
+      <div class="ngxsmk-tel__wrap" [class.has-error]="showError">
         <div class="ngxsmk-tel-input__wrapper">
           <input
             #telInput
@@ -56,7 +56,7 @@ type IntlTelInstance = any;
 
         @if (showClear && currentRaw()) {
           <button type="button"
-                  class="ngx-tel__clear"
+                  class="ngxsmk-tel__clear"
                   (click)="clearInput()"
                   [attr.aria-label]="'Clear phone number'">
             ×
@@ -66,11 +66,11 @@ type IntlTelInstance = any;
       </div>
 
       @if (hint && !showError) {
-        <div class="ngx-tel__hint">{{ hint }}</div>
+        <div class="ngxsmk-tel__hint">{{ hint }}</div>
       }
 
       @if (showError) {
-        <div class="ngx-tel__error">{{ errorText || 'Please enter a valid phone number.' }}</div>
+        <div class="ngxsmk-tel__error">{{ errorText || 'Please enter a valid phone number.' }}</div>
       }
 
     </div>
@@ -119,24 +119,24 @@ type IntlTelInstance = any;
     }
 
     /* ---------- Structure ---------- */
-    .ngx-tel {
+    .ngxsmk-tel {
       width: 100%;
       color: var(--tel-fg);
     }
 
-    .ngx-tel.disabled {
+    .ngxsmk-tel.disabled {
       opacity: .7;
       cursor: not-allowed;
     }
 
-    .ngx-tel__label {
+    .ngxsmk-tel__label {
       display: inline-block;
       margin-bottom: 6px;
       font-size: .875rem;
       font-weight: 500;
     }
 
-    .ngx-tel__wrap {
+    .ngxsmk-tel__wrap {
       position: relative;
     }
 
@@ -325,7 +325,7 @@ type IntlTelInstance = any;
     }
 
     /* Clear button */
-    .ngx-tel__clear {
+    .ngxsmk-tel__clear {
       position: absolute;
       right: 8px;
       top: 50%;
@@ -341,24 +341,24 @@ type IntlTelInstance = any;
       color: var(--tel-placeholder);
     }
 
-    .ngx-tel__clear:hover {
+    .ngxsmk-tel__clear:hover {
       background: rgba(148, 163, 184, .15);
     }
 
     /* Hint & Error */
-    .ngx-tel__hint {
+    .ngxsmk-tel__hint {
       margin-top: 6px;
       font-size: 12px;
       color: var(--tel-placeholder);
     }
 
-    .ngx-tel__error {
+    .ngxsmk-tel__error {
       margin-top: 6px;
       font-size: 12px;
       color: var(--tel-error);
     }
 
-    .ngx-tel__wrap.has-error .ngxsmk-tel-input__control {
+    .ngxsmk-tel__wrap.has-error .ngxsmk-tel-input__control {
       border-color: var(--tel-error);
       box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
     }

package/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "restricted",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

package/ng-package.json

@@ -1,16 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngxsmk-tel-input",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "intl-tel-input",
-    "libphonenumber-js"
-  ],
-  "assets": [
-    "README.md",
-    "LICENSE",
-    "docs"
-  ]
-}

package/tsconfig.lib.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}