@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,519 @@
+import {
+  AfterViewInit,
+  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;
+
+  @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;
+  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 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.';
+  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('');
+    }
+  }
+
+  protected onClear(): void {
+    this.inputValue = '';
+    this.value = AutocompleteUtils.isArray(this.value) ? [] : '';
+    this.isOverLapping = false;
+    this.overlapIndex = 0;
+    this.onUpdate();
+  }
+
+  protected refillInput(): void {
+    if (this.value && this.type === this.autocompleteType.SINGLE && !this.inputValue) {
+      this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
+      this.inputValueSearch$.next('');
+    }
+
+    if (!this.inputValue && this.value?.length) {
+      this.inputValue = ' ';
+    }
+
+    this.isInputFocus = false;
+  }
+
+  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 (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;
+
+    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();
+      }
+    }, 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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+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 {}