ngxsmk-tel-input 1.2.2 → 1.2.4

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# 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

@@ -0,0 +1,11 @@
+{
+  "$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

@@ -0,0 +1,16 @@
+{
+  "$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/package.json

@@ -1,94 +1,58 @@
 {
   "name": "ngxsmk-tel-input",
-  "version": "1.2.2",
-  "description": "Angular international telephone input with country flag dropdown, formatting & validation (intl-tel-input + libphonenumber). ControlValueAccessor. Supports Angular 17–19.",
+  "version": "1.2.4",
+  "description": "Angular international telephone input (intl-tel-input UI + libphonenumber-js validation). ControlValueAccessor. SSR-safe.",
+  "license": "MIT",
+  "author": {
+    "name": "Sachin Dilshan",
+    "email": "sachindilshan040@gmail.com",
+    "url": "https://github.com/toozuuu"
+  },
+  "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"
+  },
   "keywords": [
     "ngxsmk-tel-input",
-    "ngx",
     "angular",
-    "angular17",
-    "angular18",
-    "angular19",
     "angular-forms",
-    "reactive-forms",
-    "template-driven-forms",
     "controlvalueaccessor",
     "cva",
     "phone-input",
     "telephone-input",
-    "phone-number",
     "international-phone",
     "intl-tel-input",
-    "libphonenumber",
     "libphonenumber-js",
     "e164",
-    "phone-validation",
-    "phone-number-validation",
     "country-code",
     "dial-code",
     "separate-dial-code",
     "national-mode",
     "country-flags",
-    "dropdown",
     "i18n",
     "localization",
     "rtl",
     "a11y",
-    "accessibility",
     "ssr",
-    "angular-universal",
     "typescript"
   ],
-  "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": {
-    "name": "Sachin Dilshan",
-    "email": "sachindilshan040@gmail.com",
-    "url": "https://www.linkedin.com/in/sachindilshan"
-  },
-  "license": "MIT",
-  "private": false,
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
-  "exports": {
-    "./*": null
-  },
-  "files": [
-    "bundles/",
-    "fesm*",
-    "esm*",
-    "schematics/",
-    "migrations/",
-    "README.md",
-    "LICENSE",
-    "docs/"
-  ],
   "peerDependencies": {
     "@angular/common": ">=17 <21",
     "@angular/core": ">=17 <21",
     "@angular/forms": ">=17 <21",
     "rxjs": ">=7.8.0",
     "intl-tel-input": "^25.3.2",
-    "libphonenumber-js": "^1.12.10"
-  },
-  "peerDependenciesMeta": {
-    "intl-tel-input": { "optional": false },
-    "libphonenumber-js": { "optional": false }
+    "libphonenumber-js": "^1.12.10 || ^1.12.11"
   },
   "dependencies": {
     "tslib": "^2.3.0"
-  },
-  "devDependencies": {
-    "intl-tel-input": "^25.3.2",
-    "libphonenumber-js": "^1.12.10",
-    "@changesets/cli": "^2.29.5"
   }
 }

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

@@ -0,0 +1,220 @@
+/* ---------- Theme tokens ---------- */
+:host {
+  --tel-bg: #fff;
+  --tel-fg: #0f172a;
+  --tel-border: #c0c0c0;
+  --tel-border-hover: #9aa0a6;
+  --tel-ring: #2563eb;
+  --tel-placeholder: #9ca3af;
+  --tel-error: #ef4444;
+  --tel-radius: 12px;
+  --tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
+
+  --tel-dd-bg: var(--tel-bg);
+  --tel-dd-border: var(--tel-border);
+  --tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .18);
+  --tel-dd-radius: 12px;
+  --tel-dd-item-hover: rgba(37, 99, 235, .08);
+  --tel-dd-z: 2000;
+  --tel-dd-search-bg: rgba(148, 163, 184, .08);
+
+  display: block;
+}
+
+:host-context(.dark) {
+  --tel-bg: #0b0f17;
+  --tel-fg: #e5e7eb;
+  --tel-border: #334155;
+  --tel-border-hover: #475569;
+  --tel-ring: #60a5fa;
+  --tel-placeholder: #94a3b8;
+
+  --tel-dd-bg: #0f1521;
+  --tel-dd-border: #324056;
+  --tel-dd-search-bg: rgba(148, 163, 184, .12);
+}
+
+/* ---------- Structure ---------- */
+.ngxsmk-tel {
+  width: 100%;
+  color: var(--tel-fg);
+}
+
+.ngxsmk-tel.disabled {
+  opacity: .7;
+  cursor: not-allowed;
+}
+
+.ngxsmk-tel__label {
+  display: inline-block;
+  margin-bottom: 6px;
+  font-size: .875rem;
+  font-weight: 500;
+}
+
+.ngxsmk-tel__wrap {
+  position: relative;
+}
+
+.ngxsmk-tel-input__wrapper,
+:host ::ng-deep .iti {
+  width: 100%;
+}
+
+.ngxsmk-tel-input__control {
+  width: 100%;
+  height: 40px;
+  font: inherit;
+  color: var(--tel-fg);
+  background: var(--tel-bg);
+  border: 1px solid var(--tel-border);
+  border-radius: var(--tel-radius);
+  padding: 10px 40px 10px 12px;
+  outline: none;
+  transition: border-color .15s, box-shadow .15s, background .15s;
+}
+
+.ngxsmk-tel-input__control::placeholder {
+  color: var(--tel-placeholder);
+}
+
+.ngxsmk-tel-input__control:hover {
+  border-color: var(--tel-border-hover);
+}
+
+.ngxsmk-tel-input__control:focus {
+  border-color: var(--tel-ring);
+  box-shadow: var(--tel-focus-shadow);
+}
+
+/* Size presets */
+[data-size="sm"] .ngxsmk-tel-input__control {
+  height: 34px;
+  font-size: 13px;
+  padding: 6px 36px 6px 10px;
+  border-radius: 10px;
+}
+
+[data-size="lg"] .ngxsmk-tel-input__control {
+  height: 46px;
+  font-size: 16px;
+  padding: 12px 44px 12px 14px;
+  border-radius: 14px;
+}
+
+/* Variants */
+[data-variant="filled"] .ngxsmk-tel-input__control {
+  background: rgba(148, 163, 184, .08);
+}
+
+[data-variant="underline"] .ngxsmk-tel-input__control {
+  border: 0;
+  border-bottom: 2px solid var(--tel-border);
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 34px;
+}
+
+[data-variant="underline"] .ngxsmk-tel-input__control:focus {
+  border-bottom-color: var(--tel-ring);
+  box-shadow: none;
+}
+
+/* ---------- intl-tel-input dropdown (deep selectors) ---------- */
+:host ::ng-deep .iti__flag-container {
+  border-top-left-radius: var(--tel-radius);
+  border-bottom-left-radius: var(--tel-radius);
+  border: 1px solid var(--tel-border);
+  border-right: none;
+  background: var(--tel-bg);
+}
+
+:host ::ng-deep .iti__selected-flag {
+  height: 100%;
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+}
+
+:host ::ng-deep .iti__country-list {
+  background: var(--tel-dd-bg);
+  border: 1px solid var(--tel-dd-border);
+  border-radius: var(--tel-dd-radius);
+  box-shadow: var(--tel-dd-shadow);
+  max-height: min(50vh, 360px);
+  overflow: auto;
+  padding: 6px 0;
+  width: max(280px, 100%);
+  z-index: var(--tel-dd-z);
+}
+
+:host ::ng-deep .iti--container .iti__country-list {
+  z-index: var(--tel-dd-z);
+}
+
+:host ::ng-deep .iti__search-input {
+  position: sticky;
+  top: 0;
+  margin: 0;
+  padding: 10px 12px;
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--tel-dd-border);
+  outline: none;
+  background: var(--tel-dd-search-bg);
+  color: var(--tel-fg);
+}
+
+:host ::ng-deep .iti__country {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  align-items: center;
+  column-gap: .5rem;
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+:host ::ng-deep .iti__dial-code {
+  color: var(--tel-placeholder);
+  font-weight: 600;
+  margin-left: 10px;
+}
+
+/* Clear button */
+.ngxsmk-tel__clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0;
+  background: transparent;
+  font-size: 18px;
+  line-height: 1;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--tel-placeholder);
+}
+
+.ngxsmk-tel__clear:hover {
+  background: rgba(148, 163, 184, .15);
+}
+
+/* Hint & Error */
+.ngxsmk-tel__hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--tel-placeholder);
+}
+
+.ngxsmk-tel__error {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--tel-error);
+}
+
+.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/src/lib/ngxsmk-tel-input.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PLATFORM_ID } from '@angular/core';
+import { NgxsmkTelInputComponent } from './ngxsmk-tel-input.component';
+
+describe('NgxsmkTelInputComponent', () => {
+  let component: NgxsmkTelInputComponent;
+  let fixture: ComponentFixture<NgxsmkTelInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NgxsmkTelInputComponent],
+      // Pretend we're on the server so ngAfterViewInit skips intl-tel-input init
+      providers: [{ provide: PLATFORM_ID, useValue: 'server' }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NgxsmkTelInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,457 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Inject,
+  Input,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  Output,
+  PLATFORM_ID,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import {isPlatformBrowser} from '@angular/common';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator
+} from '@angular/forms';
+import type {CountryCode} from 'libphonenumber-js';
+import {NgxsmkTelInputService} from './ngxsmk-tel-input.service';
+import {CountryMap, IntlTelI18n} from './types';
+
+type IntlTelInstance = any;
+
+@Component({
+  selector: 'ngxsmk-tel-input',
+  standalone: true,
+  imports: [],
+  template: `
+    <div class="ngxsmk-tel"
+         [class.disabled]="disabled"
+         [attr.data-size]="size"
+         [attr.data-variant]="variant"
+         [attr.dir]="dir">
+      @if (label) {
+        <label class="ngxsmk-tel__label" [for]="resolvedId">{{ label }}</label>
+      }
+
+      <div class="ngxsmk-tel__wrap" [class.has-error]="showError">
+        <div class="ngxsmk-tel-input__wrapper">
+          <input
+            #telInput
+            type="tel"
+            class="ngxsmk-tel-input__control"
+            [id]="resolvedId"
+            [attr.name]="name || null"
+            [attr.placeholder]="placeholder || null"
+            [attr.autocomplete]="autocomplete"
+            [attr.inputmode]="digitsOnly ? 'numeric' : 'tel'"
+            [attr.pattern]="digitsOnly ? (allowLeadingPlus ? '\\\\+?[0-9]*' : '[0-9]*') : null"
+            [disabled]="disabled"
+            [attr.aria-invalid]="showError ? 'true' : 'false'"
+            (blur)="onBlur()"
+            (focus)="onFocus()"
+          />
+        </div>
+
+        @if (showClear && currentRaw()) {
+          <button type="button"
+                  class="ngxsmk-tel__clear"
+                  (click)="clearInput()"
+                  [attr.aria-label]="clearAriaLabel">
+            ×
+          </button>
+        }
+      </div>
+
+      @if (hint && !showError) {
+        <div class="ngxsmk-tel__hint">{{ hint }}</div>
+      }
+
+      @if (showError) {
+        <div class="ngxsmk-tel__error">{{ errorText || 'Please enter a valid phone number.' }}</div>
+      }
+    </div>
+  `,
+  styleUrls: ['./ngxsmk-tel-input.component.scss'],
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true},
+    {provide: NG_VALIDATORS, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true}
+  ]
+})
+export class NgxsmkTelInputComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor, Validator {
+
+  @ViewChild('telInput', {static: true}) inputRef!: ElementRef<HTMLInputElement>;
+
+  /* Core config */
+  @Input() initialCountry: CountryCode | 'auto' = 'US';
+  @Input() preferredCountries: CountryCode[] = ['US', 'GB'];
+  @Input() onlyCountries?: CountryCode[];
+  @Input() nationalMode: boolean = false;
+  @Input() separateDialCode: boolean = false;
+  @Input() allowDropdown: boolean = true;
+
+  /* UX */
+  @Input() placeholder?: string;
+  @Input() autocomplete = 'tel';
+  @Input() name?: string;
+  @Input() inputId?: string;
+  @Input() disabled: boolean = false;
+
+  @Input() label?: string;
+  @Input() hint?: string;
+  @Input() errorText?: string;
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() variant: 'outline' | 'filled' | 'underline' = 'outline';
+  @Input() showClear: boolean = true;
+  @Input() autoFocus: boolean = false;
+  @Input() selectOnFocus: boolean = false;
+  @Input() formatOnBlur: boolean = true;
+  @Input() showErrorWhenTouched: boolean = true;
+
+  /* Dropdown plumbing */
+  @Input() dropdownAttachToBody: boolean = true;
+  @Input() dropdownZIndex: number = 2000;
+
+  /* Localization + RTL */
+  @Input('i18n') i18n?: IntlTelI18n;
+
+  @Input('telI18n') set telI18n(v: IntlTelI18n | undefined) {
+    this.i18n = v;
+  }
+
+  @Input('localizedCountries') localizedCountries?: CountryMap;
+
+  @Input('telLocalizedCountries') set telLocalizedCountries(v: CountryMap | undefined) {
+    this.localizedCountries = v;
+  }
+
+  @Input() clearAriaLabel: string = 'Clear phone number';
+  @Input() dir: 'ltr' | 'rtl' = 'ltr';
+
+  /* Placeholders (intl-tel-input) */
+  @Input() autoPlaceholder: 'off' | 'polite' | 'aggressive' = 'off'; // default OFF since no utils fallback
+  @Input() utilsScript?: string;
+  @Input() customPlaceholder?: (example: string, country: any) => string;
+
+  @Input() formatWhenValid: 'off' | 'blur' | 'typing' = 'blur';
+
+  /* Digits-only controls */
+  @Input() digitsOnly: boolean = true;
+  @Input() allowLeadingPlus: boolean = true;
+
+  /* Outputs */
+  @Output() countryChange = new EventEmitter<{ iso2: CountryCode }>();
+  @Output() validityChange = new EventEmitter<boolean>();
+  @Output() inputChange = new EventEmitter<{ raw: string; e164: string | null; iso2: CountryCode }>();
+
+  /* Internal */
+  private iti: IntlTelInstance | null = null;
+  private onChange: (val: string | null) => void = () => {
+  };
+  private onTouchedCb: () => void = () => {
+  };
+  private validatorChange?: () => void;
+  private lastEmittedValid = false;
+  private pendingWrite: string | null = null;
+  private touched: boolean = false;
+
+  readonly resolvedId: string = this.inputId || ('tel-' + Math.random().toString(36).slice(2));
+
+  constructor(
+    private readonly zone: NgZone,
+    private readonly tel: NgxsmkTelInputService,
+    @Inject(PLATFORM_ID) private readonly platformId: Object
+  ) {
+  }
+
+  ngAfterViewInit(): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+    void this.initAndWire();
+  }
+
+  private async initAndWire(): Promise<void> {
+    await this.initIntlTelInput();
+    this.bindDomListeners();
+
+    if (this.pendingWrite !== null) {
+      this.setInputValue(this.pendingWrite);
+      this.handleInput();
+      this.pendingWrite = null;
+    }
+    if (this.autoFocus) setTimeout(() => this.focus(), 0);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+    const configChanged = [
+      'initialCountry', 'preferredCountries', 'onlyCountries',
+      'separateDialCode', 'allowDropdown', 'nationalMode',
+      'i18n', 'localizedCountries', 'dir',
+      'autoPlaceholder', 'utilsScript', 'customPlaceholder',
+      'digitsOnly', 'allowLeadingPlus'
+    ].some(k => k in changes && !changes[k]?.firstChange);
+    if (configChanged && this.iti) {
+      this.reinitPlugin();
+      this.validatorChange?.();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyPlugin();
+  }
+
+  // ----- CVA -----
+  writeValue(val: string | null): void {
+    if (!this.inputRef) return;
+    if (!this.iti) {
+      this.pendingWrite = val ?? '';
+      return;
+    }
+    this.setInputValue(val ?? '');
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouchedCb = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (this.inputRef) this.inputRef.nativeElement.disabled = isDisabled;
+  }
+
+  // ----- Validator -----
+  validate(_: AbstractControl): ValidationErrors | null {
+    const raw = this.currentRaw();
+    if (!raw) return null;
+    const valid = this.tel.isValid(raw, this.currentIso2());
+    if (valid !== this.lastEmittedValid) {
+      this.lastEmittedValid = valid;
+      this.validityChange.emit(valid);
+    }
+    return valid ? null : {phoneInvalid: true};
+  }
+
+  registerOnValidatorChange(fn: () => void): void {
+    this.validatorChange = fn;
+  }
+
+  // ----- Public helpers -----
+  focus(): void {
+    this.inputRef?.nativeElement.focus();
+    if (this.selectOnFocus) {
+      const el = this.inputRef.nativeElement;
+      queueMicrotask(() => el.setSelectionRange(0, el.value.length));
+    }
+  }
+
+  selectCountry(iso2: CountryCode): void {
+    if (this.iti) {
+      this.iti.setCountry(iso2.toLowerCase());
+      this.handleInput();
+    }
+  }
+
+  clearInput() {
+    this.setInputValue('');
+    this.handleInput();
+    this.inputRef.nativeElement.focus();
+  }
+
+  // ----- Plugin wiring -----
+  private async initIntlTelInput() {
+    const [{default: intlTelInput}] = await Promise.all([import('intl-tel-input')]);
+
+    const toLowerKeys = (m?: CountryMap) => {
+      if (!m) return undefined;
+      const out: Record<string, string> = {};
+      for (const k in m) {
+        if (Object.prototype.hasOwnProperty.call(m, k)) {
+          const v = (m as Record<string, string | undefined>)[k];
+          if (v != null) out[k.toLowerCase()] = v;
+        }
+      }
+      return out;
+    };
+
+    const config: any = {
+      initialCountry: this.initialCountry === 'auto' ? 'auto' : (this.initialCountry?.toLowerCase() || 'us'),
+      preferredCountries: (this.preferredCountries ?? []).map(c => c.toLowerCase()),
+      onlyCountries: (this.onlyCountries ?? []).map(c => c.toLowerCase()),
+      nationalMode: this.nationalMode,
+      allowDropdown: this.allowDropdown,
+      separateDialCode: this.separateDialCode,
+      geoIpLookup: (cb: (iso2: string) => void) => cb('us'),
+
+      // placeholders
+      autoPlaceholder: this.autoPlaceholder,
+      utilsScript: this.utilsScript,
+      customPlaceholder: this.customPlaceholder,
+
+      // localization
+      i18n: this.i18n,
+      localizedCountries: toLowerKeys(this.localizedCountries),
+
+      // dropdown container
+      dropdownContainer: this.dropdownAttachToBody && typeof document !== 'undefined' ? document.body : undefined
+    };
+
+    this.zone.runOutsideAngular(() => {
+      this.iti = intlTelInput(this.inputRef.nativeElement, config);
+    });
+
+    (this.inputRef.nativeElement as HTMLElement).style.setProperty('--tel-dd-z', String(this.dropdownZIndex));
+  }
+
+  private reinitPlugin() {
+    const current = this.currentRaw();
+    this.destroyPlugin();
+    this.initIntlTelInput().then(() => {
+      if (current) {
+        this.setInputValue(current);
+        this.handleInput();
+      }
+    });
+  }
+
+  private destroyPlugin() {
+    if (this.iti) {
+      this.iti.destroy();
+      this.iti = null;
+    }
+    if (this.inputRef?.nativeElement) {
+      const el = this.inputRef.nativeElement;
+      const clone = el.cloneNode(true) as HTMLInputElement;
+      el.parentNode?.replaceChild(clone, el);
+      (this.inputRef as any).nativeElement = clone;
+    }
+  }
+
+  // ----- Input filtering (digits-only) -----
+  private sanitizeDigits(value: string): string {
+    if (!this.digitsOnly) return value;
+    let v = value.replace(/[^\d+]/g, '');
+    if (this.allowLeadingPlus) {
+      const hasLeadingPlus = v.startsWith('+');
+      v = (hasLeadingPlus ? '+' : '') + v.replace(/\+/g, '');
+    } else {
+      v = v.replace(/\+/g, '');
+    }
+    return v;
+  }
+
+  private bindDomListeners() {
+    const el = this.inputRef.nativeElement;
+
+    this.zone.runOutsideAngular(() => {
+      el.addEventListener('beforeinput', (ev: InputEvent) => {
+        if (!this.digitsOnly) return;
+        const data = (ev as any).data as string | null;
+        if (!data || ev.inputType !== 'insertText') return;
+
+        const pos = el.selectionStart ?? 0;
+        const isDigit = data >= '0' && data <= '9';
+        const isPlusAtStart = this.allowLeadingPlus && data === '+' && pos === 0 && !el.value.includes('+');
+
+        if (!isDigit && !isPlusAtStart) ev.preventDefault();
+      });
+
+      el.addEventListener('paste', (e: ClipboardEvent) => {
+        if (!this.digitsOnly) return;
+        e.preventDefault();
+        const text = (e.clipboardData || (window as any).clipboardData).getData('text');
+        const sanitized = this.sanitizeDigits(text);
+        const start = el.selectionStart ?? el.value.length;
+        const end = el.selectionEnd ?? el.value.length;
+        el.setRangeText(sanitized, start, end, 'end');
+        queueMicrotask(() => this.handleInput());
+      });
+
+      el.addEventListener('input', () => {
+        if (this.digitsOnly) {
+          const val = el.value;
+          const sanitized = this.sanitizeDigits(val);
+          if (val !== sanitized) {
+            const caret = el.selectionStart ?? sanitized.length;
+            el.value = sanitized;
+            el.setSelectionRange(caret, caret);
+          }
+        }
+        this.handleInput();
+      });
+
+      el.addEventListener('countrychange', () => {
+        const iso2 = this.currentIso2();
+        this.zone.run(() => {
+          this.countryChange.emit({iso2});
+          this.validatorChange?.();
+        });
+        this.handleInput();
+      });
+
+      el.addEventListener('blur', () => this.onBlur());
+    });
+  }
+
+  onBlur() {
+    this.touched = true;
+    this.zone.run(() => this.onTouchedCb());
+    if (!this.formatOnBlur) return;
+    const raw = this.currentRaw();
+    if (!raw) return;
+    const parsed = this.tel.parse(raw, this.currentIso2());
+    if (this.nationalMode && parsed.national) {
+      this.setInputValue((parsed.national || '').replace(/\s{2,}/g, ' '));
+    }
+  }
+
+  onFocus() {
+    if (this.selectOnFocus) {
+      const el = this.inputRef.nativeElement;
+      queueMicrotask(() => el.setSelectionRange(0, el.value.length));
+    }
+  }
+
+  private handleInput() {
+    const raw = this.currentRaw();
+    const iso2 = this.currentIso2();
+    const parsed = this.tel.parse(raw, iso2);
+    this.zone.run(() => this.onChange(parsed.e164)); // E.164 or null
+    this.zone.run(() => this.inputChange.emit({raw, e164: parsed.e164, iso2}));
+    if (raw && this.nationalMode && parsed.national) {
+      const normalized = parsed.national.replace(/\s{2,}/g, ' ');
+      if (normalized !== raw) this.setInputValue(normalized);
+    }
+  }
+
+  currentRaw(): string {
+    return (this.inputRef?.nativeElement.value ?? '').trim();
+  }
+
+  private currentIso2(): CountryCode {
+    const iso2 = (this.iti?.getSelectedCountryData?.().iso2 ?? this.initialCountry ?? 'US')
+      .toString().toUpperCase();
+    return iso2 as CountryCode;
+  }
+
+  private setInputValue(v: string) {
+    this.inputRef.nativeElement.value = v ?? '';
+  }
+
+  get showError(): boolean {
+    const invalid = !!this.validate({} as AbstractControl);
+    return this.showErrorWhenTouched ? (this.touched && invalid) : invalid;
+  }
+}

