v1.8.4

v1.8.4 — 2026-06-10

This release fixes three persistent bugs in reactive and template-driven forms:

• No Value Accessor error: Resolved the NG01203 error when using formControlName with
  standalone components by broadening the NG_VALUE_ACCESSOR provider scope to both providers
  and viewProviders, and adding ReactiveFormsModule/FormsModule to component imports.

• Touched state during init: Fixed a race condition where the intl-tel-input plugin could
  trigger focus/blur events during setup that prematurely marked the field as touched, causing
  validation errors to appear before any user interaction.

• Submit on Enter: Fixed Enter key not triggering form submission when the input is used
  with [formGroup] and [formControlName]. Replaced the broken setTimeout-based fallback
  with direct form.requestSubmit(), which keeps execution inside the Angular zone and
  correctly fires both native (submit) and Angular (ngSubmit) handlers.

v1.8.3 - Form Submission and DI Fixes

This release fixes form submission issues on Enter keypress and resolves Dependency Injection conflicts when nesting the input component inside custom wrappers.

🛠️ Bug Fixes

• Form Submission on Enter: Pressing the Enter key inside the phone input now correctly submits the closest <form>. Previously, implicit browser form submission was blocked due to nested country search inputs in the dropdown.
• DI ControlValueAccessor Conflict: Restricted the internal NgControl lookup to the element's local injector ({ self: true }). This prevents the component from grabbing the parent's form control and throwing the No value accessor... runtime error when nested under custom ControlValueAccessor wrappers (such as <intl-phone>).

🧪 Quality Assurance

• Added comprehensive unit tests in the library test suite to verify form submission behaviors on keydown events and DI lookup scopes.
• All unit tests passed cleanly, and library distribution files have been successfully rebuilt.

---

🌟 Check out our other projects!

If you find this library helpful, please check out and star our Angular Datepicker package:
👉 ngxsmk-datepicker 📅 ⭐

feat: release v1.8.2 with customizable disabled state design tokens, opacity fixes, and Angular 22 support

Description

This release introduces customizable disabled state CSS variables (design tokens), fixes the disabled color variation and double-opacity issues, and formally declares support for Angular 22.

---

🚀 Features & Enhancements

1. Customizable Disabled State Design Tokens (CSS Variables)

Introduced new CSS custom properties in ngxsmk-tel-input.component.scss to allow fine-grained styling of the disabled state:

• --tel-disabled-bg: Defaults to #f1f5f9 (Light) / #1e293b (Dark). Falls back to Bootstrap's --bs-secondary-bg when present in the host application.
• --tel-disabled-fg: Defaults to #94a3b8 (Light) / #64748b (Dark). Falls back to Bootstrap's --bs-secondary-color when present.
• --tel-disabled-border: Defaults to #cbd5e1 (Light) / #334155 (Dark). Falls back to Bootstrap's --bs-border-color when present.
• --tel-disabled-opacity: Set to 1 by default.

This ensures seamless integration and style alignment with regular host inputs (e.g., Bootstrap .form-control:disabled selectors).

2. Angular 22 Compatibility

• Formally declared compatibility and updated project keywords in package.json for Angular 22.
• Updated documentation in root and library README.md files indicating active testing on Angular 19 - 22.

---

🔧 Fixes & Refactoring

1. Input Disabled Opacity Fading

• Replaced the hardcoded wrapper opacity: 0.7 with the customizable --tel-disabled-opacity variable (defaulting to 1).
• This eliminates the cumulative double-opacity fading on the flag dropdown trigger and input, preventing the disabled background from appearing as a lighter, transparent gray.

2. Spec Types and Build Warnings

• Resolved TypeScript compilation/type-predicate matching warnings in ngxsmk-tel-input.component.spec.ts by correctly typing the Jasmine matches spy callback.
• Suppressed CommonJS bailout warnings for intl-tel-input using allowedCommonJsDependencies in angular.json.
• Adjusted style/bundle budgets in angular.json to prevent warnings during Angular production builds.

---

🧪 Verification & Testing

• Compiled successfully via npm run build:lib and npm run build:demo.
• Ran the entire unit test suite (81 tests successfully passing).

