@testgorilla/tgo-ui 2.31.0 → 2.31.1

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

@@ -0,0 +1,172 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  SimpleChanges,
+} from '@angular/core';
+import { LogoPathEnum, LogoTypeEnum } from './logo.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-logo',
+  templateUrl: './logo.component.html',
+  styleUrls: ['./logo.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LogoComponent implements OnInit, OnChanges {
+  /**
+   * Logo type
+   *
+   * @type {LogoTypeEnum}
+   * @memberof LogoComponent
+   */
+  @Input() type: LogoTypeEnum = LogoTypeEnum.DEFAULT;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof LogoComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * Label. Only for ppoweredby type
+   *
+   * @type {string}
+   * @memberof LogoComponent
+   */
+  @Input() label = 'POWERED BY';
+
+  /**
+   * Set logo width
+   * @default 200
+   * @type {number}
+   * @memberof LogoComponent
+   */
+  @Input() width = 200;
+
+  /**
+   *
+   * Allow change logo width
+   *
+   * @type {string}
+   * @memberof LogoComponent
+   */
+  @Input() allowResizing = false;
+
+  protected readonly LogoTypeEnum = LogoTypeEnum;
+
+  /**
+   * @ignore
+   */
+  logoURL: String;
+
+  /**
+   * @ignore
+   */
+  setURL = () => {
+    if (this.applicationTheme === 'classic') {
+      switch (this.type) {
+        case LogoTypeEnum.POWEREDBY: {
+          this.logoURL = LogoPathEnum.POWEREDBY;
+          break;
+        }
+        case LogoTypeEnum.REVERSE: {
+          this.logoURL = LogoPathEnum.REVERSE;
+          break;
+        }
+        default: {
+          this.logoURL = LogoPathEnum.DEFAULT;
+          break;
+        }
+      }
+    } else {
+      switch (this.type) {
+        case LogoTypeEnum.PRIMARY_BRANDMARK_PINK: {
+          this.logoURL = LogoPathEnum.PRIMARY_BRANDMARK_PINK;
+          break;
+        }
+        case LogoTypeEnum.PRIMARY_LOCKUP_PINK: {
+          this.logoURL = LogoPathEnum.PRIMARY_LOCKUP_PINK;
+          break;
+        }
+        case LogoTypeEnum.PRIMARY_WORDMARK_PINK: {
+          this.logoURL = LogoPathEnum.PRIMARY_WORDMARK_PINK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_BRANDMARK_BLACK: {
+          this.logoURL = LogoPathEnum.SECONDARY_BRANDMARK_BLACK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_BRANDMARK_CREAM: {
+          this.logoURL = LogoPathEnum.SECONDARY_BRANDMARK_CREAM;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_LOCKUP_BLACK: {
+          this.logoURL = LogoPathEnum.SECONDARY_LOCKUP_BLACK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_LOCKUP_CREAM: {
+          this.logoURL = LogoPathEnum.SECONDARY_LOCKUP_CREAM;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_WORDMARK_BLACK: {
+          this.logoURL = LogoPathEnum.SECONDARY_WORDMARK_BLACK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_WORDMARK_CREAM: {
+          this.logoURL = LogoPathEnum.SECONDARY_WORDMARK_CREAM;
+          break;
+        }
+        case LogoTypeEnum.POWEREDBY: {
+          this.logoURL = LogoPathEnum.REBRAND_POWEREDBY;
+          break;
+        }
+        default: {
+          this.logoURL = LogoPathEnum.PRIMARY_LOCKUP_PINK;
+          break;
+        }
+      }
+    }
+  };
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  /**
+   * @ignore
+   */
+  ngOnInit(): void {
+    this.setURL();
+  }
+
+  /**
+   * @ignore
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    this.setURL();
+    if (changes['width']) {
+      this.changeWidth(changes['width'].currentValue);
+    }
+  }
+
+  private changeWidth(changedWidth: number): void {
+    if (changedWidth >= 200 || this.allowResizing) {
+      this.width = changedWidth;
+    } else {
+      this.width = 200;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+export enum LogoTypeEnum {
+  DEFAULT = 'default',
+  POWEREDBY = 'poweredby',
+  REVERSE = 'reverse',
+  PRIMARY_BRANDMARK_PINK = 'primary-brandmark-pink',
+  PRIMARY_LOCKUP_PINK = 'primary-lockup-pink',
+  PRIMARY_WORDMARK_PINK = 'primary-wordmark-pink',
+  SECONDARY_BRANDMARK_BLACK = 'secondary-brandmark-black',
+  SECONDARY_BRANDMARK_CREAM = 'secondary-brandmark-cream',
+  SECONDARY_LOCKUP_BLACK = 'secondary-lockup-black',
+  SECONDARY_LOCKUP_CREAM = 'secondary-lockup-cream',
+  SECONDARY_WORDMARK_BLACK = 'secondary-wordmark-black',
+  SECONDARY_WORDMARK_CREAM = 'secondary-wordmark-cream',
+}
+
+export enum LogoPathEnum {
+  DEFAULT = '/images/testgorilla.svg',
+  POWEREDBY = '/images/poweredbyTG.svg',
+  REVERSE = '/images/reverseTG.svg',
+  PRIMARY_BRANDMARK_PINK = '/images/rebrand-logo/primary_brandmark_pink.svg',
+  PRIMARY_LOCKUP_PINK = '/images/rebrand-logo/primary_lockup_pink.svg',
+  PRIMARY_WORDMARK_PINK = '/images/rebrand-logo/primary_wordmark_pink.svg',
+  SECONDARY_BRANDMARK_BLACK = '/images/rebrand-logo/secondary_brandmark_black.svg',
+  SECONDARY_BRANDMARK_CREAM = '/images/rebrand-logo/secondary_brandmark_cream.svg',
+  SECONDARY_LOCKUP_BLACK = '/images/rebrand-logo/secondary_lockup_black.svg',
+  SECONDARY_LOCKUP_CREAM = '/images/rebrand-logo/secondary_lockup_cream.svg',
+  SECONDARY_WORDMARK_BLACK = '/images/rebrand-logo/secondary_wordmark_black.svg',
+  SECONDARY_WORDMARK_CREAM = '/images/rebrand-logo/secondary_wordmark_cream.svg',
+  REBRAND_POWEREDBY = '/images/rebrand-logo/powered-by.svg',
+}

package/projects/tgo-canopy-ui/components/media-card/media-card.component.html

@@ -0,0 +1,17 @@
+<img [attr.src]="image" alt="card image">
+
+<div class="media-card-content">
+  <div class="media-card-title" [isMultiline]="true" [matTooltip]="showTitleTooltip ? title : ''" uiEllipseText (onChangeTextState)="showTitleTooltip = $event">
+    {{ title }}
+  </div>
+
+  <div class="media-card-description">
+    {{ description }}
+  </div>
+</div>
+
+<ui-divider [size]="'small'"></ui-divider>
+
+<div class="media-card-action">
+  <ui-button [variant]="'ghost'" [label]="buttonLabel" (buttonClickEvent)="buttonClick.emit()"></ui-button>
+</div>

package/projects/tgo-canopy-ui/components/media-card/media-card.component.scss

@@ -0,0 +1,46 @@
+@use "../../theme/variables" as *;
+@import "../../theme/line-clamp";
+@import "../../theme/typography";
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid $grayscale-30;
+  border-radius: 10px;
+  max-width: 568px;
+  min-width: 288px;
+  background: $tgo-white;
+
+  img {
+    aspect-ratio: 19.5/9;
+    width: 100%;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .media-card-content {
+    display: flex;
+    flex-direction: column;
+    padding: 24px 24px 24px 16px;
+    height: 100%;
+
+    .media-card-title {
+      @include line-clamp(2);
+      @extend .h4;
+      color: $black;
+      margin-bottom: 8px;
+    }
+
+    .media-card-description {
+      height: 62px;
+      color: $grayscale-50;
+      font-size: 14px;
+      overflow: auto;
+    }
+  }
+
+  .media-card-action {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px 24px;
+  }
+}

package/projects/tgo-canopy-ui/components/media-card/media-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaCardComponent } from './media-card.component';
+
+describe('MediaCardComponent', () => {
+  let component: MediaCardComponent;
+  let fixture: ComponentFixture<MediaCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MediaCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MediaCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/tgo-canopy-ui/components/media-card/media-card.component.stories.ts

@@ -0,0 +1,38 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { transformTheme } from "../../utils/transform-theme";
+import { MediaCardComponent } from "./media-card.component";
+import { ButtonComponentModule } from "../button/button.component.module";
+import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
+import { DividerComponentModule } from '../divider/divider.component.module';
+
+export default {
+  title: 'Media Card',
+  component: MediaCardComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [],
+      imports: [MediaCardComponent, ButtonComponentModule, EllipseTextDirective, DividerComponentModule],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+
+export const Basic = Template.bind({});
+Basic.args = {
+  buttonLabel: 'CTA',
+  image: '/images/empty-state-default.svg',
+  title: 'Lorem ipsum dolor sit amet consectetur. Rhoncus nec integer in ultrices tellus viverra iam pellentesque purus vulputate lorem donec suspendisse quis nascetur',
+  description: 'Lorem ipsum dolor sit amet consectetur. Pellentesque senectus convallis nisl enim nunc. Gravida neque facilisis aliquam vitae varius viverra. Lectus tincidunt Lorem ipsum dolor sit amet consectetur. Pellentesque senectus convallis nisl enim nunc. Gravida neque facilisis aliquam vitae varius viverra. Lectus tincidunt Lorem ipsum dolor sit amet consectetur. Pellentesque senectus convallis nisl enim nunc. Gravida neque facilisis aliquam vitae varius viverra. Lectus tincidunt',
+};
+
+

package/projects/tgo-canopy-ui/components/media-card/media-card.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DividerComponentModule } from "../divider/divider.component.module";
+import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { ButtonComponentModule } from '../button/button.component.module';
+
+@Component({
+  selector: 'ui-media-card',
+  standalone: true,
+  imports: [
+    DividerComponentModule,
+    ButtonComponentModule,
+    EllipseTextDirective,
+    MatTooltipModule
+  ],
+  templateUrl: './media-card.component.html',
+  styleUrl: './media-card.component.scss'
+})
+export class MediaCardComponent {
+  /**
+   * The title of the card
+   * @type {string}
+   * @memberof MediaCardComponent
+   */
+  @Input({ required: true }) title: string;
+  /**
+   * The description of the card
+   * @type {string}
+   * @memberof MediaCardComponent
+   */
+  @Input({ required: true }) description: string;
+  /**
+   * The image of the card
+   * @type {string}
+   * @memberof MediaCardComponent
+   */
+  @Input({ required: true }) image: string;
+  /**
+   * The label of the button
+   * @type {string}
+   * @memberof MediaCardComponent
+   */
+  @Input({ required: true }) buttonLabel = '';
+  @Output() buttonClick = new EventEmitter<void>();
+  protected showTitleTooltip = false;
+}

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

@@ -0,0 +1,48 @@
+<div [formGroup]="multiInputForm">
+  <div class="controls-wrapper">
+    <ui-dropdown
+      [hasError]="controlHasError"
+      [formControlName]="itemValueField"
+      [valueList]="itemsList"
+      [textField]="itemTextField"
+      [valueField]="itemValueField"
+      [showBottomContent]="false"
+      [allowClear]="false"
+      (closed)="markAsTouched(); checkFormErrors()"
+    ></ui-dropdown>
+
+    <ui-field
+      [hasError]="controlHasError"
+      [formControlName]="'value'"
+      [label]="label"
+      [placeholder]="placeholder"
+      [required]="required"
+      [hideBuiltInErrors]="true"
+      [showBottomContent]="false"
+      [allowOnlyDigits]="true"
+      [fullWidth]="fullWidth"
+      (focusout)="markAsTouched(); checkFormErrors()"
+    ></ui-field>
+  </div>
+
+  <mat-hint class="info" *ngIf="!controlHasError && maxCharacters && !errors?.length">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>
+
+  @if (errors?.length || (ngControl?.errors | hasValidationError)) {
+    <mat-hint class="error">
+      @for (error of errors; track error) {
+        <ui-icon
+          [applicationTheme]="applicationTheme"
+          [name]="applicationTheme === 'classic' ? 'Error' : 'Error-in-line'"
+        ></ui-icon>{{ error }}
+      }
+      @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors) {
+        <ui-validation-error
+          [touchedOn]="!controlHasError"
+          [ngControl]="ngControl"
+          [label]="hideLabelInErrors ? null : label"
+        ></ui-validation-error>
+      }
+    </mat-hint>
+  }
+
+</div>

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

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MultiInputComponent } from './multi-input.component';
+import { MatInputModule } from '@angular/material/input';
+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 { DigitsOnlyDirective } from '../../directives/digits-only.directive';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+import { ValidationErrorModule } from '../validation-error/validation-error.module';
+import { FieldComponentModule } from '../field/field.component.module';
+
+
+
+@NgModule({
+  declarations: [MultiInputComponent],
+  imports: [
+    CommonModule,
+    MatInputModule,
+    MatSelectModule,
+    DividerComponentModule,
+    IconComponentModule,
+    DropdownComponentModule,
+    ReactiveFormsModule,
+    DigitsOnlyDirective,
+    HasValidationErrorPipe,
+    ValidationErrorModule,
+    FieldComponentModule,
+  ],
+  exports: [MultiInputComponent],
+})
+export class MultiInputComponentModule { }

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

@@ -0,0 +1,127 @@
+@use "../../theme/variables" as *;
+
+:host {
+
+  &.ui-multi-input {
+    position: relative !important;
+
+    .ng-untouched, .ng-touched {
+      width: fit-content;
+    }
+
+    &.full-width {
+      .ng-untouched {
+        width: 100%;
+      }
+    }
+
+    .controls-wrapper {
+      display: flex;
+    }
+
+    ::ng-deep ui-validation-error {
+      .errors {
+        display: flex;
+      }
+    }
+
+    ::ng-deep .ui-dropdown {
+      max-width: 120px;
+
+      .mdc-notched-outline__trailing,
+      .mat-mdc-text-field-wrapper,
+      .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing {
+        border-right-color: transparent !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+
+      }
+
+      &:hover, .mat-mdc-form-field-focused {
+        .mdc-notched-outline__trailing {
+          border-right-color: $black;
+        }
+      }
+    }
+
+    ::ng-deep .ui-field {
+      .mdc-notched-outline__leading,
+      .mat-mdc-text-field-wrapper {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        position: absolute !important;
+        left: 0 !important;
+        top: 48px !important;
+      }
+    }
+
+    ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      min-height: 48px !important;
+      align-items: center !important;
+      display: flex !important;
+    }
+
+    ::ng-deep .mat-mdc-form-field-hint {
+      &.info {
+        display: block;
+        color: $tgo-dark;
+        width: 100%;
+        text-align: right;
+      }
+
+      &.error {
+        display: flex;
+        gap: 4px;
+        color: $error-50;
+        align-items: center;
+        padding: 4px 0 10px;
+
+        svg {
+          color: $error-50;
+        }
+      }
+
+      &:before {
+        display: none;
+      }
+
+      ui-validation-error {
+        color: $error-50;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: 0.4px;
+
+        .errors {
+          display: flex;
+          align-items: center;
+          padding: 4px 0 10px;
+        }
+
+        svg {
+          margin-right: 4px;
+          color: $error-50;
+          row-gap: 0;
+        }
+      }
+    }
+
+    .separator-line {
+      border-left: 1px solid var(--mdc-outlined-text-field-outline-color);
+      height: 40px;
+      margin: 0 12px -7px 8px;
+    }
+
+    ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper {
+      display: none;
+    }
+
+    ::ng-deep .mdc-text-field--outlined {
+      padding-left: 12px !important;
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MultiInputComponent } from './multi-input.component';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { MultiInputValue } from './multi-input.model';
+import { HasValidationErrorPipe } from "../../pipes/has-validation-error.pipe";
+
+@Component({
+  template: `<ui-multi-input
+               [itemsList]="currenciesList"
+               [itemTextField]="currencyTextField"
+               [itemValueField]="currencyValueField"
+               [value]="value"
+               [disabled]="disabled"
+               [required]="required"
+               [label]="label"
+               [allowDecimal]="allowDecimal"
+               [allowNegative]="allowNegative"
+               [applicationTheme]="applicationTheme"
+               [errors]="errors"
+               [hideBuiltInErrors]="hideBuiltInErrors"
+               [hideLabelInErrors]="hideLabelInErrors"
+               [language]="language"
+               [maxCharacters]="maxCharacters"
+               (valueChange)="onValueChange($event)">
+             </ui-multi-input>`
+})
+class TestHostComponent {
+  currenciesList: any = [{ code: 'USD', label: 'US Dollar' }, { code: 'EUR', label: 'Euro' }];
+  currencyTextField = 'label';
+  currencyValueField = 'code';
+  value: MultiInputValue = { currencyCode: 'USD', value: 100 };
+  disabled = false;
+  required = false;
+  label = 'Select Currency';
+  allowDecimal = true;
+  allowNegative = true;
+  applicationTheme: any = 'light';
+  errors: string[] = [];
+  hideBuiltInErrors = false;
+  hideLabelInErrors = false;
+  language: any = 'en';
+  maxCharacters = 255;
+
+  onValueChange(value: MultiInputValue) {
+    this.value = value;
+  }
+}
+
+describe('MultiInputComponent (without reactive forms)', () => {
+  let component: TestHostComponent;
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HasValidationErrorPipe],
+      declarations: [MultiInputComponent, TestHostComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create the test host component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should pass the currenciesList to the multi input component', () => {
+    const multiInputEl: HTMLElement = fixture.nativeElement.querySelector('ui-multi-input');
+    expect(multiInputEl).toBeTruthy();
+  });
+
+  it('should update the value when the multi input value changes', () => {
+    const newValue: MultiInputValue = { code: null, value: 200 };
+    component.value = newValue;
+    fixture.detectChanges();
+
+    const multiInputComponent = fixture.debugElement.children[0].componentInstance as MultiInputComponent;
+    multiInputComponent.writeValue(newValue);
+
+    fixture.detectChanges();
+
+    expect(component.value).toEqual(newValue);
+  });
+
+});