@testgorilla/tgo-ui 2.31.0 → 2.31.1

package/projects/tgo-canopy-ui/components/password-strength-demo/password-strength-demo.component.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { FieldComponentModule } from '../field/field.component.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { PasswordStrengthDemoComponent } from './password-strength-demo.component';
+import { transformTheme } from '../../utils/transform-theme';
+
+export default {
+  title: 'Password Strength Demo',
+  component: PasswordStrengthDemoComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        IconComponentModule,
+        FieldComponentModule,
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
+        ProgressBarComponentModule,
+        UiTranslatePipe,
+        PasswordStrengthDemoComponent,
+      ],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/projects/tgo-canopy-ui/components/password-strength-demo/password-strength-demo.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { FieldComponentModule } from '../field/field.component.module';
+import { PasswordStrengthComponentModule } from '../password-strength/password-strength.component.module';
+
+@Component({
+  selector: 'ui-password-strength-demo',
+  templateUrl: './password-strength-demo.component.html',
+  styleUrls: ['./password-strength-demo.component.scss'],
+  standalone: true,
+  imports: [
+    FieldComponentModule,
+    PasswordStrengthComponentModule,
+    ReactiveFormsModule,
+  ],
+})
+export class PasswordStrengthDemoComponent {
+  password = this.fb.control('');
+  constructor(private readonly fb: FormBuilder) {}
+}

package/projects/tgo-canopy-ui/components/phone-input/join-string.pipe.spec.ts

@@ -0,0 +1,9 @@
+import { JoinStringsPipe } from './join-strings.pipe';
+
+describe('JoinStringsPipe', () => {
+  const pipe = new JoinStringsPipe();
+
+  it("Transforms ['test','gorilla'] into \"test - gorilla\"", () => {
+    expect(pipe.transform(['test', 'gorilla'])).toBe('test - gorilla');
+  });
+});

package/projects/tgo-canopy-ui/components/phone-input/join-strings.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'joinStrings' })
+export class JoinStringsPipe implements PipeTransform {
+  transform(value: string[], separator?: string): string {
+    return value.filter(Boolean).join(separator ? separator : ' - ');
+  }
+}

package/projects/tgo-canopy-ui/components/phone-input/phone-input.component.html

@@ -0,0 +1,64 @@
+<mat-form-field
+  [formGroup]="form"
+  appearance="outline"
+  [color]="(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'"
+  [ngClass]="{ disabled: form.disabled || disabled, 'full-width': fullWidth }"
+>
+  <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf="required">*</span></mat-label>
+
+  <div matPrefix class="country">
+    <button class="selected-flag" matPrefix *ngIf="selectedCountry">
+      <img [height]="20" [width]="24" [attr.src]="countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'"
+           [alt]="'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()">
+    </button>
+    <mat-select
+      #select
+      (selectionChange)="onOptionsSelected($event.value)"
+      [value]="selectedCountry"
+      [disableOptionCentering]="true"
+      [panelClass]="'phone-number-select' + ' ' + applicationTheme"
+      [ngClass]="{ opened: select.panelOpen }"
+    >
+      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>
+      <mat-option>
+        <ngx-mat-select-search
+          [formControl]="selectFilterCtrl"
+          ngDefaultControl
+          placeholderLabel=""
+          noEntriesFoundLabel=""
+        >
+          <ui-icon ngxMatSelectSearchClear size="24" [name]="'Close-in-line'"></ui-icon>
+        </ngx-mat-select-search>
+      </mat-option>
+        <mat-option *ngFor="let country of countries$ | async; trackBy: filteredCountryTrackByMethod" [value]="country">
+          <div class="country-option">
+            <img [height]="20" [width]="24" [attr.src]="countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'"
+                 [alt]="'Country flag ' + country?.alpha2Code?.toLowerCase()!">
+            <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>
+          </div>
+        </mat-option>
+    </mat-select>
+  </div>
+
+  <input
+    (input)="onInput(form.get('phone_number')!.value)"
+    formControlName="phone_number"
+    (click)="disableClick($event)"
+    [ngStyle]="{ opacity: disabled ? 0.5 : 1 }"
+    [required]="required"
+    matInput
+    type="text"
+  />
+
+  <mat-hint class="error" *ngIf="errorsLength || (ngControl?.errors | hasValidationError)">
+    <ng-container *ngIf="errorsLength">
+      <div class="errors" *ngFor="let error of _errors; trackBy: trackByFn">
+        <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
+        <span [innerHTML]="error"></span>
+      </div>
+    </ng-container>
+
+    <ui-validation-error *ngIf="ngControl && !hideBuiltInErrors" [ngControl]="ngControl" [label]="hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)"></ui-validation-error>
+
+  </mat-hint>
+</mat-form-field>

