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

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

@@ -1,80 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DialogDemoComponent } from './dialog-demo.component';
-import { DialogService } from '../dialog/dialog.service';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DialogCustomComponent } from '../dialog-custom/dialog-custom.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-const disableAnimations =
-  !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
-describe('DialogDemoComponent', () => {
-  let component: DialogDemoComponent;
-  let fixture: ComponentFixture<DialogDemoComponent>;
-  let dialogService: DialogService;
-  let matDialogMock: MatDialog;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DialogDemoComponent],
-      imports: [MatDialogModule, BrowserAnimationsModule.withConfig({ disableAnimations })],
-      providers: [DialogService],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DialogDemoComponent);
-    component = fixture.componentInstance;
-    component.applicationTheme = 'dark';
-    dialogService = TestBed.inject(DialogService);
-    matDialogMock = TestBed.inject(MatDialog);
-    jest.spyOn(dialogService, 'open');
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  describe('when component is initialized', () => {
-    it('should open custom dialog', () => {
-      expect(dialogService).toBeDefined();
-    });
-  });
-
-  describe('openModal()', () => {
-    it('should open custom dialog component with default type', () => {
-      component.openModal('small', false, 'default');
-      expect(dialogService.open).toHaveBeenCalledWith(DialogCustomComponent, {
-        applicationTheme: component.applicationTheme,
-        size: 'small',
-        panelClass: undefined,
-        extraData: {
-          type: 'default',
-          title: 'Default Dialog Title',
-          showCloseButton: true,
-        },
-        backdropClass: undefined,
-        keyboardOpen: false,
-      });
-    });
-
-    it('should open custom dialog component with custom header type', () => {
-      component.openModal('large', false, 'custom-header');
-      expect(dialogService.open).toHaveBeenCalledWith(DialogCustomComponent, {
-        applicationTheme: component.applicationTheme,
-        size: 'large',
-        panelClass: undefined,
-        extraData: {
-          type: 'custom-header',
-          title: undefined,
-          showCloseButton: false,
-        },
-        backdropClass: undefined,
-        keyboardOpen: false,
-      });
-    });
-  });
-});

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

@@ -1,30 +0,0 @@
-import { DialogDemoComponent } from './dialog-demo.component';
-import { DialogCustomComponentModule } from '../dialog-custom/dialog-custom.component.module';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { DialogService } from '../dialog/dialog.service';
-import { transformTheme } from '../../utils/transform-theme';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-
-export default {
-  title: 'dialog/How to use ui-dialog',
-  component: DialogDemoComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [DialogCustomComponentModule, ButtonComponentModule],
-      declarations: [DialogDemoComponent],
-      providers: [DialogService],
-    }),
-  ],
-} 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-demo/dialog-demo.component.ts

@@ -1,62 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
-import { DialogCustomComponent } from '../dialog-custom/dialog-custom.component';
-import { DialogService, DialogSize } from '../dialog/dialog.service';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-dialog-demo',
-  templateUrl: './dialog-demo.component.html',
-  styleUrls: ['./dialog-demo.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DialogDemoComponent implements OnInit {
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof DialogComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  @HostListener('keydown.enter', ['$event'])
-  onEnter(event: KeyboardEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.activeButton = event.target;
-    this.openModal('small', true, 'default');
-  }
-
-  activeButton: any;
-
-  constructor(private dialogService: DialogService) {}
-
-  ngOnInit() {
-    this.openModal('small', false, 'default');
-  }
-
-  //Open modal wuth ui-dialog service
-  openModal(size: DialogSize, keyboardOpen = false, type: 'default' | 'custom-header' = 'default'): void {
-    const dialogConfig = {
-      applicationTheme: this.applicationTheme,
-      size,
-      panelClass: undefined,
-      extraData: {
-        type,
-        title: type === 'default' ? 'Default Dialog Title' : undefined,
-        showCloseButton: type === 'default',
-      },
-      backdropClass: undefined,
-      keyboardOpen,
-    };
-
-    this.dialogService
-      .open(DialogCustomComponent, dialogConfig)
-      .afterClosed()
-      .subscribe(() => {
-        if (keyboardOpen) {
-          this.activeButton.classList.add('cdk-keyboard-focused');
-        }
-      });
-  }
-}

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

@@ -1,13 +0,0 @@
-<div class="ui-divider-wrapper">
-  <ng-container *ngIf="!label; else withLabel">
-    <mat-divider aria-hidden="true" [class]="applicationTheme" [ngClass]="size"></mat-divider>
-  </ng-container>
-
-  <ng-template #withLabel>
-    <div class="container">
-      <div class="line" aria-hidden="true"><mat-divider [class]="applicationTheme" [ngClass]="size"></mat-divider></div>
-      <div [class]="'label' + ' ' + size">{{ label }}</div>
-      <div class="line" aria-hidden="true"><mat-divider [class]="applicationTheme" [ngClass]="size"></mat-divider></div>
-    </div>
-  </ng-template>
-</div>

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DividerComponent } from './divider.component';
-import { MatDividerModule } from '@angular/material/divider';
-
-@NgModule({
-  declarations: [DividerComponent],
-  exports: [DividerComponent],
-  imports: [CommonModule, MatDividerModule],
-})
-export class DividerComponentModule {}

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

