ngxsmk-tel-input 1.6.4 → 1.6.5

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/README.md

@@ -368,4 +368,4 @@ Clear `.angular/cache`, rebuild the lib, and restart `ng serve`.
 * UI powered by [`intl-tel-input`](https://github.com/jackocnr/intl-tel-input)
 * Parsing & validation by [`libphonenumber-js`](https://github.com/catamphetamine/libphonenumber-js)
 
-Last updated: 2025-08-19
+Last updated: 2025-08-29

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngxsmk-tel-input",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": []
+}

package/package.json

@@ -1,69 +1,59 @@
-{
-  "name": "ngxsmk-tel-input",
-  "version": "1.6.4",
-  "description": "Angular international telephone input (intl-tel-input UI + libphonenumber-js validation). ControlValueAccessor. SSR-safe.",
-  "license": "MIT",
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "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",
-    "angular",
-    "angular-forms",
-    "controlvalueaccessor",
-    "cva",
-    "phone-input",
-    "telephone-input",
-    "international-phone",
-    "intl-tel-input",
-    "libphonenumber-js",
-    "e164",
-    "country-code",
-    "dial-code",
-    "separate-dial-code",
-    "national-mode",
-    "country-flags",
-    "i18n",
-    "localization",
-    "rtl",
-    "a11y",
-    "ssr",
-    "typescript"
-  ],
-  "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 || ^1.12.11"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2022/ngxsmk-tel-input.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ngxsmk-tel-input.mjs"
-    }
-  }
-}
+{
+  "name": "ngxsmk-tel-input",
+  "version": "1.6.5",
+  "description": "Angular international telephone input (intl-tel-input UI + libphonenumber-js validation). ControlValueAccessor. SSR-safe.",
+  "license": "MIT",
+  "sideEffects": false,
+  "publishConfig": { "access": "public" },
+
+  "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",
+    "angular",
+    "angular-forms",
+    "controlvalueaccessor",
+    "cva",
+    "phone-input",
+    "telephone-input",
+    "international-phone",
+    "intl-tel-input",
+    "libphonenumber-js",
+    "e164",
+    "country-code",
+    "dial-code",
+    "separate-dial-code",
+    "national-mode",
+    "country-flags",
+    "i18n",
+    "localization",
+    "rtl",
+    "a11y",
+    "ssr",
+    "typescript"
+  ],
+
+  "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 || ^1.12.11"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

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

@@ -0,0 +1,226 @@
+/* ---------- 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);
+}
+
+.ngxsmk-tel.disabled .iti__flag-container,
+.ngxsmk-tel.disabled .iti__selected-flag {
+  pointer-events: none;
+  opacity: 0.6;
+}

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();
+  });
+});