@testgorilla/tgo-ui 2.31.0 → 2.31.1

package/projects/client/src/app/app.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    RouterOutlet,
+  ],
+})
+export class AppComponent {
+
+  countryList = [
+    {
+      "name": "Bouvet Island",
+      "alpha2Code": "BV",
+      "callingCode": "+0"
+    },
+    {
+      "name": "Brazil",
+      "alpha2Code": "BR",
+      "callingCode": "+55"
+    },
+    {
+      "name": "British Indian Ocean Territory",
+      "alpha2Code": "IO",
+      "callingCode": "+246"
+    },
+    {
+      "name": "Brunei Darussalam",
+      "alpha2Code": "BN",
+      "callingCode": "+673"
+    },
+  ]
+}

package/projects/client/src/app/app.routes.ts

@@ -0,0 +1,48 @@
+import { Routes } from "@angular/router";
+import { AppComponent } from "./app.component";
+
+export const routes: Routes = [
+  { path: '', component: AppComponent },
+  { path: 'avatar', loadComponent: () => import('./components/avatar/avatar.component').then(c => c.AvatarComponent) },
+  { path: 'badge', loadComponent: () => import('./components/badge/badge.component').then(c => c.BadgeComponent) },
+  {
+    path: 'checkbox',
+    loadComponent: () => import('./components/checkbox/checkbox.component').then(c => c.CheckboxComponent),
+  },
+  { path: 'icon', loadComponent: () => import('./components/icon/icon.component').then(c => c.IconComponent) },
+  { path: 'button', loadComponent: () => import('./components/button/button.component').then(c => c.ButtonComponent) },
+  { path: 'disabled-inputs', loadComponent: () => import('./components/disabled-inputs/disabled-inputs.component').then(c => c.DisabledInputsComponent) },
+  { path: 'field', loadComponent: () => import('./components/field/field.component').then(c => c.FieldComponent) },
+  { path: 'card', loadComponent: () => import('./components/card/card.component').then(c => c.CardComponent) },
+  { path: 'logo', loadComponent: () => import('./components/logo/logo.component').then(c => c.LogoComponent) },
+  {
+    path: 'spinner',
+    loadComponent: () => import('./components/spinner/spinner.component').then(c => c.SpinnerComponent),
+  },
+  {
+    path: 'snackbar',
+    loadComponent: () => import('./components/snackbar/snackbar.component').then(c => c.SnackbarComponent),
+  },
+  {
+    path: 'tooltip',
+    loadComponent: () => import('./components/tooltip/tooltip.component').then(c => c.TooltipComponent),
+  },
+  { path: 'radio', loadComponent: () => import('./components/radio/radio.component').then(c => c.RadioComponent) },
+  {
+    path: 'alert-banner',
+    loadComponent: () => import('./components/alert-banner/alert-banner.component').then(c => c.AlertBannerComponent),
+  },
+  {
+    path: 'alert-banner',
+    loadComponent: () => import('./components/alert-banner/alert-banner.component').then(c => c.AlertBannerComponent),
+  },
+  {
+    path: 'side-panel',
+    loadComponent: () => import('./components/side-panel/side-panel.component').then(c => c.SidePanelComponent),
+  },
+  {
+    path: 'localisation',
+    loadComponent: () => import('./components/localisation/localisation.component').then(c => c.LocalisationComponent),
+  }
+];
+

package/projects/client/src/app/components/alert-banner/alert-banner.component.html

@@ -0,0 +1,15 @@
+<div class="flex-center">
+  <ui-alert-banner
+    [alertType]="alertType ?? 'success'"
+    [alertVariant]="alertVariant ?? 'banner'"
+    [message]="message ?? ''"
+    [includeDismissButton]="includeDismissButton ?? true"
+    [shadow]="shadow ?? false"
+    [linkText]="linkText ?? ''"
+    [linkUrl]="linkUrl ?? ''"
+    [linkTarget]="linkTarget ?? '_blank'"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [isFullWidth]="isFullWidth ?? false"
+    [closeButtonTooltip]="closeButtonTooltip ?? ''"
+  ></ui-alert-banner>
+</div>

