refactor(components/phone-field): use standalone components, address …

…all linting errors (#3004)

libs/components/phone-field/src/lib/modules/phone-field/fixtures/phone-field-input-box.component.fixture.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SkyInputBoxModule } from '@skyux/forms';
 
+import { SkyPhoneFieldModule } from '../phone-field.module';
 import { SkyPhoneFieldCountry } from '../types/country';
 
 @Component({
+  imports: [FormsModule, SkyInputBoxModule, SkyPhoneFieldModule],
   selector: 'sky-test-cmp',
   templateUrl: './phone-field-input-box.component.fixture.html',
-  standalone: false,
 })
 export class PhoneFieldInputBoxTestComponent {
   public hintText: string | undefined;

libs/components/phone-field/src/lib/modules/phone-field/fixtures/phone-field-reactive.component.fixture.ts

@@ -1,15 +1,20 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import {
+  ReactiveFormsModule,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
 
 import { SkyPhoneFieldInputDirective } from '../phone-field-input.directive';
 import { SkyPhoneFieldComponent } from '../phone-field.component';
+import { SkyPhoneFieldModule } from '../phone-field.module';
 import { SkyPhoneFieldCountry } from '../types/country';
 import { SkyPhoneFieldNumberReturnFormat } from '../types/number-return-format';
 
 @Component({
+  imports: [ReactiveFormsModule, SkyPhoneFieldModule],
   selector: 'sky-test-cmp',
   templateUrl: './phone-field-reactive.component.fixture.html',
-  standalone: false,
 })
 export class PhoneFieldReactiveTestComponent implements OnInit {
   public allowExtensions = true;

libs/components/phone-field/src/lib/modules/phone-field/fixtures/phone-field.component.fixture.ts

@@ -1,14 +1,16 @@
 import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { SkyPhoneFieldInputDirective } from '../phone-field-input.directive';
 import { SkyPhoneFieldComponent } from '../phone-field.component';
+import { SkyPhoneFieldModule } from '../phone-field.module';
 import { SkyPhoneFieldCountry } from '../types/country';
 import { SkyPhoneFieldNumberReturnFormat } from '../types/number-return-format';
 
 @Component({
+  imports: [FormsModule, SkyPhoneFieldModule],
   selector: 'sky-test-cmp',
   templateUrl: './phone-field.component.fixture.html',
-  standalone: false,
 })
 export class PhoneFieldTestComponent {
   public allowExtensions = true;

libs/components/phone-field/src/lib/modules/phone-field/phone-field-input.directive.ts

@@ -17,11 +17,16 @@ import {
   Validator,
 } from '@angular/forms';
 
-import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
+import {
+  PhoneNumber,
+  PhoneNumberFormat,
+  PhoneNumberUtil,
+} from 'google-libphonenumber';
 import { Subject, take, takeUntil } from 'rxjs';
 
 import { SkyPhoneFieldAdapterService } from './phone-field-adapter.service';
 import { SkyPhoneFieldComponent } from './phone-field.component';
+import { SkyPhoneFieldNumberReturnFormat } from './types/number-return-format';
 
 /**
  * Creates a button, search input, and text input for entering and validating
@@ -50,7 +55,6 @@ import { SkyPhoneFieldComponent } from './phone-field.component';
       multi: true,
     },
   ],
-  standalone: false,
 })
 export class SkyPhoneFieldInputDirective
   implements OnInit, OnDestroy, ControlValueAccessor, Validator
@@ -207,7 +211,7 @@ export class SkyPhoneFieldInputDirective
     this.#notifyChange?.(this.#getValue());
   }
 
-  #formatPhoneNumber(value: string | undefined): string | undefined {
+  #maybeFormatPhoneNumber(value: string | undefined): string | undefined {
     if (!value) {
       return;
     }
@@ -223,39 +227,47 @@ export class SkyPhoneFieldInputDirective
       );
 
       if (this.#phoneUtils.isPossibleNumber(phoneNumber)) {
-        switch (returnFormat) {
-          case 'international':
-            return this.#phoneUtils.format(
-              phoneNumber,
-              PhoneNumberFormat.INTERNATIONAL,
-            );
-
-          case 'national':
-            return this.#phoneUtils.format(
-              phoneNumber,
-              PhoneNumberFormat.NATIONAL,
-            );
-
-          case 'default':
-          default:
-            return regionCode && regionCode !== defaultCountry
-              ? this.#phoneUtils.format(
-                  phoneNumber,
-                  PhoneNumberFormat.INTERNATIONAL,
-                )
-              : this.#phoneUtils.format(
-                  phoneNumber,
-                  PhoneNumberFormat.NATIONAL,
-                );
-        }
+        return this.#formatPhoneNumber(
+          phoneNumber,
+          returnFormat,
+          defaultCountry,
+          regionCode,
+        );
       }
-    } catch (err) {
+    } catch {
       /* */
     }
 
     return;
   }
 
+  #formatPhoneNumber(
+    phoneNumber: PhoneNumber,
+    returnFormat?: SkyPhoneFieldNumberReturnFormat,
+    defaultCountry?: string,
+    regionCode?: string,
+  ): string {
+    switch (returnFormat) {
+      case 'international':
+        return this.#phoneUtils.format(
+          phoneNumber,
+          PhoneNumberFormat.INTERNATIONAL,
+        );
+
+      case 'national':
+        return this.#phoneUtils.format(phoneNumber, PhoneNumberFormat.NATIONAL);
+
+      case 'default':
+      default:
+        return regionCode && regionCode !== defaultCountry
+          ? this.#phoneUtils.format(
+              phoneNumber,
+              PhoneNumberFormat.INTERNATIONAL,
+            )
+          : this.#phoneUtils.format(phoneNumber, PhoneNumberFormat.NATIONAL);
+    }
+  }
+
   #getDefaultCountry(): string | undefined {
     return this.#phoneFieldComponent?.defaultCountry;
   }
