@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/file-upload/file-upload.component.ts

@@ -0,0 +1,299 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+  forwardRef,
+  Optional,
+  Inject,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileUploadComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('inOutAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, height: 0 }),
+        animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
+      ]),
+      transition(':leave', [
+        style({ opacity: 1, height: '196px' }),
+        animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
+      ])
+    ]),
+    trigger('inOutAnimationProgress', [
+      transition(':enter', [
+        style({ opacity: 0, height: 0 }),
+        animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
+      ]),
+      transition(':leave', [
+        style({ opacity: 1, height: '196px' }),
+        animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
+      ])
+    ]),
+    trigger('inOutAnimationChange', [
+      transition(':enter', [
+        style({ opacity: 0, height: 0 }),
+        animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
+      ]),
+      transition(':leave', [
+        style({ opacity: 1, height: '196px' }),
+        animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
+      ])
+    ])
+  ]
+})
+export class FileUploadComponent implements OnInit, OnChanges, ControlValueAccessor {
+  @HostBinding() class = 'ui-file-upload';
+
+  /**
+   *
+   * @type {number}
+   * @memberof FileUploadComponent
+   */
+  @Input() maxFileSizeMB: number;
+
+  /**
+   *
+   * @type {number}
+   * @memberof FileUploadComponent
+   */
+  @Input() minFileSizeMB: number;
+
+  /**
+   * Supported files for input field
+   *
+   * @type {string}
+   * @memberof FileUploadComponent
+   */
+  @Input() supportedFileTypes?: string;
+
+  /**
+   * Upload progress
+   *
+   * @type {number}
+   * @memberof FileUploadComponent
+   */
+  @Input() uploadProgress: number;
+
+  /**
+   * File upload errors
+   *
+   * @type {string[]}
+   * @memberof FileUploadComponent
+   */
+  @Input() errors?: string[] | null;
+
+  /**
+   * File upload disabled
+   *
+   * @type {boolean}
+   * @memberof FileUploadComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * Existing file information
+   *
+   * @type {(File | null)}
+   * @memberof FileUploadComponent
+   */
+  @Input() file: File | null = null;
+
+  /**
+   * Color of the file upload.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof FileUploadComponent
+   */
+  @Input() companyColor: string | null = '';
+
+  @HostBinding('style.--color')
+  compColor: string;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof FileUploadComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof FileUploadComponent
+   */
+  @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 FileUploadComponent
+   */
+  @Input() ariaRequired = false;
+
+  @Output() OnDrop: EventEmitter<File> = new EventEmitter<File>();
+
+  @ViewChild('fileDrop') fileDrop: ElementRef<HTMLInputElement>;
+
+  protected readonly translationContext = 'FILE_UPLOAD.';
+
+  /**
+   * @ignore
+   */
+  onChange = (_: any) => {
+  };
+
+  /**
+   * @ignore
+   */
+  onTouch = () => {
+  };
+
+  isMissedMinSize = false;
+  progress = false;
+  success = false;
+  browse: boolean;
+  isCanceled = false;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.browse = true;
+  }
+
+  //When file is dropped
+  onFileDropped(files: FileList) {
+    this.emitFile(files);
+  }
+
+  //When input changes
+  onChangeUpload(event: Event) {
+    this.isCanceled = false;
+    const element = event.currentTarget as HTMLInputElement;
+    this.emitFile(element.files || new FileList());
+  }
+
+  //Emit drop file
+  emitFile(files: FileList) {
+    const [file] = Array.from(files);
+    this.file = file;
+    this.errors = null;
+    this.onTouch();
+    this.isMissedMinSize =
+      !file?.size && !this.minFileSizeMB ? true : this.fileSizeToMB(file?.size ?? 0) <= this.minFileSizeMB;
+    if (!this.isMissedMinSize) {
+      this.onChange(this.file);
+      this.OnDrop.emit(file);
+    }
+  }
+
+  //Show progress-bar
+  showProgress(): boolean {
+    this.browse = false;
+    return !!(this.file && !this.errors && !this.isMissedMinSize);
+  }
+
+  //Show success elements
+  showSuccess(): boolean {
+    return !!(this.file && this.uploadProgress === 100 && !this.errors && !this.isMissedMinSize);
+  }
+
+  //Show browse when there are error
+  showBrowse(): boolean {
+    return !!(this.errors || this.isMissedMinSize);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.isCanceled) {
+      if (changes['uploadProgress'] || changes['file']) {
+        this.progress = this.showProgress();
+        this.success = this.showSuccess();
+        this.browse = this.showBrowse();
+      }
+      if (changes['errors']) {
+        this.progress = this.showProgress();
+        this.success = this.showSuccess();
+        this.browse = this.showBrowse();
+      }
+      if (changes['applicationTheme']) {
+        this.compColor = this.getCompanyColor();
+      }
+    }
+  }
+
+  writeValue(value?: File): void {
+    if (value) {
+      this.file = value || null;
+    } else {
+      this.file = null;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  private getCompanyColor(): string {
+    return this.companyColor || (this.applicationTheme === 'classic' ? '#46A997' : '#D410AA');
+  }
+
+  private fileSizeToMB(fileSize: number): number {
+    return fileSize / 1024 / 1024;
+  }
+
+  onKeydown(ev: KeyboardEvent) {
+    if (ev.key === 'Enter' || ev.key === ' ') {
+      this.fileDrop.nativeElement.click()
+    } else if  (ev.key === 'Escape') {
+      this.file = null;
+      this.success = false;
+      this.progress = false;
+      this.errors = null;
+      this.isMissedMinSize = false;
+      this.browse = true;
+      this.isCanceled = true;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+<form [formGroup]="uploadDemoForm">
+  <div class="form-value" *ngIf="!!uploadValue">
+    <p><strong>Name: </strong>{{ uploadValue.name }}</p>
+    <p><strong>Size: </strong>{{ uploadValue.size }}</p>
+  </div>
+  <div class="field">
+    <ui-file-upload
+      formControlName="upload"
+      [maxFileSizeMB]="100"
+      supportedFileTypes="png .jpg .psd .bmp .gif .mp3 .key .odp .ppt .pptx .txt .doc .docx .csv .xls .xlsx"
+      [uploadProgress]="progress"
+      [applicationTheme]="applicationTheme"
+      (OnDrop)="startDemo($event)"
+    ></ui-file-upload>
+  </div>
+  <div class="field">
+    <h2>With Errors</h2>
+    <div class="form-value" *ngIf="!!uploadValueErrors">
+      <p><strong>Name: </strong>{{ uploadValueErrors.name }}</p>
+      <p><strong>Size: </strong>{{ uploadValueErrors.size }}</p>
+    </div>
+    <ui-file-upload
+      formControlName="uploadErrors"
+      [maxFileSizeMB]="100"
+      supportedFileTypes="png .jpg .psd .bmp .gif .mp3 .key .odp .ppt .pptx .txt .doc .docx .csv .xls .xlsx"
+      [uploadProgress]="progressError"
+      [applicationTheme]="applicationTheme"
+      (OnDrop)="startDemoErrors($event)"
+      [errors]="errors"
+    ></ui-file-upload>
+  </div>
+</form>

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

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FileUploadComponentModule } from '../file-upload/file-upload.component.module';
+import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
+import { FileUploadDemoComponent } from './file-upload-demo.component';
+
+
+@NgModule({
+  declarations: [FileUploadDemoComponent],
+  imports: [CommonModule, FileUploadComponentModule, FormsModule, ReactiveFormsModule, ProgressBarComponentModule],
+  exports: [FileUploadDemoComponent],
+})
+export class FileUploadDemoComponentModule {}

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

@@ -0,0 +1,34 @@
+:host {
+  display:flex;
+  justify-content: center;
+  flex-flow: column;
+  align-items: center;
+  width: 100%;
+
+  form {
+    display:flex;
+    justify-content: center;
+    flex-flow: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  form div.field {
+    width: 100%;
+    margin-bottom: 40px;
+  }
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  .form-value {
+    width: 100%;
+    font-size: 12px;
+    margin-bottom: 20px;
+
+    p {
+      margin: 5px 0;
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormBuilder, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { createMockFileList } from '../../test-utils/mock-file';
+import { FileUploadComponentModule } from '../file-upload/file-upload.component.module';
+import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
+import { FileUploadDemoComponent } from './file-upload-demo.component';
+import { By } from '@angular/platform-browser';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+declare const global: any;
+
+const disableAnimations =
+  !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
+
+describe('FileUploadDemoComponent', () => {
+  let component: FileUploadDemoComponent;
+  let fixture: ComponentFixture<FileUploadDemoComponent>;
+  let fileMock: File;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FileUploadDemoComponent],
+      providers: [FormBuilder],
+      imports: [
+        BrowserAnimationsModule.withConfig({ disableAnimations }),
+        FileUploadComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ProgressBarComponentModule,
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileUploadDemoComponent);
+    component = fixture.componentInstance;
+    fileMock = new File(['dummy content'], 'test.txt');
+  });
+
+  it('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+  describe('Create form with formBuilder', () => {
+    it('uploadDemoForm should be defined', fakeAsync(() => {
+      const testForm = new FileUploadDemoComponent(new FormBuilder());
+      expect(testForm.uploadDemoForm).toBeDefined();
+    }));
+  });
+  describe('ngOnInit', () => {
+    it('it should set new value to uploadValue', () => {
+      fixture.detectChanges();
+      component.uploadDemoForm.controls['upload'].setValue(fileMock);
+      fixture.detectChanges();
+      expect(component.uploadValue).toBe(fileMock);
+    });
+    it('it should set new value to uploadValueErrors', () => {
+      fixture.detectChanges();
+      component.uploadDemoForm.controls['uploadErrors'].setValue(fileMock);
+      fixture.detectChanges();
+      expect(component.uploadValueErrors).toBe(fileMock);
+    });
+  });
+  describe('startDemo()', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      jest.spyOn(global, 'setTimeout');
+    });
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+    it('should start the demo upload', () => {
+      component.startDemo(fileMock);
+      expect(component.progress).toBe(1);
+      jest.runAllTimers();
+      expect(component.progress).toBe(100);
+    });
+    it('should return', () => {
+      component.startDemo();
+      jest.runAllTimers();
+      expect(component.progressError).toBe(undefined);
+    });
+  });
+  describe('startDemoErrors()', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      jest.spyOn(global, 'setTimeout');
+    });
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+    it('should start the demoErrors upload', () => {
+      component.startDemoErrors(fileMock);
+      expect(component.progressError).toBe(1);
+      jest.runAllTimers();
+      expect(component.progressError).toBe(100);
+    });
+    it('should set errors', () => {
+      component.startDemoErrors(fileMock);
+      jest.runAllTimers();
+      expect(component.errors).toEqual([ 'Unsupported file', 'File size exceeds the maximum limit' ]);
+    });
+    it('should return', () => {
+      component.startDemoErrors();
+      jest.runAllTimers();
+      expect(component.progressError).toBe(undefined);
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FileUploadComponentModule } from '../file-upload/file-upload.component.module';
+import { FileUploadDemoComponent } from './file-upload-demo.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+
+export default {
+  title: 'File upload/Demo',
+  component: FileUploadDemoComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FileUploadComponentModule, FormsModule, ReactiveFormsModule],
+      declarations: [FileUploadDemoComponent],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});