v1.8.1 - Parent Fieldset Disabled Detection & CSS Specificity Fixes

Release Notes

This release introduces native detection for parent <fieldset> disabled states and resolves CSS specificity issues that prevented standard disabled backgrounds from styling the component.

🚀 What's New

• Parent Fieldset Disabled Detection: Natively detects when the component is placed inside a disabled <fieldset [disabled]="..."> element using Angular's DoCheck hook. When the parent fieldset is disabled, the phone input dynamically updates to:
  • Apply the .disabled class to the outer wrapper container.
  • Disable click and touch events on the country selection dropdown.
  • Disable keyboard navigation/tabbing to the country selector (tabindex="-1" and aria-disabled="true").
• CSS Specificity Refactoring: Removed !important active theme declarations when the input control is disabled (using :not(:disabled)). This allows browser-default disabled styles or your application's global styles (like Bootstrap's .form-control:disabled) to apply to the input.
• Default Disabled Styling: Added clean default disabled styling variables and styles for both light and dark themes (yielding a standard modern grayed-out look).

🛠️ Technical Enhancements

• Added robust unit tests to verify native :disabled matches and UI disabled propagation.
• Built and verified with Angular 19+ (81/81 specs passed successfully).

v1.7.0 - Advanced Customization & Parity Features

Release Notes / Description

We are excited to announce v1.7.0 of ngxsmk-tel-input! 🚀

This release introduces highly requested customization features that give you complete control over dropdown flags, country lists, and search placeholder texts. All new options are fully compatible with both traditional Angular @Input() and modern Signal-based input() APIs.

🌟 New Features

1. 🚫 Exclude Countries (excludeCountries / excludeCountriesSignal)
   • You can now specify an array of ISO-2 country codes to exclude them from the country selection dropdown.
2. 🔍 Custom Search Placeholder (searchPlaceholder / searchPlaceholderSignal)
   • Customize the placeholder text of the search input box inside the dropdown to match your application's tone and translation dictionary.
3. 🏳️ flag visibility toggles
   • showFlags / showFlagsSignal: Completely hides flags inside the selected wrapper and dropdown list (perfect for minimalist or text-only fields).
   • searchCountryFlag / searchCountryFlagSignal: Hides flags only inside the country list dropdown, keeping the selected country flag displayed.

⚙️ TypeScript & API Safety

• Added full support for the new inputs in StrictPhoneInputConfig.
• Refined types inside types-enhanced.ts to ensure strict autocompletion within IDEs.

📚 Documentation Updates

• Updated all API guides, standard README.md, SIGNALS_API.md, and TYPESCRIPT.md to document the new parameters.

feat: Set dark mode as default theme and fix navigation colors

Summary

This PR sets dark mode as the default theme for all example components and the demo app, and fixes navigation icon/text colors for better dark mode visibility.

Changes

Theme Defaults

• ✅ Changed default theme from 'light' to 'dark' for:
  • E-commerce Checkout component
  • User Registration component
  • Profile Management component
  • Demo app (resolvedTheme)

UI Fixes

• ✅ Fixed navigation icon colors in dark mode - icons now properly turn white when active
• ✅ Fixed TypeScript build error in registration component (getTypeDescription now handles undefined)

Documentation

• ✅ Updated projects/examples/README.md to document dark mode defaults
• ✅ Updated CHANGELOG.md with all changes

Technical Details

Component Changes

• Modified theme input default from 'light' to 'dark' in all three example components
• Updated resolvedTheme default in demo app from 'light' to 'dark'
• Fixed navigation icon conditional styling to properly apply text-white when active

Type Safety

• Updated getTypeDescription() method signature to accept string | undefined
• Added null check to prevent TypeScript compilation errors

Testing

• ✅ Build passes without errors
• ✅ All linting checks pass
• ✅ Navigation icons display correctly in dark mode
• ✅ Example components render with dark theme by default

Screenshots

Navigation menu now displays white icons and text when items are active in dark mode

Related Issues

Fixes build error and improves dark mode UX consistency across the demo application.

Localization & RTL

1.1.0

readme.md file updates and version updates