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

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.stories.ts

@@ -1,49 +0,0 @@
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { ProgressBarComponent } from './progress-bar.component';
-import { transformTheme } from "../../utils/transform-theme";
-import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
-
-export default {
-  title: 'ProgressBar',
-  component: ProgressBarComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [MatProgressBarModule, UiTranslatePipe],
-      declarations: [ProgressBarComponent],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-export const Determinate = Template.bind({});
-Determinate.args = {
-  mode: 'determinate',
-  progress: 40,
-};
-
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  mode: 'indeterminate',
-};
-
-export const Query = Template.bind({});
-Query.args = {
-  mode: 'query',
-};
-
-export const Buffer = Template.bind({});
-Buffer.args = {
-  mode: 'buffer',
-  progress: 20,
-  buffer: 60,
-};

package/projects/tgo-canopy-ui/components/progress-bar/progress-bar.component.ts

@@ -1,107 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Inject,
-  Input,
-  OnChanges,
-  Optional,
-  SimpleChanges,
-} from '@angular/core';
-import { ProgressBarMode } from '@angular/material/progress-bar';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProgressBarComponent implements OnChanges {
-  /**
-   * Color of the progress bar.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof ProgressBarComponent
-   */
-  @HostBinding('style.--color')
-  @Input()
-  companyColor: string | null;
-
-  /**
-   * Progress value of the progress bar.
-   * Defaults to zero.
-   *
-   * @type {number}
-   * @memberof ProgressBarComponent
-   */
-  @Input() progress = 0;
-
-  /**
-   * Mode of the progress bar.
-   * Mode must be one of these values: determinate, indeterminate, buffer, query.
-   * Defaults to 'determinate'.
-   *
-   * @type {ProgressBarMode}
-   * @memberof ProgressBarComponent
-   */
-  @Input() mode: ProgressBarMode = 'determinate';
-
-  /**
-   * Buffer value of the progress bar.
-   * Defaults to zero.
-   *
-   * @type {number}
-   * @memberof ProgressBarComponent
-   */
-  @Input() buffer = 0;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof ProgressBarComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {string}
-   * @memberof ProgressBarComponent
-   */
-  @Input() ariaLabel = '';
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {string}
-   * @memberof ProgressBarComponent
-   */
-  @Input() ariaDescribedBy = '';
-
-  /**
-   * Shows the percentage amount
-   * @property showPercentage
-   * @type {boolean}
-   * @memberof ProgressBarComponent
-   */
-  @Input() showPercentage = false;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (!changes['companyColor']) {
-      this.companyColor = this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.html

@@ -1,26 +0,0 @@
-<div
-  class="radial-progress-container"
-  [attr.theme]="applicationTheme"
-  [style.width]="progressSize + 'px'"
-  [style.height]="progressSize + 'px'"
->
-  <div class="background"></div>
-
-  <mat-progress-spinner [strokeWidth]="8" [diameter]="progressSize" [value]="percentage"></mat-progress-spinner>
-
-  <div class="inner-container">
-    <ng-container *ngIf="variant === 'icon-button' && size !== 'small'; else number">
-      <ui-button
-        [tooltip]="buttonTooltip"
-        [iconName]="icon"
-        [variant]="'icon-button'"
-        (click)="onButtonClick($event)"
-        [applicationTheme]="applicationTheme"
-      ></ui-button>
-    </ng-container>
-
-    <ng-template #number>
-      <div *ngIf="size === radialProgressSize.LARGE">{{ percentage }}%</div>
-    </ng-template>
-  </div>
-</div>

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RadialProgressComponent } from './radial-progress.component';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { ButtonComponentModule } from '../button/button.component.module';
-
-@NgModule({
-  declarations: [RadialProgressComponent],
-  exports: [RadialProgressComponent],
-  imports: [CommonModule, MatProgressSpinnerModule, ButtonComponentModule],
-})
-export class RadialProgressComponentModule {}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.scss

@@ -1,41 +0,0 @@
-@use "../../theme/variables" as *;
-
-:host {
-  .radial-progress-container {
-    position: relative;
-
-    .inner-container, .background {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .background {
-      border: 8px solid $tgo-medium;
-      border-radius: 50%;
-    }
-
-    .inner-container, {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $tgo-petrol-default;
-      font-size: 14px;
-      font-weight: 700;
-    }
-
-    ::ng-deep.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,
-    .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
-      stroke: var(--color);
-      stroke-linecap: round;
-    }
-
-    &[theme="dark"], &[theme="light"] {
-      .inner-container {
-        color: $black;
-      }
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.spec.ts

@@ -1,199 +0,0 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-
-import { RadialProgressComponent } from './radial-progress.component';
-import { RadialProgressSizeEnum, RadialProgressSizeValue, RadialProgressVariant } from "./radial-progress.model";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
-import { ApplicationTheme } from "../../models/application-theme.model";
-
-describe('RadialProgressComponent', () => {
-  let component: RadialProgressComponent;
-  let fixture: ComponentFixture<RadialProgressComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [RadialProgressComponent],
-      imports: [MatProgressSpinnerModule],
-    });
-    fixture = TestBed.createComponent(RadialProgressComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have default values', () => {
-    expect(component.size).toBe(RadialProgressSizeEnum.SMALL);
-    expect(component.value).toBe(0);
-    expect(component.total).toBe(0);
-  });
-
-  it('should calculate correct percentage', () => {
-    component.value = 50;
-    component.total = 100;
-
-    //@ts-expect-error
-    expect(component.percentage).toBe(50);
-
-    // Make sure it handles division by zero
-    component.total = 0;
-    //@ts-expect-error
-    expect(component.percentage).toBe(0);
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have default size as small', () => {
-    expect(component.size).toBe(RadialProgressSizeEnum.SMALL);
-  });
-
-  it('should have default value as 0', () => {
-    expect(component.value).toBe(0);
-  });
-
-  it('should have default total as 0', () => {
-    expect(component.total).toBe(0);
-  });
-
-  it('should have default variant as number', () => {
-    expect(component.variant).toBe('number' as RadialProgressVariant);
-  });
-
-  it('should have default icon as empty', () => {
-    expect(component.icon).toBe('');
-  });
-
-  it('should have default buttonTooltip as empty string', () => {
-    expect(component.buttonTooltip).toBe('');
-  });
-
-  it('should have default applicationTheme as light', () => {
-    expect(component.applicationTheme).toBe('light' as ApplicationTheme);
-  });
-
-  it('should calculate the correct progressSize for small size', () => {
-    component.size = RadialProgressSizeEnum.SMALL;
-    // @ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.SMALL);
-  });
-
-  it('should calculate the correct progressSize for large size', () => {
-    component.size = RadialProgressSizeEnum.LARGE;
-    // @ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.LARGE);
-  });
-
-  it('should calculate the correct percentage', () => {
-    component.value = 50;
-    component.total = 200;
-    // @ts-ignore
-    expect(component.percentage).toBe(25);
-  });
-
-  it('should return 0 percentage when total is 0', () => {
-    component.value = 50;
-    component.total = 0;
-    // @ts-ignore
-    expect(component.percentage).toBe(0);
-  });
-
-  it('should return small size value for size=SMALL', () => {
-    component.size = RadialProgressSizeEnum.SMALL;
-    fixture.detectChanges();
-
-    // Assuming RadialProgressSizeValue.SMALL is a defined constant
-    //@ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.SMALL);
-  });
-
-  it('should return large size value for size=LARGE or other values', () => {
-    component.size = RadialProgressSizeEnum.LARGE;
-    fixture.detectChanges();
-
-    // Assuming RadialProgressSizeValue.LARGE is a defined constant
-    //@ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.LARGE);
-
-    // Test with any other size value (assuming it defaults to LARGE)
-    //@ts-ignore
-    component.size = 'custom';
-    fixture.detectChanges();
-
-    //@ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.LARGE);
-  });
-
-  it('should use provided companyColor', () => {
-    component.companyColor = '#FF0000'; // Custom color
-    fixture.detectChanges();
-
-    expect(component.companyColor).toBe('#FF0000');
-  });
-
-  it('should set default companyColor based on applicationTheme', fakeAsync(() => {
-    component.applicationTheme = 'classic';
-    fixture.detectChanges(); // Detect changes after setting theme
-    tick()
-    expect(component.companyColor).toBe(undefined);
-
-    // Light theme (or any other theme)
-    component.applicationTheme = 'light';
-    fixture.detectChanges();
-    tick()
-    expect(component.companyColor).toBe(undefined);
-  }));
-
-  it('should emit buttonClicked event on button click', () => {
-    jest.spyOn(component.buttonClicked, 'emit');
-    const event = new Event('click');
-    // @ts-ignore
-    component.onButtonClick(event);
-    expect(component.buttonClicked.emit).toHaveBeenCalledWith(event);
-  });
-
-  it('should set companyColor based on applicationTheme when companyColor is not provided', () => {
-    component.applicationTheme = 'classic';
-    component.ngOnChanges({});
-    expect(component.companyColor).toBe('#46A997');
-
-    component.applicationTheme = 'light';
-    component.ngOnChanges({});
-    expect(component.companyColor).toBe('#D410AA');
-  });
-
-  it('should not override companyColor if it is provided', () => {
-    component.companyColor = '#FF0000';
-    component.applicationTheme = 'classic';
-    component.ngOnChanges({});
-    expect(component.companyColor).toBe('#46A997');
-  });
-
-  it('should calculate percentage correctly', () => {
-    component.value = 75;
-    component.total = 300;
-    // @ts-ignore
-    expect(component.percentage).toBe(25);
-  });
-
-  it('should return 0 percentage when total is 0', () => {
-    component.value = 50;
-    component.total = 0;
-    // @ts-ignore
-    expect(component.percentage).toBe(0);
-  });
-
-  it('should return correct progressSize for small size', () => {
-    component.size = RadialProgressSizeEnum.SMALL;
-    // @ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.SMALL);
-  });
-
-  it('should return correct progressSize for large size', () => {
-    component.size = RadialProgressSizeEnum.LARGE;
-    // @ts-ignore
-    expect(component.progressSize).toBe(RadialProgressSizeValue.LARGE);
-  });
-});

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.stories.ts

@@ -1,69 +0,0 @@
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { RadialProgressComponent } from './radial-progress.component';
-import { RadialProgressSizeEnum } from './radial-progress.model';
-import { transformTheme } from '../../utils/transform-theme';
-import { ButtonComponentModule } from '../button/button.component.module';
-
-export default {
-  title: 'Radial Progress',
-  component: RadialProgressComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [RadialProgressComponent],
-      imports: [MatProgressSpinnerModule, ButtonComponentModule],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12588-64132&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-export const Default = Template.bind({});
-Default.args = {};
-
-Default.parameters = parameters;
-
-export const Large = Template.bind({});
-Large.args = {
-  size: RadialProgressSizeEnum.LARGE,
-  value: 25,
-  total: 100,
-};
-
-Large.parameters = parameters;
-export const Small = Template.bind({});
-Small.args = {
-  size: RadialProgressSizeEnum.SMALL,
-  value: 25,
-  total: 100,
-};
-
-Small.parameters = parameters;
-
-export const IconButton = Template.bind({});
-IconButton.args = {
-  size: RadialProgressSizeEnum.LARGE,
-  value: 25,
-  total: 100,
-  variant: 'icon-button',
-  companyColor: 'red',
-  icon: 'Test',
-  buttonTooltip: 'Test',
-};
-
-IconButton.parameters = parameters;

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.component.ts

@@ -1,114 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  HostBinding,
-  Inject,
-  Input,
-  Optional,
-  Output, SimpleChanges
-} from '@angular/core';
-import {
-  RadialProgressSize,
-  RadialProgressSizeEnum,
-  RadialProgressSizeValue,
-  RadialProgressVariant
-} from './radial-progress.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { IconName } from '../icon/icon.model';
-
-@Component({
-  selector: 'ui-radial-progress',
-  templateUrl: './radial-progress.component.html',
-  styleUrls: ['./radial-progress.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class RadialProgressComponent {
-  /**
-   * The size of the component. Defaults to 'small'.
-   * @type {RadialProgressSize}
-   * @memberof RadialProgressComponent
-   */
-  @Input() size: RadialProgressSize = RadialProgressSizeEnum.SMALL;
-  /**
-   * The current value of the progress. Defaults to 0.
-   * @type {number}
-   * @memberof RadialProgressComponent
-   */
-  @Input() value = 0;
-  /**
-   * The value of the total progress. Used to set the cap and used for percentage calculations. Defaults to 0.
-   * @type {number}
-   * @memberof RadialProgressComponent
-   */
-  @Input() total = 0;
-
-  /**
-   * @type {number}
-   * @memberof RadialProgressComponent
-   */
-  @Input() variant: RadialProgressVariant = 'number';
-
-  /**
-   * Icon for icon button
-   * @type {number}
-   * @memberof RadialProgressComponent
-   */
-  @Input() icon: IconName = '';
-
-  /**
-   * The tooltip that is displayed on hover. Required for icon-button
-   * @type {number}
-   * @memberof RadialProgressComponent
-   */
-  @Input() buttonTooltip = '';
-
-  /**
-   * Color of the progress bar.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof RadialProgressComponent
-   */
-  @HostBinding('style.--color')
-  @Input() companyColor: string | null;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof ButtonComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  @Output() buttonClicked = new EventEmitter<Event>();
-
-  protected radialProgressSize = RadialProgressSizeEnum;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (!changes['companyColor']) {
-      this.companyColor = this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
-    }
-  }
-
-  protected get progressSize(): number {
-    return this.size === RadialProgressSizeEnum.SMALL ? RadialProgressSizeValue.SMALL : RadialProgressSizeValue.LARGE;
-  }
-
-  protected get percentage(): number {
-    return Math.round(this.total ? (this.value * 100) / this.total : 0);
-  }
-
-  protected onButtonClick(ev: Event): void {
-    this.buttonClicked.emit(ev);
-  }
-}

package/projects/tgo-canopy-ui/components/radial-progress/radial-progress.model.ts

@@ -1,13 +0,0 @@
-export type RadialProgressSize = 'large' | 'small';
-
-export enum RadialProgressSizeValue {
-  LARGE = 64,
-  SMALL = 40,
-}
-
-export enum RadialProgressSizeEnum {
-  LARGE = 'large',
-  SMALL = 'small',
-}
-
-export type RadialProgressVariant = 'number' | 'icon-button';

package/projects/tgo-canopy-ui/components/radio-button/radio-button.component.html

@@ -1,38 +0,0 @@
-<div
-  #radioContainer
-  [class]="multiple ? 'radio-container' : 'radio'"
-  [class.multiple-disabled]="disabled && multiple"
-  [ngClass]="classMultiple"
-  [attr.alignment]="alignment"
-  [attr.truncate-text]="truncateText"
-  [attr.theme]="applicationTheme"
-  [attr.hasError]="hasError"
-  (keydown.enter)="clickRadio(); radioContainer.focus()"
-  (keydown.space)="clickRadio(); radioContainer.focus()"
->
-  <mat-radio-button
-    #radio
-    [checked]="selected"
-    [disabled]="disabled"
-    [name]="name"
-    [value]="value"
-    class="radio-button"
-    [required]="ariaRequired"
-    [aria-label]="ariaLabel"
-    [aria-labelledby]="ariaLabelledby ? ariaLabelledby : label"
-    [aria-describedby]="ariaDescribedby"
-    (keydown.enter)="$event.preventDefault()"
-    (keydown.space)="$event.preventDefault()"
-    [tabIndex]="tabIndex"
-  >
-    <span
-      #tooltip="matTooltip"
-      class="label"
-      uiEllipseText
-      (onChangeTextState)="onLabelEllipsisChange($event)"
-      [matTooltip]="showTooltip ? label : ''"
-      [matTooltipClass]="applicationTheme"
-    >{{ label }}</span>
-    <ng-content select="[radio-label]"></ng-content>
-  </mat-radio-button>
-</div>

package/projects/tgo-canopy-ui/components/radio-button/radio-button.component.module.ts

@@ -1,17 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatRadioModule } from '@angular/material/radio';
-import { RadioButtonComponent } from './radio-button.component';
-import { MatInputModule } from '@angular/material/input';
-import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { FocusVisibleDirective } from '../checkbox/focus-visible.directive';
-
-@NgModule({
-  declarations: [RadioButtonComponent],
-  imports: [CommonModule, MatRadioModule, FormsModule, ReactiveFormsModule, MatInputModule, EllipseTextDirective, MatTooltipModule, MatCheckboxModule, FocusVisibleDirective],
-  exports: [RadioButtonComponent],
-})
-export class RadioButtonComponentModule {}