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

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

@@ -1,68 +0,0 @@
-import {
-  HttpEvent,
-  HttpEventType,
-  HttpProgressEvent,
-  HttpResponse,
-} from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { catchError, interval, map, Observable, of, take } from 'rxjs';
-import { ProgressFile } from './models/progress-file.model';
-
-export interface OnemrvaMatFileUploadInterface {
-  listUploadedFiles: (inputs: any) => Observable<ProgressFile[]>;
-  upload: (file: ProgressFile) => Observable<HttpEvent<any>>;
-  deleteFile: (id: any) => Observable<any>;
-  retry: (file: any) => Observable<any>;
-  downloadFile?: (id: any) => Observable<any>;
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class OnemrvaMatFileUploadService
-  implements OnemrvaMatFileUploadInterface
-{
-  constructor() {
-    alert(
-      "Don't forget to add a provider in your component with your own implementation of OnemrvaMatFileUploadInterface. Check out the demo to have an example of how to do it",
-    );
-  }
-
-  listUploadedFiles(_inputs: any): Observable<ProgressFile[]> {
-    return of([]);
-  }
-
-  upload(_file: ProgressFile): Observable<HttpEvent<any>> {
-    return interval(50).pipe(
-      take(101),
-      map(i => {
-        if (i < 100) {
-          return {
-            type: HttpEventType.UploadProgress,
-            loaded: i,
-            total: 100,
-          } as HttpProgressEvent;
-        } else {
-          if (i >= 100 && Math.random() > 0.5) {
-            throw 'Fake error thrown';
-          }
-          return new HttpResponse<any>();
-        }
-      }),
-      catchError(() => of(new HttpResponse<any>({ body: {}, status: 500 }))),
-    );
-  }
-
-  deleteFile(_id: any): Observable<any> {
-    return of('F = m.a');
-  }
-
-  retry(file: any): Observable<any> {
-    return of(file);
-  }
-
-  downloadFile(id: any): Observable<any> {
-    alert(`Missing download implementation for file ID ${id}`);
-    return of(true);
-  }
-}

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

@@ -1,482 +0,0 @@
-import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
-import { ComponentStore } from '@ngrx/component-store';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  catchError,
-  filter,
-  forkJoin,
-  interval,
-  map,
-  merge,
-  mergeMap,
-  Observable,
-  of,
-  switchMap,
-  take,
-  takeWhile,
-  tap,
-  throttle,
-  withLatestFrom,
-} from 'rxjs';
-import { OnemrvaMatFileUploadService } from './onemrva-mat-file-upload.service';
-import {
-  formattedSize,
-  ProgressFile,
-  ReferencedProgressFile,
-} from './models/progress-file.model';
-import { HttpEvent, HttpEventType } from '@angular/common/http';
-import { OnemrvaMatFileUploadStoreItf } from './onemrva-mat-file-upload-itf.store';
-import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-
-export interface FileUploadStoreEvent {
-  type: string;
-  payload?: any;
-}
-
-export interface UploadState {
-  upload: ReferencedProgressFile[];
-  accept: string[];
-  maxFileSize: number;
-  fileUploadError: string;
-  event: FileUploadStoreEvent;
-}
-
-const INIT_STATE: UploadState = {
-  upload: [],
-  accept: [],
-  maxFileSize: 0,
-  fileUploadError: '',
-  event: {
-    type: 'INIT',
-  },
-};
-
-export type CustomValidationFn = (
-  input: [ReferencedProgressFile, ReferencedProgressFile[]],
-) => ReferencedProgressFile;
-
-export const CUSTOM_VALIDATION_FN = new InjectionToken<CustomValidationFn>(
-  'x1, x2 = (-b -+ sqrt(rho))/2a',
-);
-
-@Injectable()
-export class OnemrvaMatFileUploadStore
-  extends ComponentStore<UploadState>
-  implements OnemrvaMatFileUploadStoreItf
-{
-  private fn: CustomValidationFn = (
-    x: [ReferencedProgressFile, ReferencedProgressFile[]],
-  ) => {
-    return x[0];
-  };
-
-  constructor(
-    private fileUploadService: OnemrvaMatFileUploadService,
-    private translateService: TranslateService,
-    @Optional()
-    @Inject(CUSTOM_VALIDATION_FN)
-    public customValidationFn: CustomValidationFn,
-  ) {
-    super(INIT_STATE);
-    if (customValidationFn) this.fn = customValidationFn;
-  }
-
-  /*
-   * U P D A T E R S
-   */
-  public readonly setAccept = this.updater((state, accept: string[]) => ({
-    ...state,
-    accept,
-    event: {
-      type: 'setAccept',
-      payload: accept,
-    },
-  }));
-
-  public readonly setMaxFileSize = this.updater(
-    (state, maxFileSize: number) => ({
-      ...state,
-      maxFileSize,
-      event: {
-        type: 'setMaxFileSize',
-        payload: maxFileSize,
-      },
-    }),
-  );
-
-  private readonly emptyList = this.updater(state => {
-    return {
-      ...state,
-      upload: [],
-      event: {
-        type: 'emptyList',
-      },
-    };
-  });
-
-  private readonly pushFile = this.updater(
-    (state, payload: ReferencedProgressFile) => {
-      return {
-        ...state,
-        upload: [...state.upload, { ...payload }],
-        event: {
-          type: 'pushFile',
-          payload,
-        },
-      };
-    },
-  );
-
-  public readonly setData = this.updater(
-    (state, payload: { ref: symbol; data: any }) => {
-      return {
-        ...state,
-        upload: state.upload.map((file: ReferencedProgressFile) =>
-          file.ref === payload.ref ? { ...file, data: payload.data } : file,
-        ),
-        event: {
-          type: 'setData',
-          payload,
-        },
-      };
-    },
-  );
-
-  private readonly setSuccess = this.updater(
-    (state, payload: { ref: symbol; body: any }) => {
-      const newFile = {
-        ...state.upload.find(f => f.ref === payload.ref),
-        ...payload.body,
-        color: 'success',
-        progress: 100,
-      };
-
-      return {
-        ...state,
-        upload: state.upload.map(file =>
-          file.ref === payload.ref ? newFile : file,
-        ),
-        event: {
-          type: 'setData',
-          payload: newFile,
-        },
-      };
-    },
-  );
-
-  private readonly setFail = this.updater(
-    (
-      state,
-      payload: { ref: symbol; message: string; color: OnemrvaMatColor },
-    ) => ({
-      ...state,
-      upload: state.upload.map(file =>
-        file.ref === payload.ref
-          ? { ...file, message: payload.message, color: payload.color }
-          : file,
-      ),
-      event: {
-        type: 'setFail',
-        payload,
-      },
-    }),
-  );
-
-  private readonly setProgress = this.updater(
-    (state, payload: { ref: symbol; progress: number }) => ({
-      ...state,
-      upload: state.upload.map(file =>
-        file.ref === payload.ref
-          ? { ...file, progress: payload.progress }
-          : file,
-      ),
-      event: {
-        type: 'setProgress',
-        payload,
-      },
-    }),
-  );
-
-  private readonly reset = this.updater((state, ref: symbol) => ({
-    ...state,
-    upload: state.upload.map(file =>
-      file.ref === ref
-        ? { ...file, progress: 0, message: '', color: '' }
-        : file,
-    ),
-    event: {
-      type: 'reset',
-      payload: ref,
-    },
-  }));
-
-  private readonly remove = this.updater(
-    (state, payload: ReferencedProgressFile) => ({
-      ...state,
-      upload: state.upload.filter(f => f.ref !== payload.ref),
-      event: {
-        type: 'remove',
-        payload,
-      },
-    }),
-  );
-
-  private readonly enableProgressBar = this.updater(state => ({
-    ...state,
-    upload: state.upload.map(file => ({ ...file, enableProgressBar: true })),
-    event: {
-      type: 'enableProgressBar',
-    },
-  }));
-
-  public readonly setFileUploadError = this.updater(
-    (state, fileUploadError: string) => ({
-      ...state,
-      fileUploadError,
-      event: {
-        type: 'setFileUploadError',
-        payload: fileUploadError,
-      },
-    }),
-  );
-
-  public readonly clearFileUploadError = this.updater(state => ({
-    ...state,
-    fileUploadError: '',
-    event: {
-      type: 'clearFileUploadError',
-    },
-  }));
-
-  /*
-   * S E L E C T O R S
-   */
-  readonly files$ = this.select(state => state.upload);
-  readonly accept$ = this.select(state => state.accept);
-  readonly event$ = this.select(state => state.event);
-  readonly maxFileSize$ = this.select(state => state.maxFileSize);
-  readonly fileUploadError$ = this.select(state => state.fileUploadError);
-
-  /*
-   * A C T I O N S   /   E F F E C T S
-   */
-  readonly listUploadedFiles = this.effect((inputs$: Observable<any>) => {
-    return inputs$.pipe(
-      tap(() => {
-        this.emptyList();
-      }),
-      mergeMap((inputs: any) => {
-        return this.fileUploadService.listUploadedFiles(inputs).pipe(
-          take(1),
-          withLatestFrom(this.files$),
-          tap(([newfiles, registeredFiles]) => {
-            newfiles.forEach(file => {
-              if (
-                registeredFiles.findIndex(rfile => rfile.id === file.id) < 0
-              ) {
-                this.pushFile({
-                  ...file,
-                  color: 'success',
-                  progress: 100,
-                  ref: Symbol('H.psi = E.psi'),
-                  name: file!.name,
-                  lastModified: file!.lastModified,
-                  size: file!.size,
-                  type: file!.type,
-                });
-              }
-            });
-          }),
-          catchError(() => of([])),
-        );
-      }),
-    );
-  });
-
-  readonly deleteFile = this.effect(
-    (file$: Observable<ReferencedProgressFile>) => {
-      return file$.pipe(
-        tap(() => {
-          this.clearFileUploadError();
-        }),
-        withLatestFrom(this.files$),
-        map(this.fn),
-        mergeMap((file: any) =>
-          this.fileUploadService.deleteFile(file.id).pipe(
-            take(1),
-            tap(() => {
-              this.remove(file);
-            }),
-            catchError(() => {
-              this.setFail({
-                ref: file.ref,
-                color: OnemrvaMatColor.WARN,
-                message: 'file.upload.delete.error',
-              });
-              return of(null);
-            }),
-          ),
-        ),
-      );
-    },
-  );
-
-  readonly removeFile = this.effect(
-    (file$: Observable<ReferencedProgressFile>) => {
-      return file$.pipe(
-        tap(() => {
-          this.clearFileUploadError();
-        }),
-        withLatestFrom(this.files$),
-        map(this.fn),
-        tap(file => {
-          this.remove(file);
-        }),
-      );
-    },
-  );
-
-  private progressFileChecker = (file$: Observable<any>) => {
-    return file$.pipe(
-      withLatestFrom(this.accept$),
-      map(([file, accept]) => {
-        // Step 1 - Add a new file in the view
-        let f: ReferencedProgressFile = { ...file };
-        if (file.ref === undefined) {
-          f = {
-            ...f,
-            ref: Symbol('v_sound = sqrt(gamma.P / rho)'),
-            name: file!.name,
-            lastModified: file!.lastModified,
-            size: file!.size,
-            type: file!.type,
-          };
-          this.pushFile(f);
-        }
-
-        // Step 2 - Check file extension
-        if (!accept.includes(file.file!.type)) {
-          this.setFail({
-            ref: f.ref,
-            color: OnemrvaMatColor.ERROR,
-            message: this.translateService.instant(
-              'file.upload.type.not.supported',
-            ),
-          });
-          // This trick coupled with the next filter is used to avoid catchError, which would break the effect
-          return { ...f, message: 'ERROR' };
-        }
-        return f;
-      }),
-      filter(x => x.message !== 'ERROR'),
-      withLatestFrom(this.maxFileSize$),
-      map(([refFile, maxFileSize]) => {
-        // Step 3 - Check file size
-        if (maxFileSize !== 0 && refFile.size > maxFileSize) {
-          this.setFail({
-            ref: refFile.ref,
-            color: OnemrvaMatColor.ERROR,
-            message:
-              this.translateService.instant('file.upload.too.big') +
-              ' ' +
-              formattedSize(refFile.size),
-          });
-          // Same trick for error management
-          return { ...refFile, message: 'ERROR' };
-        }
-        return refFile;
-      }),
-      filter(x => x.message !== 'ERROR'),
-      withLatestFrom(this.files$),
-      map(this.fn), // For custom validations
-      tap(x => {
-        if (!!x.message && x.message.startsWith('ERROR:'))
-          this.setFileUploadError(x.message.replace('ERROR:', '').trim());
-        else this.clearFileUploadError();
-      }),
-      filter(x => !x.message.startsWith('ERROR')),
-      take(1),
-    );
-  };
-
-  private loadStep = (file: any) => {
-    if (file.color === OnemrvaMatColor.WARN) this.reset(file.ref);
-
-    this.enableProgressBar();
-
-    return this.fileUploadService.upload(file).pipe(
-      throttle(() => interval(200), { leading: true, trailing: true }),
-      tap((event: HttpEvent<any>) => {
-        if (event.type === HttpEventType.UploadProgress) {
-          this.setProgress({
-            ref: file.ref,
-            progress: Math.round((100 * event.loaded) / event.total!),
-          });
-        }
-
-        if (event.type === HttpEventType.Response) {
-          this.setSuccess({ ref: file.ref, body: event.body });
-        }
-      }),
-      takeWhile(
-        (event: HttpEvent<any>) => event.type === HttpEventType.UploadProgress,
-      ),
-      catchError(() => {
-        this.setFail({
-          ref: file.ref,
-          color: OnemrvaMatColor.WARN,
-          message: 'file.upload.retry.error',
-        });
-        return of(null);
-      }),
-    );
-  };
-
-  /**
-   * For adding one file panel (creation of file panel reference skipped if already created) at a time.
-   * Upload to BE not triggered
-   */
-  readonly addForPotentialUpload = this.effect(
-    (file$: Observable<ProgressFile>) => this.progressFileChecker(file$),
-  );
-
-  /**
-   * For adding an array of file panels (creation of file panels reference skipped if already created).
-   * Uploads to BE not triggered
-   */
-  readonly addSeveralForPotentialUpload = this.effect(
-    (files$: Observable<ProgressFile[]>) =>
-      files$.pipe(
-        switchMap(files =>
-          forkJoin(files.map(file => this.progressFileChecker(of(file)))),
-        ),
-      ),
-  );
-
-  /**
-   * For adding a file panel (creation of file panels reference skipped if already created) then uploading it
-   */
-  readonly uploadFile = this.effect((file$: Observable<ProgressFile>) => {
-    return this.progressFileChecker(file$).pipe(mergeMap(this.loadStep));
-  });
-
-  readonly retryFile = this.effect(
-    (file$: Observable<ReferencedProgressFile>) =>
-      this.progressFileChecker(file$).pipe(mergeMap(this.loadStep)),
-  );
-
-  /**
-   * For adding several file panels (creation of file panels reference skipped if already created) then uploading them
-   */
-  readonly uploadFiles = this.effect((files$: Observable<ProgressFile[]>) =>
-    files$.pipe(
-      switchMap(files =>
-        merge(
-          ...files.map(file =>
-            this.progressFileChecker(of(file)).pipe(switchMap(this.loadStep)),
-          ),
-        ),
-      ),
-    ),
-  );
-}

