@onemrvapublic/design-system-demos 20.1.0-develop.1 → 20.1.0
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.
- package/assets/codes.json +1 -1
- package/assets/json/drawer.json +1 -0
- package/assets/json/file-upload.json +1 -1
- package/assets/json/layout.json +1 -1
- package/assets/json/text-input.json +1 -1
- package/main.js +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
package/assets/codes.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card-table","carousel","checkbox","chips","chips-input","choice-chips","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","empty","enterprise-number-input","error","error-handler","expansion","fab","file-panel","file-upload","file-upload-manual","grid","horizontal-stepper","icon","icon-button","if-width-is","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","selectable-box","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators","vertical-stepper"]
|
|
1
|
+
["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card-table","carousel","checkbox","chips","chips-input","choice-chips","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","expansion","fab","file-panel","file-upload","file-upload-manual","grid","horizontal-stepper","icon","icon-button","if-width-is","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","selectable-box","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators","vertical-stepper"]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"demo-drawer.component.html":"<button\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n [attr.data-cy]=\"'click-me'\"\n>\n Open form\n</button>\n","demo-drawer.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-drawer',\n templateUrl: 'demo-drawer.component.html',\n standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent {\n drawerService = inject(OnemrvaDrawerService);\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n const componentRef = this.drawerService.host?.createComponent(\n LayoutDrawerComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.size.set('xlarge');\n this.drawerService.toggle();\n }\n\n help() {\n alert('HELP');\n }\n}\n","demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n <h2>Content title</h2>\n <p>\n The slide-over allows to get some content displayed on a panel with some\n elements inside.\n </p>\n <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\n </mat-grid-tile>\n </mat-grid-list>\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n <button\n mat-stroked-button\n color=\"primary\"\n class=\"close\"\n (click)=\"drawerService.close()\"\n >\n Cancel\n </button>\n <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n Save\n </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'layout-drawer',\n templateUrl: 'demo-layout-drawer.component.html',\n standalone: true,\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\n MatGridTile,\n MatGridList,\n MatInput,\n MatButton,\n OnemrvaMatPanelModule,\n ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n @Input()\n myForm!: FormGroup;\n\n get userId() {\n return this.myForm.get('userId') as FormControl;\n }\n get leftField() {\n return this.myForm.get('leftField') as FormControl;\n }\n get rightField() {\n return this.myForm.get('rightField') as FormControl;\n }\n drawerService = inject(OnemrvaDrawerService);\n\n save() {\n this.drawerService.close();\n }\n}\n"}
|
|
@@ -1 +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';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {
|
|
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';\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';\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/layout.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n <h2>Content title</h2>\n <p>\n The slide-over allows to get some content displayed on a panel with some\n elements inside.\n </p>\n <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\n </mat-grid-tile>\n </mat-grid-list>\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n <button mat-stroked-button color=\"primary\" (click)=\"drawerService.close()\">\n Cancel\n </button>\n <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n Save\n </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { NgIf } from '@angular/common';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'layout-drawer',\n templateUrl: 'demo-layout-drawer.component.html',\n standalone: true,\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\n MatGridTile,\n MatGridList,\n MatInput,\n MatButton,\n OnemrvaMatPanelModule,\n ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n @Input()\n myForm!: FormGroup;\n\n get userId() {\n return this.myForm.get('userId') as FormControl;\n }\n get leftField() {\n return this.myForm.get('leftField') as FormControl;\n }\n get rightField() {\n return this.myForm.get('rightField') as FormControl;\n }\n drawerService = inject(OnemrvaDrawerService);\n\n save() {\n this.drawerService.close();\n }\n}\n","demo-layout.component.html":"<onemrva-layout\n [languages]=\"languages\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n>\n <onemrva-layout-title>Demo layout</onemrva-layout-title>\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n [ngClass]=\"{ active: activeMenu === 0 }\"\n mat-menu-item\n data-cy=\"trusteeButton\"\n (click)=\"click(0)\"\n attr.aria-label=\"{{ 'layout.interface.trusted' | translate }}\"\n >\n <mat-icon>star_outline</mat-icon\n >{{ 'layout.interface.trusted' | translate }}\n </button>\n <button\n [ngClass]=\"{ active: activeMenu === 1 }\"\n class=\"active-link\"\n type=\"button\"\n mat-menu-item\n data-cy=\"collaboButton\"\n (click)=\"click(1)\"\n attr.aria-label=\"{{ 'layout.interface.collaborator' | translate }}\"\n >\n <mat-icon>assignment_ind</mat-icon\n >{{ 'layout.interface.collaborator' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >Home</onemrva-layout-route\n >\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu\"\n dataCy=\"Menu\"\n [label]=\"'Menu' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu3\"\n >Submenu 3\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu\"\n >Submenu\n </onemrva-layout-subroute>\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-subroute>\n </onemrva-layout-route>\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu2\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Menu\"\n [label]=\"'Menu 2' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-route>\n <onemrva-layout-after-nav>\n <button\n mat-icon-button\n (click)=\"help()\"\n [attr.aria-label]=\"'Help' | translate\"\n >\n <mat-icon>help</mat-icon>\n </button>\n </onemrva-layout-after-nav>\n\n <onemrva-layout-sidenav-title>Test</onemrva-layout-sidenav-title>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'/menu1/side1'\">\n Menu 1\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub1'\"\n >Submenu 1</onemrva-layout-sidenav-submenu\n >\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub2'\"\n >Submenu 2</onemrva-layout-sidenav-submenu\n >\n </onemrva-layout-sidenav-menu>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'menu1/side2'\"\n >Menu 2</onemrva-layout-sidenav-menu\n >\n\n <onemrva-layout-content>\n <div class=\"container\">\n <h1 translate>demo.title</h1>\n This is a demo of the layout component\n <hr />\n <router-outlet></router-outlet>\n <br />\n <h1>Drawer</h1>\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n <br />\n <br />\n <br />\n Form value: {{ dummyForm.value | json }}\n </div>\n </onemrva-layout-content>\n\n <onemrva-layout-footer> footer</onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaDrawerService,\n OnemRvaLanguage,\n OnemrvaLayoutModule,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-layout',\n templateUrl: 'demo-layout.component.html',\n standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLayoutComponent {\n activeMenu = 1;\n\n languages: OnemRvaLanguage[] = [\n { code: 'fr', label: 'FR' },\n { code: 'nl', label: 'NL' },\n { code: 'en', label: 'EN' },\n { code: 'de', label: 'DE' },\n ];\n\n profile: OnemRvaProfile;\n\n drawerService = inject(OnemrvaDrawerService);\n // keycloakService = inject(KeycloakService);\n\n constructor() {\n /** create a new empty profile */\n this.profile = new OnemRvaProfile();\n\n /** Fill the profile with keycloak's information */\n // this.keycloakService.isLoggedIn().then((isLoggedIn ) => {\n // if (isLoggedIn) {\n // this.loadProfile();\n // }\n // });\n }\n\n /**\n * Login\n */\n login() {\n // this.keycloakService.login({\n // redirectUri: document.location.href, // do we really need this redirect ?\n // }).then((p) => {\n this.loadProfile();\n // });\n }\n\n /**\n * Logout\n */\n logout() {\n // this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n this.profile.logout();\n // });\n }\n\n /**\n * This function loads the keycloak given information into the profile object that is managed by the layout\n *\n * @private\n */\n private loadProfile() {\n this.profile.login('User', 'Name');\n }\n\n click(active: number) {\n this.activeMenu = active;\n }\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n const componentRef = this.drawerService.host?.createComponent(\n LayoutDrawerComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.hasBackdrop = true;\n this.drawerService.drawer?.toggle();\n }\n\n help() {\n alert('HELP');\n }\n}\n"}
|
|
1
|
+
{"demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n <h2>Content title</h2>\n <p>\n The slide-over allows to get some content displayed on a panel with some\n elements inside.\n </p>\n <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\n </mat-grid-tile>\n </mat-grid-list>\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n <button mat-stroked-button color=\"primary\" (click)=\"drawerService.close()\">\n Cancel\n </button>\n <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n Save\n </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { NgIf } from '@angular/common';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'layout-drawer',\n templateUrl: 'demo-layout-drawer.component.html',\n standalone: true,\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\n MatGridTile,\n MatGridList,\n MatInput,\n MatButton,\n OnemrvaMatPanelModule,\n ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n @Input()\n myForm!: FormGroup;\n\n get userId() {\n return this.myForm.get('userId') as FormControl;\n }\n get leftField() {\n return this.myForm.get('leftField') as FormControl;\n }\n get rightField() {\n return this.myForm.get('rightField') as FormControl;\n }\n drawerService = inject(OnemrvaDrawerService);\n\n save() {\n this.drawerService.close();\n }\n}\n","demo-layout.component.html":"<onemrva-layout\n [languages]=\"languages\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n>\n <onemrva-layout-title>Demo layout</onemrva-layout-title>\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n [ngClass]=\"{ active: activeMenu === 0 }\"\n mat-menu-item\n data-cy=\"trusteeButton\"\n (click)=\"click(0)\"\n attr.aria-label=\"{{ 'layout.interface.trusted' | translate }}\"\n >\n <mat-icon>star_outline</mat-icon\n >{{ 'layout.interface.trusted' | translate }}\n </button>\n <button\n [ngClass]=\"{ active: activeMenu === 1 }\"\n class=\"active-link\"\n type=\"button\"\n mat-menu-item\n data-cy=\"collaboButton\"\n (click)=\"click(1)\"\n attr.aria-label=\"{{ 'layout.interface.collaborator' | translate }}\"\n >\n <mat-icon>assignment_ind</mat-icon\n >{{ 'layout.interface.collaborator' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >Home</onemrva-layout-route\n >\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu\"\n dataCy=\"Menu\"\n [label]=\"'Menu' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu3\"\n >Submenu 3\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu\"\n >Submenu\n </onemrva-layout-subroute>\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-subroute>\n </onemrva-layout-route>\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu2\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Menu\"\n [label]=\"'Menu 2' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-route>\n <onemrva-layout-after-nav>\n <button\n mat-icon-button\n (click)=\"help()\"\n [attr.aria-label]=\"'Help' | translate\"\n >\n <mat-icon>help</mat-icon>\n </button>\n </onemrva-layout-after-nav>\n\n <onemrva-layout-sidenav-title>Test</onemrva-layout-sidenav-title>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'/menu1/side1'\">\n Menu 1\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub1'\"\n >Submenu 1</onemrva-layout-sidenav-submenu\n >\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub2'\"\n >Submenu 2</onemrva-layout-sidenav-submenu\n >\n </onemrva-layout-sidenav-menu>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'menu1/side2'\"\n >Menu 2</onemrva-layout-sidenav-menu\n >\n\n <onemrva-layout-content>\n <div class=\"container\">\n <h1 translate>demo.title</h1>\n This is a demo of the layout component\n <hr />\n <router-outlet></router-outlet>\n <br />\n <h1>Drawer</h1>\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n <br />\n <br />\n <br />\n Form value: {{ dummyForm.value | json }}\n </div>\n </onemrva-layout-content>\n\n <onemrva-layout-footer> footer</onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaDrawerService,\n OnemRvaLanguage,\n OnemrvaLayoutModule,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-layout',\n templateUrl: 'demo-layout.component.html',\n standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLayoutComponent {\n activeMenu = 1;\n\n languages: OnemRvaLanguage[] = [\n { code: 'fr', label: 'FR' },\n { code: 'nl', label: 'NL' },\n { code: 'en', label: 'EN' },\n { code: 'de', label: 'DE' },\n ];\n\n profile: OnemRvaProfile;\n\n drawerService = inject(OnemrvaDrawerService);\n // keycloakService = inject(KeycloakService);\n\n constructor() {\n /** create a new empty profile */\n this.profile = new OnemRvaProfile();\n\n /** Fill the profile with keycloak's information */\n // this.keycloakService.isLoggedIn().then((isLoggedIn ) => {\n // if (isLoggedIn) {\n // this.loadProfile();\n // }\n // });\n }\n\n /**\n * Login\n */\n login() {\n // this.keycloakService.login({\n // redirectUri: document.location.href, // do we really need this redirect ?\n // }).then((p) => {\n this.loadProfile();\n // });\n }\n\n /**\n * Logout\n */\n logout() {\n // this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n this.profile.logout();\n // });\n }\n\n /**\n * This function loads the keycloak given information into the profile object that is managed by the layout\n *\n * @private\n */\n private loadProfile() {\n this.profile.login('User', 'Name');\n }\n\n click(active: number) {\n this.activeMenu = active;\n }\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n const componentRef = this.drawerService.host?.createComponent(\n LayoutDrawerComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.toggle();\n }\n\n help() {\n alert('HELP');\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-text-input.component.html":"<mat-form-field
|
|
1
|
+
{"demo-text-input.component.html":"<mat-form-field [color]=\"color\">\n <mat-label>Error demo</mat-label>\n <input matInput [formControl]=\"input\" />\n <mat-hint>Hint</mat-hint>\n @if (input.errors && input.errors['required']) {\n <mat-error> This is a long error message displayed on 2 lines </mat-error>\n }\n</mat-form-field>\n","demo-text-input.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport {\n FormsModule,\n ReactiveFormsModule,\n UntypedFormControl,\n Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-text-input',\n templateUrl: './demo-text-input.component.html',\n\n standalone: true,\n imports: [\n FormsModule,\n CommonModule,\n MatInput,\n ReactiveFormsModule,\n MatFormFieldModule,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n @Input()\n color: 'primary' | 'warn' = 'primary';\n\n input: UntypedFormControl = new UntypedFormControl('', [Validators.required]);\n}\n"}
|