@flywheel-io/vision 2.0.0-beta-1 → 2.0.0-beta-3

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

@@ -1,68 +0,0 @@
-<div class="full-container">
-  <div [class]="['input-container', size, showCountrySelector?'country-selector':'no-country-selector']">
-    <button
-      *ngIf="showCountrySelector"
-      (keydown)="buttonKeyPress($event)"
-      [cdkMenuTriggerFor]="countryMenu"
-      [cdkMenuPosition]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 2, offsetX: -2}]"
-      [disabled]="disabled">
-      <div class="country-text">
-        <span class="indicator-wrapper">
-          <fw-icon>chevron-down</fw-icon>
-        </span>
-        <span class="country-selector-flag flag" [ngClass]="selectedCountry?.flagClass.toLowerCase()">
-        </span>
-        <span class="country-selector-code" *ngIf="selectedCountry?.dialCode && format==='national'">
-          +{{ selectedCountry.dialCode }}
-        </span>
-      </div>
-    </button>
-    <ng-template #countryMenu>
-      <fw-menu-container width="300px" maxHeight="500px" shadow="large" [showFilter]="enableCountrySearch">
-        <fw-menu
-          [value]="selectedCountryCode" (change)="countrySelect($event, focusableInput)"
-          (filteredItemsChange)="filteredItemsChange($event)">
-          <ng-container *ngIf="!filteredCountryItems?.length">
-            <fw-menu-item
-              *ngFor="let country of preferredCountryList"
-              [title]="country?.dialCode ? country.name+' +'+country.dialCode : country.name"
-              [value]="country.iso2">
-              <p class="icon-wrapper">
-                <span class="flag" [ngClass]="country.flagClass.toLowerCase()"></span>
-              </p>
-            </fw-menu-item>
-            <fw-menu-separator></fw-menu-separator>
-          </ng-container>
-          <ng-container>
-            <fw-menu-item
-              *ngFor="let country of allCountryList"
-              [title]="country?.dialCode ? country.name+' +'+country.dialCode : country.name"
-              [value]="country.iso2">
-              <p class="icon-wrapper">
-                <span class="flag" [ngClass]="country.flagClass.toLowerCase()"></span>
-              </p>
-            </fw-menu-item>
-          </ng-container>
-        </fw-menu>
-      </fw-menu-container>
-    </ng-template>
-    <input
-      type="tel"
-      autocomplete="tel"
-      (click)="trigger.close()"
-      (blur)="onTouched()"
-      (keydown)="inputKeyPress($event)"
-      [(ngModel)]="phoneFormattedNational"
-      (ngModelChange)="phoneNumberChange()"
-      [placeholder]="placeholder || ''"
-      [readOnly]="readOnly"
-      [disabled]="disabled"
-      [maxLength]="15"
-      #focusableInput>
-    <fw-icon class="error-icon">warning-circle</fw-icon>
-    <fw-icon *ngIf="!!rightIcon">{{ rightIcon }}</fw-icon>
-    <ng-content></ng-content>
-  </div>
-  <p class="helper-text" *ngIf="!!helperText">{{ helperText }}</p>
-  <p class="error-text" *ngIf="!!errorText">{{ errorText }}</p>
-</div>

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

