Merge pull request #59 from mpalourdio/input

fix: Drop `model()` in favor of `input()`.

Author: mpalourdio

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.16.0
+
+- Drop `model()` in favor of `input()`.
+
 ## v0.15.0
 
 - Drop `@Input` in favor of `signals`.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input-ng",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",

package.json

@@ -40,7 +40,7 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should convert phone number to E164 format', () => {
-        component.options.set({
+        fixture.componentRef.setInput('options', {
             preferredCountries: ['ch'],
             onlyCountries: ['ch', 'fr']
         });
@@ -52,7 +52,7 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should re-set E164 phone number on countryChange', () => {
-        component.options.set({
+        fixture.componentRef.setInput('options', {
             preferredCountries: ['ch'],
             onlyCountries: ['ch', 'fr']
         });
@@ -70,7 +70,7 @@ describe('IntlTelInputComponent', () => {
 
     it('should add a label tag if label attribute is set', () => {
         const labelText = 'label text';
-        component.label.set(labelText);
+        fixture.componentRef.setInput('label', 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.set('label');
+        fixture.componentRef.setInput('label', 'label');
         fixture.detectChanges();
 
         const element = fixture
@@ -103,8 +103,8 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should be possible to specify a css class for the label', () => {
-        component.label.set('label');
-        component.labelCssClass.set('label-css-class');
+        fixture.componentRef.setInput('label', 'label');
+        fixture.componentRef.setInput('labelCssClass', 'labelCssClass');
         fixture.detectChanges();
 
         const element = fixture
@@ -116,7 +116,8 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should set both required and aria-required if specified', () => {
-        component.required.set(true);
+        fixture.componentRef.setInput('required', true);
+
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
@@ -139,21 +140,22 @@ describe('IntlTelInputComponent', () => {
     });
 
     it('should set name and id to the same value', () => {
-        component.name.set('custom-name');
+        fixture.componentRef.setInput('name', 'custom-name');
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
             .debugElement
             .query(By.css('input'))
             .nativeElement;
-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.set(cssClass);
+        fixture.componentRef.setInput('cssClass', cssClass);
+
         fixture.detectChanges();
 
         const element: HTMLElement = fixture
@@ -165,16 +167,14 @@ console.log(component.name());
     });
 
     it('should be possible to set preferredCountries option', () => {
-        component.options.set({
+        fixture.componentRef.setInput('options', {
             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'))
@@ -187,7 +187,7 @@ console.log(fixture
 
     it('should be possible to set i18n option', () => {
         const localizedCountryName = 'Suisse';
-        component.options.set({
+        fixture.componentRef.setInput('options', {
             preferredCountries: ['ch'],
             i18n: { ch: localizedCountryName },
             onlyCountries: ['ch']

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

@@ -7,12 +7,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { AfterViewInit, Component, ElementRef, model, ViewChild } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, input, model, ViewChild } from '@angular/core';
 import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
 import intlTelInput from 'intl-tel-input';
+import { IntlTelInput } from '../model/intl-tel-input';
 import { IntlTelInputOptions } from '../model/intl-tel-input-options';
-import { IntlTelInput } from "../model/intl-tel-input";
-import { NgClass } from "@angular/common";
 
 @Component({
     selector: 'intl-tel-input',
@@ -24,12 +24,12 @@ import { NgClass } from "@angular/common";
 })
 export class IntlTelInputComponent implements AfterViewInit {
 
-    readonly cssClass = model<string>();
-    readonly label = model<string>();
-    readonly labelCssClass = model<string>();
-    readonly name = model<string>('intl-tel-input-name');
-    readonly options = model<IntlTelInputOptions>({});
-    readonly required = model<boolean>(false);
+    readonly cssClass = input<string>();
+    readonly label = input<string>();
+    readonly labelCssClass = input<string>();
+    readonly name = input<string>('intl-tel-input-name');
+    readonly options = input<IntlTelInputOptions>({});
+    readonly required = input<boolean>(false);
     readonly E164PhoneNumber = model<string | null>();
     @ViewChild('intlTelInput') private readonly _inputElement!: ElementRef;
     private _phoneNumber!: string;