@acpaas-ui/ngx-forms 6.1.10 → 6.1.11

package/src/lib/upload/components/upload/upload.component.ts

@@ -1,50 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-import { InvalidFile, UploadOptions } from '../../types/upload.types';
-import { UPLOAD_OPTIONS_DEFAULT } from '../../upload.conf';
-import { Uploader } from '../../classes/uploader.class';
-
-@Component({
-  selector: 'aui-upload',
-  styleUrls: ['./upload.component.scss'],
-  templateUrl: './upload.component.html',
-})
-export class UploadComponent implements OnInit {
-  @Input() public id = '';
-  @Input() public accept = [];
-  @Input() public capture = '';
-  @Input() public ariaLabelRemove = 'Verwijder';
-  @Input() public disabled = false;
-  @Input() public multiple = true;
-  @Input() public label = '';
-  @Input() public description = '';
-  @Input() public options: UploadOptions = UPLOAD_OPTIONS_DEFAULT;
-  @Output() public selectUploadedFiles: EventEmitter<object[]> = new EventEmitter<object[]>();
-
-  public uploader;
-  public ariaId;
-  public uploadedFiles: object[] = [];
-  public invalidFiles: InvalidFile[] = [];
-  public queuedFiles: File[] = [];
-
-  public ngOnInit() {
-    if (!this.id) {
-      this.ariaId = 'aui-upload-' + Math.random().toString(36).substring(2);
-      this.id = this.ariaId;
-    }
-    this.uploader = new Uploader(this.options);
-  }
-
-  public onUploadedFiles(files: object[]) {
-    this.uploadedFiles = this.uploadedFiles.concat(files);
-    this.selectUploadedFiles.emit(this.uploadedFiles);
-  }
-
-  public onInvalidFiles(files: InvalidFile[]) {
-    this.invalidFiles = files;
-  }
-
-  public onQueuedFiles(files: File[]) {
-    this.queuedFiles = this.queuedFiles.concat(files);
-  }
-}

package/src/lib/upload/components/upload-input/upload-input.component.html

@@ -1,11 +0,0 @@
-<aui-upload (selectUploadedFiles)="onUpload($event)" [options]="options">
-  <div class="m-upload__message">
-    <ng-content select=".m-upload__message"></ng-content>
-  </div>
-  <div class="m-upload__description">
-    <ng-content select=".m-upload__description"></ng-content>
-  </div>
-  <div class="m-upload__button">
-    <ng-content select=".m-upload__button"></ng-content>
-  </div>
-</aui-upload>

package/src/lib/upload/components/upload-input/upload-input.component.spec.ts

@@ -1,55 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, Input } from '@angular/core';
-
-import { UploadInputComponent } from './upload-input.component';
-
-@Component({
-  template: '<div>Upload</div>',
-  selector: 'aui-upload',
-})
-class MockUploadComponent {
-  @Input() public options;
-}
-
-describe('The upload zone component', () => {
-  let comp: UploadInputComponent;
-  let fixture: ComponentFixture<UploadInputComponent>;
-
-  // waitForAsync beforeEach
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [UploadInputComponent, MockUploadComponent],
-    }).compileComponents(); // compile template and css
-  }));
-
-  // synchronous beforeEach
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UploadInputComponent);
-    comp = fixture.componentInstance;
-  });
-
-  it('Should format data', () => {
-    const data = [
-      {
-        name: 'Test image',
-        url: 'http://test.com/image.jpg',
-      },
-      {
-        name: 'Test image 2',
-        url: 'http://test.com/image2.jpg',
-      },
-    ];
-    comp.format = (d) => {
-      return d.map((o) => {
-        return o.name;
-      });
-    };
-    fixture.detectChanges();
-    spyOn(comp, 'propagateChange');
-    comp.onUpload(data);
-    expect(comp.propagateChange).toHaveBeenCalledWith([
-      'Test image',
-      'Test image 2',
-    ]);
-  });
-});

package/src/lib/upload/components/upload-input/upload-input.component.ts

