npm - @testgorilla/tgo-ui - Versions diffs - 2.10.0 → 2.10.1 - Mend

@testgorilla/tgo-ui 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (962) hide show

package/projects/client/src/app/app.component.spec.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+  it(`should have as title 'client'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('client');
+  });
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('client app is running!');
+  });
+});

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

@@ -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 ADDED Viewed

@@ -0,0 +1,8 @@
+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)}
+];

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

@@ -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.scss ADDED Viewed

File without changes

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

@@ -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/assets/.gitkeep ADDED Viewed

File without changes

package/projects/client/src/favicon.ico ADDED Viewed

Binary file

package/projects/client/src/index.html ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/projects/tgo-canopy-ui/assets/.gitkeep ADDED Viewed

File without changes

package/projects/tgo-canopy-ui/components/accordion/accordion.component.html ADDED Viewed

@@ -0,0 +1,35 @@
+<mat-accordion class="accordion-wrapper" [class.disabled]="disabled" [ngClass]="variant" [tabIndex]="0" [attr.theme]="applicationTheme">
+  <mat-expansion-panel [expanded]="open"
+                       (opened)="toggle(true)"
+                       (closed)="toggle(false)">
+    <mat-expansion-panel-header >
+      <mat-panel-title>
+        <div *ngIf="variant === 'table' && applicationTheme !== 'classic'; else default" class="table-container">
+          <ui-icon [size]="'24'" [ngClass]="{ open }" [name]="'Arrow-chevron-down-filled'"></ui-icon>
+          <div class="accordion-label">
+            {{ label }}
+          </div>
+        </div>
+        <ng-template #default>
+          <div class="accordion-label">
+            {{ label }}
+            <ng-content select="[subHeader]"></ng-content>
+            <ui-icon
+              [matTooltipClass]="applicationTheme"
+              [matTooltip]="premiumTooltipText"
+              [applicationTheme]="applicationTheme"
+              [name]="labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'"
+              *ngIf="showPremiumIcon || labelIcon"
+            ></ui-icon>
+          </div>
+        </ng-template>
+      </mat-panel-title>
+      <mat-panel-description>
+        <div class="accordion-actions">
+          <ng-content select="[actions]"></ng-content>
+        </div>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <ng-content></ng-content>
+  </mat-expansion-panel>
+</mat-accordion>

package/projects/tgo-canopy-ui/components/accordion/accordion.component.module.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccordionComponent } from './accordion.component';
+import { IconComponentModule } from "../icon/icon.component.module";
+import { ButtonComponentModule } from "../button/button.component.module";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatExpansionModule } from "@angular/material/expansion";
+@NgModule({
+    declarations: [
+        AccordionComponent
+    ],
+    exports: [
+        AccordionComponent
+    ],
+    imports: [
+        CommonModule,
+        IconComponentModule,
+        ButtonComponentModule,
+        MatTooltipModule,
+        MatExpansionModule
+    ]
+})
+export class AccordionComponentModule { }

package/projects/tgo-canopy-ui/components/accordion/accordion.component.scss ADDED Viewed

@@ -0,0 +1,284 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+$according-side-padding: 32px;
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host {
+  ::ng-deep {
+    .mat-expansion-panel-body {
+      background: $tgo-grey;
+      border-radius: 8px;
+      width: calc(100% - $according-side-padding);
+      padding: 0;
+      margin: 0 auto;
+    }
+    .mat-expansion-indicator::after {
+      color: $tgo-black !important;
+      margin-top: -6px;
+    }
+  }
+}
+.mat-expansion-panel {
+  box-shadow: unset !important;
+  background: transparent;
+}
+.accordion-wrapper {
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+.mat-expansion-panel-header-description {
+  justify-content: end;
+  margin: 0 16px 0 8px;
+  .accordion-actions {
+    @extend .flex-center;
+  }
+}
+.mat-expansion-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 22px 12px 16px;
+  height: 48px !important;
+  border-radius: 8px;
+  z-index: 1;
+  border: 1px solid transparent;
+  &:focus {
+    border: 1px dashed $tgo-dark !important;
+  }
+  &:hover {
+    background: $tgo-light !important;
+  }
+  .accordion-label {
+    @extend .flex-center;
+    font-size: 14px;
+    font-weight: bold;
+    gap: 8px;
+  }
+}
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}
+.accordion-wrapper {
+  &[theme="dark"], &[theme="light"] {
+    position: relative;
+    border-radius: 10px;
+    .mat-expansion-panel-header {
+      border: unset !important;
+      &:hover {
+        background: transparent !important;
+      }
+    }
+    &.standard {
+      .mat-expansion-panel {
+        &:hover {
+          box-shadow: $box-shadow-hover-state;
+        }
+        ::ng-deep.mat-expansion-panel-body {
+          margin: 0 16px 12px 16px;
+        }
+      }
+    }
+    .mat-expansion-panel {
+      background: $tgo-white;
+      border-radius: 10px;
+      border: 1px solid $grayscale-40;
+      &:hover {
+        outline: 1px solid $black;
+        border-color: $black;
+      }
+      ::ng-deep.mat-expansion-panel-body {
+        background-color: $grayscale-10;
+      }
+      * {
+        color: $black;
+        font-weight: 400;
+      }
+      ::ng-deep.mat-expansion-indicator::after {
+        color: $black !important;
+      }
+    }
+    &:hover {
+      .accordion-label {
+        font-weight: bold !important;
+        text-decoration: underline;
+      }
+    }
+    &:focus {
+      outline: unset !important;
+      border-color: unset !important;
+      &:after {
+        content: "";
+        position: absolute;
+        top: -3px;
+        left: -3px;
+        display: flex;
+        width: calc(100% + 6px);
+        height: calc(100% + 6px);
+        border: 1px dashed $grayscale-40;
+        border-radius: 10px;
+      }
+      .accordion-label {
+        font-weight: bold !important;
+        text-decoration: underline;
+      }
+    }
+    &.filter {
+      .mat-expansion-panel-header {
+        padding-left: 2px;
+        border: 1px dashed transparent!important;
+        border-radius: 10px;
+        box-shadow: none!important;
+      }
+      &:focus {
+        &:after {
+          display: none;
+        }
+        .mat-expansion-panel-header {
+          border: 1px dashed $grayscale-40!important;
+        }
+      }
+      ::ng-deep.mat-expansion-panel-header-description {
+        margin-left: 0;
+      }
+      ::ng-deep.mat-expansion-panel-body {
+        background-color: transparent!important;
+        margin: 0;
+        width: 100%;
+        div {
+          padding: 0!important;
+        }
+      }
+      .mat-expansion-panel {
+        border: unset;
+        &:hover {
+          border: unset;
+          outline: unset;
+        }
+      }
+    }
+    &.table {
+      .mat-expansion-panel {
+        border-radius: 0;
+        border: unset;
+        outline: unset;
+      }
+      &:after {
+        display: none;
+      }
+      .mat-expansion-panel-header {
+        border-radius: 0;
+        box-shadow: none!important;
+        height: 64px!important;
+        &:hover {
+          background: $brand-10!important;
+        }
+      }
+      .accordion-label {
+        font-weight: 400!important;
+        text-decoration: unset;
+      }
+      .table-container {
+        display: flex;
+        flex-direction: row;
+      }
+      ::ng-deep.mat-expansion-indicator {
+        display: none;
+      }
+      .mat-expansion-panel-header {
+        padding: 12px 24px;
+      }
+      ::ng-deep.mat-expansion-panel-body {
+        background-color: transparent!important;
+        margin: 0;
+        width: 100%;
+        div {
+          padding: 0!important;
+        }
+      }
+      ui-icon {
+        border: 1px dashed transparent;
+        ::ng-deep mat-icon {
+          transition: transform 0.3s;
+        }
+        margin-right: 16px;
+        &.open {
+         ::ng-deep mat-icon {
+            transform: rotateZ(180deg);
+          }
+        }
+      }
+      &:focus {
+        .mat-expansion-panel {
+        }
+        ui-icon {
+          border-radius: 100%;
+          border: 1px dashed $grayscale-40;
+        }
+      }
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/accordion/accordion.component.spec.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccordionComponent } from './accordion.component';
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccordionComponent]
+    });
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should emit opened event when toggle is called with true', () => {
+    const spy = jest.spyOn(component.opened, 'emit');
+    //@ts-expect-error
+    component.toggle(true);
+    expect(component.open).toBeTruthy();
+    expect(spy).toHaveBeenCalled();
+  });
+  it('should emit closed event when toggle is called with false', () => {
+    const spy = jest.spyOn(component.closed, 'emit');
+    //@ts-expect-error
+    component.toggle(false);
+    expect(component.open).toBeFalsy();
+    expect(spy).toHaveBeenCalled();
+  });
+});