@testgorilla/tgo-ui 2.30.13 → 2.31.1

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

@@ -0,0 +1,70 @@
+import { MultiInputComponent } from './multi-input.component';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { transformTheme } from '../../utils/transform-theme';
+import { MatInputModule } from '@angular/material/input';
+import { DigitsOnlyDirective } from '../../directives/digits-only.directive';
+import { MatSelectModule } from '@angular/material/select';
+import { DividerComponentModule } from '../divider/divider.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { DropdownComponentModule } from '../dropdown/dropdown.component.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+import { FieldComponentModule } from "../field/field.component.module";
+
+export default {
+  title: 'Multi Input Field',
+  component: MultiInputComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [MultiInputComponent],
+      imports: [MatInputModule, MatSelectModule, DividerComponentModule, IconComponentModule, DropdownComponentModule, ReactiveFormsModule, DigitsOnlyDirective, HasValidationErrorPipe, FieldComponentModule],
+    })
+  ]
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    }
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Currency',
+  itemTextField: 'label',
+  itemValueField: 'code',
+  value: { value: 100, code: 'usd' },
+  itemsList: [
+    {
+      code: 'usd',
+      label: 'USD ($)',
+    },
+    {
+      code: 'eur',
+      label: 'EUR (€)'
+    }
+  ]
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  label: 'Currency',
+  itemTextField: 'label',
+  itemValueField: 'code',
+  value: { value: 100, code: 'usd' },
+  errors: ['This field is required'],
+  itemsList: [
+    {
+      code: 'usd',
+      label: 'USD ($)',
+    },
+    {
+      code: 'eur',
+      label: 'EUR (€)'
+    }
+  ]
+};

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