@@ -284,15 +296,15 @@ export class SkyPhoneFieldInputDirective
       }
 
       return this.#phoneUtils.isValidNumberForRegion(phoneNumber, regionCode);
-    } catch (e) {
+    } catch {
       return false;
     }
   }
 
   #setValue(value: string | undefined): void {
     /* istanbul ignore else */
     if (value !== undefined) {
-      const formatted = this.#formatPhoneNumber(value);
+      const formatted = this.#maybeFormatPhoneNumber(value);
       this.#_value = formatted ?? value;
     }
   }

libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.spec.ts

@@ -4,16 +4,10 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing';
-import {
-  FormsModule,
-  NgModel,
-  ReactiveFormsModule,
-  UntypedFormControl,
-} from '@angular/forms';
+import { NgModel, UntypedFormControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SkyAppTestUtility, expect, expectAsync } from '@skyux-sdk/testing';
-import { SkyInputBoxModule } from '@skyux/forms';
 import {
   SkyTheme,
   SkyThemeMode,
@@ -27,7 +21,6 @@ import { BehaviorSubject } from 'rxjs';
 import { PhoneFieldInputBoxTestComponent } from './fixtures/phone-field-input-box.component.fixture';
 import { PhoneFieldReactiveTestComponent } from './fixtures/phone-field-reactive.component.fixture';
 import { PhoneFieldTestComponent } from './fixtures/phone-field.component.fixture';
-import { SkyPhoneFieldModule } from './phone-field.module';
 
 describe('Phone Field Component', () => {
   let mockThemeSvc: Partial<SkyThemeService>;
@@ -287,8 +280,7 @@ describe('Phone Field Component', () => {
       };
 
       TestBed.configureTestingModule({
-        declarations: [PhoneFieldTestComponent],
-        imports: [SkyPhoneFieldModule, NoopAnimationsModule, FormsModule],
+        imports: [PhoneFieldTestComponent, NoopAnimationsModule],
         providers: [
           {
             provide: SkyThemeService,
@@ -1383,13 +1375,7 @@ describe('Phone Field Component', () => {
       };
 
       TestBed.configureTestingModule({
-        declarations: [PhoneFieldReactiveTestComponent],
-        imports: [
-          SkyPhoneFieldModule,
-          NoopAnimationsModule,
-          FormsModule,
-          ReactiveFormsModule,
-        ],
+        imports: [PhoneFieldReactiveTestComponent, NoopAnimationsModule],
         providers: [
           {
             provide: SkyThemeService,
@@ -2292,13 +2278,7 @@ describe('Phone Field Component', () => {
       };
 
       TestBed.configureTestingModule({
-        declarations: [PhoneFieldInputBoxTestComponent],
-        imports: [
-          SkyInputBoxModule,
-          SkyPhoneFieldModule,
-          NoopAnimationsModule,
-          FormsModule,
-        ],
+        imports: [PhoneFieldInputBoxTestComponent, NoopAnimationsModule],
         providers: [
           {
             provide: SkyThemeService,