@testgorilla/tgo-ui 2.30.13 → 2.31.1

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

@@ -0,0 +1,251 @@
+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

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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,12 @@
+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

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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,33 @@
+<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

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

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