@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.html

@@ -1,59 +0,0 @@
-<div class="file-panel-title" [attr.data-cy]="dataCy">
-  <div class="file-panel-title-left">
-    <mat-icon *ngIf="file.color === 'error'" class="filled mat-error"
-      >error</mat-icon
-    >
-    <mat-icon *ngIf="file.color === 'success'" class="filled mat-success"
-      >check_circle</mat-icon
-    >
-    <mat-icon *ngIf="file.color === 'warn'" class="filled mat-warn"
-      >warning</mat-icon
-    >
-    <span class="file-name">
-      {{ file.name }}
-    </span>
-  </div>
-  <div class="file-panel-title-action">
-    <ng-container *ngIf="actions.length > 0">
-      <ng-container *ngFor="let action of actions">
-        <mat-icon
-          *ngIf="action.showAction(file)"
-          role="button"
-          color="primary"
-          [attr.data-cy]="action.dataCy"
-          matTooltip="{{ action.tooltipCode | translate }}"
-          [attr.aria-label]="action.ariaCode | translate"
-          class="clickable"
-          (click)="action.clickHandler(file)"
-          >{{ action.iconName }}</mat-icon
-        >
-      </ng-container>
-    </ng-container>
-  </div>
-</div>
-<div class="file-panel-content">
-  <ng-container *ngIf="file.message === ''">
-    <div class="fileInfos">
-      {{ file.lastModified | date }}
-      <span class="float-right" *ngIf="file.size > 0">{{ size }}</span>
-    </div>
-
-    <div
-      class="onemrva-progress-bar"
-      *ngIf="showProgress && file.enableProgressBar"
-    >
-      <div class="onemrva-progress-bar-outer mt-s" #onemrvaProgressBar>
-        <div
-          class="onemrva-progress-bar-inner"
-          [ngStyle]="{ width: (progress$ | async) + '%' }"
-          [ngClass]="{
-            'progress-success': (progress$ | async)! >= 100
-          }"
-          data-cy="file-upload-progress"
-          [attr.value]="progress$ | async"
-        ></div>
-      </div>
-    </div>
-  </ng-container>
-  <p *ngIf="file.message !== ''" class="message">{{ file.message }}</p>
-</div>

package/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.ts

