@onemrvapublic/design-system-demos 20.11.2 → 21.0.0-develop.1

package/assets/json/error-handler.json

@@ -1 +1 @@
-{"demo-error-handler.component.html":"<button mat-flat-button color=\"primary\" (click)=\"saveTheWorld()\">\n  Save the world</button\n>&nbsp;&nbsp;&nbsp;\n\n<button mat-flat-button color=\"accent\" (click)=\"destroyTheWorld()\">\n  Destroy the world\n</button>\n","demo-error-handler.component.ts":"import { HttpClient } from '@angular/common/http';\nimport { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';\nimport { take } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-error-handler',\n  templateUrl: 'demo-error-handler.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatSnackBarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorHandlerComponent extends DemoComponentBase {\n  http = inject(HttpClient);\n  snackbar = inject(MatSnackBar);\n\n  saveTheWorld() {\n    this.http\n      .get('save-the-world')\n      .pipe(take(1))\n      .subscribe(\n        next => {\n          console.log(next);\n        },\n        error => {\n          console.error(error);\n          this.snackbar.open('You caught the error locally', 'Close');\n        },\n      );\n  }\n\n  destroyTheWorld() {\n    this.http.get('destroy-the-world').pipe(take(1)).subscribe();\n  }\n}\n"}
+{"demo-error-handler.component.html":"<button mat-flat-button color=\"primary\" (click)=\"saveTheWorld()\">\n  Save the world</button\n>&nbsp;&nbsp;&nbsp;\n\n<button mat-flat-button color=\"accent\" (click)=\"destroyTheWorld()\">\n  Destroy the world\n</button>\n","demo-error-handler.component.ts":"import { HttpClient } from '@angular/common/http';\nimport { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';\nimport { take } from 'rxjs/operators';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-error-handler',\n  templateUrl: 'demo-error-handler.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, MatSnackBarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorHandlerComponent extends DemoComponentBase {\n  http = inject(HttpClient);\n  snackbar = inject(MatSnackBar);\n\n  saveTheWorld() {\n    this.http\n      .get('save-the-world')\n      .pipe(take(1))\n      .subscribe(\n        next => {\n          console.log(next);\n        },\n        error => {\n          console.error(error);\n          this.snackbar.open('You caught the error locally', 'Close');\n        },\n      );\n  }\n\n  destroyTheWorld() {\n    this.http.get('destroy-the-world').pipe(take(1)).subscribe();\n  }\n}\n"}

package/assets/json/error.json

@@ -1 +1 @@
-{"demo-error.component.html":"<page-error [code]=\"code\">\n  <page-error-action> Custom action </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  PageErrorActionComponent,\n  PageErrorComponent,\n} from '@onemrvapublic/design-system/page-error';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-error',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageErrorComponent,\n    PageErrorActionComponent,\n  ],\n\n  templateUrl: 'demo-error.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n  @Input()\n  code = 500;\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:\n\n```\n    {\n    \"glob\": \"**/*\",\n    \"input\": \"node_modules/@onemrvapublic/design-system/page-not-found/assets\",\n    \"output\": \"/assets/\"\n    }\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.pageNotFound(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.651\n\nFix background shape\n\n## 14.1.604\n\nMigration from @onemrvapublic/core to @onemrvapublic/design-system\n\n## 14.1.512\n\nDraft version\n"}
+{"demo-error.component.html":"<page-error [code]=\"code()\">\n  <page-error-action> Custom action </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  PageErrorActionComponent,\n  PageErrorComponent,\n} from '@onemrvapublic/design-system/page-error';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-error',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageErrorComponent,\n    PageErrorActionComponent,\n  ],\n\n  templateUrl: 'demo-error.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n  readonly code = input(500);\n}\n"}

package/assets/json/fab.json

