@testgorilla/tgo-ui 2.31.0 → 2.31.1

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

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApplicationTheme, FieldType, FieldComponentModule } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-field',
+  standalone: true,
+  imports: [CommonModule, FieldComponentModule],
+  templateUrl: './field.component.html',
+  styleUrls: ['./field.component.scss']
+})
+export class FieldComponent {
+  @Input() label? = '';
+  @Input() fieldName?: string;
+  @Input() placeholder? = '';
+  @Input() id? = '';
+  @Input() value = '';
+  @Input() errors: string[]
+  @Input() disabled: boolean;
+  @Input() required: boolean;
+  @Input() hintMessage = '';
+  @Input() type: FieldType = 'text';
+  @Input() updateOnBlur = false;
+  @Input() allowOnlyDigits = false;
+  @Input() showBottomContent = true;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() ariaLabel: string;
+  @Input() ariaRequired = false;
+  @Input() loading = false;
+  @Input() isValid = false;
+  @Input() maxCharacters = 255;
+  @Input() trimOnBlur = false;
+  @Input() trimOnSubmit = false;
+  @Input() maxRows = 0;
+  @Input() hideBuiltInErrors = false;
+  @Input() hideLabelInErrors = false;
+}

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

@@ -0,0 +1,10 @@
+<div class="flex-center">
+  <ui-icon
+    [name]="name ?? ''"
+    [size]="size ?? '24'"
+    [filled]="filled ?? false"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [cssClass]="cssClass ?? ''"
+    [color]="color ?? 'black'"
+  ></ui-icon>
+</div>

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconName, IconSize, IconColor, ApplicationTheme, IconComponentModule } from '@testgorilla/tgo-ui';
+
+@Component({
+  selector: 'app-icon',
+  standalone: true,
+  imports: [CommonModule, IconComponentModule],
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent {
+  @Input() size: IconSize;
+  @Input() cssClass: string;
+  @Input() name: IconName;
+  @Input() color?: IconColor;
+  @Input() filled: boolean;
+  @Input() applicationTheme: ApplicationTheme;
+}

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

@@ -0,0 +1,8 @@
+<h1>{{ 'COMMON.YES' | uiTranslate | async }}</h1>
+
+<div style="width: 250px">
+  <ui-field [(ngModel)]="currentLang"></ui-field>
+</div>
+
+
+<ui-button [fullWidth]="false" [label]="('COMMON.APPLY' | uiTranslate | async)!" (buttonClickEvent)="applyLang()"></ui-button>

package/projects/client/src/app/components/localisation/localisation.component.spec.ts

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

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

@@ -0,0 +1,31 @@
+import { Component, inject } from '@angular/core';
+import { LanguageService } from '../../../../../tgo-canopy-ui/utils/localization/language.service';
+import { Language } from '../../../../../tgo-canopy-ui/utils/localization/language.model';
+import { AsyncPipe } from '@angular/common';
+import { UiTranslatePipe } from '../../../../../tgo-canopy-ui/pipes/ui-translate.pipe';
+import { FormsModule } from '@angular/forms';
+import { ButtonComponentModule } from '../../../../../tgo-canopy-ui/components/button/button.component.module';
+import { FieldComponentModule } from '../../../../../tgo-canopy-ui/components/field/field.component.module';
+
+@Component({
+  selector: 'app-localisation',
+  standalone: true,
+  imports: [
+    UiTranslatePipe,
+    AsyncPipe,
+    FormsModule,
+    ButtonComponentModule,
+    FieldComponentModule,
+  ],
+  templateUrl: './localisation.component.html',
+  styleUrl: './localisation.component.scss'
+})
+export class LocalisationComponent {
+
+  readonly #languageService = inject(LanguageService);
+  currentLang: Language = Language.en;
+
+  applyLang() {
+     this.#languageService.setActiveLang(this.currentLang);
+  }
+}

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

@@ -0,0 +1,8 @@
+<div class="flex-center">
+  <ui-logo
+      [type]="type ?? logoType.DEFAULT"
+      [applicationTheme]="applicationTheme ?? 'light'"
+      [label]="label ?? 'POWERED BY'"
+      [width]="+width ?? 100"
+  ></ui-logo>
+</div>

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

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ApplicationTheme, LogoTypeEnum, LogoComponentModule } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-logo',
+  standalone: true,
+  imports: [CommonModule, LogoComponentModule],
+  templateUrl: './logo.component.html',
+  styleUrls: ['./logo.component.scss']
+})
+export class LogoComponent {
+  @Input() type: LogoTypeEnum = LogoTypeEnum.DEFAULT;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() label: string = 'POWERED BY';
+  @Input() width: number;
+  logoType = LogoTypeEnum;
+}

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

