@onemrvapublic/design-system-demos 20.11.3 → 21.0.0-develop.2

package/assets/json/file-upload-manual.json

@@ -1 +1 @@
-{"demo-file-upload-manual.component.html":"<h1>File Upload</h1>\n<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n  [uploadOnDrop]=\"false\"\n>\n</onemrva-mat-file-upload>\n<br />\n\n<div class=\"execute\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [loading]=\"!!(loadingGlossary | async)\"\n    (click)=\"send()\"\n  >\n    @if (loadingGlossary | async) {\n      <ng-container>{{ 'Loading' | translate }} ...</ng-container>\n    } @else {\n      <ng-container>{{ 'Send' | translate }}</ng-container>\n    }\n  </button>\n</div>\n\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\"> </file-panel>\n</ng-template>\n","demo-file-upload-manual.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { CommonModule } from '@angular/common';\nimport { Observable, of, Subject, take } from 'rxjs';\nimport { DemoFileUploadManualService } from './demo-file-upload-manual.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-file-upload-manual',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButton,\n    TranslatePipe,\n    OnemrvaMatLoadingDirective,\n  ],\n  templateUrl: 'demo-file-upload-manual.component.html',\n\n  providers: [\n    TranslateService,\n    TranslatePipe,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadManualService,\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadManualComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  public loadingGlossary = this.fileUploadStore.isSending;\n\n  public actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n\n  send() {\n    this.files$.pipe(take(1)).subscribe((files: any[]) => {\n      this.fileUploadStore.uploadFiles(files);\n    });\n  }\n}\n","demo-file-upload-manual.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadManualService {\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({\n            body: { id: 'E', dummyProp: 'dummy value' },\n          });\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.fileUpload(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.XXX\n\nThibaut, tu as oublié de mettre à jour le changeLog\n"}
+{"demo-file-upload-manual.component.html":"<h1>File Upload</h1>\n<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n  [uploadOnDrop]=\"false\"\n/>\n<br />\n\n<div class=\"execute\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [loading]=\"!!(loadingGlossary | async)\"\n    (click)=\"send()\"\n  >\n    @if (loadingGlossary | async) {\n      <ng-container>{{ 'Loading' | translate }} ...</ng-container>\n    } @else {\n      <ng-container>{{ 'Send' | translate }}</ng-container>\n    }\n  </button>\n</div>\n\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\" />\n</ng-template>\n","demo-file-upload-manual.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { AsyncPipe } from '@angular/common';\nimport { Observable, of, Subject, take } from 'rxjs';\nimport { DemoFileUploadManualService } from './demo-file-upload-manual.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-file-upload-manual',\n  standalone: true,\n  imports: [\n    OnemrvaMatFileUploadModule,\n    MatButton,\n    TranslatePipe,\n    OnemrvaMatLoadingDirective,\n    AsyncPipe,\n  ],\n  templateUrl: 'demo-file-upload-manual.component.html',\n\n  providers: [\n    TranslateService,\n    TranslatePipe,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadManualService,\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadManualComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  public loadingGlossary = this.fileUploadStore.isSending;\n\n  public actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n\n  send() {\n    this.files$.pipe(take(1)).subscribe((files: any[]) => {\n      this.fileUploadStore.uploadFiles(files);\n    });\n  }\n}\n","demo-file-upload-manual.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadManualService {\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({\n            body: { id: 'E', dummyProp: 'dummy value' },\n          });\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n}\n"}

package/assets/json/file-upload.json

@@ -1 +1 @@
-{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n>\n</onemrva-mat-file-upload>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel\n    [file]=\"file\"\n    [actions]=\"actions\"\n    [showProgress]=\"true\"\n  ></file-panel>\n</ng-template>\n","demo-file-upload.component.ts":"import {\n  Component,\n  OnInit,\n  ViewEncapsulation,\n  InjectionToken,\n  inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nexport const CUSTOM_VALIDATION_FN = new InjectionToken<any>(\n  'CUSTOM_VALIDATION_FN',\n);\n\n@Component({\n  selector: 'app-demo-file-upload',\n  templateUrl: 'demo-file-upload.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatFileUploadModule, MatButtonModule, TranslateModule],\n  providers: [\n    TranslateService,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadService,\n    },\n    {\n      provide: CUSTOM_VALIDATION_FN,\n      useValue: (x: any) => x[0],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  fileUploadService = inject(OnemrvaMatFileUploadService);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  constructor() {\n    super();\n\n    this.fileUploadStore.files$.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(value);\n    });\n  }\n\n  actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  downloadFile(file: ReferencedProgressFile) {\n    this.fileUploadService.downloadFile(file.id);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n}\n","demo-file-upload.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadService {\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({});\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n}\n"}
+{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n/>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\" [showProgress]=\"true\" />\n</ng-template>\n","demo-file-upload.component.ts":"import {\n  Component,\n  OnInit,\n  ViewEncapsulation,\n  InjectionToken,\n  inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nexport const CUSTOM_VALIDATION_FN = new InjectionToken<any>(\n  'CUSTOM_VALIDATION_FN',\n);\n\n@Component({\n  selector: 'app-demo-file-upload',\n  templateUrl: 'demo-file-upload.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatFileUploadModule, MatButtonModule, TranslateModule],\n  providers: [\n    TranslateService,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadService,\n    },\n    {\n      provide: CUSTOM_VALIDATION_FN,\n      useValue: (x: any) => x[0],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  fileUploadService = inject(OnemrvaMatFileUploadService);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  constructor() {\n    super();\n\n    this.fileUploadStore.files$.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(value);\n    });\n  }\n\n  actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  downloadFile(file: ReferencedProgressFile) {\n    this.fileUploadService.downloadFile(file.id);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n}\n","demo-file-upload.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadService {\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({});\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n}\n"}