package/projects/client/src/app/components/alert-banner/alert-banner.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { AlertBannerComponentModule, ApplicationTheme } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-alert-banner',
+  standalone: true,
+  imports: [
+    AlertBannerComponentModule
+  ],
+  templateUrl: './alert-banner.component.html',
+  styleUrl: './alert-banner.component.scss'
+})
+export class AlertBannerComponent {
+  @Input() alertType: any = 'success';
+  @Input() alertVariant: any = 'banner';
+  @Input() message = '';
+  @Input() includeDismissButton = true;
+  @Input() shadow = false;
+  @Input() linkText? = '';
+  @Input() linkUrl?: string;
+  @Input() linkTarget?: any = '_blank';
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() isFullWidth: boolean | undefined;
+  @Input() closeButtonTooltip = '';
+  @Input() language = 'en';
+}

package/projects/client/src/app/components/avatar/avatar.component.html

@@ -0,0 +1,10 @@
+<div class="flex-center">
+  <ui-avatar
+    [size]="size ?? AvatarSize.SMALL"
+    [imageUrl]="imageUrl ?? ''"
+    [name]="name ?? ''"
+    [tooltipText]="tooltipText ?? ''"
+    [allowEdit]="allowEdit ?? false"
+    [applicationTheme]="applicationTheme ?? 'light'"
+  ></ui-avatar>
+</div>

package/projects/client/src/app/components/avatar/avatar.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { ApplicationTheme, AvatarComponentModule, AvatarSize } from '@testgorilla/tgo-ui';
+import { AsyncPipe, NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+  standalone: true,
+  imports: [
+    AvatarComponentModule,
+    AsyncPipe,
+    NgIf,
+  ],
+})
+export class AvatarComponent {
+  @Input() size: AvatarSize | undefined;
+  @Input() imageUrl: string | undefined;
+  @Input() name: string | undefined;
+  @Input() tooltipText: string | undefined;
+  @Input() allowEdit: boolean | undefined;
+  @Input() applicationTheme: ApplicationTheme | undefined;
+
+  protected readonly AvatarSize = AvatarSize;
+}

package/projects/client/src/app/components/badge/badge.component.html

@@ -0,0 +1,11 @@
+<div class="flex-center">
+  <ui-badge
+    [label]="label ?? ''"
+    [icon]="icon ?? ''"
+    [color]="color ?? 'petrol'"
+    [variant]="variant ?? 'primary'"
+    [notificationsAmount]="notificationsAmount ?? 0"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [rebrandColor]="rebrandColor ?? 'brand'"
+  ></ui-badge>
+</div>

package/projects/client/src/app/components/badge/badge.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { IconName } from '@testgorilla/tgo-ui';
+import { BadgeColor, BadgeVariant, RebrandBadgeColor } from '@testgorilla/tgo-ui';
+import { ApplicationTheme } from '@testgorilla/tgo-ui';
+import { BadgeComponentModule } from '@testgorilla/tgo-ui';
+
+@Component({
+  selector: 'app-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.scss'],
+  standalone: true,
+  imports: [BadgeComponentModule]
+})
+export class BadgeComponent {
+  @Input() label = '';
+  @Input() icon: IconName = '';
+  @Input() color: BadgeColor = 'petrol';
+  @Input() variant: BadgeVariant = 'primary';
+  @Input() notificationsAmount = 0;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() rebrandColor: RebrandBadgeColor = 'brand';
+}

package/projects/client/src/app/components/button/button.component.html

@@ -0,0 +1,23 @@
+<div class="flex-center">
+  <ui-button
+    [size]="size ?? 'big'"
+    [variant]="variant ?? 'primary'"
+    [label]="label ?? ''"
+    [iconPosition]="iconPosition ?? 'right'"
+    [justIcon]="justIcon ?? false"
+    [iconName]="iconName ?? ''"
+    [disabled]="disabled ?? false"
+    [loading]="loading ?? false"
+    [fullWidth]="fullWidth ?? false"
+    [url]="url ?? ''"
+    [urlTarget]="urlTarget ?? '_self'"
+    [value]="value ?? ''"
+    [tooltip]="tooltip ?? ''"
+    [isPremium]="isPremium ?? false"
+    [type]="type ?? 'button'"
+    [companyColor]="companyColor ?? ''"
+    [buttonBadgeConfig]="buttonBadgeConfig ?? undefined"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [disabledScaleOnClick]="disabledScaleOnClick ?? false"
+  ></ui-button>
+</div>

