@onemrvapublic/design-system-demos 21.6.0 → 21.7.0-develop.2
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/json/avatar.json +1 -1
- package/assets/json/chips.json +1 -1
- package/assets/json/drawer.json +1 -1
- package/assets/json/file-panel.json +1 -1
- package/main.js +5 -5
- package/package.json +1 -1
- package/styles.css +1 -1
package/assets/json/avatar.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-avatar.component.html":"<onemrva-mat-avatar\n [initials]=\"initials()\"\n [text]=\"text()\"\n [size]=\"size()\"\n [src]=\"src()\"\n [icon]=\"icon()\"\n [color]=\"color()\"\n/>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-avatar',\n templateUrl: 'demo-avatar.component.html',\n standalone: true,\n imports: [\n OnemrvaMatAvatarModule,\n OnemRvaColorDirective,\n OnemRvaSizeDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n readonly initials = input('TC');\n readonly text = input('');\n readonly size = input<'
|
|
1
|
+
{"demo-avatar.component.html":"<onemrva-mat-avatar\n [initials]=\"initials()\"\n [text]=\"text()\"\n [size]=\"size()\"\n [src]=\"src()\"\n [icon]=\"icon()\"\n [color]=\"color()\"\n/>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-avatar',\n templateUrl: 'demo-avatar.component.html',\n standalone: true,\n imports: [\n OnemrvaMatAvatarModule,\n OnemRvaColorDirective,\n OnemRvaSizeDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n readonly initials = input('TC');\n readonly text = input('');\n readonly size = input<'large' | 'medium' | 'small' | 'xsmall'>('medium');\n readonly src = input('');\n readonly icon = input('');\n readonly color = input<OnemrvaMatColor>('accent');\n}\n"}
|
package/assets/json/chips.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n <mat-chip [color]=\"color()\" [disabled]=\"disabled()\"
|
|
1
|
+
{"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n @for (chip of [1, 2]; track $index) {\n <mat-chip [color]=\"color()\" [disabled]=\"disabled()\">\n chip {{ chip }}\n\n @if (!disabled()) {\n <button matChipRemove [attr.aria-label]=\"`remove item ${chip}`\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-chip>\n }\n</mat-chip-set>\n","demo-chips.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { MatIcon } from '@angular/material/icon';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips',\n standalone: true,\n imports: [\n FormsModule,\n MatChipsModule,\n DragDropModule,\n OnemRvaColorDirective,\n MatIcon,\n ],\n templateUrl: './demo-chips.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsComponent extends DemoComponentBase {\n readonly color = input<OnemrvaMatColor>('');\n\n readonly disabled = input(false);\n}\n"}
|
package/assets/json/drawer.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-drawer-content.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 <div 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 </div>\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-drawer-content.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/layout';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\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-drawer-content.component.html',\n
|
|
1
|
+
{"demo-drawer-content.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 <div 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 </div>\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-drawer-content.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/layout';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\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-drawer-content.component.html',\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 DemoDrawerContentComponent extends DemoComponentBase {\n readonly myForm = input.required<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-drawer.component.html":"<!-- !! The layout already contains a mat-drawer-container -->\n<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost />\n </mat-drawer>\n <mat-drawer-content>\n <div style=\"height: 60vh\">\n <button\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n [attr.data-cy]=\"'click-me'\"\n >\n Open form\n </button>\n </div>\n </mat-drawer-content>\n</mat-drawer-container>\n","demo-drawer.component.ts":"import {\n AfterViewInit,\n Component,\n ComponentRef,\n inject,\n ViewEncapsulation,\n viewChild,\n input,\n effect,\n} from '@angular/core';\nimport {\n DrawerHostDirective,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system/layout';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';\n\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';\nimport {\n MatDrawer,\n MatDrawerContainer,\n MatDrawerContent,\n} from '@angular/material/sidenav';\nimport { DemoDrawerContentComponent } from './demo-drawer-content.component';\n\n@Component({\n selector: 'app-demo-drawer',\n templateUrl: 'demo-drawer.component.html',\n imports: [\n RouterModule,\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n DrawerHostDirective,\n MatDrawer,\n MatDrawerContainer,\n MatDrawerContent,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n drawerService = inject(OnemrvaDrawerService);\n componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n // private readonly size\n readonly size = input<OnemrvaMatSize>(OnemrvaMatSize.XLARGE);\n\n private readonly drawer = viewChild<MatDrawer>('mainDrawer');\n\n private readonly drawerHost = viewChild(DrawerHostDirective);\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n constructor() {\n effect(() => {\n this.drawerService.size.set(this.size());\n });\n }\n\n ngAfterViewInit(): void {\n const drawer = this.drawer();\n if (drawer) {\n this.drawerService.setDrawer(drawer);\n }\n const drawerHost = this.drawerHost();\n if (drawerHost) {\n this.drawerService.host = drawerHost;\n }\n }\n\n toggleForm() {\n if (!this.componentRef) {\n this.componentRef = this.drawerService.host?.createComponent(\n DemoDrawerContentComponent,\n );\n if (this.componentRef) {\n this.componentRef.setInput('myForm', this.dummyForm);\n }\n }\n if (!this.componentRef) {\n console.error('Drawer host is not available.');\n return;\n }\n this.componentRef.setInput('myForm', this.dummyForm);\n\n this.drawerService.toggle();\n }\n\n help() {\n alert('HELP');\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-file-panel.component.html":"<file-panel
|
|
1
|
+
{"demo-file-panel.component.html":"<file-panel\n [file]=\"getFile()\"\n [actions]=\"actions()\"\n (panelClick)=\"onPanelClick()\"\n [disabled]=\"disabled()\"\n [displayDate]=\"'02/06/22 07:51 PM'\"\n/>\n","demo-file-panel.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n convertToReferencedProgressFile,\n ReferencedProgressFile,\n OnemrvaMatFileUploadModule,\n ActionConfig,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n /**\n * Document reference in document service\n */\n documentId?: string;\n /**\n * Name of the document\n */\n name?: string;\n}\n\n@Component({\n selector: 'app-demo-file-panel',\n templateUrl: 'demo-file-panel.component.html',\n\n standalone: true,\n imports: [MatButtonModule, OnemrvaMatFileUploadModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n readonly color = input<'' | 'warn' | 'success' | 'error'>('');\n\n readonly disabled = input<boolean>(false);\n\n testFile: Annex = {\n documentId: '1',\n name: 'archives.doc',\n };\n\n successFile: ReferencedProgressFile = {\n ref: Symbol('1'),\n enableProgressBar: false,\n id: '1',\n message: '',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Success',\n file: undefined,\n color: 'success',\n maxSize: 100,\n };\n\n errorFile: ReferencedProgressFile = {\n ref: Symbol('2'),\n enableProgressBar: false,\n id: '2',\n message: 'This is how an error file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Error',\n file: undefined,\n color: 'error',\n maxSize: 100,\n };\n\n warnFile: ReferencedProgressFile = {\n ref: Symbol('3'),\n enableProgressBar: false,\n id: '3',\n message: 'This is how a warn file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Warn',\n file: undefined,\n color: 'warn',\n maxSize: 100,\n };\n\n convertToProgressFile(annex: Annex) {\n return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n }\n\n getFile() {\n switch (this.color()) {\n case 'success':\n return this.successFile;\n case 'error':\n return this.errorFile;\n case 'warn':\n return this.warnFile;\n default:\n return this.convertToProgressFile(this.testFile);\n }\n }\n\n onPanelClick() {\n console.log('panel clicked');\n }\n\n actions(): ActionConfig[] {\n return [\n {\n iconName: 'download', // angular material name\n dataCy: 'download-action',\n tooltipCode: 'file.panel.download',\n ariaCode: 'aria-code',\n clickHandler: (file: ReferencedProgressFile) => {\n console.log('clickhandler', file);\n },\n showAction: (file: ReferencedProgressFile) => {\n console.log('file', file);\n return true;\n },\n },\n {\n iconName: 'delete', // angular material name\n dataCy: 'delete-action',\n tooltipCode: 'file.panel.download',\n ariaCode: 'aria-code',\n clickHandler: (file: ReferencedProgressFile) => {\n console.log('clickhandler', file);\n },\n showAction: (file: ReferencedProgressFile) => {\n console.log('file', file);\n return true;\n },\n },\n ];\n }\n}\n"}
|