@onemrvapublic/design-system-demos 20.6.0 → 20.6.1-develop.10

package/assets/json/breadcrumb.json

@@ -1 +1 @@
-{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb\n  [fakePath]=\"['Home', 'level-1', 'level-2', 'level-3']\"\n></onemrva-mat-breadcrumb>\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatBreadcrumbComponent } from '@onemrvapublic/design-system/mat-breadcrumb';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n  selector: 'app-demo-breadcrumb',\n  templateUrl: 'demo-breadcrumb.component.html',\n  standalone: true,\n  imports: [CommonModule, RouterModule, OnemrvaMatBreadcrumbComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBreadcrumbComponent {}\n"}
+{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb [paths]=\"paths\"></onemrva-mat-breadcrumb>\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatBreadcrumbComponent } from '@onemrvapublic/design-system/mat-breadcrumb';\nimport { Route } from '@angular/router';\nlet DummyComponent; // for the demo\n\n// You can set the titles in your routes for automatic generation like the route\nexport const routes: Route[] = [\n  {\n    path: '',\n    component: DummyComponent,\n    data: {\n      navigationTitle: 'Home',\n    },\n    children: [\n      {\n        path: 'about',\n        component: DummyComponent,\n        data: {\n          navigationTitle: 'About-us',\n        },\n      },\n      {\n        path: 'contact',\n        component: DummyComponent,\n        data: {\n          navigationTitle: 'Contact-us',\n        },\n        children: [\n          {\n            path: 'locations',\n            component: DummyComponent,\n            data: {\n              navigationTitle: 'Locations',\n            },\n          },\n        ],\n      },\n    ],\n  },\n];\n\n@Component({\n  selector: 'app-demo-breadcrumb',\n  templateUrl: 'demo-breadcrumb.component.html',\n  standalone: true,\n  imports: [CommonModule, OnemrvaMatBreadcrumbComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBreadcrumbComponent {\n  // or you can use custom paths like this (! links will not work in this demo)\n  paths = [\n    {\n      label: 'Home',\n      url: '',\n      translate: false,\n    },\n    {\n      label: 'Contact us',\n      url: '/contact',\n      translate: false,\n    },\n    {\n      label: 'Locations',\n      url: '/contact/locations',\n      translate: false,\n    },\n  ];\n}\n","demo-breadcrumb.routes.ts":"import { Route } from '@angular/router';\nimport { DemoComponent } from '../../_demo';\n"}

package/assets/json/chips-input.json

