@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,427 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DoCheck,
+  ElementRef,
+  HostBinding,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Self,
+  ViewChild,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { parsePhoneNumber } from 'libphonenumber-js';
+import {
+  BehaviorSubject,
+  combineLatest,
+  debounceTime,
+  delay,
+  filter,
+  first,
+  map,
+  Observable,
+  startWith,
+  Subject,
+  take,
+  tap,
+} from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { LanguageService } from '../../utils/localization/language.service';
+import { UICountry } from './phone-input.model';
+
+@Component({
+  selector: 'ui-phone-input',
+  templateUrl: './phone-input.component.html',
+  styleUrls: ['./phone-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+      useValue: { overlayPanelClass: 'phone-number-autocomplete' },
+    },
+  ],
+})
+export class PhoneInputComponent implements OnInit, OnDestroy, ControlValueAccessor, DoCheck {
+  /**
+   * Phone number
+   *
+   * @type {string}
+   * @memberof PhoneInputComponent
+   */
+  @Input()
+  set value(value: string) {
+    this.initialValue = this.initialValue || value;
+    try {
+      const parsed = parsePhoneNumber(value);
+      const formatted = parsed.formatInternational();
+      this.selectedCountry = this.getCountryByAlpha2Code(parsed.country!) || this.selectedCountry;
+      this.form.patchValue({ phone_number: formatted.replace(this.selectedCountry.callingCode, '') });
+    } catch (err) {
+      if (value?.length <= 4) {
+        this.selectedCountry = this.getCountryByCallingCode(value) || this.selectedCountry;
+      }
+      this.form.patchValue({ phone_number: value?.replace(this.selectedCountry?.callingCode, '') });
+    }
+    this.stateChanges.next();
+  }
+
+  /**
+   * Country list for select
+   *
+   * @type {UICountry[]}
+   * @memberof PhoneInputComponent
+   */
+  @Input() set countryList(countryList: UICountry[]) {
+    this.loadCountries$.next(countryList);
+    this.selectedCountry = this.selectedCountry ?? countryList[0];
+  }
+
+  /**
+   * Placeholder input
+   *
+   * @type {text}
+   * @memberof PhoneInputComponent
+   */
+  @Input()
+  set placeholder(value: string) {
+    this.internalPlaceholder = value;
+    this.stateChanges.next();
+  }
+
+  /**
+   * Determines if input is disabled
+   *
+   * @type {boolean}
+   * @memberof PhoneInputComponent
+   */
+  @HostBinding('attr.disabled')
+  @Input()
+  disabled: boolean;
+
+  /**
+   * Input is required or not
+   *
+   * @type {boolean}
+   * @memberof PhoneInputComponent
+   */
+  @Input() required: boolean;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof PhoneInputComponent
+   */
+  @HostBinding('attr.theme')
+  @Input()
+  applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Indicator of the phone input width
+   * @property fullWidth
+   * @type {boolean}
+   * @memberof PhoneInputComponent
+   */
+  @Input() fullWidth = false;
+
+  _errors: SafeHtml[];
+  /**
+   * Input field errors
+   *
+   * @type {string}
+   * @memberof PhoneInputComponent
+   */
+  @Input() set errors(errors: string[]) {
+    if (errors) {
+      this._errors = errors?.filter(Boolean).map(error => this.sanitizer.bypassSecurityTrustHtml(error));
+      this.errorsLength = this.setErrorsLength();
+    }
+  }
+
+  /**
+   * Hide in build errors for Reactive Forms
+   *
+   * @type {number}
+   * @memberof PhoneInputComponent
+   */
+  @Input() hideBuiltInErrors = false;
+
+  /**
+   * Hide label in errors
+   *
+   * @type {number}
+   * @memberof PhoneInputComponent
+   */
+  @Input() hideLabelInErrors = false;
+
+  /**
+   * The language to be used
+   * @property language
+   * @type {Language}
+   * @memberof PhoneInputComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  static nextId = 0;
+
+  private countries = new BehaviorSubject<UICountry[]>([]);
+  protected countries$ = this.countries.asObservable();
+  form: UntypedFormGroup = this.fb.group({
+    phone_number: new UntypedFormControl(),
+  });
+  protected controlType = 'phone-number';
+  protected userAriaDescribedBy?: string;
+  protected loadCountries$ = new BehaviorSubject<UICountry[]>([]);
+  protected countryCode = new BehaviorSubject<string>('US');
+  protected stateChanges = new Subject<void>();
+  protected focused: boolean;
+  protected selectFilterCtrl = new UntypedFormControl('');
+  protected errorsLength: boolean;
+  protected readonly countryFlagSrc = 'assets/svg-country-flags/';
+
+  @ViewChild(MatInput, { read: ElementRef, static: true })
+  public input: ElementRef<HTMLElement>;
+  @ViewChild(MatSelect, { read: ElementRef, static: true })
+  public select: ElementRef<HTMLElement>;
+
+  @HostBinding()
+  id = `phone-number${PhoneInputComponent.nextId++}`;
+
+  @HostBinding('class.floated')
+  get shouldLabelFloat(): boolean {
+    return true;
+  }
+
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  get empty(): boolean {
+    return !!this.form.value;
+  }
+
+  get errorState(): boolean {
+    return this.errorMatcher.isErrorState(this.ngControl.control as UntypedFormControl, null);
+  }
+
+  get value(): string {
+    return this.getNumberWithCountryCode();
+  }
+
+  get placeholder() {
+    return this.internalPlaceholder;
+  }
+
+  private initialValue: string;
+  private readonly DEFAULT_COUNTRY_CODE = 'US';
+  private internalPlaceholder: string;
+  protected selectedCountry: UICountry;
+  private unsubscribeAll$ = new Subject<void>();
+
+  constructor(
+    @Optional() @Self() public ngControl: NgControl,
+    private errorMatcher: ErrorStateMatcher,
+    private fb: UntypedFormBuilder,
+    private focusMonitor: FocusMonitor,
+    private ref: ChangeDetectorRef,
+    private sanitizer: DomSanitizer,
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  /**
+   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
+   * to display validation errors that might happen (e.g. required)
+   */
+  ngDoCheck(): void {
+    if (this.ngControl?.touched || this.ngControl?.errors) {
+      this.ref.markForCheck();
+    }
+  }
+
+  ngOnInit(): void {
+    this.loadCountries();
+    this.preSelectCountry();
+    this.subscribeToFocusEvents();
+  }
+
+  setErrorsLength(): boolean {
+    if (!!this._errors) {
+      return this._errors.filter(err => !!err).length > 0;
+    }
+    return false;
+  }
+
+  setDescribedByIds(ids: string[]): void {
+    this.userAriaDescribedBy = ids.join(' ');
+  }
+
+  onChange: (value: string) => void;
+  onTouch: () => void;
+
+  writeValue(phoneNumber: string): void {
+    if (phoneNumber) {
+      this.value = phoneNumber;
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.form.disable();
+    } else {
+      this.form.enable();
+    }
+    this.disabled = isDisabled;
+    this.stateChanges.next();
+    this.ref.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.focusMonitor.stopMonitoring(this.input);
+    this.focusMonitor.stopMonitoring(this.select);
+    this.stateChanges.complete();
+    this.unsubscribeAll$.next();
+    this.unsubscribeAll$.complete();
+  }
+
+  onOptionsSelected(value: UICountry) {
+    this.setCountry(value);
+  }
+
+  onInput(value: string) {
+    this.value = (this.selectedCountry?.callingCode ?? '') + value;
+    this.onChange(this.value);
+  }
+
+  filteredCountryTrackByMethod(index: number, el: UICountry): string {
+    return el.alpha2Code;
+  }
+
+  private getNumberWithCountryCode() {
+    const nationalNumber = this.form.value?.phone_number as string;
+    return nationalNumber ? (this.selectedCountry?.callingCode ?? '') + nationalNumber : '';
+  }
+
+  private subscribeToFocusEvents() {
+    const selectAndInputFocus$ = combineLatest([
+      this.focusMonitor.monitor(this.select),
+      this.focusMonitor.monitor(this.input),
+    ]).pipe(takeUntil(this.unsubscribeAll$), debounceTime(10));
+
+    selectAndInputFocus$.subscribe(([selectFocus, inputFocus]) => {
+      this.focused = !!(selectFocus || inputFocus);
+      this.stateChanges.next();
+    });
+
+    selectAndInputFocus$.pipe(take(1)).subscribe(() => {
+      this.onTouch();
+    });
+  }
+
+  private preSelectCountry() {
+    this.setDisabledState(true);
+    combineLatest([
+      this.countries$.pipe(
+        filter(countries => countries.length > 0),
+        first()
+      ),
+      this.countryCode,
+    ])
+      .pipe(
+        map(([countries, selectedCountry]) => {
+          if (!this.initialValue) {
+            const country =
+              this.getCountryByAlpha2Code(selectedCountry) || this.getCountryByAlpha2Code(this.DEFAULT_COUNTRY_CODE);
+            this.setCountry(country as UICountry);
+          } else {
+            this.value = this.initialValue;
+          }
+
+          this.setDisabledState(false);
+          this.ref.markForCheck();
+        })
+      )
+      .subscribe();
+  }
+
+  private setCountry(country: UICountry | null): void {
+    if (country) {
+      this.selectedCountry = country;
+    }
+    this.value = this.getNumberWithCountryCode();
+  }
+
+  private getCountryByAlpha2Code(alpha2Code: string) {
+    return this.countries.value.find(country => country.alpha2Code === alpha2Code);
+  }
+
+  private getCountryByCallingCode(callingCode: string) {
+    return this.countries.value.find(country => country.callingCode === callingCode);
+  }
+
+  private loadCountries(): void {
+    const searchText$: Observable<string> = this.selectFilterCtrl.valueChanges.pipe(debounceTime(100), startWith(''));
+
+    combineLatest([this.loadCountries$, searchText$])
+      .pipe(
+        takeUntil(this.unsubscribeAll$),
+        tap(([countries, searchText]) => {
+          const searchTextLowerCase = searchText.toLowerCase();
+          const filteredCountries = countries
+            .filter(
+              option =>
+                option.name.toLowerCase().includes(searchTextLowerCase) ||
+                option.alpha2Code.toLowerCase().includes(searchTextLowerCase) ||
+                option.callingCode.toLowerCase().includes(searchTextLowerCase)
+            )
+            .sort((optionA, optionB) => (optionB.name.startsWith(searchText) ? 1 : -1));
+          this.countries.next(filteredCountries);
+        }),
+        delay(1),
+        tap(() => {
+          const countryFound = this.getCountryByAlpha2Code(this.selectedCountry?.alpha2Code);
+          this.selectedCountry = countryFound || this.selectedCountry;
+          this.ref.markForCheck();
+        })
+      )
+      .subscribe();
+  }
+
+  disableClick(ev: Event) {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+
+  trackByFn = (index: number, value: any) => value.changingThisBreaksApplicationSecurity;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Country interface ISO 3166 (minus numeric code and alpha3Code)
+ */
+export interface UICountry {
+  name: string;
+  alpha2Code: string;
+  callingCode: string;
+}

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,9 @@
+<mat-progress-bar
+  [mode]="mode"
+  [value]="progress"
+  [bufferValue]="buffer"
+  aria-label="Progress bar"
+  title="progress-bar"
+  class="progress-bar"
+  [attr.theme]="applicationTheme"
+></mat-progress-bar>

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { ProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+  declarations: [ProgressBarComponent],
+  imports: [CommonModule, MatProgressBarModule],
+  exports: [ProgressBarComponent],
+  providers: [],
+})
+export class ProgressBarComponentModule {}

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,152 @@
+@use '../../theme/variables' as *;
+
+.mat-mdc-progress-bar.progress-bar {
+  --mdc-linear-progress-active-indicator-color: var(--color);
+  --mdc-linear-progress-track-color: var(--color);
+  --mdc-linear-progress-active-indicator-height: 8px;
+  --mdc-linear-progress-track-height: 8px;
+  height: 8px;
+  border-radius: 8px;
+
+  &[aria-valuenow="1"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 60% 8px !important;
+      border-bottom-right-radius: 60% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="2"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 35% 8px !important;
+      border-bottom-right-radius: 35% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="3"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 30% 8px !important;
+      border-bottom-right-radius: 30% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="4"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 20% 8px !important;
+      border-bottom-right-radius: 20% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="5"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 15% 8px !important;
+      border-bottom-right-radius: 15% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="6"], &[aria-valuenow="7"], &[aria-valuenow="8"], &[aria-valuenow="9"], &[aria-valuenow="10"], &[aria-valuenow="11"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 10% 8px !important;
+      border-bottom-right-radius: 10% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="12"], &[aria-valuenow="13"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 7% 8px !important;
+      border-bottom-right-radius: 7% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="14"], &[aria-valuenow="15"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 6% 8px !important;
+      border-bottom-right-radius: 6% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="16"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 5% 8px !important;
+      border-bottom-right-radius: 5% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="17"], &[aria-valuenow="18"],  &[aria-valuenow="19"], &[aria-valuenow="20"], &[aria-valuenow="21"], &[aria-valuenow="22"], &[aria-valuenow="23"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 4% 8px !important;
+      border-bottom-right-radius: 4% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="24"], &[aria-valuenow="25"], &[aria-valuenow="26"], &[aria-valuenow="27"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 3% 8px !important;
+      border-bottom-right-radius: 3% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="28"], &[aria-valuenow="29"], &[aria-valuenow="30"], &[aria-valuenow="31"], &[aria-valuenow="32"],
+  &[aria-valuenow="33"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 2.5% 8px !important;
+      border-bottom-right-radius: 2.5% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="34"], &[aria-valuenow="35"], &[aria-valuenow="36"], &[aria-valuenow="37"], &[aria-valuenow="38"],
+  &[aria-valuenow="39"], &[aria-valuenow="40"], &[aria-valuenow="41"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 2.2% 8px !important;
+      border-bottom-right-radius: 2.2% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="42"], &[aria-valuenow="43"], &[aria-valuenow="44"], &[aria-valuenow="45"], &[aria-valuenow="46"],
+  &[aria-valuenow="47"], &[aria-valuenow="48"], &[aria-valuenow="49"], &[aria-valuenow="50"], &[aria-valuenow="51"],
+  &[aria-valuenow="52"], &[aria-valuenow="53"]{
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 2% 8px !important;
+      border-bottom-right-radius: 2% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="54"], &[aria-valuenow="55"], &[aria-valuenow="56"], &[aria-valuenow="57"], &[aria-valuenow="58"],
+  &[aria-valuenow="59"], &[aria-valuenow="60"], &[aria-valuenow="61"], &[aria-valuenow="62"], &[aria-valuenow="63"],
+  &[aria-valuenow="64"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 1.5% 8px !important;
+      border-bottom-right-radius: 1.5% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="65"], &[aria-valuenow="66"], &[aria-valuenow="67"], &[aria-valuenow="68"], &[aria-valuenow="69"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 1.4% 8px !important;
+      border-bottom-right-radius: 1.4% 8px !important;
+    }
+  }
+
+  &[aria-valuenow="70"], &[aria-valuenow="71"], &[aria-valuenow="72"], &[aria-valuenow="73"], &[aria-valuenow="74"] {
+    ::ng-deep .mdc-linear-progress__bar-inner {
+      border-top-right-radius: 1.2% 8px !important;
+      border-bottom-right-radius: 1.2% 8px !important;
+    }
+  }
+
+  ::ng-deep .mdc-linear-progress__buffer-bar {
+    background-color: $tgo-medium;
+    height: 8px;
+  }
+
+  ::ng-deep .mdc-linear-progress__bar-inner {
+    border-top-width: 8px;
+    border-top-right-radius: 1% 8px !important;
+    border-bottom-right-radius: 1% 8px !important;
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    ::ng-deep .mdc-linear-progress__buffer-bar {
+      background-color: $grayscale-20;
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.spec.ts

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { ProgressBarComponent } from './progress-bar.component';
+import { SimpleChanges } from "@angular/core";
+
+describe('ProgressBarComponent', () => {
+  let component: ProgressBarComponent;
+  let fixture: any;
+  beforeEach(async () => {
+    TestBed.initTestEnvironment;
+    await TestBed.configureTestingModule({
+      declarations: [ProgressBarComponent],
+      imports: [MatProgressBarModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProgressBarComponent);
+    fixture.detectChanges();
+
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should apply a mode of "determinate" by default', () => {
+    expect(component.mode).toBe('determinate');
+  });
+
+  it('should define default values for progress and buffer attributes', () => {
+    expect(component.progress).toBe(0);
+    expect(component.buffer).toBe(0);
+  });
+
+
+    it('should have default values for progress, mode, and buffer', () => {
+      expect(component.progress).toBe(0); // Default progress value
+      expect(component.mode).toBe('determinate'); // Default mode
+      expect(component.buffer).toBe(0); // Default buffer
+    });
+
+    it('should set the correct color based on companyColor input', () => {
+      component.companyColor = '#123456'; // Set a specific color
+
+      fixture.detectChanges(); // Trigger change detection
+
+      const hostElement = fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--color')).toBe('#123456'); // Check the bound style property
+    });
+
+    it('should use default companyColor when not provided', () => {
+      component.applicationTheme = 'classic'; // Set theme to classic
+
+      //@ts-ignore
+      const changes = { companyColor: { currentValue: null } } as SimpleChanges;
+      component.ngOnChanges(changes); // Trigger OnChanges with no companyColor
+
+      fixture.detectChanges(); // Trigger change detection
+
+      const hostElement = fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--color')).toBe(''); // Default color for classic theme
+    });
+
+    it('should update companyColor when theme changes', () => {
+      component.applicationTheme = 'light'; // Set theme to light
+
+      //@ts-ignore
+      const changes = { companyColor: { currentValue: null } } as SimpleChanges;
+      component.ngOnChanges(changes); // Trigger OnChanges with no companyColor
+
+      fixture.detectChanges(); // Trigger change detection
+
+      const hostElement = fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--color')).toBe(''); // Default color for light theme
+  });
+});