@@ -1,35 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { UploadOptions } from '../../types/upload.types';
-
-@Component({
-  selector: 'aui-upload-input',
-  templateUrl: './upload-input.component.html',
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: UploadInputComponent,
-    multi: true,
-  }],
-})
-export class UploadInputComponent implements ControlValueAccessor {
-  @Input() public options: UploadOptions;
-  @Input() public format: any;
-
-  public propagateChange = (_: any) => undefined;
-
-  public writeValue(value: any) {
-  }
-
-  public registerOnChange(fn) {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched() {
-  }
-
-  public onUpload(files) {
-    const data = (this.format ? this.format(files) : files);
-    this.propagateChange(data);
-  }
-}

package/src/lib/upload/components/upload-queue/upload-queue.component.html

@@ -1,16 +0,0 @@
-<ul class="m-upload__files u-margin-bottom-xs">
-  <li *ngFor="let file of files; let i = index">
-    <aui-icon name="ai-common-file-empty"></aui-icon>
-    <span class="m-upload__filename">{{ file.name }}</span>
-
-    <button
-      (click)="remove(i)"
-      class="m-upload__delete a-button a-button--text a-button--neutral a-button--s has-icon"
-      type="button"
-    >
-      <aui-icon name="ai-close" [ariaLabel]="ariaLabelRemove"></aui-icon>
-    </button>
-  </li>
-</ul>
-
-<button (click)="uploadFiles()" *ngIf="files.length > 0" class="a-button" type="button">Upload</button>

package/src/lib/upload/components/upload-queue/upload-queue.component.spec.ts

@@ -1,99 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs';
-import { IconModule } from '@acpaas-ui/ngx-icon';
-
-import { UPLOAD_OPTIONS_DEFAULT } from '../../upload.conf';
-import { Uploader } from '../../classes/uploader.class';
-
-import { UploadQueueComponent } from './upload-queue.component';
-
-const mockFile1 = new File(['file1'], 'filename1.txt', {
-  type: 'text/plain',
-  lastModified: new Date().getTime(),
-});
-const mockFile2 = new File(['file2'], 'filename2.txt', {
-  type: 'text/plain',
-  lastModified: new Date().getTime(),
-});
-const mockFileList = [mockFile1, mockFile2];
-
-class MockUploader implements Partial<Uploader> {
-  public options = UPLOAD_OPTIONS_DEFAULT;
-
-  constructor(options = {}) {
-    this.options = Object.assign({}, this.options, options);
-  }
-
-  public validateFiles(files) {
-    return {
-      validFiles: mockFileList,
-      invalidFiles: [],
-    };
-  }
-
-  public uploadFiles(files): Observable<{ progress: number; data: object[] }> {
-    return new Observable((observer) => {
-      observer.next({
-        progress: 0.5,
-        data: null,
-      });
-
-      setTimeout(() => {
-        observer.next({
-          progress: 1,
-          data: {
-            test: 'ok',
-          } as any,
-        });
-      }, 500);
-    });
-  }
-}
-
-describe('The upload queue component', () => {
-  let comp: UploadQueueComponent;
-  let fixture: ComponentFixture<UploadQueueComponent>;
-  let de: DebugElement;
-  const el: HTMLElement = undefined;
-
-  // waitForAsync beforeEach
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [UploadQueueComponent],
-      imports: [IconModule],
-    }).compileComponents(); // compile template and css
-  }));
-
-  // synchronous beforeEach
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UploadQueueComponent);
-    comp = fixture.componentInstance;
-    de = fixture.debugElement.query(By.css('.m-upload__files')); // find hero element
-
-    comp.uploader = new MockUploader() as any;
-    comp.files = mockFileList;
-    fixture.detectChanges(); // trigger initial data binding
-  });
-
-  it('Should upload file', async () => {
-    comp.uploadFiles();
-    spyOn(comp.uploadedFiles, 'emit');
-
-    fixture.detectChanges(); // trigger initial data binding
-
-    expect(comp.uploadProgress).toEqual(50);
-
-    setTimeout(() => {
-      expect(comp.uploadProgress).toEqual(100);
-      expect(comp.uploadedFiles.emit).toHaveBeenCalled();
-    }, 600);
-  });
-
-  it('should remove a file', () => {
-    expect(comp.files.length).toEqual(2);
-    comp.remove(1);
-    expect(comp.files.length).toEqual(1);
-  });
-});

package/src/lib/upload/components/upload-queue/upload-queue.component.ts