package/assets/json/form.json

@@ -1 +1 @@
-{"demo-form.html":"<form [formGroup]=\"form\">\n  <mat-form-field>\n    <mat-label>Error demo</mat-label>\n    <input matInput formControlName=\"text\" />\n    <mat-hint>Hint</mat-hint>\n\n    <mat-error>Error</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Phone number</mat-label>\n\n    <onemrva-mat-input-phone\n      formControlName=\"phone\"\n      placeholder=\"+32 475 12 23 34\"\n    ></onemrva-mat-input-phone>\n\n    <mat-hint>hint</mat-hint>\n\n    <mat-error> {{ 'input.phone.required' | translate }} </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>IBAN</mat-label>\n\n    <onemrva-mat-input-iban formControlName=\"iban\"> </onemrva-mat-input-iban>\n\n    <mat-hint>hint</mat-hint>\n    <mat-error> {{ 'input.bank.required' | translate }} </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" formControlName=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-form.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport {\n  FormControl,\n  FormGroup,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport {\n  MatDatepicker,\n  MatDatepickerInput,\n  MatDatepickerToggle,\n} from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';\nimport { OnemrvaMatInputIbanComponent } from '@onemrvapublic/design-system/mat-input-iban';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\n\n@Component({\n  selector: 'app-demo-form',\n  templateUrl: './demo-form.html',\n  standalone: true,\n  imports: [\n    JsonFormsModule,\n    ReactiveFormsModule,\n    MatDatepicker,\n    MatDatepickerInput,\n    MatFormFieldModule,\n    MatDatepickerToggle,\n    MatInput,\n    OnemrvaMatInputIbanComponent,\n    TranslatePipe,\n    OnemrvaMatInputPhoneComponent,\n  ],\n  providers: [provideLuxonDateAdapter()],\n})\nexport class DemoformComponent extends DemoComponentBase {\n  public form = new FormGroup({\n    iban: new FormControl('', Validators.required),\n    phone: new FormControl('', Validators.required),\n    text: new FormControl('', Validators.required),\n    date: new FormControl('', Validators.required),\n  });\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n}\n"}
+{"demo-form.html":"<form [formGroup]=\"form\">\n  <mat-form-field>\n    <mat-label>Error demo</mat-label>\n    <input matInput formControlName=\"text\" />\n    <mat-hint>Hint</mat-hint>\n\n    <mat-error>Error</mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Phone number</mat-label>\n\n    <onemrva-mat-input-phone\n      formControlName=\"phone\"\n      placeholder=\"+32 475 12 23 34\"\n    />\n\n    <mat-hint>hint</mat-hint>\n\n    <mat-error> {{ 'input.phone.required' | translate }} </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>IBAN</mat-label>\n\n    <onemrva-mat-input-iban formControlName=\"iban\" />\n\n    <mat-hint>hint</mat-hint>\n    <mat-error> {{ 'input.bank.required' | translate }} </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" formControlName=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    />\n  </mat-form-field>\n</form>\n","demo-form.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport {\n  FormControl,\n  FormGroup,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport {\n  MatDatepicker,\n  MatDatepickerInput,\n  MatDatepickerToggle,\n} from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';\nimport { OnemrvaMatInputIbanComponent } from '@onemrvapublic/design-system/mat-input-iban';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\n\n@Component({\n  selector: 'app-demo-form',\n  templateUrl: './demo-form.html',\n  standalone: true,\n  imports: [\n    JsonFormsModule,\n    ReactiveFormsModule,\n    MatDatepicker,\n    MatDatepickerInput,\n    MatFormFieldModule,\n    MatDatepickerToggle,\n    MatInput,\n    OnemrvaMatInputIbanComponent,\n    TranslatePipe,\n    OnemrvaMatInputPhoneComponent,\n  ],\n  providers: [provideLuxonDateAdapter()],\n})\nexport class DemoformComponent extends DemoComponentBase {\n  public form = new FormGroup({\n    iban: new FormControl('', Validators.required),\n    phone: new FormControl('', Validators.required),\n    text: new FormControl('', Validators.required),\n    date: new FormControl('', Validators.required),\n  });\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n}\n"}