add validation

Author: tintinthong

Diff for: packages/boxel-ui/addon/src/components/phone-input/index.gts

@@ -9,11 +9,13 @@ import {
   type CountryCode,
   getExampleNumber,
   type CountryCallingCode,
+  isValidPhoneNumber,
 } from 'libphonenumber-js';
 // @ts-expect-error import not found
 import examples from 'libphonenumber-js/mobile/examples';
 import { countries, type TCountryCode, getEmojiFlag } from 'countries-list';
-import { TemplateOnlyComponent } from '@ember/component/template-only';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { debounce } from 'lodash';
 
 interface Signature {
   Args: {};
@@ -58,9 +60,19 @@ const getCountryInfo = (countryCode: CountryCode): CountryInfo | undefined => {
 export class PhoneInput extends Component<Signature> {
   @tracked items: Array<CountryInfo> = [];
   @tracked selectedItem: CountryInfo = getCountryInfo('US')!;
+  @tracked validationState: InputValidationState = 'initial';
+  @tracked input: string = '';
 
   @action onSelectItem(item: CountryInfo): void {
     this.selectedItem = item;
+    if (this.input.length > 0) {
+      this.validationState = isValidPhoneNumber(
+        this.input,
+        this.selectedItem.code,
+      )
+        ? 'valid'
+        : 'invalid';
+    }
   }
 
   constructor(owner: unknown, args: any) {
@@ -79,14 +91,26 @@ export class PhoneInput extends Component<Signature> {
     return undefined;
   }
 
-  get validationState(): InputValidationState {
-    return this.placeholder ? 'valid' : 'invalid';
+  get phoneNumber(): string {
+    return `+${this.selectedItem.callingCode} `;
+  }
+
+  @action onInput(v: string): void {
+    this.debouncedInput(v);
   }
 
+  private debouncedInput = debounce((input: string) => {
+    this.validationState = isValidPhoneNumber(input, this.selectedItem.code)
+      ? 'valid'
+      : 'invalid';
+    this.input = input;
+  }, 300);
+
   <template>
     <BoxelInputGroup
       @placeholder={{this.placeholder}}
       @state={{this.validationState}}
+      @onInput={{this.onInput}}
     >
       <:before as |Accessories|>
         <Accessories.Select