@@ -1 +1 @@
-{"demo-fab.component.html":"<button\n  mat-fab\n  matTooltip=\"Info about the action\"\n  [color]=\"color\"\n  [disabled]=\"disabled\"\n  aria-label=\"Example icon button with a delete icon\"\n>\n  <mat-icon>{{ icon }}</mat-icon>\n</button>\n","demo-fab.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-fab',\n  templateUrl: 'demo-fab.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatSelectModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFabComponent extends DemoComponentBase {\n  @Input() icon = 'home';\n  @Input() color: OnemrvaMatColor = '';\n  @Input() disabled = false;\n}\n"}
+{"demo-fab.component.html":"<button\n  mat-fab\n  matTooltip=\"Info about the action\"\n  [color]=\"color()\"\n  [disabled]=\"disabled()\"\n  aria-label=\"Example icon button with a delete icon\"\n>\n  <mat-icon>{{ icon() }}</mat-icon>\n</button>\n","demo-fab.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-fab',\n  templateUrl: 'demo-fab.component.html',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatSelectModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFabComponent extends DemoComponentBase {\n  readonly icon = input('home');\n  readonly color = input<OnemrvaMatColor>('');\n  readonly disabled = input(false);\n}\n"}

package/assets/json/file-panel.json

@@ -1 +1 @@
-{"demo-file-panel.component.html":"<file-panel [file]=\"getFile()\"> </file-panel>\n","demo-file-panel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  convertToReferencedProgressFile,\n  ReferencedProgressFile,\n  OnemrvaMatFileUploadModule,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n  /**\n   * Document reference in document service\n   */\n  documentId?: string;\n  /**\n   * Name of the document\n   */\n  name?: string;\n}\n\n@Component({\n  selector: 'app-demo-file-panel',\n  templateUrl: 'demo-file-panel.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, OnemrvaMatFileUploadModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n  @Input()\n  color: '' | 'warn' | 'success' | 'error' = '';\n\n  testFile: Annex = {\n    documentId: '1',\n    name: 'File',\n  };\n\n  successFile: ReferencedProgressFile = {\n    ref: Symbol('1'),\n    enableProgressBar: false,\n    id: '1',\n    message: 'This is how a success file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Success',\n    file: undefined,\n    color: 'success',\n    maxSize: 100,\n  };\n  errorFile: ReferencedProgressFile = {\n    ref: Symbol('2'),\n    enableProgressBar: false,\n    id: '2',\n    message: 'This is how an error file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Error',\n    file: undefined,\n    color: 'error',\n    maxSize: 100,\n  };\n  warnFile: ReferencedProgressFile = {\n    ref: Symbol('3'),\n    enableProgressBar: false,\n    id: '3',\n    message: 'This is how a warn file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Warn',\n    file: undefined,\n    color: 'warn',\n    maxSize: 100,\n  };\n\n  convertToProgressFile(annex: Annex) {\n    return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n  }\n\n  getFile() {\n    switch (this.color) {\n      case 'success':\n        return this.successFile;\n      case 'error':\n        return this.errorFile;\n      case 'warn':\n        return this.warnFile;\n      default:\n        return this.convertToProgressFile(this.testFile);\n    }\n  }\n}\n"}
+{"demo-file-panel.component.html":"<file-panel [file]=\"getFile()\" />\n","demo-file-panel.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  convertToReferencedProgressFile,\n  ReferencedProgressFile,\n  OnemrvaMatFileUploadModule,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n  /**\n   * Document reference in document service\n   */\n  documentId?: string;\n  /**\n   * Name of the document\n   */\n  name?: string;\n}\n\n@Component({\n  selector: 'app-demo-file-panel',\n  templateUrl: 'demo-file-panel.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, OnemrvaMatFileUploadModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n  readonly color = input<'' | 'warn' | 'success' | 'error'>('');\n\n  testFile: Annex = {\n    documentId: '1',\n    name: 'File',\n  };\n\n  successFile: ReferencedProgressFile = {\n    ref: Symbol('1'),\n    enableProgressBar: false,\n    id: '1',\n    message: 'This is how a success file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Success',\n    file: undefined,\n    color: 'success',\n    maxSize: 100,\n  };\n\n  errorFile: ReferencedProgressFile = {\n    ref: Symbol('2'),\n    enableProgressBar: false,\n    id: '2',\n    message: 'This is how an error file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Error',\n    file: undefined,\n    color: 'error',\n    maxSize: 100,\n  };\n\n  warnFile: ReferencedProgressFile = {\n    ref: Symbol('3'),\n    enableProgressBar: false,\n    id: '3',\n    message: 'This is how a warn file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Warn',\n    file: undefined,\n    color: 'warn',\n    maxSize: 100,\n  };\n\n  convertToProgressFile(annex: Annex) {\n    return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n  }\n\n  getFile() {\n    switch (this.color()) {\n      case 'success':\n        return this.successFile;\n      case 'error':\n        return this.errorFile;\n      case 'warn':\n        return this.warnFile;\n      default:\n        return this.convertToProgressFile(this.testFile);\n    }\n  }\n}\n"}

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  inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport { CommonModule } from '@angular/common';\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: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButtonModule,\n    TranslateModule,\n  ],\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"}