@@ -0,0 +1,16 @@
+<div class="flex-center">
+  <ui-radio-button
+    [disabled]="disabled ?? false"
+    [selected]="selected ?? false"
+    [allowUnselect]="allowUnselect ?? false"
+    [companyColor]="companyColor ?? '#46A997'"
+    [name]="name ?? ''"
+    [label]="label ?? ''"
+    [multiple]="multiple ?? false"
+    [value]="value ?? null"
+    [applicationTheme]="applicationTheme ?? 'light'"
+    [ariaLabel]="ariaLabel ?? ''"
+    [ariaRequired]="ariaRequired ?? false"
+    [hasError]="hasError ?? false"
+  ></ui-radio-button>
+</div>

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

@@ -0,0 +1,28 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { ApplicationTheme } from "../../../../../tgo-canopy-ui/models/application-theme.model";
+import { AlertBannerComponentModule, RadioButtonComponentModule } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-radio',
+  standalone: true,
+  imports: [
+    RadioButtonComponentModule,
+    AlertBannerComponentModule
+  ],
+  templateUrl: './radio.component.html',
+  styleUrl: './radio.component.scss'
+})
+export class RadioComponent {
+  @Input() disabled = false;
+  @Input() selected = false;
+  @Input() allowUnselect = false;
+  @Input() companyColor: string | null = '#46A997';
+  @Input() name = '';
+  @Input() label = '';
+  @Input() multiple = false;
+  @Input() value: any;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() ariaLabel: string;
+  @Input() ariaRequired = false;
+  @Input() hasError = false;
+}

package/projects/client/src/app/components/side-panel/side-panel.component.html

@@ -0,0 +1,2 @@
+<ui-button label="Open right" (buttonClickEvent)="openPanel('right')"></ui-button>
+<ui-button label="Open left" (buttonClickEvent)="openPanel('left')"></ui-button>

package/projects/client/src/app/components/side-panel/side-panel.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { SidePanelService } from '@testgorilla/tgo-ui';
+import { ButtonComponentModule } from '../../../../../tgo-canopy-ui/components/button/button.component.module';
+
+@Component({
+  selector: 'app-dummy',
+  template: '<div>Dummy Component</div>',
+  standalone: true,
+  imports: [],
+})
+export class DummyComponent {}
+
+@Component({
+  selector: 'app-side-panel',
+  standalone: true,
+  imports: [CommonModule, ButtonComponentModule],
+  templateUrl: './side-panel.component.html',
+  styleUrls: ['./side-panel.component.scss'],
+  providers: [],
+})
+export class SidePanelComponent {
+  sidePanelService = inject(SidePanelService);
+
+  openPanel(position: 'right' | 'left') {
+    this.sidePanelService.open(DummyComponent, { title: 'My side panel', position });
+  }
+}

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

@@ -0,0 +1,15 @@
+<div class="flex-center">
+  <ui-snackbar
+    [snackbarType]="snackbarType ?? 'success'"
+    [message]="message ?? ''"
+    [html]="html ?? ''"
+    [seconds]="seconds ?? 5"
+    [includeDismissButton]="includeDismissButton ?? true"
+    [fixed]="fixed ?? true"
+    [linkText]="linkText ?? ''"
+    [linkUrl]="linkUrl ?? ''"
+    [linkTarget]="_linkTarget"
+    [variant]="variant ?? 'desktop'"
+    [applicationTheme]="applicationTheme ?? 'light'"
+  ></ui-snackbar>
+</div>

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

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SnackbarComponentModule,
+  SnackbarVariant,
+  ApplicationTheme,
+  SnackbarType
+} from "@testgorilla/tgo-ui";
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-snackbar',
+  standalone: true,
+  imports: [CommonModule, SnackbarComponentModule],
+  templateUrl: './snackbar.component.html',
+  styleUrls: ['./snackbar.component.scss'],
+  providers: [
+    { provide: MAT_SNACK_BAR_DATA, useValue: {} },
+    { provide: MatSnackBarRef, useValue: {} },
+  ],
+})
+export class SnackbarComponent {
+  @Input() snackbarType: SnackbarType = 'success';
+  @Input() message = '';
+  @Input() html: string
+  @Input() seconds = 5;
+  @Input() includeDismissButton = true;
+  @Input() fixed = true;
+  @Input() linkText = '';
+  @Input() linkUrl: string;
+  @Input() linkTarget: string = '_blank';
+  @Input() variant: SnackbarVariant = 'desktop';
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  _linkTarget: any = '_blank' as any;
+}

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

