@flywheel-io/vision 2.0.0 → 2.1.0-beta.0

package/src/components/phone-input/phone-input.component.ts

@@ -0,0 +1,318 @@
+/* eslint-disable @typescript-eslint/no-explicit-any,@rx-angular/prefer-no-layout-sensitive-apis,@rx-angular/no-explicit-change-detection-apis */
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+  AsYouType,
+  CountryCode,
+  E164Number,
+  getExampleNumber,
+  parsePhoneNumberFromString,
+  PhoneNumber,
+} from 'libphonenumber-js';
+
+import { FwMenuItemComponent } from '../menu/menu-item/menu-item.component';
+import { CountryCodeData, Examples } from './country-code.data';
+import { Country, PhoneNumberFormat } from './phone-input.model';
+
+@Component({
+  selector: 'fw-phone-input',
+  templateUrl: './phone-input.component.html',
+  styleUrls: ['./phone-input.component.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FwPhoneInputComponent),
+    multi: true,
+  }],
+})
+export class FwPhoneInputComponent implements OnInit, OnChanges, ControlValueAccessor {
+  @Input() preferredCountries: Array<string> = ['us'];
+  @Input() onlyCountries: Array<string> = [];
+  @Input() enableCountrySearch = true;
+  @Input() showCountrySelector?: boolean = true;
+  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Input() rightIcon?: string;
+  /**
+   * @deprecated please use fw-wrapped-input instead
+   */
+  @Input() helperText?: string;
+  /**
+   * @deprecated please use fw-wrapped-input instead
+   */
+  @Input() errorText?: string;
+  @Input() placeholder?: string;
+  @Input() readOnly?: boolean;
+  @HostBinding('class.errored') @Input() error?: boolean = false;
+
+  @Input() value: E164Number | string | undefined;
+
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  set disabled(value: boolean) {
+    this._disabled = Boolean(value);
+  }
+
+  @Input()
+  get format(): PhoneNumberFormat {
+    return this._format;
+  }
+
+  set format(value: PhoneNumberFormat) {
+    this._format = value;
+    this.phoneFormattedNational = this.formattedPhoneNumber;
+  }
+
+  @Output() countryChanged = new EventEmitter<Country>();
+
+  @ViewChild(CdkMenuTrigger) trigger: CdkMenuTrigger;
+  phoneFormattedNational: string | undefined;
+  allCountryList: Array<Country> = [];
+  preferredCountryList: Array<Country> = [];
+  selectedCountry: Country | undefined;
+  selectedCountryCode: CountryCode | undefined;
+  filteredCountryItems: Array<FwMenuItemComponent> = [];
+
+  private _value: E164Number | string | undefined;
+  private _disabled = false;
+  private _format: PhoneNumberFormat = 'national';
+  private _numberObject: PhoneNumber | undefined;
+  private _previousFormattedNumber: string | undefined;
+
+  static getPhoneNumberPlaceHolder(countryISOCode: CountryCode): string | undefined {
+    const result = getExampleNumber(countryISOCode, Examples);
+    return Boolean(result) ? result.number.toString() : undefined;
+  }
+
+  onTouched = (): void => {
+  };
+
+  onChange: any = () => {
+  };
+
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+  ) {
+    this.fetchCountryData();
+  }
+
+  ngOnInit(): void {
+    if (this.preferredCountries.length) {
+      this.preferredCountries.forEach((iso2) => {
+        const preferredCountry = this.allCountryList
+          .filter((c) => c.iso2 === iso2)
+          .shift();
+        if (preferredCountry) {
+          this.preferredCountryList.push(preferredCountry);
+        }
+      });
+    }
+    if (this.onlyCountries.length) {
+      this.allCountryList = this.allCountryList.filter((c) =>
+        this.onlyCountries.includes(c.iso2),
+      );
+    }
+    if (this._numberObject && this._numberObject.country) {
+      // If an existing number is present, we use it to determine selectedCountry
+      this.selectedCountry = this.getCountry(this._numberObject.country);
+    } else {
+      if (this.preferredCountryList.length) {
+        this.selectedCountry = this.preferredCountryList[0];
+      } else {
+        this.selectedCountry = this.allCountryList[0];
+      }
+    }
+    this.countryChanged.emit(this.selectedCountry);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.value) {
+      this.writeValue(changes.value.currentValue);
+    }
+  }
+
+  public phoneNumberChange(): void {
+    try {
+      this._numberObject = parsePhoneNumberFromString(
+        this.phoneFormattedNational?.toString() || '',
+        this.selectedCountry?.iso2.toUpperCase() as CountryCode,
+      );
+      this.formatAsYouTypeIfEnabled();
+      this.value = this._numberObject?.number;
+      if (this._numberObject && this._numberObject.isValid()) {
+        if (this.phoneFormattedNational !== this.formattedPhoneNumber) {
+          this.phoneFormattedNational = this.formattedPhoneNumber;
+        }
+        if (
+          this.selectedCountry?.iso2 !== this._numberObject.country &&
+          Boolean(this._numberObject.country)
+        ) {
+          this.selectedCountry = this.getCountry(this._numberObject.country);
+          this.countryChanged.emit(this.selectedCountry);
+        }
+      }
+    } catch (e) {
+      // if no possible numbers are there,
+      // then the full number is passed so that validator could be triggered and proper error could be shown
+      this.value = this.phoneFormattedNational?.toString();
+    }
+    this.onChange(this.value);
+    this._changeDetectorRef.markForCheck();
+  }
+
+  protected countrySelect(isoValue: string, el: HTMLElement): void {
+    if (this.phoneFormattedNational) {
+      this.phoneFormattedNational = this._numberObject?.nationalNumber;
+    }
+    this.selectedCountry = this.getCountry(isoValue);
+    this.countryChanged.emit(this.selectedCountry);
+    this.phoneNumberChange();
+    this.trigger.close();
+    // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+    el.focus();
+  }
+
+  protected filteredItemsChange(menuItems): void {
+    this.filteredCountryItems = menuItems;
+  }
+
+  public getCountry(code: string): Country {
+    return (
+      this.allCountryList.find((c) => c.iso2 === code.toLowerCase()) || {
+        name: 'UN',
+        iso2: 'UN',
+        dialCode: '',
+        priority: 0,
+        areaCodes: undefined,
+        flagClass: 'UN',
+        placeHolder: '',
+      }
+    );
+  }
+
+  public buttonKeyPress(event: KeyboardEvent): void {
+    if (this.trigger) {
+      if (event.key === 'Escape') {
+        this.trigger.close();
+      }
+      if (this.trigger.isOpen() && event.key === 'Tab') {
+        this.trigger.close();
+      }
+      if (event.key === 'Enter') {
+        this.trigger.open();
+      }
+    }
+  }
+
+  public inputKeyPress(event: KeyboardEvent): void {
+    const allowedKeys = ['Backspace', 'Escape', 'ArrowLeft', 'ArrowRight', 'Meta', 'Tab'];
+    const pattern = /[0-9+\- ]/;
+    if (!allowedKeys.includes(event.key) && !event.metaKey && !event.ctrlKey && !pattern.test(event.key)) {
+      event.preventDefault();
+    }
+    if (this.trigger && this.trigger.isOpen() && event.key === 'Tab') {
+      this.trigger.close();
+    }
+  }
+
+  protected fetchCountryData(): void {
+    CountryCodeData.forEach((c) => {
+      const country: Country = {
+        name: c[0].toString(),
+        iso2: c[1].toString(),
+        dialCode: c[2].toString(),
+        priority: Number(c[3]) || 0,
+        areaCodes: (c[4] as string[]) || undefined,
+        flagClass: c[1].toString().toUpperCase(),
+        placeHolder: '',
+      };
+      this.allCountryList.push(country);
+    });
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabled = isDisabled;
+    this._changeDetectorRef.markForCheck();
+  }
+
+  writeValue(value: any): void {
+    if (value) {
+      this._numberObject = parsePhoneNumberFromString(value);
+      if (this._numberObject) {
+        const countryCode = this._numberObject.country;
+        this.phoneFormattedNational = this.formattedPhoneNumber;
+        if (!countryCode) {
+          return;
+        }
+        setTimeout(() => {
+          this.selectedCountry = this.getCountry(countryCode);
+          if (
+            this.selectedCountry.dialCode &&
+            !this.preferredCountries.includes(this.selectedCountry.iso2)
+          ) {
+            this.preferredCountryList.push(this.selectedCountry);
+          }
+          this.countryChanged.emit(this.selectedCountry);
+          this._changeDetectorRef.markForCheck();
+        }, 1);
+      } else {
+        this.phoneFormattedNational = value;
+      }
+    }
+    this._changeDetectorRef.markForCheck();
+  }
+
+  private get formattedPhoneNumber(): string {
+    if (!this._numberObject) {
+      return this.phoneFormattedNational?.toString() || '';
+    }
+    switch (this.format) {
+      case 'national':
+        return this._numberObject.formatNational();
+      case 'international':
+        return this._numberObject.formatInternational();
+      default:
+        return this._numberObject.nationalNumber.toString();
+    }
+  }
+
+  private formatAsYouTypeIfEnabled(): void {
+    if (this.format === 'default') {
+      return;
+    }
+    const asYouType: AsYouType = new AsYouType(
+      this.selectedCountry?.iso2.toUpperCase() as CountryCode,
+    );
+    // To avoid caret positioning we apply formatting only if the caret is at the end:
+    if (
+      this.phoneFormattedNational
+        ?.toString()
+        .startsWith(this._previousFormattedNumber || '')
+    ) {
+      this.phoneFormattedNational = asYouType.input(this.phoneFormattedNational.toString());
+    }
+    this._previousFormattedNumber = this.phoneFormattedNational?.toString();
+  }
+}

