@onemrvapublic/design-system-demos 20.11.1-develop.7 → 20.11.1-develop.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-button-toggle.component.html":"<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n @for (toggle of toggles(); track $index) {\n <mat-button-toggle
|
|
1
|
+
{"demo-button-toggle.component.html":"<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n @for (toggle of toggles(); track $index) {\n <mat-button-toggle\n [value]=\"toggle\"\n [aria-label]=\"type() === 'icon' ? iconLabels[toggle] : toggle\"\n >\n @if (type() === 'text') {\n {{ toggle }}\n } @else {\n <mat-icon [attr.aria-hidden]=\"true\">{{ toggle }}</mat-icon>\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n","demo-button-toggle.component.ts":"import {\n Component,\n effect,\n input,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatIcon } from '@angular/material/icon';\n\n@Component({\n selector: 'app-demo-button-toggle',\n templateUrl: 'demo-button-toggle.component.html',\n\n standalone: true,\n imports: [MatButtonToggleModule, MatIcon],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonToggleComponent extends DemoComponentBase {\n textToggles = ['Bold', 'Italic', 'Underline'];\n iconToggles = ['format_bold', 'format_italic', 'format_underlined'];\n iconLabels: Record<string, string> = {\n format_bold: 'Bold',\n format_italic: 'Italic',\n format_underlined: 'Underline',\n };\n\n type = input('text');\n toggles = signal(this.textToggles);\n\n constructor() {\n super();\n effect(() => {\n if (this.type() === 'text') {\n this.toggles.set(this.textToggles);\n } else {\n this.toggles.set(this.iconToggles);\n }\n });\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-carousel.component.html":"<onemrva-mat-carousel>\n <onemrva-mat-carousel-item>\n <onemrva-mat-panel [color]=\"color\">\n <onemrva-mat-panel-title>\n This is an ID panel with a title {{ color }}\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"row gy gx\">\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Adresse</span>\n <br />\n <strong>\n RUE PONT A NOLE 92 <br />\n 6032 MONT-SUR-MARCHIENNE</strong\n >\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Nationalité</span>\n <br />\n <strong> Belge </strong>\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Organisme de paiement</span>\n <br />\n <strong>FGTB Charleroi</strong>\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">IBAN</span>\n <br />\n <strong>BE37063984850028</strong>\n </div>\n </div>\n <div class=\"row gy gx\">\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Données de contact</span>\n <br />\n <strong>\n email@email.com <br />\n 02 / 303 22 22</strong\n >\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Autres informations</span>\n <br />\n <strong\n >Femme (FR)<br />\n Archivé dans le mainframe: Oui<br />\n Date de décès: Ø</strong\n >\n </div>\n <div class=\"col-6-medium col-12-small\">\n <span class=\"infoColumn\">Bureau de chômage</span>\n <br />\n <strong>Charleroi</strong>\n </div>\n </div>\n </onemrva-mat-panel-content>\n </onemrva-mat-panel>\n </onemrva-mat-carousel-item>\n\n <onemrva-mat-carousel-item>\n <onemrva-mat-panel color=\"primary\">\n <onemrva-mat-panel-title>\n This is an ID panel with a title\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <p>\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n darth hutt jawa. Palpatine mon sebulba darth.\n </p>\n </onemrva-mat-panel-content>\n </onemrva-mat-panel>\n </onemrva-mat-carousel-item>\n\n <onemrva-mat-carousel-item>\n <onemrva-mat-panel>\n <onemrva-mat-panel-title>\n This is an ID panel with a title\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <p>\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n darth hutt jawa. Palpatine mon sebulba darth.\n </p>\n </onemrva-mat-panel-content>\n </onemrva-mat-panel>\n </onemrva-mat-carousel-item>\n</onemrva-mat-carousel>\n","demo-carousel.component.scss":"","demo-carousel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n OnemrvaMatCarouselComponent,\n OnemrvaMatCarouselItemComponent,\n} from '@onemrvapublic/design-system/mat-carousel';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\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-carousel',\n standalone: true,\n imports: [\n OnemrvaMatCarouselComponent,\n OnemrvaMatCarouselItemComponent,\n MatButtonModule,\n MatIconModule,\n OnemrvaMatPanelModule,\n OnemRvaColorDirective,\n ],\n\n templateUrl: 'demo-carousel.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCarouselComponent extends DemoComponentBase {\n @Input()\n color: OnemrvaMatColor = '';\n}\n"
|
|
1
|
+
{"demo-carousel.component.html":"<onemrva-mat-carousel>\n <onemrva-mat-carousel-item>\n <onemrva-mat-panel [color]=\"color\">\n <onemrva-mat-panel-title>\n This is an ID panel with a title {{ color }}\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"row gy gx\">\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Adresse</span>\n <br />\n <strong>\n RUE PONT A NOLE 92 <br />\n 6032 MONT-SUR-MARCHIENNE</strong\n >\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Nationalité</span>\n <br />\n <strong> Belge </strong>\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Organisme de paiement</span>\n <br />\n <strong>FGTB Charleroi</strong>\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">IBAN</span>\n <br />\n <strong>BE37063984850028</strong>\n </div>\n </div>\n <div class=\"row gy gx\">\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Données de contact</span>\n <br />\n <strong>\n email@email.com <br />\n 02 / 303 22 22</strong\n >\n </div>\n <div class=\"col-3-large col-6-medium col-12-small\">\n <span class=\"infoColumn\">Autres informations</span>\n <br />\n <strong\n >Femme (FR)<br />\n Archivé dans le mainframe: Oui<br />\n Date de décès: Ø</strong\n >\n </div>\n <div class=\"col-6-medium col-12-small\">\n <span class=\"infoColumn\">Bureau de chômage</span>\n <br />\n <strong>Charleroi</strong>\n </div>\n </div>\n </onemrva-mat-panel-content>\n </onemrva-mat-panel>\n </onemrva-mat-carousel-item>\n\n <onemrva-mat-carousel-item>\n <onemrva-mat-panel color=\"primary\">\n <onemrva-mat-panel-title>\n This is an ID panel with a title\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <p>\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n darth hutt jawa. Palpatine mon sebulba darth.\n </p>\n </onemrva-mat-panel-content>\n </onemrva-mat-panel>\n </onemrva-mat-carousel-item>\n\n <onemrva-mat-carousel-item>\n <onemrva-mat-panel>\n <onemrva-mat-panel-title>\n This is an ID panel with a title\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <p>\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n darth hutt jawa. Palpatine mon sebulba darth.\n </p>\n </onemrva-mat-panel-content>\n </onemrva-mat-panel>\n </onemrva-mat-carousel-item>\n</onemrva-mat-carousel>\n","demo-carousel.component.scss":"","demo-carousel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n OnemrvaMatCarouselComponent,\n OnemrvaMatCarouselItemComponent,\n} from '@onemrvapublic/design-system/mat-carousel';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\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-carousel',\n standalone: true,\n imports: [\n OnemrvaMatCarouselComponent,\n OnemrvaMatCarouselItemComponent,\n MatButtonModule,\n MatIconModule,\n OnemrvaMatPanelModule,\n OnemRvaColorDirective,\n ],\n\n templateUrl: 'demo-carousel.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCarouselComponent extends DemoComponentBase {\n @Input()\n color: OnemrvaMatColor = '';\n}\n"}
|
package/assets/json/error.json
CHANGED
|
@@ -1 +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 { 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 @Input()\n code = 500;\n}\n"
|
|
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 { 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 @Input()\n code = 500;\n}\n"}
|
|
@@ -1 +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"
|
|
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"}
|