@testgorilla/tgo-ui 2.10.1 → 2.10.3

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

@@ -1,393 +0,0 @@
-/* eslint-disable @angular-eslint/use-lifecycle-interface */
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding, Inject,
-  Input,
-  OnInit, Optional,
-  Output,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
-import { IconName } from '../icon/icon.model';
-import {
-  ButtonBadgeConfig,
-  ButtonColor,
-  ButtonIconPosition,
-  ButtonSize,
-  ButtonState,
-  ButtonType,
-  IconButtonSize,
-  LinkUrlTarget
-} from './button.model';
-import { adjustLightness } from '../../utils/color-contrast';
-import { MatButton } from '@angular/material/button';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-button',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss']
-})
-export class ButtonComponent implements OnInit, AfterViewInit {
-  @HostBinding('style.pointer-events')
-  get enabled(): string {
-    return this.disabled ? 'none' : 'all';
-  }
-
-  @ViewChild('tooltipElement') tooltipElement: ElementRef<HTMLElement>;
-
-  /**
-   * Define button height
-   *
-   * @type {ButtonSize}
-   * @memberof ButtonComponent
-   */
-  @Input() size: ButtonSize = 'big';
-  /**
-   * Background color of the button while in active state
-   *
-   * @type {ButtonColor}
-   * @memberof ButtonComponent
-   */
-  @HostBinding('attr.btn-variant')
-  @Input()
-  variant: ButtonColor = 'primary';
-
-  /**
-   * Text content to appear on the button
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() label = '';
-
-  /**
-   * Positioning of the icon (when existant)
-   *
-   * @type {ButtonIconPosition}
-   * @memberof ButtonComponent
-   */
-  @Input() iconPosition?: ButtonIconPosition = 'right';
-
-  /**
-   * Define if button has only icon without text
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() justIcon = false;
-
-  /**
-   * Name of ui-icon
-   *
-   * @type {IconName}
-   * @memberof ButtonComponent
-   */
-  @Input() iconName: IconName = '';
-
-  /**
-   * Indicator if the button should be disabled
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * Indicator if the loading icon should be shown
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() loading = false;
-
-  /**
-   * Indicator of the button width
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() fullWidth = false;
-
-  /**
-   * Url of button if it is a link
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() url?: string;
-
-  /**
-   * Url's target of button if it is a link
-   *
-   * @type {@type {LinkUrlTarget}}
-   * @memberof ButtonComponent
-   */
-  @Input() urlTarget?: LinkUrlTarget;
-
-  /**
-   * Button value
-   *
-   * @memberof ButtonComponent
-   */
-  @Input() value?: string;
-
-  /**
-   * @property tooltip
-   * @description The tooltip that is displayed on hover. Required for icon-button type
-   * @type {string}
-   * @memberof ButtonComponent
-   */
-  @Input() tooltip = '';
-
-  /**
-   * @property isPremium
-   * @description The icon that is displayed for Premium button
-   * @type {boolean}
-   * @memberof ButtonComponent
-   */
-  @Input() isPremium = false;
-
-  /**
-   * The type of the button.
-   *
-   * @type {ButtonType}
-   * @memberof ButtonComponent
-   * @default 'button'
-   */
-  @Input() type: ButtonType = 'button';
-
-  /**
-   * Color of the button.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof ButtonComponent
-   */
-  @Input() companyColor = '';
-
-  /**
-   * Config for the button badge variation
-   * @type {ButtonBadgeConfig}
-   * @property badgeType Type of badge on the button
-   * @property badgeLabel Label text for the badge
-   * @property badgeNotificationAmount The amount for notification in the badge
-   */
-  @Input() buttonBadgeConfig: ButtonBadgeConfig | undefined;
-
-  /**
-   *
-   * Defines the application theme where buttons is used
-   *
-   * @type {ApplicationTheme}
-   * @memberof ButtonComponent
-   */
-  @HostBinding('attr.theme')
-  @Input()
-  applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   *
-   * Disabled button scale on click
-   *
-   * @type {boolean}
-   * @memberof ButtonComponent
-   */
-  @Input() disabledScaleOnClick = false;
-
-  /**
-   * A string representing the ARIA label for accessibility.
-   * This label is used to provide an accessible name for the input element.
-   * @type {string}
-   * @memberof ButtonComponent
-   */
-  @Input() ariaLabel: string;
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {boolean}
-   * @memberof ButtonComponent
-   */
-  @Input() ariaRequired = false;
-
-  @Output() buttonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
-
-  @Output() buttonHoverEvent: EventEmitter<Event> = new EventEmitter<Event>();
-
-  @ViewChild('buttonElement', { static: false }) buttonElement: MatButton;
-
-  get isDisabled(): boolean {
-    return this.disabled;
-  }
-
-  @HostBinding('style.--color')
-  get compColor() {
-    return this.getCompanyColor;
-  }
-
-  classCss: string;
-  styleCss: any;
-  isButtonLink: boolean;
-  isLabel: boolean;
-  buttonState: ButtonState;
-  hover = false;
-  iconButtonSize: IconButtonSize = '40';
-  allowButtonTypeForPremium: ButtonColor[] = ['secondary', 'primary', 'ghost', 'outlined', 'destructive'];
-  isFilledIcon: boolean;
-  coloredIcons = ['Google-in-line', 'Google', 'Google-filled'];
-
-  get typeIncluded(): boolean {
-    return this.allowButtonTypeForPremium.includes(this.variant);
-  }
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnInit(): void {
-    this.classCss = this.setCssClass();
-    this.styleCss = this.setCssStyle();
-    this.isButtonLink = this.showButtonLink();
-    this.isLabel = this.showLabel();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['disabled']) {
-      this.buttonState = 'default';
-    }
-    if (!this.applicationTheme) {
-      this.applicationTheme = 'light';
-    }
-    if (changes['type']) {
-      this.isButtonLink = this.showButtonLink();
-    }
-    if (changes['loading']) {
-      this.isLabel = this.showLabel();
-    }
-    if (
-      changes['type'] ||
-      changes['fullWidth'] ||
-      changes['iconName'] ||
-      changes['justIcon'] ||
-      changes['iconPosition'] ||
-      changes['disabled'] ||
-      changes['companyColor'] ||
-      changes['applicationTheme']
-    ) {
-      this.classCss = this.setCssClass();
-      this.styleCss = this.setCssStyle();
-    }
-    if (changes['variant']?.currentValue === 'icon-button' || (changes['variant']?.currentValue === 'menuTrigger' && this.applicationTheme !== 'classic')) {
-      this.iconButtonSize = this.setIconButtonSize();
-    }
-
-    this.isFilledIcon = this.applicationTheme !== 'classic' && (this.variant === 'primary' || this.variant === 'secondary');
-  }
-
-  ngAfterViewInit(): void {
-    this.tooltipElement.nativeElement.onclick = ev => {
-      ev.preventDefault();
-      ev.stopPropagation();
-    };
-    if (this.variant === 'icon-button' && !this.tooltip) {
-      throw new Error('ui-button ButtonComponent\n    [tooltip] is required for [type] icon-button!');
-    } else if (this.variant === 'destructive' && !this.iconName && !this.loading && this.applicationTheme !== 'classic') {
-      throw new Error('ui-button ButtonComponent\n  [icon] is required for [type] destructive');
-    }
-  }
-
-  buttonClick(event: Event): void {
-    this.buttonClickEvent.emit(event);
-  }
-
-  buttonHover(event: Event): void {
-    if (event.type === 'mouseenter') {
-      this.hover = true;
-      this.buttonHoverEvent.emit(event);
-      this.buttonState = 'hover';
-      if (this.shouldChangeFilledStatus && this.iconName) {
-        this.iconName = this.iconName.replace(/-in-line|-filled/, '') + '-filled' as IconName;
-      }
-    } else {
-      this.hover = false;
-      if (this.shouldChangeFilledStatus && this.iconName) {
-        this.iconName = this.iconName.replace(/-in-line|-filled/, '') + '-in-line' as IconName;
-      }
-      this.buttonState = 'default';
-    }
-
-    this.styleCss = this.setCssStyle();
-  }
-
-  //Show or hide label
-  showLabel(): boolean {
-    return !this.loading;
-  }
-
-  //Set css class according inputs
-  setCssClass(): string {
-    const width = this.fullWidth ? 'full-width' : '';
-    const hasIcon = this.iconName === null ? '' : 'icon';
-    const justIcon = this.justIcon || this.variant === 'icon-button' ? 'only-icon' : '';
-    const iconPosition = this.iconPosition === undefined ? '' : this.iconPosition;
-    const disabled = this.disabled && this.variant === 'primary' ? 'primary-disabled' : '';
-    const variant = this.variant === 'ghost' && this.applicationTheme === 'classic' ? 'outlined' : this.variant;
-    const companyColor = this.companyColor ? 'has-company-color' : '';
-    return `${this.size} ${iconPosition} ${variant} ${width} ${hasIcon} ${justIcon} ${disabled} ${companyColor} ${this.applicationTheme}-theme`;
-  }
-
-  setCssStyle(): any {
-    this.buttonState = this.disabled ? 'disabled' : this.buttonState;
-    const styleObj: any = {};
-
-    if (this.variant === 'primary' && this.applicationTheme !== 'classic' && (this.buttonState === 'hover' || this.buttonState === 'pressed')) {
-      styleObj['background-color'] = adjustLightness(this.getCompanyColor, this.buttonState);
-    } else if (this.variant === 'primary' && this.applicationTheme === 'classic' && this.buttonState !== 'default') {
-      styleObj['background-color'] = adjustLightness(this.getCompanyColor, this.buttonState, 'classic');
-    } else if (this.getCompanyColor && (this.variant === 'link' || this.variant === 'tertiary' || this.variant === 'icon-button')) {
-      styleObj['color'] = this.getCompanyColor;
-    }
-    return styleObj;
-  }
-
-  //Show or hide spinner
-  get showSpinner(): boolean {
-    const isNotTab = this.variant !== 'tab';
-    const isNotLink = this.variant !== 'link';
-    const isLoading = this.loading === true;
-    return isLoading && isNotTab && isNotLink;
-  }
-
-  //Show button with <button> or <a> tag
-  showButtonLink(): boolean {
-    return this.variant !== 'link';
-  }
-
-  setIconButtonSize(): IconButtonSize {
-    return this.size === 'big' ? '40' : '32';
-  }
-
-  onPressed(ev: Event): void {
-    if (ev.type === 'mousedown') {
-      this.buttonState = 'pressed';
-    } else {
-      this.buttonState = this.hover ? 'hover' : 'default';
-    }
-
-    this.styleCss = this.setCssStyle();
-  }
-
-  focus(): void {
-    this.buttonElement.focus();
-  }
-
-  get getCompanyColor(): string {
-    return this.companyColor || (this.applicationTheme === 'classic' ? '#46A997' : '#D410AA');
-  }
-
-  get shouldChangeFilledStatus(): boolean {
-    return this.applicationTheme !== 'classic' && this.variant !== 'primary' && this.variant !== 'secondary' && !this.coloredIcons.includes(this.iconName);
-  }
-}