@@ -0,0 +1,335 @@
+import {
+  booleanAttribute,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  Self,
+  SimpleChanges,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder,
+  FormControl,
+  NgControl,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { MultiInputValue } from './multi-input.model';
+
+@Component({
+  selector: 'ui-multi-input',
+  templateUrl: './multi-input.component.html',
+  styleUrl: './multi-input.component.scss',
+})
+export class MultiInputComponent implements ControlValueAccessor, OnInit {
+  /**
+   *
+   * @description List of items to be displayed in the dropdown list
+   * @type {Record<string, string | null | number>[]}
+   * @memberof MultiInputComponent
+   */
+  @Input({ required: true }) itemsList: Record<string, string | null | number>[] = [];
+
+  /**
+   *
+   * @description The field to be displayed in the dropdown
+   * @type {string}
+   * @memberof MultiInputComponent
+   */
+  @Input({ required: true }) itemTextField = '';
+
+  /**
+   *
+   * @description The value to be displayed in the droddown
+   * @type {string}
+   * @memberof MultiInputComponent
+   */
+  @Input({ required: true }) itemValueField = '';
+
+  /**
+   *
+   * @description The Value of the multi input
+   * @type {MultiInputValue}
+   * @memberof MultiInputComponent
+   */
+  @Input() set value(v: MultiInputValue) {
+    this._value = v;
+    this.addDropdownControl();
+    this.multiInputForm.patchValue(v);
+  }
+
+  /**
+   *
+   * @description Disables the multi input
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @Input({ transform: booleanAttribute }) disabled = false;
+
+  /**
+   *
+   * @description Defines if the multi input is required
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @Input({ transform: booleanAttribute }) required = false;
+
+  /**
+   *
+   * @description Defines the label of the multi input
+   * @type {string}
+   * @memberof MultiInputComponent
+   */
+  @Input() label = '';
+
+  /**
+   *
+   * @description Defines the placeholder of the multi input
+   * @type {string}
+   * @memberof MultiInputComponent
+   */
+  @Input() placeholder = '';
+
+  /**
+   *
+   * @description Allow decimal values in the multi input
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @Input({ transform: booleanAttribute }) allowDecimal = true;
+
+  /**
+   *
+   * @description Allow negative values in the multi input
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @Input({ transform: booleanAttribute }) allowNegative = true;
+
+  /**
+   *
+   * @description The theme of the application
+   * @type {ApplicationTheme}
+   * @memberof MultiInputComponent
+   */
+  @HostBinding('attr.theme')
+  @Input()
+  applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * @description The errors of the multi input
+   * @type {string[]}
+   * @memberof MultiInputComponent
+   */
+  @Input() errors: string[] = [];
+
+  /**
+   *
+   * @description Hide built in errors for Reactive Forms
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @Input({ transform: booleanAttribute }) hideBuiltInErrors = false;
+
+  /**
+   *
+   * @description Hide label in errors
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @Input({ transform: booleanAttribute }) hideLabelInErrors = false;
+
+  /**
+   *
+   * @description The maximum characters allowed in the multi input
+   * @type {number}
+   * @memberof MultiInputComponent
+   */
+  @Input() maxCharacters = 0;
+
+  /**
+   *
+   * @description The validators to apply to input field
+   * @type {Validators[]}
+   * @memberof MultiInputComponent
+   */
+  @Input() validators: ValidatorFn[] = [];
+
+  /**
+   *
+   * @description The width of the multi input
+   * @type {boolean}
+   * @memberof MultiInputComponent
+   */
+  @HostBinding('class.full-width')
+  @Input()
+  fullWidth: boolean = false;
+
+  @Output() valueChange = new EventEmitter<MultiInputValue>();
+
+  @HostBinding() class = 'ui-multi-input';
+
+  /**
+   * @ignore
+   */
+  onChange = (_: any): void => {};
+
+  /**
+   * @ignore
+   */
+  onTouch = (): void => {};
+
+  private _value: MultiInputValue | undefined;
+  protected showError = false;
+
+  protected readonly multiInputForm = this.fb.group<MultiInputValue>({
+    value: null,
+  });
+
+  constructor(
+    @Optional() @Self() protected ngControl: NgControl,
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private readonly fb: FormBuilder
+  ) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+
+    if (this.defaultAppTheme) {
+      this.applicationTheme = this.defaultAppTheme;
+    }
+
+    this.multiInputForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(formValue => {
+      this.valueChanged(formValue as MultiInputValue);
+      this.checkFormErrors();
+
+      if (!(formValue as any).value && !(formValue as any)[this.itemValueField]) {
+        this.showError = true;
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.addDropdownControl();
+    this.addValidation();
+
+    if (this.ngControl && this.hasRequiredValidator) {
+      this.inputControl?.addValidators(Validators.required);
+      this.dropdownControl?.addValidators(Validators.required);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['disabled']) {
+      this.updateDisableState(this.disabled);
+    }
+  }
+
+  writeValue(value: MultiInputValue): void {
+    this.value = value;
+    this.addDropdownControl();
+    this.multiInputForm.patchValue(value);
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.updateDisableState(isDisabled);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  protected valueChanged(value: MultiInputValue): void {
+    this.valueChange.emit(value);
+    this.onChange(value);
+  }
+
+  get value(): MultiInputValue | undefined {
+    return this._value;
+  }
+
+  protected get hasRequiredValidator(): boolean {
+    return !!this.ngControl.control?.hasValidator(Validators.required);
+  }
+
+  protected get dropdownControl(): AbstractControl<string | null> | null {
+    return this.multiInputForm.get(this.itemValueField);
+  }
+
+  protected get inputControl(): AbstractControl<number | null> | null {
+    return this.multiInputForm.get('value') as any;
+  }
+
+  protected checkFormErrors(): void {
+    const hasErrors = this.inputControl?.errors || this.dropdownControl?.errors;
+    if (this.ngControl) {
+      this.ngControl.control?.setErrors(
+        !!hasErrors ? { ...this.inputControl?.errors, ...this.dropdownControl?.errors } : null
+      );
+    }
+    this.showError = !!hasErrors;
+  }
+
+  protected markAsTouched(): void {
+    if (
+      this.ngControl &&
+      ((this.inputControl?.touched && this.dropdownControl?.touched) ||
+        (!this.inputControl?.value && !this.dropdownControl?.value))
+    ) {
+      this.ngControl.control?.markAsTouched();
+    }
+  }
+
+  protected addDropdownControl(): void {
+    if (!this.multiInputForm.value[this.itemValueField]) {
+      this.multiInputForm.addControl(this.itemValueField, new FormControl(null), { emitEvent: false });
+      this.updateDisableState(this.disabled);
+    }
+  }
+
+  protected get controlHasError(): boolean {
+    return this.ngControl
+      ? (this.showError && !!this.ngControl.control?.touched) ||
+          (!this.inputControl?.valid && !!this.inputControl?.touched) ||
+          (!this.dropdownControl?.valid && !!this.dropdownControl?.touched)
+      : this.showError ||
+          !!this.errors.length ||
+          (!this.inputControl?.valid && !!this.inputControl?.touched) ||
+          (!this.dropdownControl?.valid && !!this.dropdownControl?.touched);
+  }
+
+  protected getValueLength(): number {
+    return this.inputControl?.value?.toString().length || 0;
+  }
+
+  private addValidation(): void {
+    if (this.maxCharacters) {
+      this.inputControl?.addValidators(Validators.maxLength(this.maxCharacters));
+    }
+    if (this.validators?.length) {
+      this.inputControl?.addValidators(this.validators);
+    }
+  }
+
+  private updateDisableState(state: boolean): void {
+    if (state) {
+      this.multiInputForm.disable({ emitEvent: false });
+    } else {
+      this.multiInputForm.enable({ emitEvent: false });
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.html

@@ -0,0 +1,84 @@
+<div class="mobile-navbar-container">
+  <ng-container *ngIf="isDesktop" [ngTemplateOutlet]="userInfo"></ng-container>
+
+  <div class="routes">
+    <div
+      *ngFor="let route of routes"
+      [attr.data-testid]="route.id"
+      data-test-role="nav-route"
+      (click)="navigate(route.id)"
+      class="route"
+      [ngClass]="{ active: activeRoutesMap().get(route.id) }"
+    >
+      <span>{{ route.title }}</span>
+    </div>
+  </div>
+
+  <div class="settings">
+    <ng-container *ngFor="let e of menuItems">
+      <div *ngIf="e" class="menu-item">
+        <ui-button
+          [attr.data-testid]="e.id"
+          data-test-role="menu-item"
+          [applicationTheme]="applicationTheme"
+          [fullWidth]="true"
+          [disabledScaleOnClick]="true"
+          [variant]="'menuCell'"
+          iconPosition="left"
+          [iconName]="e.icon"
+          [label]="e.text"
+          (buttonClickEvent)="clickMenuItem(e.id)"
+          (keydown.Tab)="$event.stopPropagation()"
+          (keydown.shift.tab)="$event.stopPropagation()"
+          [ariaLabel]="e.text + '--' + e.text"
+        ></ui-button>
+      </div>
+    </ng-container>
+  </div>
+</div>
+
+<div class="bottom-content" [ngClass]="{ desktop: isDesktop }">
+  <ng-container *ngIf="!isDesktop" [ngTemplateOutlet]="contentTemplateRef"></ng-container>
+  <ng-container *ngIf="isDesktop; else tablet">
+    <div class="menu-item">
+      <ui-button
+        data-testid="logout-button"
+        [applicationTheme]="applicationTheme"
+        [fullWidth]="true"
+        [disabledScaleOnClick]="true"
+        [variant]="'menuCell'"
+        iconPosition="left"
+        [iconName]="'Logout-in-line'"
+        [label]="(translationContext + 'LOG_OUT' | uiTranslate | async)!"
+        (buttonClickEvent)="logout()"
+        (keydown.Tab)="$event.stopPropagation()"
+        (keydown.shift.tab)="$event.stopPropagation()"
+      ></ui-button>
+    </div>
+  </ng-container>
+
+  <ng-template #tablet>
+    <ng-container [ngTemplateOutlet]="userInfo"></ng-container>
+  </ng-template>
+</div>
+
+<ng-template #userInfo>
+  <div class="user-info" [ngClass]="{ desktop: isDesktop }">
+    <ui-avatar [size]="avatarSize.MEDIUM" [name]="userName"></ui-avatar>
+    <div class="details-container">
+      <div class="name-container">
+        <span class="user-name">{{ userName }}</span>
+        <span class="user-email">{{ email }}</span>
+      </div>
+      <ui-button
+        *ngIf="!isDesktop"
+        data-testid="logout-button"
+        [tooltip]="(translationContext + 'LOG_OUT' | uiTranslate | async)!"
+        [iconName]="'Logout-in-line'"
+        [applicationTheme]="'light'"
+        [variant]="'icon-button'"
+        (click)="logout()"
+      ></ui-button>
+    </div>
+  </div>
+</ng-template>

package/projects/tgo-canopy-ui/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.scss

@@ -0,0 +1,150 @@
+@use "../../../theme/variables" as *;
+@use "../../../theme/breakpoints-mixin" as *;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.mobile-navbar-container {
+  min-width: 340px;
+  padding-top: 16px;
+  height: 100%;
+
+  .routes {
+    display: none;
+    .route {
+      padding: 0 16px;
+      width: 100%;
+      height: 48px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 14px;
+      cursor: pointer;
+
+      &.active {
+        background-color: $grayscale-10;
+        font-weight: bold;
+        font-family: "ModernGothic", sans-serif;
+      }
+
+      &:hover {
+        background-color: $brand-10;
+        font-weight: bold;
+        font-family: "ModernGothic", sans-serif;
+      }
+
+      &:active {
+        background-color: $brand-20;
+      }
+    }
+  }
+
+  @include screen('medium') {
+    .routes {
+      display: block;
+    }
+  }
+}
+
+.menu-item {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  font-size: 14px;
+  font-weight: bold;
+  font-family: "ModernGothic", sans-serif;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+
+  ::ng-deep ui-button {
+    width: 100%;
+
+    button {
+      padding-left: 16px!important;
+
+      span.icon {
+        margin-right: 16px!important;
+      }
+    }
+
+    button.mat-mdc-unelevated-button.menuCell {
+      &:hover {
+        background-color: $brand-10;
+      }
+
+      &:active {
+        background-color: $brand-20;
+      }
+    }
+  }
+}
+
+.bottom-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: sticky;
+  bottom: 0;
+  background: $tgo-white;
+  z-index: 1;
+
+  &.desktop {
+    position: relative;
+    border-top: 1px $grayscale-30 solid;
+    margin-top: 16px;
+    padding: 16px 0 8px 0;
+  }
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  width: 100%;
+
+  &.desktop {
+    margin-top: 0px;
+    margin-bottom: 32px;
+  }
+
+  .details-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .name-container {
+    display: flex;
+    flex-direction: column;
+    width: 224px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .user-name {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+      font-family: "ModernGothic", sans-serif;
+      white-space: wrap;
+    }
+
+    .user-email {
+      width: 100%;
+      font-size: 14px;
+      color: $grayscale-50;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.spec.ts

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet.component';
+import { FormBuilder, FormsModule } from "@angular/forms";
+import { UiTranslatePipe } from "../../../pipes/ui-translate.pipe";
+import { MatMenuModule } from "@angular/material/menu";
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
+
+describe('MobileNavbarSideSheetComponent', () => {
+  let component: MobileNavbarSideSheetComponent;
+  let fixture: ComponentFixture<MobileNavbarSideSheetComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [FormBuilder],
+      imports: [
+        UiTranslatePipe,
+        FormsModule,
+        MatMenuModule,
+        MobileNavbarSideSheetComponent
+      ],
+      schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
+    });
+    fixture = TestBed.createComponent(MobileNavbarSideSheetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit navigateEvent when navigate is called', () => {
+    jest.spyOn(component.navigateEvent, 'emit');
+
+    const routeId = 'exampleRouteId';
+    component.navigate(routeId);
+
+    expect(component.navigateEvent.emit).toHaveBeenCalledWith(`/${routeId}`);
+  });
+
+  it('should emit logoutEvent when logout is called', () => {
+    jest.spyOn(component.logoutEvent, 'emit');
+
+    component.logout();
+
+    expect(component.logoutEvent.emit).toHaveBeenCalled();
+  });
+
+  it('should emit menuItemClicked when clickMenuItem is called', () => {
+    jest.spyOn(component.menuItemClicked, 'emit');
+
+    const menuItemId = 'exampleMenuItemId';
+    component.clickMenuItem(menuItemId);
+
+    expect(component.menuItemClicked.emit).toHaveBeenCalledWith(menuItemId);
+  });
+});