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

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

@@ -1,251 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  OnChanges,
-  OnInit,
-  Optional,
-  Output,
-  SimpleChanges,
-  ViewChild,
-  ViewEncapsulation,
-  ContentChild,
-} from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ButtonColor } from '../button/button.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { ButtonComponent } from '../button/button.component';
-
-@Component({
-  selector: 'ui-dialog',
-  templateUrl: './dialog.component.html',
-  styleUrls: ['./dialog.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class DialogComponent implements OnInit, OnChanges, AfterViewInit {
-  /**
-   * Dialog title
-   *
-   * @memberof DialogComponent
-   */
-  @Input() title? = '';
-
-  /**
-   * Show close button
-   *
-   * @memberof DialogComponent
-   */
-  @Input() showCloseButton = true;
-
-  /**
-   * Fuction called before dialgo is closed
-   *
-   * @memberof DialogComponent
-   */
-  @Input() canCloseFn: () => boolean = () => true;
-
-  /**
-   * Secondary button label
-   *
-   * @memberof DialogComponent
-   */
-  @Input() secondaryButtonLabel? = '';
-
-  /**
-   * Primary button label
-   *
-   * @memberof DialogComponent
-   */
-  @Input() primaryButtonLabel? = '';
-
-  /**
-   * Secondary button type
-   *
-   * @memberof DialogComponent
-   */
-  @Input() secondaryButtonType: ButtonColor = 'secondary';
-
-  /**
-   * Primary button type
-   *
-   * @memberof DialogComponent
-   */
-  @Input() primaryButtonType: ButtonColor = 'primary';
-
-  /**
-   * Primary button test id
-   *
-   * @memberof DialogComponent
-   */
-  @Input() primaryButtonDataTestId: string | null = null;
-
-  /**
-   * Secondary button test id
-   *
-   * @memberof DialogComponent
-   */
-  @Input() secondaryButtonDataTestId: string | null = null;
-
-  /**
-   * Color of the dialog.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof DialogComponent
-   */
-  @HostBinding('style.--color')
-  @Input()
-  companyColor: string | null = '';
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof DialogComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-  /**
-   *
-   * Disable primary button
-   *
-   * @type {boolean}
-   * @memberof DialogComponent
-   */
-  @Input() disablePrimaryButton = false;
-  /**
-   *
-   * Disable close button
-   *
-   * @type {boolean}
-   * @memberof DialogComponent
-   */
-  @Input() disableClose = false;
-
-  /**
-   *
-   * Disable button when canCloseFn is used
-   *
-   * @type {boolean}
-   * @memberof DialogComponent
-   */
-  @Input() shouldDisableButtons = true;
-
-  /**
-   * 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 DialogComponent
-   */
-  @Input() ariaLabelledby = '';
-
-  /**
-   * 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 DialogComponent
-   */
-  @Input() ariaDescribedby = '';
-
-  /**
-   * Defines how modal was opened (with keyboard or not)
-   *
-   * @type {boolean}
-   * @memberof DialogComponent
-   */
-  @Input() keyboardOpen = false;
-
-  @Output() closeEvent: EventEmitter<Event> = new EventEmitter<Event>();
-  @Output() secondaryButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
-  @Output() primaryButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
-
-  @ViewChild('closeButton') closeButton: ButtonComponent;
-
-  modalClosed = false;
-
-  @HostListener('keydown.esc', ['$event'])
-  onEsc(_: KeyboardEvent) {
-    this.dismiss();
-  }
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    public dialogRef: MatDialogRef<DialogComponent>,
-    @Inject(MAT_DIALOG_DATA) private data: { applicationTheme: ApplicationTheme }
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  disableButtons = false;
-  protected readonly translationContext = 'DIALOG.';
-
-  @ContentChild('dialogHeader')
-  customHeader?: any;
-
-  get hasCustomHeader(): boolean {
-    return !!this.customHeader;
-  }
-
-  ngOnInit(): void {
-    this.areButtonsDisabled();
-    if (this.data?.applicationTheme) {
-      this.applicationTheme = this.data.applicationTheme;
-    }
-    if (this.applicationTheme !== 'classic') {
-      this.secondaryButtonType = 'ghost';
-      this.companyColor = this.companyColor || '#D410AA';
-    } else {
-      this.companyColor = this.companyColor || '#46A997';
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['canCloseFn']) {
-      this.dialogRef.disableClose = !this.canCloseFn();
-      this.areButtonsDisabled();
-    }
-  }
-
-  ngAfterViewInit(): void {
-    if (this.keyboardOpen) {
-      setTimeout(() => {
-        this.closeButton.buttonElement.focus('keyboard');
-      }, 100);
-    }
-  }
-
-  //Disable primary button when canClose is false
-  areButtonsDisabled() {
-    this.disableButtons = !this.canCloseFn() && this.shouldDisableButtons;
-  }
-
-  //Close modal
-  dismiss(): void {
-    if (this.canCloseFn()) {
-      this.dialogRef.disableClose = false;
-      this.dialogRef.close();
-      this.modalClosed = true;
-    }
-  }
-
-  onClose(event: Event): void {
-    this.closeEvent.emit(event);
-    this.modalClosed = true;
-  }
-
-  onSecondaryButtonClick(event: Event): void {
-    this.secondaryButtonClickEvent.emit(event);
-  }
-
-  onPrimaryButtonClick(event: Event): void {
-    this.primaryButtonClickEvent.emit(event);
-  }
-}

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

@@ -1,13 +0,0 @@
-import { DialogSize } from "./dialog.service";
-import { MatDialogConfig } from "@angular/material/dialog";
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-export interface DialogConfig {
-  applicationTheme?: ApplicationTheme;
-  size?: DialogSize;
-  panelClass?: string;
-  extraData?: any;
-  backdropClass?: string;
-  keyboardOpen?: boolean;
-  config?: MatDialogConfig,
-}

package/projects/tgo-canopy-ui/components/dialog/dialog.service.spec.ts

@@ -1,58 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { DialogService } from './dialog.service';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DialogCustomComponent } from '../dialog-custom/dialog-custom.component';
-
-const disableAnimations =
-  !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
-
-describe('DialogService', () => {
-  let service: DialogService;
-  let mockMatDialog = {
-    open: jest.fn(),
-  } as unknown as MatDialog;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [MatDialogModule, BrowserAnimationsModule.withConfig({ disableAnimations })],
-      providers: [DialogService, { provide: MatDialog, useClass: mockMatDialog }],
-    });
-    service = new DialogService(mockMatDialog, 'dark');
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  describe('should open the dialog using MatDialog', () => {
-    it('when theme is classic', () => {
-      service = new DialogService(mockMatDialog, 'classic');
-      service.open(DialogCustomComponent, { applicationTheme: 'classic' });
-
-      expect(mockMatDialog.open).toHaveBeenCalledWith(DialogCustomComponent, {
-        backdropClass: '',
-        panelClass: ['ui-dialog-wrapper', '', 'small'],
-        data: { applicationTheme: 'classic', keyboardOpen: false },
-      });
-    });
-    it('when theme is NOT classic', () => {
-      service.open(DialogCustomComponent, { applicationTheme: 'dark' });
-
-      expect(mockMatDialog.open).toHaveBeenCalledWith(DialogCustomComponent, {
-        backdropClass: '',
-        panelClass: ['ui-dialog-wrapper', '', 'dark', 'small'],
-        data: { applicationTheme: 'dark', keyboardOpen: false },
-      });
-    });
-    it('when theme is NOT classic and size is large', () => {
-      service.open(DialogCustomComponent, { applicationTheme: 'dark', size: 'large' });
-
-      expect(mockMatDialog.open).toHaveBeenCalledWith(DialogCustomComponent, {
-        backdropClass: '',
-        panelClass: ['ui-dialog-wrapper', '', 'dark', 'large'],
-        data: { applicationTheme: 'dark', keyboardOpen: false , },
-      });
-    });
-  });
-});