@@ -0,0 +1,7 @@
+<div class="flex-center">
+  <ui-spinner
+    [size]="size ?? 'large'"
+    [isLoader]="isLoader ?? true"
+    [applicationTheme]="applicationTheme ?? 'light'"
+  ></ui-spinner>
+</div>

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

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpinnerComponentModule, SpinnerSize, ApplicationTheme } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-spinner',
+  standalone: true,
+  imports: [CommonModule, SpinnerComponentModule],
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent {
+  @Input() size: SpinnerSize = 'large';
+  @Input() isLoader = true;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+}

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

@@ -0,0 +1,12 @@
+<div class="flex-center">
+  <ui-tooltip [position]="position ?? 'top'" [message]="message ?? 'Message'" applicationTheme="light">
+    <ui-button
+      [type]="$any('secondary')"
+      [justIcon]="true"
+      iconName="Help"
+      label="secondary"
+      matTooltipClass="light"
+      applicationTheme="light"
+    ></ui-button>
+  </ui-tooltip>
+</div>

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

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponentModule, TooltipComponentModule } from "@testgorilla/tgo-ui";
+
+@Component({
+  selector: 'app-tooltip',
+  standalone: true,
+  imports: [CommonModule, TooltipComponentModule, ButtonComponentModule],
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.scss']
+})
+export class TooltipComponent {
+  @Input() message = '';
+  @Input() position: any = 'top';
+}

package/projects/client/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Client</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/client/src/main.ts

@@ -0,0 +1,15 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { routes } from './app/app.routes';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient(),
+    provideAnimations()
+  ]
+});

package/projects/client/src/styles.scss

@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+@import "projects/tgo-canopy-ui/theme/theme";
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

package/projects/client/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/projects/client/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/projects/tgo-canopy-ui/__mocks__/alert-bar.mock.ts

@@ -0,0 +1,18 @@
+export const AlertBarsMock = {
+  type: {
+    success: 'success',
+    error: 'error',
+    info: 'info',
+    warning: 'warning',
+  },
+  position: {
+    static: 'static',
+    fixed: 'fixed',
+  },
+  icon: {
+    info: 'Info',
+    warning: 'Warning',
+    error: 'Error',
+  },
+  fullWidth: 'full-width',
+};

package/projects/tgo-canopy-ui/__mocks__/button.mock.ts

@@ -0,0 +1,34 @@
+export const ButtonMock = {
+  size: {
+    small: 'small',
+    big: 'big',
+  },
+  type: {
+    primary: 'primary',
+    secondary: 'secondary',
+    outlined: 'outlined',
+    destructive: 'destructive',
+    tertiary: 'tertiary',
+    link: 'link',
+    tab: 'tab',
+    text: 'text',
+    menuCell: 'menuCell',
+    menuTrigger: 'menuTrigger',
+  },
+  iconPosition: {
+    left: 'left',
+    right: 'right',
+  },
+  justIcon: {
+    cssClass: 'only-icon',
+  },
+  icon: {
+    cssClass: 'icon',
+  },
+  loading: {
+    cssClass: 'spinner-wrapper',
+  },
+  fullWidth: {
+    cssClass: 'full-width',
+  },
+};

package/projects/tgo-canopy-ui/__mocks__/field.mock.ts

@@ -0,0 +1,10 @@
+export const FieldMock = {
+  type: {
+    text: 'text',
+    password: 'password',
+    email: 'email',
+    numberType: 'number',
+    tel: 'tel',
+    search: 'search',
+  },
+};

package/projects/tgo-canopy-ui/__mocks__/icon.mock.ts

@@ -0,0 +1,14 @@
+export const IconMock = {
+  size: {
+    small: 'size-16',
+    big: 'size-24',
+  },
+  cssClass: 'testing',
+  color: {
+    black: 'black',
+    dark: 'dark',
+    petrol: 'petrol',
+    teal: 'teal',
+    white: 'white',
+  }
+};

package/projects/tgo-canopy-ui/__mocks__/tag.mock.ts

@@ -0,0 +1,9 @@
+export const TagMock = {
+  color: {
+    teal: 'teal',
+    petrol: 'petrol',
+    grey: 'grey',
+    red: 'red',
+    gold: 'gold',
+  },
+};