@@ -1,79 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-} from '@angular/core';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-import { of } from 'rxjs';
-import { ActionConfig } from '../../models/action-config.model';
-import {
-  formattedSize,
-  ReferencedProgressFile,
-} from '../../models/progress-file.model';
-
-let NEXT_ID = 0;
-
-@Component({
-  selector: 'file-panel',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./onemrva-file-panel.component.scss'],
-  templateUrl: './onemrva-file-panel.component.html',
-})
-export class OnemrvaFilePanelComponent {
-  @HostBinding('attr.id')
-  @Input()
-  public id = `onemrva-file-panel-${NEXT_ID++}`;
-
-  @HostBinding('attr.data-cy')
-  @Input()
-  dataCy: string = 'onemrva-file-panel-' + NEXT_ID;
-
-  @Input()
-  file!: ReferencedProgressFile;
-
-  @Input()
-  actions: ActionConfig[] = [];
-
-  @Input()
-  showProgress: boolean = true;
-
-  get progress$() {
-    return of(this.file.progress);
-  }
-
-  get size() {
-    return formattedSize(this.file.size);
-  }
-
-  get color(): OnemrvaMatColor {
-    return this.file.color;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('mat-accent')
-  public get _colorAccent(): boolean {
-    return this.color === OnemrvaMatColor.ACCENT;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.mat-error')
-  public get _isError(): boolean {
-    return this.color === OnemrvaMatColor.ERROR;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-warn')
-  public get _isWarn(): boolean {
-    return this.color === OnemrvaMatColor.WARN;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-success')
-  public get _isSuccess(): boolean {
-    return this.color === OnemrvaMatColor.SUCCESS;
-  }
-  /** @hidden @internal */
-  @HostBinding('class.mat-primary')
-  public get _isPrimary(): boolean {
-    return this.color === OnemrvaMatColor.PRIMARY;
-  }
-}

package/mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component.html

@@ -1,58 +0,0 @@
-<ng-container *ngIf="files$ | async as files">
-  <div
-    class="onemrva-mat-file-upload-drop-area"
-    appDnd
-    [ngClass]="{ filein: files.length > 0 }"
-    (fileDropped)="onFileDropped($event)"
-    [ngClass]="{ 'fu-error': errorMessage !== '' }"
-  >
-    <input
-      type="file"
-      #fileDropRef
-      [attr.id]="inputId"
-      role="button"
-      multiple
-      (change)="fileBrowseHandler($event)"
-      accept="{{ acceptString }}"
-    />
-    <p
-      class="outer"
-      *ngIf="numberOfFiles === 0 || numberOfFiles > files.length"
-    >
-      <span class="inner"
-        ><mat-icon class="onemrva-upload">download</mat-icon></span
-      >
-      <span class="inner">{{
-        dropFilesHereTextTranslationKey | translate
-      }}</span>
-      <span class="inner"
-        >{{ 'file.upload.or' | translate }}
-        <label for="{{ inputId }}" class="content">{{
-          'file.upload.browse.for.file' | translate
-        }}</label></span
-      >
-      <span class="inner" aria-disabled="true"
-        ><span *ngIf="maxFileSize > 0"
-          >{{ 'file.upload.maximum' | translate }} {{ maxFileSizeFormatted }}
-          <span *ngIf="acceptString.length > 0">{{ '| ' }}</span>
-          {{ acceptString }}</span
-        ></span
-      >
-    </p>
-    <ul class="files-list">
-      <li *ngFor="let file of files">
-        <ng-container
-          *ngTemplateOutlet="
-            filePanelTemplate;
-            context: { file, $implicit: file }
-          "
-        ></ng-container>
-      </li>
-    </ul>
-  </div>
-  <mat-error *ngIf="errorMessage">{{ errorMessage | translate }}</mat-error>
-  <mat-error
-    *ngIf="fileUploadErrorMessage$ | async as fileUploadErrorMessage"
-    >{{ fileUploadErrorMessage | translate }}</mat-error
-  >
-</ng-container>

package/mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component.ts

@@ -1,209 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnInit,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Observable, take } from 'rxjs';
-import { mimeTypes } from 'mime-wrapper';
-import {
-  state,
-  keyframes,
-  style,
-  animate,
-  trigger,
-  transition,
-} from '@angular/animations';
-import {
-  formatBytes,
-  ProgressFile,
-  ReferencedProgressFile,
-} from '../../models/progress-file.model';
-import { OnemrvaMatFileUploadStore } from '../../onemrva-mat-file-upload.store';
-import { TranslateService } from '@ngx-translate/core';
-
-let NEXT_ID = 0;
-
-@Component({
-  selector: 'onemrva-mat-file-upload',
-  templateUrl: 'onemrva-mat-file-upload.component.html',
-  animations: [
-    trigger('inOutAnimation', [
-      state('in', style({ opacity: 1 })),
-      transition(':enter', [
-        animate(
-          300,
-          keyframes([
-            style({ opacity: 0, offset: 0 }),
-            style({ opacity: 0.25, offset: 0.25 }),
-            style({ opacity: 0.5, offset: 0.5 }),
-            style({ opacity: 0.75, offset: 0.75 }),
-            style({ opacity: 1, offset: 1 }),
-          ]),
-        ),
-      ]),
-      transition(':leave', [
-        animate(
-          300,
-          keyframes([
-            style({ opacity: 1, offset: 0 }),
-            style({ opacity: 0.75, offset: 0.25 }),
-            style({ opacity: 0.5, offset: 0.5 }),
-            style({ opacity: 0.25, offset: 0.75 }),
-            style({ opacity: 0, offset: 1 }),
-          ]),
-        ),
-      ]),
-    ]),
-  ],
-})
-export class OnemrvaMatFileUploadComponent implements OnInit {
-  @Input()
-  accept: Array<string> = [];
-  acceptString = '';
-
-  @Input()
-  maxFileSize: number = 0;
-
-  @Input()
-  numberOfFiles: number = 0;
-
-  @Input()
-  uploadOnDrop: boolean = true;
-
-  @Input()
-  initialFiles: ProgressFile[] = [];
-
-  @Input()
-  errorMessage: string = '';
-
-  @Input()
-  dropFilesHereTextTranslationKey: string = 'file.upload.drag.and.drop';
-
-  fileUploadErrorMessage$: Observable<string>;
-
-  files$: Observable<ReferencedProgressFile[]>;
-
-  @Input() filePanelTemplate!: TemplateRef<any>;
-
-  retryFile = new EventEmitter<{ index: number; cmpRef: symbol }>();
-
-  /**
-   * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-multi-select-0"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-multi-select id="my-first-multi-select"></onemrva-mat-multi-select>
-   * ```
-   */
-  @HostBinding('attr.data-cy')
-  @Input()
-  public dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
-
-  @ViewChild(`fileDropRef`)
-  fileDropRef!: ElementRef;
-
-  inputId = `fileDropRef-${NEXT_ID}`;
-  maxFileSizeFormatted: string = '';
-
-  constructor(
-    public dialog: MatDialog,
-    private translate: TranslateService,
-    private fileUploadStore: OnemrvaMatFileUploadStore,
-  ) {
-    this.files$ = fileUploadStore.files$;
-
-    this.fileUploadErrorMessage$ = this.fileUploadStore.fileUploadError$;
-  }
-
-  ngOnInit(): void {
-    if (this.accept.length > 0) {
-      this.acceptString = this.accept
-        .map(val => {
-          const t = mimeTypes.getExtension(val);
-          return `.${t}`;
-        })
-        .filter(val => {
-          return val.length > 1;
-        })
-        .join(', ');
-
-      this.fileUploadStore.setAccept(this.accept);
-    }
-
-    this.maxFileSizeFormatted = formatBytes(this.maxFileSize);
-    this.fileUploadStore.setMaxFileSize(this.maxFileSize);
-  }
-
-  /**
-   * on file drop handler
-   */
-  onFileDropped($event: FileList) {
-    this.prepareFilesList($event);
-  }
-
-  /**
-   * handle file from browsing
-   */
-  fileBrowseHandler($event: Event) {
-    const elm = $event.target as HTMLInputElement,
-      files = elm.files as FileList;
-
-    this.prepareFilesList(files);
-  }
-
-  /**
-   * Convert Files list to normal array list
-   * @param files (Files List)
-   */
-  prepareFilesList(files: FileList) {
-    this.fileUploadStore.files$.pipe(take(1)).subscribe(value => {
-      // if numberOffiles is set and the total length of files is smaller than it
-      if (
-        this.numberOfFiles > 0 &&
-        files.length + value.length <= this.numberOfFiles
-      ) {
-        // clear error message
-        this.errorMessage = '';
-
-        const fs: ProgressFile[] = [];
-        for (let i = 0; i < files.length; i++) {
-          const file = files.item(i);
-          if (file === null) continue;
-
-          const item: ProgressFile = {
-            file,
-            progress: 0,
-            message: '',
-            color: 'primary',
-            url: null,
-            id: null,
-            enableProgressBar: this.uploadOnDrop,
-
-            name: file!.name,
-            lastModified: file!.lastModified,
-            size: file!.size,
-            type: file!.type,
-          };
-
-          fs.push(item);
-        }
-
-        if (this.uploadOnDrop) this.fileUploadStore.uploadFiles(fs);
-        else this.fileUploadStore.addSeveralForPotentialUpload(fs);
-
-        this.fileDropRef.nativeElement.value = null;
-      } else {
-        // too many files
-        this.errorMessage = this.translate.instant(
-          'file.upload.too.many.files',
-        );
-      }
-    });
-  }
-}

package/mat-file-upload/src/directives/dnd.directive.ts

@@ -1,41 +0,0 @@
-import {
-  Directive,
-  Output,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-} from '@angular/core';
-
-@Directive({
-  selector: '[appDnd]',
-})
-export class DndDirective {
-  @HostBinding('class.fileover') fileOver: boolean = false;
-
-  @Output() fileDropped = new EventEmitter<any>();
-
-  // Dragover listener
-  @HostListener('dragover', ['$event']) onDragOver(evt: Event) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.fileOver = true;
-  }
-
-  // Dragleave listener
-  @HostListener('dragleave', ['$event']) public onDragLeave(evt: Event) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.fileOver = false;
-  }
-
-  // Drop listener
-  @HostListener('drop', ['$event']) public ondrop(evt: any) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.fileOver = false;
-    const files = evt.dataTransfer.files;
-    if (files.length > 0) {
-      this.fileDropped.emit(files);
-    }
-  }
-}