package/projects/tgo-canopy-ui/components/dialog/dialog.service.ts

@@ -1,43 +0,0 @@
-import { ComponentType } from '@angular/cdk/portal';
-import { Inject, Injectable, Optional } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { DialogConfig } from "./dialog.model";
-
-export type DialogSize = 'small' | 'large';
-@Injectable()
-export class DialogService {
-  constructor(
-    private matDialog: MatDialog,
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
-  ) {}
-
-  open(
-    dialogComponent: ComponentType<any>,
-    dialogConfig: DialogConfig = {}
-  ): MatDialogRef<any> {
-    const {
-      applicationTheme = 'light',
-      size = 'small',
-      panelClass = '',
-      extraData = {},
-      backdropClass ='',
-      keyboardOpen = false,
-      config = {},
-    } = dialogConfig;
-    // Open the dialog using UI custom styles
-    return this.matDialog.open(dialogComponent, {
-      ...config,
-      data: {
-        applicationTheme: this.defaultAppTheme ?? applicationTheme,
-        ...extraData,
-        keyboardOpen,
-      },
-      backdropClass: backdropClass || '',
-      panelClass:
-        applicationTheme === 'classic'
-          ? ['ui-dialog-wrapper', panelClass, size]
-          : ['ui-dialog-wrapper', panelClass, applicationTheme, size],
-    });
-  }
-}