package/projects/tgo-canopy-ui/components/phone-input/phone-input.component.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PhoneInputComponent } from './phone-input.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { JoinStringsPipe } from './join-strings.pipe';
+import { MatInputModule } from '@angular/material/input';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { SpinnerComponentModule } from '../spinner/spinner.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { ValidationErrorModule } from '../validation-error/validation-error.module';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+@NgModule({
+  declarations: [PhoneInputComponent, JoinStringsPipe],
+  exports: [PhoneInputComponent],
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule,
+    ReactiveFormsModule,
+    MatSelectModule,
+    MatIconModule,
+    MatInputModule,
+    NgxMatSelectSearchModule,
+    IconComponentModule,
+    SpinnerComponentModule,
+    UiTranslatePipe,
+    ValidationErrorModule,
+    HasValidationErrorPipe,
+  ],
+})
+export class PhoneInputComponentModule {}

package/projects/tgo-canopy-ui/components/phone-input/phone-input.component.scss

@@ -0,0 +1,133 @@
+@use '../../theme/variables' as *;
+
+:host {
+  display: flex;
+  align-items: center;
+
+  .selected-flag {
+    display: flex;
+    position: relative;
+    margin-right: 1rem;
+    align-items: center;
+  }
+
+  mat-spinner {
+    padding: 0 20px;
+  }
+
+  .country {
+    cursor: pointer !important;
+    display: flex;
+    align-items: center;
+    margin: -8px 12px 0px 16px;
+
+    button {
+      margin: 0 8px 0 0;
+      background: transparent;
+      border: unset;
+      padding: 0;
+    }
+  }
+
+  ::ng-deep .mat-mdc-select-trigger {
+    display: flex;
+    gap: 8px;
+  }
+
+  mat-select {
+    flex: 0;
+  }
+
+  .mat-mdc-form-field {
+    &.full-width {
+      width: 100%;
+    }
+
+    min-width: 320px;
+    &.disabled ::ng-deep * {
+      border-color: $grayscale-30;
+      color: $grayscale-30;
+      pointer-events: none;
+
+      .mat-mdc-select-arrow {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    mat-select {
+      ::ng-deep.mat-mdc-select-arrow {
+        background: url('../../assets/icons/rebrand/Arrow-chevron-down-filled.svg');
+        background-size: cover;
+        width: 16px;
+        height: 16px;
+
+        svg {
+          display: none;
+        }
+      }
+      &.opened {
+        ::ng-deep.mat-mdc-select-arrow {
+          background: url('../../assets/icons/rebrand/Arrow-chevron-up-filled.svg');
+          background-size: cover;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+}
+
+::ng-deep {
+  .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper {
+    transform: none;
+  }
+
+  .mat-select-panel.phone-number-select {
+    margin-top: 36px;
+    margin-left: 45px;
+  }
+
+  .mat-select-search-inner {
+    box-shadow: none !important;
+    height: 48px;
+    background-color: $tgo-white !important;
+    border-bottom: none !important;
+
+    .mat-select-search-inner-row {
+      width: 100%;
+    }
+
+    button.mat-select-search-clear {
+      right: 35px;
+
+      mat-icon {
+        font-size: 20px;
+      }
+    }
+  }
+
+  @media screen and (min-width: 599px) {
+    .mat-select-panel.phone-number-select {
+      margin-left: -33px;
+      min-width: 510px;
+    }
+
+    .mat-select-search-inner {
+      min-width: calc(100% + 33px) !important;
+    }
+  }
+}
+
+ngx-mat-select-search {
+  ::ng-deep button {
+    .mat-mdc-button-persistent-ripple, .mat-ripple, .mat-mdc-button-ripple {
+      display: none;
+    }
+  }
+}
+
+
+
+

package/projects/tgo-canopy-ui/components/phone-input/phone-input.component.spec.ts

@@ -0,0 +1,264 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { of, first } from 'rxjs';
+import { PhoneInputComponent } from "./phone-input.component";
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { JoinStringsPipe } from "./join-strings.pipe";
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+import { UICountry } from './phone-input.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+import { By, DomSanitizer } from "@angular/platform-browser";
+import { FocusMonitor } from "@angular/cdk/a11y";
+import { ErrorStateMatcher } from "@angular/material/core";
+
+describe('InternationalPhoneNumberComponent', () => {
+  let component: PhoneInputComponent;
+  let fixture: ComponentFixture<PhoneInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        HttpClientModule,
+        UiTranslatePipe,
+        BrowserAnimationsModule,
+        HasValidationErrorPipe,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatSelectModule,
+        NoopAnimationsModule,
+      ],
+      declarations: [PhoneInputComponent, JoinStringsPipe],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        {
+          provide: MatIconRegistry,
+          useValue: {
+            addSvgIcon: jest.fn(),
+            getNamedSvgIcon: () => of(document.createElementNS('http://www.w3.org/2000/svg', 'svg')),
+          },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PhoneInputComponent);
+    component = fixture.componentInstance;
+    // @ts-ignore
+    component.form.controls.phone_number.setValidators([Validators.required]);
+    // @ts-ignore
+    component.selectedCountry = { alpha2Code: 'AR' } as any;
+    // @ts-ignore
+    component.onChange = jest.fn();
+    component.countryList = [
+      {
+        "name": "Bouvet Island",
+        "alpha2Code": "BV",
+        "callingCode": "+0"
+      },
+      {
+        "name": "Brazil",
+        "alpha2Code": "BR",
+        "callingCode": "+55"
+      },
+      {
+        "name": "British Indian Ocean Territory",
+        "alpha2Code": "IO",
+        "callingCode": "+246"
+      },
+      {
+        "name": "Brunei Darussalam",
+        "alpha2Code": "BN",
+        "callingCode": "+673"
+      },
+    ]
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  });
+
+  describe('when it is initialized with initial value', () => {
+    beforeEach(() => {
+      component.value = '+03413458669';
+      component.ngOnInit();
+    });
+
+    it('should format the value as international phone number', () => {
+      expect(component.value).toBe('+03413458669');
+    });
+
+    it('should have argentina as the selected country', () => {
+      // @ts-ignore
+      expect(component.selectedCountry.alpha2Code).toBe('AR');
+    });
+
+    it('should mark the form as valid', () => {
+      component.form.enable();
+      fixture.detectChanges();
+      expect(component.form.valid).toBe(true);
+    });
+  });
+
+  describe('when it is initialized with no initial value', () => {
+    let countriesPromise: any;
+
+    beforeEach(() => {
+      // @ts-ignore
+      component.value = undefined;
+      component.ngOnInit();
+      // @ts-ignore
+      countriesPromise = component.countries$.pipe(first()).toPromise();
+    });
+
+    it('should resolve the ip to US', () => {
+      // @ts-ignore
+      expect(component.selectedCountry.alpha2Code).toBe('AR');
+    });
+
+    it('should return empty string value', () => {
+      // @ts-ignore
+      expect(component.initialValue).toBe('');
+    });
+
+    it('should load a 2 item array', async () => {
+      await expect(countriesPromise).resolves.toHaveLength(4);
+    });
+
+    it('should load US first and Argentina second', async () => {
+      await expect(countriesPromise).resolves.toStrictEqual([
+        {
+          "name": "Bouvet Island",
+          "alpha2Code": "BV",
+          "callingCode": "+0"
+        },
+        {
+          "name": "Brazil",
+          "alpha2Code": "BR",
+          "callingCode": "+55"
+        },
+        {
+          "name": "British Indian Ocean Territory",
+          "alpha2Code": "IO",
+          "callingCode": "+246"
+        },
+        {
+          "name": "Brunei Darussalam",
+          "alpha2Code": "BN",
+          "callingCode": "+673"
+        },
+      ]);
+    });
+  });
+
+  describe('when the value is empty', () => {
+    beforeEach(() => {
+      component.value = '';
+      fixture.detectChanges();
+    });
+
+    it('should mark the form as invalid', () => {
+      expect(component.form.invalid).toBe(true);
+    });
+  });
+
+  it('should return true if errors length', () => {
+    component._errors  = ['1', '2', '3'];
+    const errorLengthResult = component.setErrorsLength();
+    expect(errorLengthResult).toEqual(true);
+  });
+
+  it('should return false if errors length', () => {
+    component._errors  = [];
+    const errorLengthResult = component.setErrorsLength();
+    expect(errorLengthResult).toEqual(false);
+  });
+
+  it('should select country', () => {
+    //@ts-expect-error
+    const setCountrySpy = jest.spyOn(component, 'setCountry');
+    component.onOptionsSelected({} as UICountry);
+    expect(setCountrySpy).toHaveBeenCalled();
+  });
+
+  it('should update value on input', () => {
+    const testValue = 'test';
+    //@ts-expect-error
+    component.selectedCountry = {}
+    const onChangeSpy = jest.spyOn(component, 'onChange');
+    component.onInput(testValue);
+    expect(component.value).toEqual(testValue);
+    expect(onChangeSpy).toHaveBeenCalledWith(testValue);
+  });
+
+  it('should set the initial phone number', () => {
+    const testNumber = '+1 23456789';
+    component.value = testNumber;
+    expect(component.value).toBe(testNumber);
+  });
+
+  it('should set the country list', () => {
+    const testCountryList: UICountry[] = [
+      { alpha2Code: 'US', callingCode: '1', name: 'United States' },
+      { alpha2Code: 'CA', callingCode: '1', name: 'Canada' },
+    ];
+    component.countryList = testCountryList;
+    fixture.detectChanges();
+    expect(component['countries'].value).toEqual(testCountryList);
+  });
+
+  it('should set the placeholder', () => {
+    const testPlaceholder = 'Enter phone number';
+    component.placeholder = testPlaceholder;
+    fixture.detectChanges();
+    expect(component.placeholder).toBe(testPlaceholder);
+  });
+
+  it('should disable the component', () => {
+    component.setDisabledState(true);
+    fixture.detectChanges();
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.disabled).toBeTruthy();
+  });
+
+  it('should enable the component', () => {
+    component.setDisabledState(false);
+    fixture.detectChanges();
+    const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+    expect(inputElement.disabled).toBeFalsy();
+  });
+
+  it('should set the application theme', () => {
+    const testTheme: ApplicationTheme = 'dark';
+    component.applicationTheme = testTheme;
+    fixture.detectChanges();
+    expect(component.applicationTheme).toBe(testTheme);
+  });
+});

package/projects/tgo-canopy-ui/components/phone-input/phone-input.component.stories.ts

@@ -0,0 +1,89 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+import { PhoneInputComponent } from "./phone-input.component";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatSelectModule } from "@angular/material/select";
+import { MatIconModule } from "@angular/material/icon";
+import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
+import { SpinnerComponentModule } from "../spinner/spinner.module";
+import { JoinStringsPipe } from "./join-strings.pipe";
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+export default {
+  title: 'Phone Input',
+  component: PhoneInputComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [PhoneInputComponent, JoinStringsPipe],
+      imports: [
+        CommonModule,
+        FormsModule,
+        MatInputModule,
+        MatTooltipModule,
+        IconComponentModule,
+        ReactiveFormsModule,
+        UiTranslatePipe,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+        MatIconModule,
+        NgxMatSelectSearchModule,
+        IconComponentModule,
+        SpinnerComponentModule,
+        HasValidationErrorPipe,
+      ],
+    }),
+  ],
+} as Meta;
+
+const countryList = [
+  {
+    "name": "Bouvet Island",
+    "alpha2Code": "BV",
+    "callingCode": "+0"
+  },
+  {
+    "name": "Brazil",
+    "alpha2Code": "BR",
+    "callingCode": "+55"
+  },
+  {
+    "name": "British Indian Ocean Territory",
+    "alpha2Code": "IO",
+    "callingCode": "+246"
+  },
+  {
+    "name": "Brunei Darussalam",
+    "alpha2Code": "BN",
+    "callingCode": "+673"
+  },
+]
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  countryList: countryList,
+  value: '3413458669'
+};
+
+Default.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FwPmwOHXkG8SqzPCqxiK23/%F0%9F%8C%B3-Canopy-UI?type=design&node-id=3220-16616&mode=design&t=VvKE2fcfONSEoJrE-4',
+  },
+};