@@ -1,36 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Uploader } from '../../classes/uploader.class';
-
-@Component({
-  selector: 'aui-upload-queue',
-  templateUrl: './upload-queue.component.html',
-})
-export class UploadQueueComponent {
-  @Input() public files: File[];
-  @Input() public uploader: Uploader;
-  @Input() public ariaLabelRemove = 'Verwijder';
-  @Output() public uploadedFiles: EventEmitter<object[]> = new EventEmitter<object[]>();
-
-  public uploadProgress = 0;
-
-  public remove(index) {
-    this.files.splice(index, 1);
-  }
-
-  public uploadFiles() {
-    const progress = undefined;
-    const data = undefined;
-    this.uploader.uploadFiles(this.files).subscribe(
-      (response) => {
-        if (response.progress) {
-          this.uploadProgress = Math.floor(response.progress * 100);
-        }
-        if (response.data) {
-          this.uploadedFiles.emit(response.data);
-          this.files = [];
-        }
-      }
-    );
-  }
-}

package/src/lib/upload/components/upload-zone/upload-zone.component.html

@@ -1,55 +0,0 @@
-<div *ngIf="uploader.options.type === 'drop'" [class.is-disabled]="disabled" class="m-upload">
-  <div class="m-upload__inner">
-    <div class="m-upload__dropzone">
-      <input
-        #fileInput
-        type="file"
-        class="m-upload__input"
-        [id]="id"
-        [attr.aria-labelledby]="ariaId"
-        (click)="onFileClick($event)"
-        (change)="updateFiles()"
-      />
-
-      <div *ngIf="!uploadProgress || uploadProgress === 0" class="m-upload__content">
-        <label [for]="ariaId" class="m-upload__message">
-          {{ label }}
-        </label>
-        <p class="m-upload__uploads u-text-bold">{{ uploadedFilesString }}</p>
-      </div>
-
-      <ng-container *ngIf="uploadProgress > 0">
-        <p class="m-upload__uploads u-text-bold u-margin-bottom-xs">
-          <ng-container *ngFor="let file of uploadingFiles; let last = last">
-            {{ file.name }}
-            <ng-container *ngIf="!last">,</ng-container>
-          </ng-container>
-        </p>
-        <aui-progress-bar [value]="uploadProgress" max="100"></aui-progress-bar>
-      </ng-container>
-    </div>
-  </div>
-
-  <small class="m-upload__description">
-    {{ description }}
-  </small>
-</div>
-
-<button
-  (click)="triggerFile()"
-  *ngIf="uploader.options.type === 'button'"
-  [disabled]="disabled"
-  class="a-button m-upload__button"
-  type="button"
->
-  <span [id]="ariaId"><ng-content select=".m-upload__button"></ng-content></span>
-  <input
-    #fileInput
-    type="file"
-    class="m-upload__input"
-    [id]="id"
-    [attr.aria-labelledby]="ariaId"
-    (click)="onFileClick($event)"
-    (change)="updateFiles()"
-  />
-</button>

package/src/lib/upload/components/upload-zone/upload-zone.component.scss

@@ -1,3 +0,0 @@
-.m-upload__button {
-  position: relative;
-}

package/src/lib/upload/components/upload-zone/upload-zone.component.spec.ts