package/src/lib/ngxsmk-tel-input.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { NgxsmkTelInputService } from './ngxsmk-tel-input.service';
+
+describe('NgxsmkTelInputService', () => {
+  let service: NgxsmkTelInputService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NgxsmkTelInputService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { parsePhoneNumberFromString, type CountryCode } from 'libphonenumber-js';
+
+@Injectable({ providedIn: 'root' })
+export class NgxsmkTelInputService {
+  parse(input: string, iso2: CountryCode): { e164: string | null; national: string | null; isValid: boolean } {
+    const phone = parsePhoneNumberFromString(input || '', iso2);
+    if (!phone) return { e164: null, national: null, isValid: false };
+    const isValid = phone.isValid();
+    return { e164: isValid ? phone.number : null, national: phone.formatNational(), isValid };
+  }
+
+  isValid(input: string, iso2: CountryCode): boolean {
+    const phone = parsePhoneNumberFromString(input || '', iso2);
+    return !!phone && phone.isValid();
+  }
+}

package/src/lib/types.ts

@@ -0,0 +1,11 @@
+import type { CountryCode } from 'libphonenumber-js';
+
+export type CountryMap = Partial<Record<CountryCode, string>>;
+
+export interface IntlTelI18n {
+  selectedCountryAriaLabel?: string;
+  countryListAriaLabel?: string;
+  searchPlaceholder?: string;
+  zeroSearchResults?: string;
+  noCountrySelected?: string;
+}

package/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './lib/ngxsmk-tel-input.component';
+export * from './lib/ngxsmk-tel-input.service';
+export type { CountryMap, IntlTelI18n } from './lib/types';

package/tsconfig.lib.json

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

package/tsconfig.lib.prod.json

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

package/tsconfig.spec.json

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