package/mat-file-upload/src/models/action-config.model.ts

@@ -1,10 +0,0 @@
-import { ReferencedProgressFile } from './progress-file.model';
-
-export interface ActionConfig {
-  iconName: string; // angular material name
-  dataCy?: string;
-  tooltipCode: string;
-  ariaCode: string;
-  clickHandler: (file: ReferencedProgressFile) => void;
-  showAction: (file: ReferencedProgressFile) => boolean;
-}

package/mat-file-upload/src/models/progress-file.model.ts

@@ -1,94 +0,0 @@
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-
-export interface ProgressFile {
-  file?: File;
-  message: string;
-  progress: number;
-  color: OnemrvaMatColor; // color 1 - 1 with status
-  url: string | null;
-  id: string | null; // backend identifier
-  enableProgressBar: boolean;
-  data?: any;
-
-  name: string;
-  lastModified?: number;
-  size: number;
-  type: string;
-}
-
-export interface ReferencedProgressFile extends ProgressFile {
-  ref: symbol; // ref is a frontend identifier
-}
-
-/**
- * format bytes
- * @param bytes (File size in bytes)
- * @param decimals (Decimals point)
- */
-export function formatBytes(bytes: number, decimals: number = 2) {
-  if (bytes === 0) {
-    return '0 Bytes';
-  }
-  const k = 1024;
-  const dm = decimals <= 0 ? 0 : decimals || 2;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
-
-export function formattedSize(size: number, decimals: number = 2) {
-  return formatBytes(size, decimals);
-}
-
-export function convertToProgressFile(
-  id: string,
-  name: string,
-  message: string = '',
-  progress = 100,
-  color = OnemrvaMatColor.PRIMARY,
-  url: string | null = null,
-  enableProgressBar: boolean = false,
-  data: string | null = null,
-  size = 0,
-  type = '',
-): ProgressFile {
-  return {
-    id: id!,
-    name: name!,
-    message: message,
-    progress: progress,
-    color: color,
-    url: url,
-    enableProgressBar: enableProgressBar,
-    data: data,
-    size: size,
-    type: type,
-  };
-}
-
-export function convertToReferencedProgressFile(
-  id: string,
-  name: string,
-  message: string = '',
-  progress = 100,
-  color = OnemrvaMatColor.PRIMARY,
-  url: string | null = null,
-  enableProgressBar: boolean = false,
-  data: string | null = null,
-  size = 0,
-  type = '',
-): ReferencedProgressFile {
-  return {
-    id: id!,
-    ref: Symbol(name),
-    name: name!,
-    message: message,
-    progress: progress,
-    color: color,
-    url: url,
-    enableProgressBar: enableProgressBar,
-    data: data,
-    size: size,
-    type: type,
-  };
-}

package/mat-file-upload/src/onemrva-mat-file-upload-itf.store.ts

@@ -1,79 +0,0 @@
-import { Observable, Subscription } from 'rxjs';
-import {
-  ProgressFile,
-  ReferencedProgressFile,
-} from './models/progress-file.model';
-
-export interface OnemrvaMatFileUploadStoreItf {
-  /**
-   * Updater to set accepted format is made public
-   */
-  readonly setAccept: any;
-
-  /**
-   * Updater to set file max size is made public
-   */
-  readonly setMaxFileSize: any;
-
-  /**
-   * Updater to set data for a given file
-   *
-   * input:
-   *  payload: {
-   *    ref: symbol,
-   *    data: any
-   *  }
-   */
-  readonly setData: any;
-
-  /**
-   * Selector on list of files
-   */
-  readonly files$: Observable<ReferencedProgressFile[]>;
-
-  /**
-   * Selector on accepted formats for file upload
-   */
-  readonly accept$: Observable<string[]>;
-
-  /**
-   * Selector on max file size
-   */
-  readonly maxFileSize$: Observable<number>;
-
-  readonly listUploadedFiles: (inputs$: Observable<any>) => Subscription;
-  readonly deleteFile: (
-    file$: Observable<ReferencedProgressFile>,
-  ) => Subscription;
-  readonly removeFile: (
-    file$: Observable<ReferencedProgressFile>,
-  ) => Subscription;
-
-  /**
-   * Action - For adding one file panel (creation of file panel reference skipped if already created) at a time.
-   * Upload to BE not triggered
-   */
-  readonly addForPotentialUpload: (
-    file$: Observable<ProgressFile>,
-  ) => Subscription;
-
-  /**
-   * Action - For adding an array of file panels (creation of file panels reference skipped if already created).
-   * Uploads to BE not triggered
-   */
-  readonly addSeveralForPotentialUpload: (
-    files$: Observable<ProgressFile[]>,
-  ) => Subscription;
-
-  /**
-   * Action - For adding a file panel (creation of file panels reference skipped if already created) then uploading it
-   */
-  readonly uploadFile: (Observable$: Observable<ProgressFile>) => Subscription;
-
-  /**
-   * Action - For adding several file panels (creation of file panels reference skipped if already created) then uploading them
-   */
-  readonly uploadFiles: (
-    Observable$: Observable<ProgressFile[]>,
-  ) => Subscription;
-}

package/mat-file-upload/src/onemrva-mat-file-upload.module.ts

@@ -1,28 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { DndDirective } from './directives/dnd.directive';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatDialogModule } from '@angular/material/dialog';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { components } from './components';
-import { MatInputModule } from '@angular/material/input';
-
-@NgModule({
-  declarations: [components, DndDirective],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    MatButtonModule,
-    MatTooltipModule,
-    MatDialogModule,
-    TranslateModule,
-    MatIconModule,
-    MatInputModule,
-  ],
-  exports: [components],
-})
-export class OnemrvaMatFileUploadModule {}