package/projects/tgo-canopy-ui/components/dialog-custom/dialog-custom.component.html

@@ -1,38 +0,0 @@
-<ui-dialog
-  [title]="data.title"
-  [showCloseButton]="data.showCloseButton"
-  [applicationTheme]="applicationTheme"
-  [primaryButtonLabel]="'OK'"
-  [secondaryButtonLabel]="'Cancel'"
-  [canCloseFn]="canClose"
-  [keyboardOpen]="data.keyboardOpen"
->
-  <!-- Custom header content -->
-  <div *ngIf="data.type === 'custom-header'" dialogHeader class="custom-header">
-    <div class="button-group">
-      <ui-button
-        label="Action 1"
-        [variant]="'ghost'"
-        [applicationTheme]="applicationTheme"
-      ></ui-button>
-      <ui-button
-        label="Action 2"
-        [variant]="'primary'"
-        [applicationTheme]="applicationTheme"
-      ></ui-button>
-    </div>
-  </div>
-
-  <!-- Dialog content -->
-  <div class="dialog-content">
-    <p *ngIf="data.type === 'default'" class="dialog-message">
-      This is a default dialog example with a standard header.
-    </p>
-    <p *ngIf="data.type === 'custom-header'" class="dialog-message">
-      This dialog uses a custom header with content projection.
-    </p>
-    <p class="dialog-message">
-      The dialog will be closeable in 2 seconds (demonstrating canCloseFn).
-    </p>
-  </div>
-</ui-dialog>

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

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { DialogComponentModule } from '../dialog/dialog.component.module';
-import { DialogCustomComponent } from './dialog-custom.component';
-import { ButtonComponentModule } from '../button/button.component.module';
-
-@NgModule({
-  declarations: [DialogCustomComponent],
-  imports: [CommonModule, DialogComponentModule, ButtonComponentModule],
-  exports: [DialogCustomComponent],
-})
-export class DialogCustomComponentModule {}

package/projects/tgo-canopy-ui/components/dialog-custom/dialog-custom.component.scss

@@ -1,10 +0,0 @@
-.custom-header {
-  width: 100%;
-  .button-group {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    margin-left: auto;
-  }
-}
-

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

@@ -1,56 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DialogCustomComponent } from './dialog-custom.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-describe('DialogCustomComponent', () => {
-  let component: DialogCustomComponent;
-  let fixture: ComponentFixture<DialogCustomComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ DialogCustomComponent ],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [{
-        provide: MAT_DIALOG_DATA,
-        useValue: {},
-      }]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DialogCustomComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  describe('ngOnInit', () => {
-    it('should set canClose with false', () => {
-      component.ngOnInit();
-      expect(component.canClose()).toBe(false);
-    });
-    it('should update canClose to true after 2000ms', (done) => {
-      component.ngOnInit();
-      setTimeout(() => {
-        expect(component.canClose()).toBe(true);
-        done();
-      }, 2000);
-    });
-  });
-  describe('canCloseFalse', () => {
-    it('should return false', () => {
-      expect(component.canClose).toBeFalsy();
-    });
-  });
-  describe('canCloseTrue', () => {
-    it('should return true', () => {
-      expect(component.canCloseTrue).toBeTruthy();
-    });
-  });
-});

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