package/src/components/phone-input/phone-input.mdx

@@ -0,0 +1,49 @@
+{/* DocumentationTemplate.mdx */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import {Controls, Meta, Primary, Stories, Title} from '@storybook/blocks';
+import * as PhoneInputStories from './phone-input.stories.ts';
+
+<Meta of={PhoneInputStories}/>
+
+<Title/>
+```ts
+import { FwPhoneInputModule } from '@flywheel-io/vision'
+```
+
+## Using with formControl
+
+This component implements [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor). So it will work with Angular's reactive forms and template-driven forms. Simply use it as you would any other form element, for example:
+```html
+  <fw-phone-input [formControlName]="phone">
+```
+
+There is also a provided form validator for phone numbers.
+
+```ts
+import { FormControl, FormGroup } from "@angular/forms";
+import { FwValidators } from '@flywheel-io/vision'
+
+const userForm = new FormGroup({
+  phone: new FormControl('', FwValidators.phone),
+});
+```
+
+## Playground
+<Primary/>
+<Controls/>
+
+<Stories/>

package/src/components/phone-input/phone-input.model.ts

@@ -0,0 +1,11 @@
+export interface Country {
+  name: string;
+  iso2: string;
+  dialCode: string;
+  priority: number;
+  areaCodes?: string[];
+  flagClass: string;
+  placeHolder?: string;
+}
+
+export type PhoneNumberFormat = 'default' | 'national' | 'international';

package/src/components/phone-input/phone-input.module.ts

@@ -0,0 +1,29 @@
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FwButtonModule } from '../button/button.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwPhoneInputComponent } from './phone-input.component';
+
+@NgModule({
+  imports: [
+    CdkMenuModule,
+    FwButtonModule,
+    FwIconModule,
+    FwMenuModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    FwPhoneInputComponent,
+  ],
+  declarations: [
+    FwPhoneInputComponent,
+  ],
+})
+export class FwPhoneInputModule {
+}