package/projects/client/src/app/components/button/button.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ButtonComponentModule,
+  ApplicationTheme,
+  IconName,
+  ButtonBadgeConfig,
+  ButtonColor,
+  ButtonIconPosition,
+  ButtonSize, ButtonType, LinkUrlTarget
+} from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [CommonModule, ButtonComponentModule],
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent {
+  @Input() size: ButtonSize = 'big';
+  @Input() variant: ButtonColor = 'primary';
+  @Input() label = '';
+  @Input() iconPosition?: ButtonIconPosition = 'right';
+  @Input() justIcon = false;
+  @Input() iconName: IconName = '';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() fullWidth = false;
+  @Input() url?: string;
+  @Input() urlTarget?: LinkUrlTarget;
+  @Input() value?: string;
+  @Input() tooltip = '';
+  @Input() isPremium = false;
+  @Input() type: ButtonType = 'button';
+  @Input() companyColor = '';
+  @Input() buttonBadgeConfig: ButtonBadgeConfig | undefined;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() disabledScaleOnClick = false;
+}

package/projects/client/src/app/components/card/card.component.html

@@ -0,0 +1,8 @@
+<div class="flex-center">
+  <ui-card
+    [size]="size ?? 'medium'"
+    [variant]="variant ?? 'default'"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [errors]="errors ?? []">
+  </ui-card>
+</div>

package/projects/client/src/app/components/card/card.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApplicationTheme, CardComponentModule, CardSize, CardVariant } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [CommonModule, CardComponentModule],
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent {
+  @Input() size: CardSize = 'medium';
+  @Input() variant: CardVariant = 'default';
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() errors: string[] = [];
+}

package/projects/client/src/app/components/checkbox/checkbox.component.html

@@ -0,0 +1,13 @@
+<div class="flex-center">
+  <ui-checkbox
+    [disabled]="disabled ?? false"
+    [checked]="checked ?? false"
+    [indeterminate]="indeterminate ?? false"
+    [companyColor]="companyColor ?? ''"
+    [name]="name ?? ''"
+    [label]="label ?? ''"
+    [multiple]="multiple ?? false"
+    [applicationTheme]="'dark'"
+    [hasError]="hasError ?? false"
+  ></ui-checkbox>
+</div>

package/projects/client/src/app/components/checkbox/checkbox.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CheckboxComponentModule } from "@testgorilla/tgo-ui";
+import { ApplicationTheme } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-checkbox',
+  standalone: true,
+  imports: [CommonModule, CheckboxComponentModule],
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss']
+})
+export class CheckboxComponent {
+  @Input() disabled: boolean | undefined;
+  @Input() checked: boolean | undefined;
+  @Input() indeterminate: boolean | undefined;
+  @Input() companyColor: string | null | undefined;
+  @Input() name: string | undefined;
+  @Input() label: string | undefined;
+  @Input() multiple: boolean | undefined;
+  @Input() applicationTheme: ApplicationTheme;
+  @Input() hasError: boolean | undefined;
+}

package/projects/client/src/app/components/disabled-inputs/disabled-inputs.component.html