@@ -1,144 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, Input } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs';
-
-import { UploadZoneComponent } from './upload-zone.component';
-import { UPLOAD_OPTIONS_DEFAULT } from '../../upload.conf';
-import { Uploader } from '../../classes/uploader.class';
-
-@Component({
-  template: '<progress></progress>',
-  selector: 'aui-progress-bar',
-})
-class ProgressBarComponent {
-  @Input() public value;
-}
-
-const mockFile1 = new File(['file1'], 'filename1.txt', {
-  type: 'text/plain',
-  lastModified: new Date().getTime(),
-});
-const mockFile2 = new File(['file2'], 'filename2.txt', {
-  type: 'text/plain',
-  lastModified: new Date().getTime(),
-});
-const mockFileList = [mockFile1, mockFile2];
-
-class MockUploader implements Partial<Uploader> {
-  public options = UPLOAD_OPTIONS_DEFAULT;
-
-  constructor(options = {}) {
-    this.options = Object.assign({}, this.options, options);
-  }
-
-  public validateFiles(files) {
-    return {
-      validFiles: mockFileList,
-      invalidFiles: [],
-    };
-  }
-
-  public uploadFiles(files): any {
-    return new Observable((observer) => {
-      observer.next({
-        progress: 0.5,
-        data: null,
-      });
-
-      setTimeout(() => {
-        observer.next({
-          progress: 1,
-          data: {
-            test: 'ok',
-          },
-        });
-      }, 500);
-    });
-  }
-}
-
-const mockDragEvent = {
-  preventDefault: () => {},
-  stopPropagation: () => {},
-};
-
-const mockDropEvent = {
-  preventDefault: () => {},
-  stopPropagation: () => {},
-  dataTransfer: {
-    files: [mockFile1],
-  },
-};
-
-describe('The upload zone component', () => {
-  let comp: UploadZoneComponent;
-  let fixture: ComponentFixture<UploadZoneComponent>;
-  let de: DebugElement;
-  const el: HTMLElement = undefined;
-
-  // waitForAsync beforeEach
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [UploadZoneComponent, ProgressBarComponent],
-    }).compileComponents(); // compile template and css
-  }));
-
-  // synchronous beforeEach
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UploadZoneComponent);
-    comp = fixture.componentInstance;
-    de = fixture.debugElement.query(By.css('.m-upload__dropzone')); // find hero element
-  });
-
-  it('Should have options', () => {
-    comp.uploader = new MockUploader() as any;
-    fixture.detectChanges(); // trigger initial data binding
-
-    expect(comp.uploader.options).toEqual(UPLOAD_OPTIONS_DEFAULT);
-  });
-
-  it('Should trigger dragover', () => {
-    comp.uploader = new MockUploader() as any;
-    fixture.detectChanges(); // trigger initial data binding
-
-    fixture.debugElement.triggerEventHandler('dragover', mockDragEvent);
-    expect(comp.hasDragOver).toBeTruthy();
-  });
-
-  it('Should trigger dragleave', () => {
-    comp.uploader = new MockUploader() as any;
-    fixture.detectChanges(); // trigger initial data binding
-
-    fixture.debugElement.triggerEventHandler('dragleave', mockDragEvent);
-    expect(comp.hasDragOver).toBeFalsy();
-  });
-
-  it('Should trigger drop and queue files', () => {
-    comp.uploader = new MockUploader() as any;
-    fixture.detectChanges(); // trigger initial data binding
-
-    spyOn(comp.queuedFiles, 'emit');
-    fixture.debugElement.triggerEventHandler('drop', mockDropEvent);
-    expect(comp.hasDragOver).toBeFalsy();
-    expect(comp.queuedFiles.emit).toHaveBeenCalled();
-  });
-
-  it('Should trigger click', () => {
-    comp.uploader = new MockUploader() as any;
-    fixture.detectChanges(); // trigger initial data binding
-
-    spyOn(comp.fileInput.nativeElement, 'click');
-    comp.triggerFile();
-    expect(comp.fileInput.nativeElement.click).toHaveBeenCalled();
-  });
-
-  it('Should display a button zone', () => {
-    comp.uploader = new MockUploader({ type: 'button' }) as any;
-    fixture.detectChanges(); // trigger initial data binding
-
-    const btn = fixture.debugElement.query(By.css('.a-button'));
-
-    expect(btn.nativeElement).not.toBeUndefined();
-  });
-});

package/src/lib/upload/components/upload-zone/upload-zone.component.ts