package/src/components/phone-input/phone-input.stories.ts

@@ -0,0 +1,201 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { CommonModule } from '@angular/common';
+import { forwardRef, importProvidersFrom } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwButtonModule } from '../button/button.module';
+import { FwValidators } from '../forms/validators';
+import { FwIconModule } from '../icon/icon.module';
+import { FwJsonComponent } from '../json/json.component';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
+import { FwPhoneInputComponent } from './phone-input.component';
+
+export default {
+  title: 'Form Controls/Phone Input',
+  component: FwPhoneInputComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73655&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CdkMenuModule,
+        FwButtonModule,
+        FwIconModule,
+        FwMenuModule,
+        FwWrappedInputModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FwJsonComponent,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+        {
+          provide: NG_VALUE_ACCESSOR,
+          useExisting: forwardRef(() => FwPhoneInputComponent),
+          multi: true,
+        },
+      ],
+    }),
+  ],
+  argTypes: {
+    helperText: {
+      description: 'DEPRECATED use Wrapped Input',
+    },
+    errorText: {
+      description: 'DEPRECATED use Wrapped Input',
+    },
+  },
+} as Meta;
+
+type Story = StoryObj<FwPhoneInputComponent>;
+
+export const Overview: Story = {
+  decorators: [],
+  args: {
+    value: undefined,
+    size: 'medium',
+    format: 'national',
+    preferredCountries: ['us'],
+    onlyCountries: [],
+    placeholder: 'Phone Number',
+    disabled: false,
+    readOnly: false,
+    error: false,
+    errorText: '',
+    helperText: '',
+    rightIcon: '',
+    showCountrySelector: true,
+    enableCountrySearch: true,
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        '_disabled',
+        '_format',
+        '_numberObject',
+        '_previousFormattedNumber',
+        '_value',
+        'trigger',
+        'buttonKeyPress',
+        'countrySelect',
+        'fetchCountryData',
+        'filteredItemsChange',
+        'formatAsYouTypeIfEnabled',
+        'getCountry',
+        'getPhoneNumberPlaceHolder',
+        'inputKeyPress',
+        'ngOnInit',
+        'phoneNumberChange',
+        'registerOnChange',
+        'registerOnTouched',
+        'setDisabledState',
+        'writeValue',
+        'phoneFormattedNational',
+        'filteredCountryItems',
+        'allCountryList',
+        'onChange',
+        'onTouched',
+        'preferredCountryList',
+        'selectedCountry',
+        'selectedCountryCode',
+      ],
+    },
+  },
+};
+
+export const Errored: Story = {
+  args: {
+    value: '1234',
+    error: true,
+    format: 'international',
+    enableCountrySearch: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    controls: { disabled: false },
+    template: `
+        <fw-wrapped-input errorText="Invalid Phone Number">
+          <fw-phone-input [placeholder]="placeholder" [value]="value" [rightIcon]="rightIcon" [showCountrySelector]="showCountrySelector" [error]="error"></fw-phone-input>
+        </fw-wrapped-input>
+    `,
+  }),
+};
+
+export const HelperText: Story = {
+  args: {
+    value: '+12223334444',
+    placeholder: 'Lorem Ipsum',
+    rightIcon: 'message-question-checkmark',
+    showCountrySelector: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    controls: { disabled: false },
+    template: `
+        <fw-wrapped-input helperText="Lorem Ipsum is simply dummy text of the printing and typesetting industry">
+          <fw-phone-input [placeholder]="placeholder" [value]="value" [rightIcon]="rightIcon" [showCountrySelector]="showCountrySelector"></fw-phone-input>
+        </fw-wrapped-input>
+    `,
+  }),
+};
+
+export const International: Story = {
+  args: {
+    value: '+862785632800',
+    placeholder: 'International Phone Number',
+    format: 'international',
+    preferredCountries: ['cn', 'uk', 'fr'],
+  },
+};
+
+export const InAForm: Story = {
+  args: {
+    placeholder: 'Phone Number',
+    format: 'national',
+    size: 'medium',
+  },
+  render: (args) => {
+    const formGroup = new FormGroup({
+      phone: new FormControl('+18005551212', [FwValidators.phone]),
+    });
+    formGroup['toJSON'] = () => null;
+    return ({
+      props: {
+        ...args,
+        form: formGroup,
+      },
+      controls: { disabled: false },
+      template: `
+          <form [formGroup]="form">
+              <fw-phone-input
+                  formControlName="phone"
+                  [error]="form.controls.phone.errors !== null"
+                  [errorText]="'Invalid Phone Number'"
+                  [format]="format"
+                  [size]="size"
+                  [placeholder]="placeholder">
+              </fw-phone-input>
+              <fw-json [sourceObject]="form.controls.phone" [properties]="['value','status','errors']"></fw-json>
+          </form>
+      `,
+    });
+  },
+};

package/src/components/popover/popover-panel/popover-panel.component.html

@@ -0,0 +1,4 @@
+<div class="fw-popover-content-wrapper">
+  <ng-content></ng-content>
+  <div class="fw-popover-caret"></div>
+</div>