@@ -0,0 +1,169 @@
+<div class="container">
+  <ng-container [formGroup]="formDisabled">
+    <div class="form-container">
+      <ui-field
+        [label]="'Job title'"
+        [placeholder]="'Job title'"
+        [showBottomContent]="false"
+        formControlName="jobTitle"
+      ></ui-field>
+      <ui-field
+        [label]="'Read only'"
+        [readOnly]="true"
+        [placeholder]="'Read only'"
+        [showBottomContent]="false"
+        formControlName="readOnly"
+      ></ui-field>
+      <ui-autocomplete
+        class="autocomplete-control"
+        [variant]="autocompleteVariant"
+        [allowAdd]="false"
+        [placeholder]="'Relevant job role(s)'"
+        [label]="'Relevant job role(s)'"
+        formControlName="primary_job_role"
+        [showBottomContent]="false"
+        [itemsList]="itemsList"
+        [virtualScroll]="true"
+        type="large"
+      ></ui-autocomplete>
+      <ui-autocomplete
+        class="autocomplete-control"
+        [variant]="autocompleteVariant"
+        [allowAdd]="false"
+        [placeholder]="'Tests to filter by (max. of 6)'"
+        [label]="'Tests to filter by (max. of 6)'"
+        formControlName="tests"
+        [showBottomContent]="false"
+        [itemsList]="itemsList"
+        [virtualScroll]="true"
+        type="large"
+      ></ui-autocomplete>
+      <ui-multi-input
+        [itemsList]="currencies"
+        class="talent-search__currency"
+        itemTextField="label"
+        itemValueField="code"
+        [placeholder]="'Annual salary'"
+        [label]="'Annual salary'"
+        [fullWidth]="false"
+        formControlName="salary"
+      >
+      </ui-multi-input>
+      <ui-field
+        [placeholder]="'Yrs of exp.'"
+        [label]="'Yrs of exp.'"
+        [showBottomContent]="false"
+        [allowOnlyDigits]="true"
+        [fullWidth]="false"
+        [allowNegative]="false"
+        formControlName="years"
+        [min]="0"
+        [max]="40"
+      ></ui-field>
+      <ui-autocomplete
+        [variant]="autocompleteVariant"
+        [allowAdd]="false"
+        formControlName="locations"
+        [showBottomContent]="false"
+        [itemsList]="itemsList"
+        [virtualScroll]="true"
+        [placeholder]="'Location'"
+        [label]="'Location'"
+        type="large"
+      ></ui-autocomplete>
+      <ui-field
+        type="textarea"
+        [label]="'Read only'"
+        [readOnly]="true"
+        [placeholder]="'Read only'"
+        [showBottomContent]="false"
+        formControlName="readOnly"
+      ></ui-field>
+    </div>
+  </ng-container>
+  <ng-container [formGroup]="formEnabled">
+    <div class="form-container">
+      <ui-field
+        [label]="'Job title'"
+        [placeholder]="'Job title'"
+        [showBottomContent]="false"
+        formControlName="jobTitle"
+      ></ui-field>
+      <ui-field
+        [label]="'Read only'"
+        [readOnly]="true"
+        [placeholder]="'Read only'"
+        [showBottomContent]="false"
+        formControlName="readOnly"
+      ></ui-field>
+      <ui-autocomplete
+        class="autocomplete-control"
+        [variant]="autocompleteVariant"
+        [allowAdd]="false"
+        [placeholder]="'Relevant job role(s)'"
+        [label]="'Relevant job role(s)'"
+        formControlName="primary_job_role"
+        [showBottomContent]="false"
+        [itemsList]="itemsList"
+        [virtualScroll]="true"
+        type="large"
+      ></ui-autocomplete>
+      <ui-autocomplete
+        class="autocomplete-control"
+        [variant]="autocompleteVariant"
+        [allowAdd]="false"
+        [placeholder]="'Tests to filter by (max. of 6)'"
+        [label]="'Tests to filter by (max. of 6)'"
+        formControlName="tests"
+        [showBottomContent]="false"
+        [itemsList]="tests"
+        valueField="test_uuids"
+        textField="name"
+        [virtualScroll]="true"
+        [maxItemSelected]="2"
+        type="large"
+      ></ui-autocomplete>
+      <ui-multi-input
+        [itemsList]="currencies"
+        class="talent-search__currency"
+        itemTextField="label"
+        itemValueField="code"
+        [placeholder]="'Annual salary'"
+        [label]="'Annual salary'"
+        [fullWidth]="false"
+        formControlName="salary"
+      >
+      </ui-multi-input>
+      <ui-field
+        [placeholder]="'Yrs of exp.'"
+        [label]="'Yrs of exp.'"
+        [showBottomContent]="false"
+        [allowOnlyDigits]="true"
+        [fullWidth]="false"
+        [allowNegative]="false"
+        formControlName="years"
+        [min]="0"
+        [max]="40"
+      ></ui-field>
+      <ui-autocomplete
+        [variant]="autocompleteVariant"
+        [allowAdd]="false"
+        formControlName="locations"
+        [showBottomContent]="false"
+        [itemsList]="itemsList"
+        [virtualScroll]="true"
+        [placeholder]="'Location'"
+        [label]="'Location'"
+        type="large"
+      ></ui-autocomplete>
+      <ui-field
+        type="textarea"
+        [label]="'Read only'"
+        [readOnly]="true"
+        [placeholder]="'Read only'"
+        [showBottomContent]="false"
+        formControlName="readOnly"
+      ></ui-field>
+    </div>
+  </ng-container>
+</div>

