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

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

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

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

@@ -0,0 +1,33 @@
+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();
+  });
+});