@testgorilla/tgo-ui 2.10.1 → 2.10.3

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

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

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

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

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

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

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