@@ -1,57 +0,0 @@
-@use '../../theme/variables' as *;
-
-
-mat-divider {
-
-  &.classic {
-    &.small {
-      --mat-divider-width: 1px;
-      --mat-divider-color: #{$tgo-medium};
-    }
-
-    &.large {
-      --mat-divider-width: 2px;
-      --mat-divider-color: var(--companyColor);
-    }
-  }
-
-  &.light, &.dark {
-    &.small {
-      --mat-divider-width: 1px;
-      --mat-divider-color: #{$grayscale-30};
-    }
-
-    &.large {
-      --mat-divider-width: 2px;
-      --mat-divider-color: #{$black};
-    }
-  }
-}
-
-.ui-divider-wrapper {
-
-  .container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .line {
-    flex: 1;
-  }
-
-  .label {
-    font-size: 14px;
-    padding: 0 8px;
-
-    &.large {
-      color: $black;
-    }
-
-    &.small {
-      color: $grayscale-50;
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DividerComponent } from './divider.component';
-
-describe('DividerComponent', () => {
-  let component: DividerComponent;
-  let fixture: ComponentFixture<DividerComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [DividerComponent]
-    });
-    fixture = TestBed.createComponent(DividerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,48 +0,0 @@
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { DividerComponent } from './divider.component';
-import { MatDividerModule } from '@angular/material/divider';
-import { transformTheme } from "../../utils/transform-theme";
-
-export default {
-  title: 'Divider',
-  component: DividerComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [DividerComponent],
-      imports: [MatDividerModule],
-    }),
-  ],
-} as Meta;
-
-const figma = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13946-75060&mode=design&t=ngs6AOFcBdFoqUD7-0',
-  },
-};
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-};
-
-Default.parameters = {
-  ...figma,
-};
-
-Small.parameters = {
-  ...figma,
-};

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

@@ -1,54 +0,0 @@
-import { Component, HostBinding, Inject, Input, Optional } from '@angular/core';
-import { DividerSize } from './divider.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-divider',
-  templateUrl: './divider.component.html',
-  styleUrls: ['./divider.component.scss'],
-})
-export class DividerComponent {
-  /**
-   * Divider size
-   *
-   * @type {DividerSize}
-   * @memberof DividerComponent
-   */
-  @Input() size: DividerSize = 'large';
-
-  /**
-   * Determines whether the checkbox color.
-   * Default: Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof DividerComponent
-   */
-  @HostBinding('style.--companyColor')
-  @Input()
-  companyColor: string | null = '#46A997';
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof DividerComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Text content in the center of the divider
-   *
-   * @type {string}
-   * @memberof DividerComponent
-   */
-  @Input() label = '';
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-}

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

@@ -1,43 +0,0 @@
-<ng-container>
-  <mat-form-field
-    appearance="outline"
-    [attr.theme]="applicationTheme"
-    [color]="(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'"
-    [ngClass]="{ 'hide-bottom-content': !showBottomContent, 'without-label': !label, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }"
-  >
-    <mat-label>{{ label }}  <span *ngIf="required">*</span></mat-label>
-    <mat-select
-      (closed)="onClosed()"
-      (opened)="onOpened()"
-      #matSelect
-      [id]="id!"
-      [disableRipple]="applicationTheme !== 'classic'"
-      [panelClass]="'ui-dropdown-list' + ' ' + applicationTheme"
-      [disabled]="disabled"
-      [multiple]="!!allowMultipleSelection"
-      [placeholder]="placeholder"
-      [value]="value"
-      (selectionChange)="onChangeOption($event)"
-      [attr.name]="name">
-      <div class="mat-option-section" *ngFor="let section of valueList">
-        <span *ngIf="section.sectionTitle" class="section-title">{{ section.sectionTitle }}</span>
-        <mat-option *ngIf="section" #matOption [value]="valueField ? section[valueField] : textField && !valueField ? section : section.value">
-          {{ textField ? section[textField] : section.displayValue ?? section.value }}
-        </mat-option>
-      </div>
-    </mat-select>
-    <ui-button [ariaLabel]="(('COMMON.CLEAR') | uiTranslate | async)!" *ngIf="allowClear && !matSelect.empty" variant="secondary" [justIcon]="true" class="clear" [iconName]="applicationTheme === 'classic' ? 'Close' : 'Close-filled'" [label]="(('COMMON.CLEAR') | uiTranslate | async)!" (click)="clearValue($event)"></ui-button>
-    <ui-icon class="chevron-icon" *ngIf="!matSelect.panelOpen" size="24" [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'"></ui-icon>
-    <ui-icon class="chevron-icon" *ngIf="matSelect.panelOpen" size="24" [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'"></ui-icon>
-    <mat-hint class="error" *ngIf="errorsLength || (ngControl?.errors | hasValidationError)">
-      <ng-container *ngIf="errorsLength">
-        <div class="errors" *ngFor="let error of errors">
-          <ui-icon [applicationTheme]="applicationTheme" [name]="applicationTheme === 'classic' ? 'Error' : 'Error-in-line'"></ui-icon>{{ error }}
-        </div>
-      </ng-container>
-
-      <ui-validation-error *ngIf="ngControl && !hideBuiltInErrors" [ngControl]="ngControl" [label]="hideLabelInErrors ? null : label"></ui-validation-error>
-    </mat-hint>
-  </mat-form-field>
-</ng-container>
-

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

@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { DropdownComponent } from './dropdown.component';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { ValidationErrorModule } from '../validation-error/validation-error.module';
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-
-@NgModule({
-  declarations: [DropdownComponent],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    IconComponentModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ButtonComponentModule,
-    MatSelectModule,
-    UiTranslatePipe,
-    ValidationErrorModule,
-    HasValidationErrorPipe,
-  ],
-  exports: [DropdownComponent],
-})
-export class DropdownComponentModule {}