@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,28 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NO_ERRORS_SCHEMA } from "@angular/core";
-import { LanguageService } from "../../utils/localization/language.service";
-import { LanguageServiceStub } from "../../utils/localization/language.service.mocks";
-import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
-import { PasswordStrengthDemoComponent } from './password-strength-demo.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('PasswordStrengthDemoComponent', () => {
-  let component: PasswordStrengthDemoComponent;
-  let fixture: ComponentFixture<PasswordStrengthDemoComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      schemas: [NO_ERRORS_SCHEMA],
-      imports: [UiTranslatePipe, PasswordStrengthDemoComponent, BrowserAnimationsModule],
-      providers: [{ provide: LanguageService, useClass: LanguageServiceStub },]
-    });
-    fixture = TestBed.createComponent(PasswordStrengthDemoComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,40 +0,0 @@
-import { Meta, moduleMetadata, Story } 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: Story = (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

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

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

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

@@ -1,64 +0,0 @@
-<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 : language }} <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 : language)" [language]="language"></ui-validation-error>
-
-  </mat-hint>
-</mat-form-field>

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

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

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

@@ -1,212 +0,0 @@
-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 } 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';
-
-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,
-      ],
-      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);
-  });
-});

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

@@ -1,89 +0,0 @@
-import { Meta, moduleMetadata, Story } 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: Story = (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',
-  },
-};