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

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

@@ -1,318 +0,0 @@
-/* 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

@@ -1,49 +0,0 @@
-{/* 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

@@ -1,11 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,201 +0,0 @@
-// 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

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