feat: Drop @input in favor of signals

Author: mpalourdio

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.15.0
+
+- Drop `@Input` in favor of `signals`.
+
 ## v0.14.0
 
 - `angular 19` migration.

README.md

@@ -31,7 +31,6 @@ $ npm install intl-tel-input-ng --save / yarn add intl-tel-input-ng
 
 - Add `node_modules/intl-tel-input/build/js/utils.js` to the `scripts` section in your `angular.json`.  
 - Add `node_modules/intl-tel-input/build/css/intlTelInput.css` to the `styles` section in your `angular.json`.
-- Import ``IntlTelInputNgModule.forRoot()`` in your main application module.
 
 ## Options
  - `options`: An object wrapping the `intl-tel-input` [options](https://github.com/jackocnr/intl-tel-input#options).

src/lib/components/intl-tel-input.component.html

@@ -1,14 +1,14 @@
-@if (label && name) {
-    <label [attr.for]="name" [ngClass]="labelCssClass" >{{ label }}</label>
+@if (label() && name()) {
+    <label [attr.for]="name()" [ngClass]="labelCssClass()" >{{ label() }}</label>
 }
 <input
     type="text"
-    [ngClass]="cssClass"
-    [attr.id]="name"
-    [attr.name]="name"
-    [name]="name"
-    [attr.aria-required]="required || null"
-    [required]="required"
+    [ngClass]="cssClass()"
+    [attr.id]="name()"
+    [attr.name]="name()"
+    [name]="name()"
+    [attr.aria-required]="required() || null"
+    [required]="required()"
     [(ngModel)]="phoneNumber"
     (countrychange)="i18nizePhoneNumber()"
     #intlTelInput>

src/lib/components/intl-tel-input.component.spec.ts

@@ -40,37 +40,37 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should convert phone number to E164 format', () => {
-        component.options = {
+        component.options.set({
             preferredCountries: ['ch'],
             onlyCountries: ['ch', 'fr']
-        };
+        });
         component.ngAfterViewInit();
 
         component.phoneNumber = '0797703808';
 
-        expect(component.E164PhoneNumber).toBe('+41797703808');
+        expect(component.E164PhoneNumber()).toBe('+41797703808');
     });
 
     it('should re-set E164 phone number on countryChange', () => {
-        component.options = {
+        component.options.set({
             preferredCountries: ['ch'],
             onlyCountries: ['ch', 'fr']
-        };
+        });
         component.ngAfterViewInit();
 
         component.phoneNumber = '0797703808';
 
-        expect(component.E164PhoneNumber).toBe('+41797703808');
+        expect(component.E164PhoneNumber()).toBe('+41797703808');
 
         component.phoneNumber = '0681215656';
         component.intlTelInput.setCountry('fr');
 
-        expect(component.E164PhoneNumber).toBe('+33681215656');
+        expect(component.E164PhoneNumber()).toBe('+33681215656');
     });
 
     it('should add a label tag if label attribute is set', () => {
         const labelText = 'label text';
-        component.label = labelText;
+        component.label.set(labelText);
         fixture.detectChanges();
 
         const element = fixture
@@ -91,7 +91,7 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should not have a css class by default for the label', () => {
-        component.label = 'label';
+        component.label.set('label');
         fixture.detectChanges();
 
         const element = fixture
@@ -103,20 +103,20 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should be possible to specify a css class for the label', () => {
-        component.label = 'label';
-        component.labelCssClass = 'label-css-class';
+        component.label.set('label');
+        component.labelCssClass.set('label-css-class');
         fixture.detectChanges();
 
         const element = fixture
             .debugElement
             .query(By.css('label'))
             .nativeElement;
 
-        expect(element.className).toContain(component.labelCssClass);
+        expect(element.className).toContain(component.labelCssClass());
     });
 
     it('should set both required and aria-required if specified', () => {
-        component.required = true;
+        component.required.set(true);
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
@@ -134,26 +134,26 @@ describe('IntlTelInputComponent', () => {
             .query(By.css('input'))
             .nativeElement;
 
-        expect(element.getAttribute('name')).toBe(component.name);
+        expect(element.getAttribute('name')).toBe(component.name());
         expect(element.getAttribute('name')).toBe(element.getAttribute('id'));
     });
 
     it('should set name and id to the same value', () => {
-        component.name = 'custom-name';
+        component.name.set('custom-name');
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
             .debugElement
             .query(By.css('input'))
             .nativeElement;
-
-        expect(element.getAttribute('name')).toBe(component.name);
+console.log(component.name());
+        expect(element.getAttribute('name')).toBe(component.name());
         expect(element.getAttribute('name')).toBe(element.getAttribute('id'));
     });
 
     it('should allow specifying a css class', () => {
         const cssClass = 'my-css-class';
-        component.cssClass = cssClass;
+        component.cssClass.set(cssClass);
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
@@ -165,32 +165,33 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should be possible to set preferredCountries option', () => {
-        component.options = {
+        component.options.set({
             countrySearch: false,
             preferredCountries: ['ch'],
             onlyCountries: ['ch']
-        };
+        });
         component.ngAfterViewInit();
 
         fixture.detectChanges();
-
+console.log(fixture
+    .debugElement);
         const element = fixture
             .debugElement
             .query(By.css('#intl-tel-input-name'))
             .nativeElement
             .parentNode
             .querySelector('.iti__preferred');
 
-        expect(element.getAttribute('data-country-code')).toBe(component.options.onlyCountries?.[0]);
+        expect(element.getAttribute('data-country-code')).toBe(component.options().onlyCountries?.[0]);
     });
 
     it('should be possible to set i18n option', () => {
         const localizedCountryName = 'Suisse';
-        component.options = {
+        component.options.set({
             preferredCountries: ['ch'],
             i18n: { ch: localizedCountryName },
             onlyCountries: ['ch']
-        };
+        });
         component.ngAfterViewInit();
 
         fixture.detectChanges();

src/lib/components/intl-tel-input.component.ts

@@ -7,7 +7,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, model, ViewChild } from '@angular/core';
 import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
 import intlTelInput from 'intl-tel-input';
 import { IntlTelInputOptions } from '../model/intl-tel-input-options';
@@ -24,21 +24,20 @@ import { NgClass } from "@angular/common";
 })
 export class IntlTelInputComponent implements AfterViewInit {
 
-    @Input() cssClass!: string;
-    @Input() E164PhoneNumber!: string | null;
-    @Input() label!: string;
-    @Input() labelCssClass!: string;
-    @Input() name = 'intl-tel-input-name';
-    @Input() options: IntlTelInputOptions = {};
-    @Input() required!: boolean;
-    @Output() private E164PhoneNumberChange = new EventEmitter<string | null>();
+    cssClass = model<string>();
+    label = model<string>();
+    labelCssClass = model<string>();
+    name = model<string>('intl-tel-input-name');
+    options = model<IntlTelInputOptions>({});
+    required = model<boolean>(false);
+    E164PhoneNumber = model<string | null>();
     @ViewChild('intlTelInput') private _inputElement!: ElementRef;
     private _phoneNumber!: string;
     private _intlTelInput!: IntlTelInput;
 
     ngAfterViewInit(): void {
         const intlTelInputInstance = intlTelInput;
-        this._intlTelInput = intlTelInputInstance(this._inputElement.nativeElement, this.options);
+        this._intlTelInput = intlTelInputInstance(this._inputElement.nativeElement, this.options());
     }
 
     get intlTelInput(): IntlTelInput {
@@ -58,10 +57,9 @@ export class IntlTelInputComponent implements AfterViewInit {
     }
 
     i18nizePhoneNumber(): void {
-        this.E164PhoneNumber = null;
+        this.E164PhoneNumber.set(null);
         if (this._intlTelInput.isValidNumber()) {
-            this.E164PhoneNumber = this._intlTelInput.getNumber();
+            this.E164PhoneNumber.set(this._intlTelInput.getNumber());
         }
-        this.E164PhoneNumberChange.emit(this.E164PhoneNumber);
     }
 }