@@ -1,27 +0,0 @@
-import { DialogComponentModule } from '../dialog/dialog.component.module';
-import { DialogCustomComponent } from './dialog-custom.component';
-import { transformTheme } from '../../utils/transform-theme';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-
-export default {
-  title: 'dialog/Custom dialog',
-  component: DialogCustomComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [DialogComponentModule],
-      declarations: [DialogCustomComponent],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Basic = Template.bind({});

package/projects/tgo-canopy-ui/components/dialog-custom/dialog-custom.component.ts

@@ -1,47 +0,0 @@
-import { Component, Inject, Input, OnInit, Optional, ViewEncapsulation } from '@angular/core';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-@Component({
-  selector: 'ui-dialog-custom',
-  templateUrl: './dialog-custom.component.html',
-  styleUrls: ['./dialog-custom.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class DialogCustomComponent implements OnInit {
-  canClose: () => boolean;
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof DialogComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    @Inject(MAT_DIALOG_DATA) protected data: any
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnInit(): void {
-    this.canClose = this.canCloseFalse.bind(this);
-    setTimeout(() => {
-      this.canClose = this.canCloseTrue.bind(this);
-    }, 2000);
-  }
-
-  //canCloseFn @input demo with false value
-  canCloseFalse(): boolean {
-    return false;
-  }
-
-  //canCloseFn @input demo with true value
-  canCloseTrue(): boolean {
-    return true;
-  }
-}

package/projects/tgo-canopy-ui/components/dialog-demo/dialog-demo.component.html

@@ -1,33 +0,0 @@
-<div class="dialog-demo-wrapper">
-  <h3>Basic Dialogs</h3>
-  <div class="button-group">
-    <ui-button
-      class="item"
-      label="Default Small Dialog"
-      [applicationTheme]="applicationTheme"
-      (buttonClickEvent)="openModal('small', false, 'default')">
-    </ui-button>
-    <ui-button
-      class="item"
-      label="Default Large Dialog"
-      [applicationTheme]="applicationTheme"
-      (buttonClickEvent)="openModal('large', false, 'default')">
-    </ui-button>
-  </div>
-
-  <h3>Custom Header Dialogs</h3>
-  <div class="button-group">
-    <ui-button
-      class="item"
-      label="Custom Header Small"
-      [applicationTheme]="applicationTheme"
-      (buttonClickEvent)="openModal('small', false, 'custom-header')">
-    </ui-button>
-    <ui-button
-      class="item"
-      label="Custom Header Large"
-      [applicationTheme]="applicationTheme"
-      (buttonClickEvent)="openModal('large', false, 'custom-header')">
-    </ui-button>
-  </div>
-</div>

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

@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatDialogModule } from '@angular/material/dialog';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { DialogCustomComponentModule } from '../dialog-custom/dialog-custom.component.module';
-import { DialogService } from '../dialog/dialog.service';
-import { DialogDemoComponent } from './dialog-demo.component';
-
-@NgModule({
-  declarations: [DialogDemoComponent],
-  imports: [CommonModule, DialogCustomComponentModule, ButtonComponentModule, MatDialogModule],
-  exports: [DialogDemoComponent],
-  providers: [DialogService],
-})
-export class DialogDemoComponentModule {}

package/projects/tgo-canopy-ui/components/dialog-demo/dialog-demo.component.scss

@@ -1,12 +0,0 @@
-:host {
-  display: flex;
-  padding: 10px;
-  margin-bottom: 20px;
-  .dialog-demo-wrapper {
-    display: flex;
-    flex-direction: column;
-    .item {
-      margin-bottom: 10px;
-    }
-  }
-}