package/assets/json/grid.json

@@ -1 +1 @@
-{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}
+{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}

package/assets/json/horizontal-stepper.json

@@ -1 +1 @@
-{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>Name</mat-label>\n        <input\n          matInput\n          placeholder=\"Last name, First name\"\n          formControlName=\"firstCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !firstFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !secondFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step aria-label=\"Done\">\n    <ng-template matStepLabel>Done</ng-template>\n    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } from '@angular/core';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\nimport {\n  STEPPER_GLOBAL_OPTIONS,\n  StepperSelectionEvent,\n} from '@angular/cdk/stepper';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatInputModule,\n    MatFormFieldModule,\n    MatStepperModule,\n  ],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n  ],\n})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}
+{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>Name</mat-label>\n        <input\n          matInput\n          placeholder=\"Last name, First name\"\n          formControlName=\"firstCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !firstFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !secondFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step aria-label=\"Done\">\n    <ng-template matStepLabel>Done</ng-template>\n    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } from '@angular/core';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\nimport {\n  STEPPER_GLOBAL_OPTIONS,\n  StepperSelectionEvent,\n} from '@angular/cdk/stepper';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\n  imports: [\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatInputModule,\n    MatFormFieldModule,\n    MatStepperModule,\n  ],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n  ],\n})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}

package/assets/json/icon-button.json

@@ -1 +1 @@
-{"demo-icon-button.component.html":"<button\n  mat-icon-button\n  color=\"primary\"\n  aria-label=\"Example icon button with a home icon\"\n>\n  <mat-icon>home</mat-icon>\n</button>\n<button\n  mat-icon-button\n  color=\"accent\"\n  aria-label=\"Example icon button with a menu icon\"\n>\n  <mat-icon>menu</mat-icon>\n</button>\n","demo-icon-button.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-icon-button',\n  templateUrl: './demo-icon-button.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatToolbarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoIconButtonComponent extends DemoComponentBase {\n  isSelected: FormControl<boolean | null> = new FormControl<boolean>(false);\n\n  handleToggle(isSelected: boolean) {\n    console.log('Event onToggleChoice: ', isSelected);\n  }\n}\n"}
+{"demo-icon-button.component.html":"<button\n  mat-icon-button\n  color=\"primary\"\n  aria-label=\"Example icon button with a home icon\"\n>\n  <mat-icon>home</mat-icon>\n</button>\n<button\n  mat-icon-button\n  color=\"accent\"\n  aria-label=\"Example icon button with a menu icon\"\n>\n  <mat-icon>menu</mat-icon>\n</button>\n","demo-icon-button.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-icon-button',\n  templateUrl: './demo-icon-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, MatToolbarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoIconButtonComponent extends DemoComponentBase {\n  isSelected: FormControl<boolean | null> = new FormControl<boolean>(false);\n\n  handleToggle(isSelected: boolean) {\n    console.log('Event onToggleChoice: ', isSelected);\n  }\n}\n"}