package/projects/tgo-canopy-ui/components/button/button.model.ts

@@ -1,28 +0,0 @@
-import { BadgeVariant, RebrandBadgeColor } from '../badge/badge.model';
-
-export type ButtonIconPosition = 'left' | 'right';
-export type ButtonColor =
-  | 'primary'
-  | 'secondary'
-  | 'ghost'
-  | 'outlined'
-  | 'destructive'
-  | 'tertiary'
-  | 'link'
-  | 'tab'
-  | 'text'
-  | 'menuTrigger'
-  | 'menuCell'
-  | 'icon-button';
-export type ButtonSize = 'big' | 'medium' | 'small';
-export type LinkUrlTarget = '' | '_self' | '_blank' | '_parent' | '_top';
-export type IconButtonSize = '32' | '40';
-
-export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonState = 'hover' | 'pressed' | 'disabled' | 'default';
-export interface ButtonBadgeConfig {
-  badgeType: BadgeVariant | null;
-  badgeLabel: string;
-  badgeNotificationAmount: number;
-  rebrandColor: RebrandBadgeColor;
-}

package/projects/tgo-canopy-ui/components/card/card.component.html

@@ -1,9 +0,0 @@
-<div class="card-container" [ngClass]="classes" [attr.theme]="applicationTheme" tabindex="0"  >
-  <ng-content></ng-content>
-</div>
-<div class="errors" *ngIf="safeErrors?.length">
-  <div class="error" *ngFor="let error of safeErrors">
-    <ui-icon [size]="'24'" [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
-    <span [innerHTML]="error"></span>
-  </div>
-</div>

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

@@ -1,11 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { CardComponent } from './card.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-
-@NgModule({
-  declarations: [CardComponent],
-  imports: [CommonModule, IconComponentModule],
-  exports: [CardComponent],
-})
-export class CardComponentModule {}

package/projects/tgo-canopy-ui/components/card/card.component.scss

@@ -1,91 +0,0 @@
-@use "../../theme/variables" as *;
-@use "../../theme/breakpoints-mixin" as *;
-
-.card-container {
-  border-radius: 8px;
-  border: 1px solid $tgo-medium;
-  background: $tgo-white;
-
-
-  &.card-size {
-    &-medium {
-      padding: 24px;
-    }
-
-    &-large {
-      padding: 80px;
-    }
-
-    &-small {
-      padding: 16px;
-    }
-  }
-
-  &[theme="dark"], &[theme="light"] {
-    border-color: $grayscale-30;
-    border-radius: 10px;
-
-    &.shadow {
-      box-shadow: $box-shadow-page-card;
-    }
-
-    &.error {
-      border-width: 2px;
-      border-color: $error-50;
-    }
-
-    &.state {
-      cursor: pointer;
-
-      &:hover {
-        border-width: 2px;
-        border-color: $black;
-        box-shadow: $box-shadow-hover-state;
-        @extend .card-size-brand;
-      }
-
-      &:focus {
-        border-width: 2px;
-        border-color: $black;
-        @extend .card-size-brand;
-      }
-    }
-  }
-}
-
-.card-size-brand {
-  &.card-size {
-    &-medium {
-      padding: 23px;
-    }
-
-    &-large {
-      padding: 79px;
-    }
-
-    &-small {
-      padding: 15px;
-    }
-  }
-}
-
-
-.errors {
-  margin-top: 8px;
-
-  .error {
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    ui-icon {
-      margin-right: 8px;
-
-      ::ng-deep svg {
-        color: $error-50;
-      }
-    }
-    color: $error-50;
-  }
-}

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

@@ -1,76 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { By, SafeHtml } from '@angular/platform-browser';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { LanguageService } from '../../utils/localization/language.service';
-import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { CardComponent } from "./card.component";
-
-describe('CardComponent', () => {
-  let component: CardComponent;
-  let fixture: ComponentFixture<CardComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ CardComponent ],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-      imports: [UiTranslatePipe],
-      providers: [{ provide: LanguageService, useClass: LanguageServiceStub }]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CardComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should set default values for size and variant', () => {
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.size).toBe('medium'); // Default size
-    expect(component.variant).toBe('default'); // Default variant
-  });
-
-  it('should set input properties correctly', () => {
-    component.size = 'large';
-    component.variant = 'state';
-    component.applicationTheme = 'dark';
-
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.size).toBe('large'); // Check size
-    expect(component.variant).toBe('state'); // Check variant
-    expect(component.applicationTheme).toBe('dark'); // Check theme
-  });
-
-  it('should update classes when inputs change', () => {
-    component.size = 'small';
-    component.variant = 'shadow';
-
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.classes).toBe('card-size-small shadow'); // Validate class string
-  });
-
-  it('should update classes based on errors', () => {
-    const errors = ['Error 1', 'Error 2'];
-    component.errors = errors; // Set errors
-
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.cardVariant).toBe('error'); // Should switch to error variant
-  });
-
-  it('should safely sanitize error messages', () => {
-    const unsafeErrors = ['<script>alert("XSS")</script>', 'Valid Error'];
-    component.errors = unsafeErrors; // Set unsafe errors
-
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.safeErrors.length).toBe(2); // Validate safe errors length
-    expect((component.safeErrors[0] as SafeHtml).toString()).not.toContain('<script>alert(\\"XSS\\")</script>'); // Validate safe content
-  });
-});

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