@@ -1 +1 @@
-{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits(); track fruit) {\n      <mat-chip-row\n        [color]=\"color()\"\n        [disabled]=\"disabled()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"remove(fruit)\"\n      >\n        {{ fruit }}\n        @if (!disabled() && !readonly()) {\n          <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        }\n      </mat-chip-row>\n    }\n\n    @if (!disabled()) {\n      <input\n        #fruitInput\n        placeholder=\"Add fruit...\"\n        [(ngModel)]=\"currentFruit\"\n        [matChipInputFor]=\"chipGrid\"\n        [matAutocomplete]=\"auto\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n        (matChipInputTokenEnd)=\"add($event)\"\n      />\n    }\n  </mat-chip-grid>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits(); track fruit) {\n      <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport {\n  MatAutocomplete,\n  MatAutocompleteSelectedEvent,\n  MatAutocompleteTrigger,\n  MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips-input',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    MatIconModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    MatAutocomplete,\n    MatOption,\n    MatAutocompleteTrigger,\n  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>('');\n  disabled = input(false);\n  readonly = input(false);\n\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n  readonly filteredFruits = computed(() => {\n    const currentFruit = this.currentFruit().toLowerCase();\n    return currentFruit\n      ? this.allFruits.filter(fruit =>\n          fruit.toLowerCase().includes(currentFruit),\n        )\n      : this.allFruits.slice();\n  });\n  readonly currentFruit = model('');\n  readonly announcer = inject(LiveAnnouncer);\n  readonly fruits = signal(['Lemon']);\n  readonly allFruits: string[] = [\n    'Apple',\n    'Lemon',\n    'Lime',\n    'Orange',\n    'Strawberry',\n  ];\n\n  add(event: MatChipInputEvent): void {\n    const value = (event.value || '').trim();\n\n    // Add our fruit\n    if (value) {\n      this.fruits.update(fruits => [...fruits, value]);\n    }\n\n    // Clear the input value\n    this.currentFruit.set('');\n  }\n\n  remove(fruit: string): void {\n    this.fruits.update(fruits => {\n      const index = fruits.indexOf(fruit);\n      if (index < 0) {\n        return fruits;\n      }\n\n      fruits.splice(index, 1);\n      this.announcer.announce(`Removed ${fruit}`);\n      return [...fruits];\n    });\n  }\n\n  selected(event: MatAutocompleteSelectedEvent): void {\n    this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n    this.currentFruit.set('');\n    event.option.deselect();\n  }\n}\n"}
+{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits(); track fruit) {\n      <mat-chip-row\n        [color]=\"color()\"\n        [disabled]=\"disabled()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"remove(fruit)\"\n      >\n        {{ fruit }}\n        @if (!disabled() && !readonly()) {\n          <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        }\n      </mat-chip-row>\n    }\n\n    <input\n      #fruitInput\n      placeholder=\"Add fruit...\"\n      [(ngModel)]=\"currentFruit\"\n      [matChipInputFor]=\"chipGrid\"\n      [matAutocomplete]=\"auto\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      (matChipInputTokenEnd)=\"add($event)\"\n      [disabled]=\"disabled()\"\n    />\n  </mat-chip-grid>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits(); track fruit) {\n      <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport {\n  MatAutocomplete,\n  MatAutocompleteSelectedEvent,\n  MatAutocompleteTrigger,\n  MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips-input',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    MatIconModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    MatAutocomplete,\n    MatOption,\n    MatAutocompleteTrigger,\n  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>('');\n  disabled = input(false);\n  readonly = input(false);\n\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n  readonly filteredFruits = computed(() => {\n    const currentFruit = this.currentFruit().toLowerCase();\n    return currentFruit\n      ? this.allFruits.filter(fruit =>\n          fruit.toLowerCase().includes(currentFruit),\n        )\n      : this.allFruits.slice();\n  });\n  readonly currentFruit = model('');\n  readonly announcer = inject(LiveAnnouncer);\n  readonly fruits = signal(['Lemon']);\n  readonly allFruits: string[] = [\n    'Apple',\n    'Lemon',\n    'Lime',\n    'Orange',\n    'Strawberry',\n  ];\n\n  add(event: MatChipInputEvent): void {\n    const value = (event.value || '').trim();\n\n    // Add our fruit\n    if (value) {\n      this.fruits.update(fruits => [...fruits, value]);\n    }\n\n    // Clear the input value\n    this.currentFruit.set('');\n  }\n\n  remove(fruit: string): void {\n    this.fruits.update(fruits => {\n      const index = fruits.indexOf(fruit);\n      if (index < 0) {\n        return fruits;\n      }\n\n      fruits.splice(index, 1);\n      this.announcer.announce(`Removed ${fruit}`);\n      return [...fruits];\n    });\n  }\n\n  selected(event: MatAutocompleteSelectedEvent): void {\n    this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n    this.currentFruit.set('');\n    event.option.deselect();\n  }\n}\n"}

package/assets/json/choice-chips.json

@@ -1 +1 @@
-{"demo-choice-chips.component.html":"<onemrva-mat-choice-chip [formControl]=\"form\" [readonly]=\"readonly()\"\n  >Choose this</onemrva-mat-choice-chip\n>\n","demo-choice-chips.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport {\n  OnemrvaMatChoiceChipComponent,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatCheckboxModule,\n    OnemrvaMatChoiceChipComponent,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  form = new FormControl();\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-choice-chips.component.html":"<section class=\"example-section\" [formGroup]=\"form\">\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"pepperoni\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Pepperoni\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"extracheese\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Extra Cheese\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    formControlName=\"mushroom\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Mushroom\n  </onemrva-mat-choice-chip>\n</section>\n","demo-choice-chips.component.scss":".example-section {\n}\n","demo-choice-chips.component.ts":"import {\n  Component,\n  effect,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport {\n  OnemrvaMatChoiceChipComponent,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n  styleUrls: ['demo-choice-chips.component.scss'],\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatCheckboxModule,\n    OnemrvaMatChoiceChipComponent,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  private readonly _formBuilder = inject(FormBuilder);\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(val => {\n      this.output.set(val);\n    });\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  readonly form = this._formBuilder.group({\n    pepperoni: false,\n    extracheese: false,\n    mushroom: false,\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';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system';\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';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadManualService {\n  constructor() {\n    console.log('DemoFileUploadManualService');\n  }\n\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</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';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system';\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';\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"}