package/projects/tgo-canopy-ui/components/file-upload-demo/file-upload-demo.component.ts

@@ -0,0 +1,74 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { UntypedFormBuilder } from '@angular/forms';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-file-upload-demo',
+  templateUrl: './file-upload-demo.component.html',
+  styleUrls: ['./file-upload-demo.component.scss']
+})
+export class FileUploadDemoComponent implements OnInit {
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(private fb: UntypedFormBuilder) { }
+
+  /**
+   * @ignore
+   */
+  uploadDemoForm = this.fb.group({
+    upload: [''],
+    uploadErrors: [''],
+  });
+
+  progress: number;
+  progressError: number;
+  errors: string[] | undefined;
+  uploadValue: File;
+  uploadValueErrors: File;
+
+  ngOnInit(): void {
+    this.uploadDemoForm.get('upload')?.valueChanges.subscribe((value: File) => {
+      this.uploadValue = value;
+    });
+    this.uploadDemoForm.get('uploadErrors')?.valueChanges.subscribe((value: File) => {
+      this.uploadValueErrors = value;
+    });
+  }
+
+  startDemo(file?: File) {
+    if (!file) {
+      return;
+    }
+    this.progress = 0;
+    if (this.progress === 0) {
+      this.progress= 1;
+      const id = setInterval(() => {
+        if (this.progress>= 100) {
+          clearInterval(id);
+          this.progress = 100;
+        } else {
+          this.progress++;
+        }
+      }, 100);
+    }
+  }
+
+  startDemoErrors(file?: File) {
+    if (!file) {
+      return;
+    }
+    this.progressError = 0;
+    if (this.progressError === 0) {
+      this.progressError = 1;
+      const id = setInterval(() => {
+        if (this.progressError >= 100) {
+          clearInterval(id);
+          this.progressError = 100;
+          this.errors = ['Unsupported file', 'File size exceeds the maximum limit'];
+        } else {
+          this.progressError++;
+        }
+      }, 16);
+    }
+  }
+}