package/projects/client/src/app/components/disabled-inputs/disabled-inputs.component.scss

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  gap: 100px
+}
+
+.form-container {
+  border: 1px solid red;
+  padding: 20px;
+  max-width: 400px;
+
+  &>* {
+    margin-bottom: 12px;
+    width: 100%;
+  }
+
+  ui-multi-input {
+     display: block;
+  }
+}

package/projects/client/src/app/components/disabled-inputs/disabled-inputs.component.spec.ts

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

package/projects/client/src/app/components/disabled-inputs/disabled-inputs.component.ts

@@ -0,0 +1,78 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { AutocompleteComponentModule, FieldComponentModule, MultiInputComponentModule } from '@testgorilla/tgo-ui';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { DropdownVariation } from '../../../../../tgo-canopy-ui/components/autocomplete/autocomplete.model';
+
+@Component({
+  selector: 'app-disabled-inputs',
+  standalone: true,
+  imports: [
+    FieldComponentModule,
+    AutocompleteComponentModule,
+    MultiInputComponentModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './disabled-inputs.component.html',
+  styleUrl: './disabled-inputs.component.scss'
+})
+export class DisabledInputsComponent implements OnInit {
+  private fb = inject(FormBuilder)
+
+  formDisabled = this.fb.group({
+    jobTitle: ['',],
+    readOnly: ['Read only',],
+    primary_job_role: ['',],
+    tests: ['',],
+    salary: [{ code: 'USD', value: null }],
+    years: ['',],
+    locations: ['',],
+  })
+  formEnabled = this.fb.group({
+    jobTitle: ['',],
+    readOnly: ['Read only',],
+    primary_job_role: ['',],
+    tests: ['',],
+    salary: [{ code: 'USD', value: null }],
+    years: ['',],
+    locations: ['',],
+  })
+  itemsList = ['Item1', 'Item2', 'Item3', 'Item4'];
+  tests = [
+    {
+      test_uuids: 'test_uuids1',
+      name: 'name1',
+    },
+    {
+      test_uuids: 'test_uuids2',
+      name: 'name2',
+    },
+    {
+      test_uuids: 'test_uuids3',
+      name: 'name3',
+    },
+    {
+      test_uuids: 'test_uuids4',
+      name: 'name4',
+    },
+    {
+      test_uuids: 'test_uuids5',
+      name: 'name5',
+    }
+  ]
+  autocompleteVariant = DropdownVariation.DROPDOWN
+  currencies = [
+    {
+      code: 'USD',
+      label: 'USD ($)'
+    },
+    {
+      code: 'EUR',
+      label: 'EUR (€)'
+    },
+  ]
+
+  ngOnInit() {
+    this.formDisabled.disable();
+  }
+}
+

package/projects/client/src/app/components/field/field.component.html

@@ -0,0 +1,28 @@
+<div class="flex-center">
+  <ui-field
+    [label]="label ?? ''"
+    [fieldName]="fieldName ?? ''"
+    [placeholder]="placeholder ?? ''"
+    [id]="id ?? ''"
+    [value]="value ?? ''"
+    [errors]="errors ?? []"
+    [disabled]="disabled ?? false"
+    [required]="required ?? false"
+    [hintMessage]="hintMessage ?? ''"
+    [type]="type ?? 'text'"
+    [updateOnBlur]="updateOnBlur ?? false"
+    [allowOnlyDigits]="allowOnlyDigits ?? false"
+    [showBottomContent]="showBottomContent ?? true"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [ariaLabel]="ariaLabel ?? ''"
+    [ariaRequired]="ariaRequired ?? false"
+    [loading]="loading ?? false"
+    [isValid]="isValid ?? false"
+    [maxCharacters]="maxCharacters ?? 255"
+    [trimOnBlur]="trimOnBlur ?? false"
+    [trimOnSubmit]="trimOnSubmit ?? false"
+    [maxRows]="maxRows ?? 0"
+    [hideBuiltInErrors]="hideBuiltInErrors ?? false"
+    [hideLabelInErrors]="hideLabelInErrors ?? false"
+  ></ui-field>
+</div>