@@ -1,142 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  Output,
-  Renderer2,
-  ViewChild,
-} from '@angular/core';
-
-import { InvalidFile } from '../../types/upload.types';
-import { Uploader } from '../../classes/uploader.class';
-
-@Component({
-  selector: 'aui-upload-zone',
-  styleUrls: ['./upload-zone.component.scss'],
-  templateUrl: './upload-zone.component.html',
-})
-export class UploadZoneComponent implements AfterViewInit {
-  @ViewChild('fileInput', { static: false }) fileInput: ElementRef;
-
-  @Input() public uploader: Uploader;
-  @Input() public id = '';
-  @Input() public accept = [];
-  @Input() public capture = '';
-  @Input() public ariaId = '';
-  @Input() public disabled = false;
-  @Input() public multiple = true;
-  @Input() public label = '';
-  @Input() public description = '';
-
-  @Output() public uploadedFiles: EventEmitter<object[]> = new EventEmitter<object[]>();
-  @Output() public queuedFiles: EventEmitter<File[]> = new EventEmitter<File[]>();
-  @Output() public invalidFiles: EventEmitter<InvalidFile[]> = new EventEmitter<InvalidFile[]>();
-
-  public hasDragOver = false;
-  public classNames: string;
-  public uploadProgress = 0;
-  public uploadingFiles: File[];
-  public uploadedFilesString: String;
-
-  @HostListener('dragover', ['$event'])
-  public onDragOver(event: any): void {
-    this.preventAndStop(event);
-    this.hasDragOver = true;
-  }
-
-  @HostListener('dragleave', ['$event'])
-  public onDragLeave(event: any): void {
-    this.preventAndStop(event);
-    this.hasDragOver = false;
-  }
-
-  @HostListener('drop', ['$event'])
-  public onDrop(event: any): void {
-    this.preventAndStop(event);
-    this.hasDragOver = false;
-    const files = this.fileListToArray(event.dataTransfer.files);
-    this.handleFiles(files);
-  }
-
-  constructor(private renderer: Renderer2) {}
-
-  public triggerFile() {
-    this.fileInput.nativeElement.click();
-  }
-
-  public updateFiles() {
-    const files: any[] = this.fileListToArray(this.fileInput.nativeElement.files);
-    this.uploadedFilesString = files.map((file) => file.name).join(', ');
-    this.handleFiles(files);
-  }
-
-  public onFileClick(event) {
-    // When removing a file make sure you can add it again later
-    // See: https://stackoverflow.com/questions/59870335/ng2-file-upload-not-allowing-me-to-add-same-doc-after-ive-removed-it-from-que
-    event.target.value = '';
-  }
-
-  ngAfterViewInit() {
-    if (this.multiple !== false) {
-      this.renderer.setProperty(this.fileInput.nativeElement, 'multiple', 'multiple');
-    }
-    if (!!this.accept.length) {
-      this.renderer.setProperty(this.fileInput.nativeElement, 'accept', this.accept.join());
-    }
-    if (this.disabled) {
-      this.renderer.setProperty(this.fileInput.nativeElement, 'disabled', 'disabled');
-    }
-    if (this.capture !== '') {
-      this.renderer.setAttribute(this.fileInput.nativeElement, 'capture', this.capture);
-    }
-  }
-
-  protected handleFiles(files) {
-    const response = this.uploader.validateFiles(files);
-    this.invalidFiles.emit(response.invalidFiles);
-
-    if (this.uploader.options.autoUpload && response.validFiles.length > 0) {
-      this.uploadFiles(response.validFiles);
-    } else {
-      this.queuedFiles.emit(response.validFiles);
-    }
-  }
-
-  protected uploadFiles(files) {
-    // Reset progress
-    this.uploadProgress = 0;
-    this.uploadingFiles = files;
-
-    // upload
-    this.uploader.uploadFiles(files).subscribe(
-      (response) => {
-        if (response.progress) {
-          this.uploadProgress = Math.floor(response.progress * 100);
-        }
-        if (response.data) {
-          this.uploadedFiles.emit(response.data);
-        }
-      },
-      (err) => {
-        console.log(err);
-      }
-    );
-  }
-
-  protected fileListToArray(list: FileList): object[] {
-    return Array.from(list);
-  }
-
-  protected preventAndStop(event: any): any {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  public uploadedFilesToString(): string {
-    console.log('UPLOADS TO STRING');
-    return this.fileInput.nativeElement.files.map((file) => file.name).join('');
-  }
-}

package/src/lib/upload/components/validation-list/validation-list.component.html

@@ -1,15 +0,0 @@
-<ul class="m-upload__files">
-  <li *ngFor="let invalidFile of invalidFiles; let i = index" class="is-error">
-    <aui-icon name="ai-alert-triangle"></aui-icon>
-    <span class="m-upload__filename">{{ invalidFile.file.name }}</span>
-    <span class="m-upload__error">{{ formatReasons(invalidFile.reasons) }}</span>
-
-    <button
-      (click)="remove(i)"
-      class="m-upload__delete a-button a-button--text a-button--danger a-button--s has-icon"
-      type="button"
-    >
-      <aui-icon name="ai-close" [ariaLabel]="ariaLabelRemove"></aui-icon>
-    </button>
-  </li>
-</ul>