@@ -1,88 +0,0 @@
-import { MatCardModule } from '@angular/material/card';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { LogoComponentModule } from '../logo/logo.component.module';
-import { CardComponent } from './card.component';
-import { transformTheme } from '../../utils/transform-theme';
-import { IconComponentModule } from '../icon/icon.component.module';
-
-export default {
-  title: 'Card',
-  component: CardComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [CardComponent],
-      imports: [MatCardModule, LogoComponentModule, IconComponentModule],
-    }),
-  ],
-} as Meta;
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12588-65219&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export const Default: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <ui-card applicationTheme="${_theme}" variant="${args['variant']}">
-        <ui-logo class="logo"></ui-logo>
-        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
-        <div>Verify your link to create your account</div>
-      </ui-card>      `,
-    };
-  },
-} as Story;
-
-Default.parameters = parameters;
-
-export const Large: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <ui-card applicationTheme="${_theme}" variant="${args['variant']}" size="large">
-        <ui-logo class="logo"></ui-logo>
-        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
-        <div>Verify your link to create your account</div>
-      </ui-card>      `,
-    };
-  },
-} as Story;
-
-Large.parameters = parameters;
-
-export const Small: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <ui-card applicationTheme="${_theme}" variant="${args['variant']}" size="small">
-        <ui-logo class="logo"></ui-logo>
-        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
-        <div>Verify your link to create your account</div>
-      </ui-card>      `,
-    };
-  },
-} as Story;
-
-Small.parameters = parameters;
-
-export const WithErrors: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    const errorsList = ['Oops!', 'Error happens'];
-    return {
-      template: `
-      <ui-card applicationTheme="${_theme}" variant="${args['variant']}" [errors]='${JSON.stringify(errorsList)}'>
-        <ui-logo class="logo"></ui-logo>
-        <div style="font-weight: bold">We've sent you an email verification link to demo@testgorilla.com</div>
-        <div>Verify your link to create your account</div>
-      </ui-card>      `,
-    };
-  },
-} as Story;