npm - @testgorilla/tgo-ui - Versions diffs - 2.31.1 → 2.31.3-beta.0 - Mend

@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

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 (1254) hide show

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

@@ -1,35 +0,0 @@
-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 DELETED Viewed

@@ -1,7 +0,0 @@
-<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.scss DELETED Viewed

File without changes

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

@@ -1,16 +0,0 @@
-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 DELETED Viewed

@@ -1,12 +0,0 @@
-<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.scss DELETED Viewed

File without changes

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

@@ -1,15 +0,0 @@
-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/assets/.gitkeep DELETED Viewed

File without changes

package/projects/client/src/assets/Avatar.png DELETED Viewed

Binary file

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

Binary file

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

@@ -1,13 +0,0 @@
-<!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 DELETED Viewed

@@ -1,15 +0,0 @@
-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 DELETED Viewed

@@ -1,10 +0,0 @@
-/* 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 DELETED Viewed

@@ -1,14 +0,0 @@
-/* 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 DELETED Viewed

@@ -1,14 +0,0 @@
-/* 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 DELETED Viewed

@@ -1,18 +0,0 @@
-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 DELETED Viewed

@@ -1,34 +0,0 @@
-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 DELETED Viewed

@@ -1,10 +0,0 @@
-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 DELETED Viewed

@@ -1,14 +0,0 @@
-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 DELETED Viewed

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

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

File without changes

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

@@ -1,44 +0,0 @@
-<mat-accordion class="accordion-wrapper" [class.disabled]="disabled" [ngClass]="variant" [attr.theme]="applicationTheme">
-  <mat-expansion-panel [expanded]="open"
-                      [class.bgcolor-none]="noBackgroundColor"
-                      (opened)="toggle(true)"
-                      (closed)="toggle(false)">
-    <mat-expansion-panel-header
-      [tabIndex]="disabled ? -1 : 0"
-      [class.custom-height]="allowCustomHeader"
-      [class.left-toggle]="toggleIconPosition === 'left'"
-      [attr.aria-label]="label"
-    >
-      <mat-panel-title  *ngIf="!allowCustomHeader; else customHeader">
-        <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>
-      <ng-template #customHeader>
-        <ng-content select="[customHeader]"></ng-content>
-      </ng-template>
-      <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 DELETED Viewed

@@ -1,26 +0,0 @@
-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 DELETED Viewed

@@ -1,326 +0,0 @@
-@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-panel-content {
-      overflow: hidden;
-    }
-    .mat-expansion-panel.bgcolor-none .mat-expansion-panel-body {
-      background: none;
-    }
-    .mat-expansion-indicator {
-      height: 24px;
-      width: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      &::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 16px 12px 16px;
-  height: 48px !important;
-  border-radius: 8px;
-  z-index: 1;
-  border: 1px solid transparent;
-  &.cdk-keyboard-focused {
-    position: relative;
-    &:after {
-      content: "";
-      width: 100%;
-      height: 100%;
-      outline: 3px solid $black;
-      position: absolute;
-      left: 0;
-      top: 0;
-      animation: focus-ring-animation-main 0.4s forwards;
-      border-radius: 10px;
-    }
-  }
-  &.custom-height {
-    height: auto !important;
-    align-items: flex-start;
-  }
-  &.left-toggle {
-    flex-direction: row-reverse;
-    gap: 8px;
-  }
-  &: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;
-      overflow: visible;
-      &:hover {
-        outline: 1px solid $black;
-        border-color: $black;
-      }
-      &:not(.bgcolor-none) ::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;
-        }
-      }
-    }
-  }
-}