@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,182 @@
+@use "../../theme/variables" as *;
+@use "../../theme/breakpoints-mixin" as *;
+
+.upload-file-container {
+  border-radius: 8px;
+  border: 1px dashed $tgo-dark;
+  background: $tgo-light;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 196px;
+  flex-flow: column;
+  position: relative;
+  max-width: 563px;
+
+  &.upload-errors {
+    border: 1px dashed $tgo-error-default;
+  }
+
+  .upload-files {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 196px;
+  }
+
+  .upload-change,
+  .upload-browse {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+    height: 196px;
+
+    ui-icon.upload-icon {
+      margin-bottom: 16px;
+
+      mat-icon.size-16 svg {
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    input {
+      opacity: 0;
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      cursor: pointer
+    }
+
+    .upload-text {
+      margin-top: 20px;
+    }
+
+    p {
+      margin: 0;
+
+      .semibold {
+        font-weight: normal;
+        text-decoration: underline;
+        color: var(--color);
+      }
+    }
+
+    .errors {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin-bottom: 20px;
+      font-size: 12px;
+      line-height: 16px;
+      color: $tgo-error-default;
+
+      span {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .error-icon {
+        margin-right: 4px;
+
+        svg {
+          color: $tgo-error-default;
+        }
+
+        mat-icon.size-16 svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  .upload-progress {
+    padding: 0 32px;
+    width: 100%;
+  }
+
+  .upload-text {
+    text-align: right;
+  }
+
+  &[theme="dark"], &[theme="light"] {
+    border-radius: 10px;
+    border-color: $black;
+
+    &.upload-file-container-disabled {
+      border-color: $grayscale-40;
+      color: $grayscale-40;
+      background-color: $grayscale-10;
+
+      .upload-icon svg {
+        color: $grayscale-40;
+      }
+    }
+
+    &.upload-errors {
+      border-color: $error-50;
+    }
+
+    &:not(.upload-file-container-disabled) {
+      &:hover {
+        background: $grayscale-10;
+        border-style: solid;
+      }
+
+      &:active {
+        background: $grayscale-10;
+        transform: scale(.98);
+      }
+    }
+
+    .errors {
+      color: $error-50;
+      font-size: 14px;
+
+      .error-icon svg {
+        color: $error-50;
+      }
+    }
+  }
+}
+
+.upload-supported-files {
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 8px;
+
+  &[theme="dark"], &[theme="light"] {
+    max-width: 563px;
+  }
+
+  span {
+    font-weight: 700;
+    margin-right: 5px;
+  }
+}
+
+@include screen('medium') {
+  .upload-file-container {
+    max-width: 100%;
+  }
+
+  .upload-supported-files {
+    &[theme="dark"], &[theme="light"] {
+      max-width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+import 'jest-preset-angular';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange, } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FileUploadComponent } from './file-upload.component';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { createMockFileList } from '../../test-utils/mock-file';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+const disableAnimations =
+  !('animate' in document.documentElement)
+  || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));
+
+describe('FileUploadComponent', () => {
+  let component: FileUploadComponent;
+  let fixture: ComponentFixture<FileUploadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FileUploadComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+      imports: [ BrowserAnimationsModule.withConfig({ disableAnimations }), UiTranslatePipe ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('file change event should arrive in handler', () => {
+    fixture.detectChanges();
+
+    const input = fixture.debugElement.nativeElement.querySelector('input');
+
+    jest.spyOn(component, 'onChangeUpload');
+
+    input.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    expect(component.onChangeUpload).toHaveBeenCalled();
+  });
+
+  describe('when detect changes', () => {
+    beforeEach(() => {
+      jest.spyOn(component, 'showProgress');
+      jest.spyOn(component, 'showBrowse');
+      jest.spyOn(component, 'showSuccess');
+
+      component.file = new File([''], 'dummy');
+    });
+
+    describe('and uploadProgress changes', () => {
+      it('should call show methods', () => {
+        component.ngOnChanges({
+          uploadProgress: new SimpleChange(null, component.file, true)
+        });
+
+        fixture.detectChanges();
+
+        expect(component.showProgress).toHaveBeenCalled();
+        expect(component.showBrowse).toHaveBeenCalled();
+        expect(component.showSuccess).toHaveBeenCalled();
+      });
+    });
+
+    describe('and errors changes', () => {
+      it('should call show methods', () => {
+        component.ngOnChanges({
+          errors: new SimpleChange(null, component.file, true)
+        });
+
+        fixture.detectChanges();
+
+        expect(component.showProgress).toHaveBeenCalled();
+        expect(component.showBrowse).toHaveBeenCalled();
+        expect(component.showSuccess).toHaveBeenCalled();
+      });
+    });
+  });
+  describe('onFileDropped', () => {
+    const fileList = createMockFileList([
+      {
+          body: 'test',
+          mimeType: 'text/plain',
+          name: 'test.txt'
+      }
+  ]);
+  it('should call emitFile()', () => {
+      const emitFileSpy = jest.spyOn(component, 'emitFile');
+      component.onFileDropped(fileList);
+      expect(emitFileSpy).toBeCalledWith(fileList);
+    });
+  });
+
+  describe('writeValue', () => {
+    let file: File;
+
+    beforeEach(() => {
+      file = new File([''], 'test');
+    });
+    it('should set a file as input', () => {
+      component.writeValue(file);
+      expect(component.file?.name).toContain('test');
+    });
+    it('should set file as a null value', () => {
+      component.writeValue();
+      expect(component.file).toBeNull();
+    });
+  });
+
+  describe('registerOnChange', () => {
+    it('should set onChange', () => {
+      component.registerOnChange('test');
+      expect(component.onChange).toBe('test');
+    });
+  });
+
+  describe('registerOnTouched', () => {
+    it('should set onTouch', () => {
+      component.registerOnTouched('test');
+      expect(component.onTouch).toBe('test');
+    });
+  });
+
+  describe('setDisabledState', () => {
+    it('should set disabled', () => {
+      component.setDisabledState(true);
+      expect(component.disabled).toBe(true);
+    });
+  });
+})

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

@@ -0,0 +1,96 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { FileUploadComponent } from './file-upload.component';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'File Upload/ File Upload',
+  component: FileUploadComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        MatInputModule,
+        FormsModule,
+        ReactiveFormsModule,
+        IconComponentModule,
+        UiTranslatePipe,
+      ],
+    }),
+  ],
+} as Meta;
+
+const excludeParameter = {
+  controls: {
+    exclude: [
+      'ngOnChanges',
+      'files',
+      'onChange',
+      'onFileDropped',
+      'emitFile',
+      'browse',
+      'class',
+      'progress',
+      'success',
+      'OnDrop',
+      'ngOnInit',
+      'onChangeUpload',
+      'showBrowse',
+      'showProgress',
+      'showSuccess',
+      'registerOnChange',
+      'registerOnTouched',
+      'writeValue',
+      'setDisabledState',
+    ],
+  },
+};
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    styles: [
+      `.example-container {
+        display:flex;
+        justify-content: center;
+      }
+      .example-container ui-file-upload {
+      flex: 1 0 auto;
+      max-width: 500px;
+      }`,
+    ],
+    template: `
+  <div class="example-container">
+    <ui-file-upload
+    applicationTheme="${_theme}"
+    [maxFileSizeMB]="${args['maxFileSizeMB']}"
+    supportedFileTypes="${args['supportedFileTypes']}"
+    [uploadProgress]="${args['uploadProgress']}"
+    [disabled]="${args['disabled']}"
+  ></ui-file-upload>
+  </div>`,
+  };
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  supportedFileTypes: 'png .jpg .psd .bmp .gif .mp3 .key .odp .ppt .pptx .txt .doc .docx .csv .xls .xlsx',
+  maxFileSizeMB: 100,
+} as Partial<FileUploadComponent>;
+
+Default.parameters = excludeParameter;
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+  supportedFileTypes: 'png .jpg .psd .bmp .gif .mp3 .key .odp .ppt .pptx .txt .doc .docx .csv .xls .xlsx',
+  maxFileSizeMB: 100,
+  disabled: true,
+};
+
+Disabled.parameters = excludeParameter;

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

@@ -0,0 +1,284 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+  forwardRef, Optional, Inject
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { LanguageService } from '../../utils/localization/language.service';
+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;
+
+  /**
+   * The language to be used
+   * @property language
+   * @type {Language}
+   * @memberof FileUploadComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  /**
+   * Color of the file upload.
+   * Defaults to Test Gorilla primary color.
+   *
+   * @type {string}
+   * @memberof FileUploadComponent
+   */
+  @Input() companyColor = '';
+
+  @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>();
+
+  protected readonly translationContext = 'FILE_UPLOAD.';
+
+  /**
+   * @ignore
+   */
+  onChange = (_: any) => {
+  };
+
+  /**
+   * @ignore
+   */
+  onTouch = () => {
+  };
+
+  isMissedMinSize = false;
+  progress = false;
+  success = false;
+  browse: boolean;
+
+  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) {
+    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 (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;
+  }
+}