package/assets/json/menu.json

@@ -1 +1 @@
-{"demo-menu.component.html":"<button\n  mat-icon-button\n  [matMenuTriggerFor]=\"menu\"\n  class=\"onemrva-icon-button truc\"\n  aria-label=\"Menu\"\n>\n  <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"mat-elevation-z2\">\n  <div mat-menu-item>\n    <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">edit</mat-icon>Edit\n  </div>\n  <div mat-menu-item>\n    <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">update</mat-icon\n    >Save\n  </div>\n</mat-menu>\n","demo-menu.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-menu',\n  templateUrl: 'demo-menu.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, MatMenuModule, MatIconModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMenuComponent extends DemoComponentBase {}\n"}
+{"demo-menu.component.html":"<button\n  mat-icon-button\n  [matMenuTriggerFor]=\"menu\"\n  class=\"onemrva-icon-button truc\"\n  aria-label=\"Menu\"\n  [disabled]=\"disabled()\"\n>\n  <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"mat-elevation-z2\">\n  <div mat-menu-item>\n    <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">edit</mat-icon>Edit\n  </div>\n  <div mat-menu-item>\n    <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">update</mat-icon\n    >Save\n  </div>\n</mat-menu>\n","demo-menu.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-menu',\n  templateUrl: 'demo-menu.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, MatMenuModule, MatIconModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMenuComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n}\n"}

package/assets/json/progress-bar.json

@@ -1 +1 @@
-{"demo-progress-bar.component.html":"Default label$:\n<onemrva-mat-progress-bar [value$]=\"value$\"></onemrva-mat-progress-bar>\n\n<br />\n<br />\n\nExample of specific width:\n<onemrva-mat-progress-bar\n  [value$]=\"value$\"\n  [ngStyle]=\"{ width: '400px' }\"\n></onemrva-mat-progress-bar>\n\n<br />\n<br />\n\nCustom label$:\n<onemrva-mat-progress-bar\n  [label$]=\"label$\"\n  [value$]=\"value$\"\n></onemrva-mat-progress-bar>\n","demo-progress-bar.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { interval, map, startWith, Subject } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatProgressBarComponent } from '@onemrvapublic/design-system';\n\nimport { take } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-progress-bar',\n  templateUrl: 'demo-progress-bar.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    OnemrvaMatProgressBarComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoProgressBarComponent extends DemoComponentBase {\n  value$: Subject<any> = new Subject<any>();\n\n  label$ = this.value$.pipe(\n    startWith(0),\n    map(v => (v < 0 ? '0 pct.' : v > 100 ? '100 pct.' : v + ' pct.')),\n  );\n\n  constructor() {\n    super();\n    const numbers = interval(500);\n\n    const takeFourNumbers = numbers.pipe(take(100));\n\n    takeFourNumbers.pipe().subscribe(x => {\n      this.value$.next(x);\n    });\n  }\n}\n"}
+{"demo-progress-bar.component.html":"<onemrva-mat-progress-bar [value$]=\"value$\"></onemrva-mat-progress-bar>\n","demo-progress-bar.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { interval, map, startWith, Subject } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatProgressBarComponent } from '@onemrvapublic/design-system';\n\nimport { take } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-progress-bar',\n  templateUrl: 'demo-progress-bar.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    OnemrvaMatProgressBarComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoProgressBarComponent extends DemoComponentBase {\n  value$: Subject<any> = new Subject<any>();\n\n  constructor() {\n    super();\n    const numbers = interval(100);\n\n    const loadding = numbers.pipe(take(101));\n\n    loadding.pipe().subscribe(x => {\n      this.value$.next(x);\n    });\n  }\n}\n"}