@testgorilla/tgo-ui 2.11.1 → 2.11.3

package/projects/tgo-canopy-ui/components/autocomplete/autocomplete.component.ts

@@ -1,541 +0,0 @@
-import {
-  AfterViewInit, booleanAttribute,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DoCheck,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Inject,
-  Input,
-  OnChanges,
-  Optional,
-  Output,
-  PLATFORM_ID,
-  Renderer2,
-  Self,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { map, ReplaySubject, startWith } from 'rxjs';
-import { AutocompleteUtils } from '../../utils/autocomplete-utils';
-import { Autocomplete, AutocompleteType, DropdownVariation, Padding, Timeout } from './autocomplete.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { isPlatformBrowser } from '@angular/common';
-import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-
-@Component({
-  selector: 'ui-autocomplete',
-  templateUrl: './autocomplete.component.html',
-  styleUrls: ['./autocomplete.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-export class AutocompleteComponent implements ControlValueAccessor, OnChanges, AfterViewInit, DoCheck {
-  /**
-   * @property itemsList
-   * @description The list of items to display in the autocomplete.
-   * @memberof AutocompleteComponent
-   */
-  @Input() itemsList: any[] = [];
-
-  /**
-   * @property suggestionsList
-   * @description The list of suggestions to display in the autocomplete.
-   * @memberof AutocompleteComponent
-   */
-  @Input() suggestionsList: any[] = [];
-
-  /**
-   * @property disabled
-   * @description If `true`, the autocomplete is disabled.
-   * @memberof AutocompleteComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * @property allowAdd
-   * @description If `true`, allows adding new values to the autocomplete.
-   * @memberof AutocompleteComponent
-   */
-  @Input() allowAdd = true;
-
-  /**
-   * @property textField
-   * @description The field to be used as the display text in the autocomplete.
-   * @memberof AutocompleteComponent
-   */
-  @Input() textField = '';
-
-  /**
-   * @property valueField
-   * @description The field to be used as the value in the autocomplete.
-   * @memberof AutocompleteComponent
-   */
-  @Input() valueField = '';
-
-  /**
-   * @property label
-   * @description The label for the autocomplete input.
-   * @memberof AutocompleteComponent
-   */
-  @Input() label = '';
-
-  /**
-   * @property value
-   * @description The selected value(s) in the autocomplete.
-   * @memberof AutocompleteComponent
-   */
-  @Input() set itemValue(v: any) {
-    this.value = AutocompleteUtils.isArray(v) ? v : v ? [v] : [];
-  }
-
-  /**
-   * @property type
-   * @description The type of the autocomplete ('single', 'multi', etc.).
-   * @memberof AutocompleteComponent
-   */
-  @Input() type: AutocompleteType = 'multi';
-
-  /**
-   * @property minCharactersSearch
-   * @description The minimum characters to trigger search.
-   * @memberof AutocompleteComponent
-   */
-  @Input() minCharactersSearch = 3;
-
-  /**
-   * @property variant
-   * @description The variant of Autocomplete
-   * @memberof AutocompleteComponent
-   */
-  @Input({ required: true }) variant = DropdownVariation.AUTOCOMPLETE;
-
-  /**
-   * The language to be used
-   * @property language
-   * @type {Language}
-   * @memberof AutocompleteComponent
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   * Show reserved content below form field
-   * @property showBottomContent
-   * @type {boolean}
-   * @memberof AutocompleteComponent
-   */
-  @Input() showBottomContent = true;
-
-  /**
-   * Return full object if true
-   * @property valuePrimitive
-   * @type {boolean}
-   * @memberof AutocompleteComponent
-   */
-  @Input() valuePrimitive = false;
-
-  /**
-   * Indicator of the autocomplete width
-   * @property fullWidth
-   * @type {boolean}
-   * @memberof AutocompleteComponent
-   */
-  @Input() fullWidth = false;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof AutocompleteComponent
-   */
-  @HostBinding('attr.theme')
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Autocomplete is required or not
-   *
-   * @type {boolean}
-   * @memberof AutocompleteComponent
-   */
-  @Input() required: boolean;
-
-  /**
-   * Input field errors
-   *
-   * @type {string[]}
-   * @memberof AutocompleteComponent
-   */
-  @Input() set errors(errors: string[]) {
-    this.safeErrors = errors?.filter(Boolean).map(error => this.domSanitizer.bypassSecurityTrustHtml(error));
-  }
-
-  /**
-   * Color of the option hover.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof AutocompleteComponent
-   */
-  @Input() companyColor = '#FFF2FC';
-
-  /**
-   * Hide in-build errors for Reactive Forms
-   *
-   * @type {number}
-   * @memberof AutocompleteComponent
-   */
-  @Input() hideBuiltInErrors = false;
-
-  /**
-   * Hide label in errors
-   *
-   * @type {number}
-   * @memberof AutocompleteComponent
-   */
-  @Input() hideLabelInErrors = false;
-
-  /**
-   * Sets dropdown list to virtual scroll mode
-   *
-   * @type {boolean}
-   * @memberof AutocompleteComponent
-   */
-  @Input({ transform: booleanAttribute }) virtualScroll = false;
-
-  @Output() selectionChange = new EventEmitter<any>();
-  @Output() searchTextChange = new EventEmitter<string>();
-
-  @ViewChild('formField') formFieldElement: ElementRef<HTMLElement>;
-  @ViewChild('tagContainer') tagContainer: ElementRef<HTMLElement>;
-  @ViewChild('trigger') autocomplete: MatAutocompleteTrigger;
-  @ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewPort: CdkVirtualScrollViewport;
-  @ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
-  protected safeErrors: SafeHtml[] = [];
-  protected value: any;
-  protected inputValue: any = '';
-  protected isInputFocus = false;
-  protected autocompleteType = Autocomplete;
-  protected isOverLapping = false;
-  protected isOverlapChecking = true;
-  protected overlapIndex = 0;
-  protected inputOpacity = 1;
-  protected inputValueSearch$ = new ReplaySubject<string>(1);
-  protected userInput$ = new ReplaySubject<string>(1);
-  protected filteredItemsList$ = this.inputValueSearch$.pipe(
-    startWith(''),
-    map(inputValue =>
-      inputValue.length ? AutocompleteUtils.filterItems(this.itemsList, inputValue, this.textField) : null
-    )
-  );
-  protected filteredSuggestionList$ = this.inputValueSearch$.pipe(
-    map(inputValue =>
-      inputValue.length ? AutocompleteUtils.filterItems(this.suggestionsList, inputValue, this.textField) : null
-    )
-  );
-  protected searchResult$ = this.inputValueSearch$.pipe(map(inputValue => !!inputValue.trim()));
-  protected translationContext = 'AUTOCOMPLETE.';
-  protected readonly AutocompleteUtils = AutocompleteUtils;
-  private readonly isPlatform = isPlatformBrowser(this.platformId);
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    private readonly cdr: ChangeDetectorRef,
-    private readonly domSanitizer: DomSanitizer,
-    @Optional() @Self() public ngControl: NgControl,
-    private renderer2: Renderer2,
-    @Inject(PLATFORM_ID) private platformId: any
-  ) {
-    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)
-   */
-  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-  ngDoCheck(): void {
-    if (this.ngControl?.touched || this.ngControl?.errors) {
-      this.cdr.markForCheck();
-    }
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-  ngOnChanges(changes: SimpleChanges): void {
-    this.itemsList = AutocompleteUtils.excludeSuggestions(this.itemsList, this.suggestionsList, this.valueField);
-    this.initValue();
-
-    if (this.isPlatform && changes['companyColor']) {
-      this.setCompanyColorVariable();
-    }
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-  ngAfterViewInit(): void {
-    if (this.type !== Autocomplete.LARGE) {
-      this.checkOverlap(Timeout.VIEW_INITIALIZED_COMPONENT_LOAD, true);
-    }
-    this.isPlatform && this.setCompanyColorVariable();
-  }
-
-  onChange = (_: any) => {
-  };
-  onTouch = () => {
-  };
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-
-  writeValue(value: any): void {
-    if (this.valuePrimitive && this.textField && this.valueField) {
-      if (this.type === Autocomplete.SINGLE) {
-        this.value = this.itemsList.find(item => item[this.valueField] === value);
-      } else {
-        this.value = [this.itemsList.find(item => item[this.valueField] === value)];
-      }
-    } else {
-      this.value = value;
-    }
-    this.initValue();
-  }
-
-  protected onOptionSelected(event: MatAutocompleteSelectedEvent): void {
-    const inputValue = event.option.value;
-    const itemValue = AutocompleteUtils.createValueItem(inputValue, this.textField, this.valueField);
-    this.addNewValue(itemValue);
-
-    if (this.type === this.autocompleteType.MULTI) {
-      this.checkOverlap();
-    }
-
-    queueMicrotask(() => {
-      if (this.type !== this.autocompleteType.SINGLE) {
-        this.inputValue = '';
-      } else {
-        this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
-      }
-      this.cdr.markForCheck();
-    });
-
-    this.onUpdate();
-  }
-
-  protected onOptionRemoved(option: any): void {
-    setTimeout(() => this.autocomplete.closePanel(), 0);
-    const foundValue = this.value.find((v: any) => v === option);
-
-    if (foundValue) {
-      this.value = this.value.filter((v: any) => v !== option);
-    }
-
-    if (this.type === this.autocompleteType.MULTI) {
-      this.checkOverlap();
-    }
-
-    if (!this.value.length) {
-      this.inputValue = '';
-    }
-
-    this.onUpdate();
-  }
-
-  protected onInputChange(event: Event): void {
-    const inputValue = (event.target as HTMLInputElement).value;
-    this.userInput$.next(inputValue);
-    if (inputValue.length >= this.minCharactersSearch) {
-      this.inputValueSearch$.next(inputValue);
-      this.searchTextChange.emit(inputValue);
-    } else {
-      this.inputValueSearch$.next('');
-      this.userInput$.next('');
-    }
-  }
-
-  protected onClear(): void {
-    this.inputValue = '';
-    this.value = AutocompleteUtils.isArray(this.value) ? [] : '';
-    this.isOverLapping = false;
-    this.overlapIndex = 0;
-    this.onUpdate();
-    this.matAutocomplete?.options.forEach(option => option.deselect());
-  }
-
-  protected refillInput(): void {
-    setTimeout(() => {
-      if (this.value && this.type === this.autocompleteType.SINGLE && !this.inputValue) {
-        this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
-      } else if (!this.inputValue && this.value?.length) {
-        this.inputValue = ' ';
-      } else if (this.inputValue && this.type === Autocomplete.SINGLE && this.value && Object.keys(this.value).length) {
-        this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
-      } else if (this.inputValue) {
-        this.inputValue = ' ';
-      }
-
-      this.inputValueSearch$.next('');
-      this.userInput$.next('');
-      this.isInputFocus = false;
-    }, 0);
-  }
-
-  protected gotoUp() {
-    if (this.cdkVirtualScrollViewPort) {
-      this.cdkVirtualScrollViewPort.scrollToIndex(0);
-      this.cdkVirtualScrollViewPort.checkViewportSize();
-    }
-  }
-
-  protected onFocus(): void {
-    this.isInputFocus = true;
-
-    const inputValue = AutocompleteUtils.isArray(this.inputValue) ? this.inputValue[0] : this.inputValue;
-
-    if (AutocompleteUtils.isPrimitive(inputValue)) {
-      if (typeof inputValue !== 'number' && inputValue?.match(/^\s+/gm)) {
-        this.inputValue = inputValue.trimStart();
-      }
-    } else {
-      if (inputValue[this.textField]?.match(/^\s+/gm)) {
-        this.inputValue = inputValue[this.textField].trimStart();
-      }
-    }
-  }
-
-  private checkOverlap(delay = Timeout.VIEW_INITIALIZED_AFTER_ACTION, init = false): void {
-    this.isOverLapping = false;
-    this.isOverlapChecking = true;
-    this.inputOpacity = 0;
-
-    setTimeout(() => {
-      const inputWidth = this.inputWidth;
-      const tags = this.tagContainer?.nativeElement.querySelectorAll('.value-tag');
-      if (tags) {
-        let width = 0;
-        let firstTagWidth = 0;
-
-        tags.forEach((tag: any, index: number) => {
-          width += tag.getBoundingClientRect().width;
-
-          if (!index) {
-            firstTagWidth = width;
-          }
-
-          if (!this.isOverLapping && width > inputWidth) {
-            this.isOverLapping = true;
-            this.overlapIndex = index;
-          }
-
-          if (firstTagWidth > inputWidth) {
-            this.overlapIndex = 0;
-          }
-        });
-        this.isOverlapChecking = false;
-        if (init) {
-          if (this.type === this.autocompleteType.SINGLE) {
-            this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
-          } else {
-            this.inputValue = ' ';
-          }
-        }
-        this.cdr.markForCheck();
-      }
-      this.inputOpacity = 1;
-    }, delay);
-  }
-
-  private onUpdate(): void {
-    this.inputValueSearch$.next('');
-    this.userInput$.next('');
-    if (!this.valuePrimitive) {
-      this.onChange(this.value);
-    } else {
-      if (this.type === Autocomplete.SINGLE) {
-        this.onChange(this.value[this.valueField]);
-      } else {
-        this.onChange(this.value.map((v: any) => v[this.valueField]));
-      }
-    }
-    this.selectionChange.emit(this.value);
-  }
-
-  private initValue(): void {
-    if (this.type === this.autocompleteType.SINGLE && this.variant !== DropdownVariation.DROPDOWN) {
-      if (AutocompleteUtils.isArray(this.value)) {
-        this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
-      } else {
-        this.inputValue = this.value ? AutocompleteUtils.transformDisplayValue(this.value, this.textField) : '';
-      }
-    } else if (this.variant === DropdownVariation.DROPDOWN) {
-      this.inputValue = this.value ? AutocompleteUtils.transformDisplayValue(this.value, this.textField) : '';
-    } else {
-      this.inputValue = this.value && this.value.length ? ' ' : '';
-    }
-    if (this.type === this.autocompleteType.MULTI) {
-      this.checkOverlap();
-    }
-  }
-
-  private addNewValue(newValue: any): void {
-    if (this.type !== this.autocompleteType.SINGLE && !this.value) {
-      this.value = [];
-    }
-
-    const foundDuplicate = AutocompleteUtils.findDuplicate(this.value, newValue, this.textField);
-
-    if (this.type !== this.autocompleteType.SINGLE) {
-      this.value = foundDuplicate ? this.value.filter((v: any) => v !== foundDuplicate) : [...this.value, newValue];
-    } else {
-      this.value = newValue;
-    }
-  }
-
-  protected get isDropdown(): boolean {
-    return this.variant === DropdownVariation.DROPDOWN;
-  }
-
-  protected onChevronClick(autocomplete: MatAutocomplete): void {
-    if (autocomplete.isOpen) {
-      setTimeout(() => {
-        this.autocomplete.closePanel();
-      }, 0);
-    }
-  }
-
-  protected get inputWidth(): number {
-    return (
-      this.formFieldElement?.nativeElement.getBoundingClientRect().width -
-      (this.isDropdown ? Padding.DROPDOWN_CONTAINER : Padding.AUTOCOMPLETE_CONTAINER)
-    );
-  }
-
-  protected trackByFn = (index: number, value: any) => value.changingThisBreaksApplicationSecurity;
-
-  /**
-   * Adding company color variable to the body to style overlay container that's out of the component scope.
-   */
-  private setCompanyColorVariable(): void {
-    this.renderer2.setProperty(document.body, 'style', `--ui-autocomplete-option-color: ${this.companyColor};`);
-  }
-}

package/projects/tgo-canopy-ui/components/autocomplete/autocomplete.model.ts

@@ -1,22 +0,0 @@
-export type AutocompleteType = 'single' | 'multi' | 'large';
-
-export enum Autocomplete {
-  SINGLE = 'single',
-  MULTI = 'multi',
-  LARGE = 'large',
-}
-
-export enum Padding {
-  AUTOCOMPLETE_CONTAINER = 40,
-  DROPDOWN_CONTAINER = 60,
-}
-
-export enum Timeout {
-  VIEW_INITIALIZED_AFTER_ACTION = 150,
-  VIEW_INITIALIZED_COMPONENT_LOAD = 600,
-}
-
-export enum DropdownVariation {
-  AUTOCOMPLETE = 'autocomplete',
-  DROPDOWN = 'dropdown',
-}

package/projects/tgo-canopy-ui/components/autocomplete/includes.pipe.spec.ts

@@ -1,33 +0,0 @@
-import { IncludesPipe } from './includes.pipe';
-
-describe('IncludesPipe', () => {
-  let pipe: IncludesPipe;
-
-  beforeEach(() => {
-    pipe = new IncludesPipe();
-  });
-
-  it('should create an instance', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('should return true if value is included in the array', () => {
-    const result = pipe.transform('apple', ['apple', 'banana', 'orange']);
-    expect(result).toBe(true);
-  });
-
-  it('should return false if value is not included in the array', () => {
-    const result = pipe.transform('grape', ['apple', 'banana', 'orange']);
-    expect(result).toBe(false);
-  });
-
-  it('should handle non-array values and return false if not equal', () => {
-    const result = pipe.transform('apple', 'not an apple');
-    expect(result).toBe(false);
-  });
-
-  it('should handle non-array values and return true if equal', () => {
-    const result = pipe.transform('apple', 'apple');
-    expect(result).toBe(true);
-  });
-});

package/projects/tgo-canopy-ui/components/autocomplete/includes.pipe.ts

@@ -1,15 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-/**
- * The purpose of this pipe is to determine if the value is present in the values array.
- * If values is an array, the method uses the includes method to check for inclusion.
- * If values is not an array, it checks for strict equality between value and values.
- */
-@Pipe({
-  name: 'includes',
-})
-export class IncludesPipe implements PipeTransform {
-  transform(value: any, values: any): boolean {
-    return Array.isArray(values) ? values.includes(value) : value === values;
-  }
-}

package/projects/tgo-canopy-ui/components/autocomplete/transform-Item.pipe.ts

@@ -1,21 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { AutocompleteUtils } from '../../utils/autocomplete-utils';
-
-/**
- * the TransformItemPipe is designed to selectively extract and return values from objects based on a specified field,
- * providing a way to transform and display data a template.
- */
-@Pipe({
-  name: 'transformItem',
-})
-export class TransformItemPipe implements PipeTransform {
-  transform(value: any, field: string): any {
-    if (AutocompleteUtils.isPrimitive(value)) {
-      return value;
-    } else if (!AutocompleteUtils.isPrimitive(value) && field && (value[field] || value[0][field])) {
-      return value[field] || value[0][field];
-    } else {
-      AutocompleteUtils.throwInvalidSetupError();
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/autocomplete/transform-item.pipe.spec.ts

@@ -1,24 +0,0 @@
-import { TransformItemPipe } from './transform-Item.pipe';
-
-describe('TransformItemPipe', () => {
-  let pipe: TransformItemPipe;
-
-  beforeEach(() => {
-    pipe = new TransformItemPipe();
-  });
-
-  it('transforms primitive value', () => {
-    const result = pipe.transform('test', 'someField');
-    expect(result).toBe('test');
-  });
-
-  it('transforms non-primitive value with a specified field', () => {
-    const input = { someField: 'test' };
-    const result = pipe.transform(input, 'someField');
-    expect(result).toBe('test');
-  });
-
-  it('throws an error for invalid setup', () => {
-    expect(() => pipe.transform({}, 'someField')).toThrowError();
-  });
-});

package/projects/tgo-canopy-ui/components/avatar/avatar.component.html

@@ -1,23 +0,0 @@
-<div
-  class="avatar-container"
-  [attr.type]="!imageUrl && !name ? 'icon' : 'initials'"
-  [ngClass]="[size]"
-  [attr.theme]="applicationTheme"
->
-  <span *ngIf="name && !imageUrl">
-    {{ name | nameInitials }}
-  </span>
-  <img *ngIf="imageUrl" [attr.src]="imageUrl" [alt]="'profile-image'">
-  <ui-icon [color]="applicationTheme === 'classic' ? 'dark' : 'rebrand-black'" [applicationTheme]="applicationTheme" [size]="iconSize[size]" *ngIf="!imageUrl && !name" [name]="'User-profile'"></ui-icon>
-  <div class="edit-avatar" *ngIf="size === avatarSize.LARGE && allowEdit">
-    <ui-button
-      [applicationTheme]="applicationTheme"
-      [companyColor]="'black'"
-      [size]="'small'"
-      [iconName]="'Edit'"
-      [variant]="'icon-button'"
-      [tooltip]="tooltipText"
-      (buttonClickEvent)="onEditClick($event)"
-    ></ui-button>
-  </div>
-</div>

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

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AvatarComponent } from './avatar.component';
-import { NameInitialsPipe } from '../../pipes/name-initials.pipe';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ButtonComponentModule } from '../button/button.component.module';
-
-@NgModule({
-  declarations: [AvatarComponent, NameInitialsPipe],
-  imports: [CommonModule, IconComponentModule, MatTooltipModule, ButtonComponentModule],
-  exports: [AvatarComponent],
-})
-export class AvatarComponentModule {}