package/mat-input-bank-account/index.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of mat-bank-account-input
- */
-
-export * from './src/onemrva-mat-input-bank-account.component';

package/mat-input-bank-account/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}

package/mat-input-bank-account/src/bank-account.component.html

@@ -1,36 +0,0 @@
-<div
-  role="group"
-  class="bank-account-input-group"
-  [formGroup]="parts"
-  [attr.aria-labelledby]="_formField.getLabelId()"
->
-  <mat-select
-    class="country-code-select"
-    matTextPrefix
-    formControlName="countryCode"
-    placeholder="XX"
-    (selectionChange)="_handleInput(parts.controls.countryCode)"
-    #countryCode
-  >
-    <mat-option>
-      <mat-select-search
-        [formControl]="filterCtrl"
-        noEntriesFoundLabel="no-entries-label"
-        placeholderLabel="placeholderLabel"
-      ></mat-select-search>
-    </mat-option>
-
-    <mat-option *ngFor="let country of countryCodes$ | async" [value]="country">
-      <span>{{ country }}</span>
-    </mat-option>
-  </mat-select>
-
-  <input
-    id="bban-input"
-    name="bban-input"
-    class="bban-input"
-    formControlName="bban"
-    (input)="_handleInput(parts.controls.bban)"
-    #bban
-  />
-</div>

package/mat-input-bank-account/src/bank-account.component.scss

@@ -1,42 +0,0 @@
-.bank-account-input-group {
-  display: flex;
-  width: 100%;
-
-  .country-code-input,
-  .bban-input {
-    border: none;
-    background: none;
-    padding: 0;
-    outline: none;
-    font: inherit;
-    text-align: left;
-    color: currentcolor;
-  }
-
-  .bban-input {
-    padding-left: 4px;
-  }
-}
-
-//.example-tel-input-container {
-//  display: flex;
-//}
-//
-//.example-tel-input-element {
-//  border: none;
-//  background: none;
-//  padding: 0;
-//  outline: none;
-//  font: inherit;
-//  text-align: center;
-//  color: currentcolor;
-//}
-//
-//.example-tel-input-spacer {
-//  opacity: 0;
-//  transition: opacity 200ms;
-//}
-
-//:host.example-floating .example-tel-input-spacer {
-//  opacity: 1;
-//}