@@ -1,467 +0,0 @@
-// general structural styles
-@use "../../scss/config/typography";
-
-.full-container {
-  display: flex;
-  flex-direction: column;
-
-  // helps with centering everything
-  line-height: 21px;
-
-  .input-container {
-    box-sizing: border-box;
-    color: var(--typography-light);
-    background: var(--page-light);
-    display: flex;
-    border: 1px solid var(--separations-input);
-    border-radius: 8px;
-    overflow: hidden;
-    align-items: center;
-    padding-right: 8px;
-
-    button {
-      border: none;
-      outline: none;
-      background-color: var(--card-header);
-      font-size: 14px;
-      padding-left: 2px;
-      margin-right: 1px;
-      height: 100%;
-
-      &:hover {
-        background-color: var(--primary-hover);
-        cursor: pointer;
-      }
-
-      .country-text {
-        display: flex;
-        align-items: center;
-
-        .indicator-wrapper {
-          color: var(--separations-input);
-          font-size: 14px;
-          margin-top: 2px;
-        }
-      }
-    }
-
-    &.no-country-selector {
-      padding-left: 8px;
-    }
-
-    fw-menu-item {
-      .menu-text {
-        h4 {
-          max-width: 60%;
-          overflow: hidden;
-        }
-      }
-    }
-
-    &:focus-within {
-      border: 1px solid var(--primary-base);
-    }
-
-    input {
-      min-width: 0;
-      font-size: 14px;
-      flex-grow: 1;
-      color: var(--typography-base);
-      background: var(--page-light);
-      border: none;
-
-      &:focus {
-        outline: none;
-        border: none;
-      }
-    }
-
-    input::placeholder {
-      color: var(--typography-light);
-    }
-  }
-
-  .error-icon {
-    display: none;
-  }
-
-  .helper-text {
-    @extend .vision-p4 !optional;
-
-    margin-top: 4px;
-    color: var(--typography-light);
-    line-height: 13px;
-    margin-left: 6px;
-  }
-
-  .error-text {
-    @extend .helper-text;
-
-    color: var(--red-base);
-    display: none;
-  }
-
-
-  .small {
-    height: 30px;
-
-    & > fw-icon {
-      font-size: 18px;
-    }
-  }
-
-  .medium {
-    height: 36px;
-
-    & > fw-icon {
-      font-size: 20px;
-    }
-  }
-
-  .large {
-    height: 40px;
-
-    & > fw-icon {
-      font-size: 24px;
-    }
-  }
-}
-
-:host.errored, :host.ng-touched.ng-invalid {
-  .input-container {
-    border: 1px solid var(--red-base);
-  }
-
-  .error-icon {
-    color: var(--red-base);
-    display: inline !important;
-  }
-
-  .helper-text {
-    display: none;
-  }
-
-  .error-text {
-    display: block !important;
-  }
-}
-
-:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.icon-wrapper {
-  display: flex;
-  margin: 0;
-
-  span {
-    display: block;
-  }
-}
-
-.icon-wrapper, .label-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-:host.ngx-floating .country-selector {
-  opacity: 1 !important;
-}
-
-.country-selector-flag {
-  display: inline-block;
-  margin-right: 0.5ex;
-}
-
-.country-list-button {
-  color: rgba(var(--bs-black), 0.87);
-  direction: ltr;
-  font-size: 16px;
-  font-weight: 400;
-  height: initial;
-  line-height: normal;
-  min-height: 48px;
-  padding: 14px 24px;
-  text-align: left;
-  text-transform: none;
-  width: 100%;
-}
-
-$country-flags: (
-  ky: 0,
-  ac: -14px,
-  ae: -28px,
-  af: -42px,
-  ag: -56px,
-  ai: -70px,
-  al: -84px,
-  am: -98px,
-  ao: -112px,
-  aq: -126px,
-  ar: -140px,
-  as: -154px,
-  at: -168px,
-  au: -182px,
-  aw: -196px,
-  ax: -210px,
-  az: -224px,
-  ba: -238px,
-  bb: -252px,
-  bd: -266px,
-  be: -280px,
-  bf: -294px,
-  bg: -308px,
-  bh: -322px,
-  bi: -336px,
-  bj: -350px,
-  bl: -364px,
-  bm: -378px,
-  bn: -392px,
-  bo: -406px,
-  bq: -420px,
-  br: -434px,
-  bs: -448px,
-  bt: -462px,
-  bv: -476px,
-  bw: -490px,
-  by: -504px,
-  bz: -518px,
-  ca: -532px,
-  cc: -546px,
-  cd: -560px,
-  cf: -574px,
-  cg: -588px,
-  ch: -602px,
-  ci: -616px,
-  ck: -630px,
-  cl: -644px,
-  cm: -658px,
-  cn: -672px,
-  co: -686px,
-  cp: -700px,
-  cr: -714px,
-  cu: -728px,
-  cv: -742px,
-  cw: -756px,
-  cx: -770px,
-  cy: -784px,
-  cz: -798px,
-  de: -812px,
-  dg: -826px,
-  dj: -840px,
-  dk: -854px,
-  dm: -868px,
-  do: -882px,
-  dz: -896px,
-  ea: -910px,
-  ec: -924px,
-  ee: -938px,
-  eg: -952px,
-  eh: -966px,
-  er: -980px,
-  es: -994px,
-  et: -1008px,
-  eu: -1022px,
-  fi: -1036px,
-  fj: -1050px,
-  fk: -1064px,
-  fm: -1078px,
-  fo: -1092px,
-  fr: -1106px,
-  ga: -1120px,
-  gb: -1134px,
-  gd: -1148px,
-  ge: -1162px,
-  gf: -1176px,
-  gg: -1190px,
-  gh: -1204px,
-  gi: -1218px,
-  gl: -1232px,
-  gm: -1246px,
-  gn: -1260px,
-  gp: -1274px,
-  gq: -1288px,
-  gr: -1302px,
-  gs: -1316px,
-  gt: -1330px,
-  gu: -1344px,
-  gw: -1358px,
-  gy: -1372px,
-  hk: -1386px,
-  hm: -1400px,
-  hn: -1414px,
-  hr: -1428px,
-  ht: -1442px,
-  hu: -1456px,
-  ic: -1470px,
-  id: -1484px,
-  ie: -1498px,
-  il: -1512px,
-  im: -1526px,
-  in: -1540px,
-  io: -1554px,
-  iq: -1568px,
-  ir: -1582px,
-  is: -1596px,
-  it: -1610px,
-  je: -1624px,
-  jm: -1638px,
-  jo: -1652px,
-  jp: -1666px,
-  ke: -1680px,
-  kg: -1694px,
-  kh: -1708px,
-  ki: -1722px,
-  km: -1736px,
-  kn: -1750px,
-  kp: -1764px,
-  kr: -1778px,
-  kw: -1792px,
-  ad: -1806px,
-  kz: -1820px,
-  la: -1834px,
-  lb: -1848px,
-  lc: -1862px,
-  li: -1876px,
-  lk: -1890px,
-  lr: -1904px,
-  ls: -1918px,
-  lt: -1932px,
-  lu: -1946px,
-  lv: -1960px,
-  ly: -1974px,
-  ma: -1988px,
-  mc: -2002px,
-  md: -2016px,
-  me: -2030px,
-  mf: -2044px,
-  mg: -2058px,
-  mh: -2072px,
-  mk: -2086px,
-  ml: -2100px,
-  mm: -2114px,
-  mn: -2128px,
-  mo: -2142px,
-  mp: -2156px,
-  mq: -2170px,
-  mr: -2184px,
-  ms: -2198px,
-  mt: -2212px,
-  mu: -2226px,
-  mv: -2240px,
-  mw: -2254px,
-  mx: -2268px,
-  my: -2282px,
-  mz: -2296px,
-  na: -2310px,
-  nc: -2324px,
-  ne: -2338px,
-  nf: -2352px,
-  ng: -2366px,
-  ni: -2380px,
-  nl: -2394px,
-  no: -2408px,
-  np: -2422px,
-  nr: -2436px,
-  nu: -2450px,
-  nz: -2464px,
-  om: -2478px,
-  pa: -2492px,
-  pe: -2506px,
-  pf: -2520px,
-  pg: -2534px,
-  ph: -2548px,
-  pk: -2562px,
-  pl: -2576px,
-  pm: -2590px,
-  pn: -2604px,
-  pr: -2618px,
-  ps: -2632px,
-  pt: -2646px,
-  pw: -2660px,
-  py: -2674px,
-  qa: -2688px,
-  re: -2702px,
-  ro: -2716px,
-  rs: -2730px,
-  ru: -2744px,
-  rw: -2758px,
-  sa: -2772px,
-  sb: -2786px,
-  sc: -2800px,
-  sd: -2814px,
-  se: -2828px,
-  sg: -2842px,
-  sh: -2856px,
-  si: -2870px,
-  sj: -2884px,
-  sk: -2898px,
-  sl: -2912px,
-  sm: -2926px,
-  sn: -2940px,
-  so: -2954px,
-  sr: -2968px,
-  ss: -2982px,
-  st: -2996px,
-  sv: -3010px,
-  sx: -3024px,
-  sy: -3038px,
-  sz: -3052px,
-  ta: -3066px,
-  tc: -3080px,
-  td: -3094px,
-  tf: -3108px,
-  tg: -3122px,
-  th: -3136px,
-  tj: -3150px,
-  tk: -3164px,
-  tl: -3178px,
-  tm: -3192px,
-  tn: -3206px,
-  to: -3220px,
-  tr: -3234px,
-  tt: -3248px,
-  tv: -3262px,
-  tw: -3276px,
-  tz: -3290px,
-  ua: -3304px,
-  ug: -3318px,
-  um: -3332px,
-  un: -3346px,
-  us: -3360px,
-  uy: -3374px,
-  uz: -3388px,
-  va: -3402px,
-  vc: -3416px,
-  ve: -3430px,
-  vg: -3444px,
-  vi: -3458px,
-  vn: -3472px,
-  vu: -3486px,
-  wf: -3500px,
-  ws: -3514px,
-  xk: -3528px,
-  ye: -3542px,
-  yt: -3556px,
-  za: -3570px,
-  zm: -3584px,
-  zw: -3598px,
-);
-
-.flag {
-  @each $country-class, $flag-position in $country-flags {
-    &.#{$country-class} {
-      background-position: 0 $flag-position;
-    }
-  }
-
-  background: {
-    image: url(./images/flags_sprite_2x.png);
-    size: 100% auto;
-  }
-
-  filter: drop-shadow(1px 0 0 var(--slate-light)) drop-shadow(-1px 0 0 var(--slate-light)) drop-shadow(0 1px 0 var(--slate-light)) drop-shadow(0 -1px 0 var(--slate-light));
-  height: 14px;
-  width: 24px;
-}

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

@@ -1,33 +0,0 @@
-import { CdkMenuModule } from '@angular/cdk/menu';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwPhoneInputComponent } from './phone-input.component';
-
-describe('TextInputComponent', () => {
-  let component: FwPhoneInputComponent;
-  let fixture: ComponentFixture<FwPhoneInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        CdkMenuModule,
-        FwIconModule,
-        FormsModule,
-        ReactiveFormsModule,
-      ],
-      declarations: [FwPhoneInputComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FwPhoneInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});