@onemrvapublic/design-system-demos 21.7.0-develop.1 → 21.7.0-develop.3
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-new","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","form","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","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","select","selectable-box","selectable-box-large","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"]
|
|
1
|
+
["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-new","card-table","carousel","checkbox","chips","chips-input","choice-chips","collapsible-page-divider","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","form","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","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","select","selectable-box","selectable-box-large","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"]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"demo-badge.component.html":"<div [matBadge]=\"_value()\" [matBadgeSize]=\"_size()\">\n Here is your badge demo {{ value() }}\n</div>\n","demo-badge.component.ts":"import { Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatBadge } from '@angular/material/badge';\n\n@Component({\n selector: 'app-demo-badge',\n templateUrl: 'demo-badge.component.html',\n imports: [\n MatFormFieldModule,\n ReactiveFormsModule,\n MatInputModule,\n TranslateModule,\n MatBadge,\n ],\n standalone: true,\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBadgeComponent extends DemoComponentBase {\n value = input<number>(0);\n\n protected _value = computed(() => {\n if (this.value() === 0) return '';\n\n return this.value() > 99 ? '99+' : this.value();\n });\n\n protected _size = () => {\n return this.value() > 1 ? 'large' : 'small';\n };\n}\n"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"demo-collapsible-page-divider.component.html":"<onemrva-collapsible-page-divider\n title=\"Demande n°1 - 01/01/2020\"\n [stickerText]=\"stickerText\"\n [stickerColor]=\"color()\"\n [isCollapsed]=\"true\"\n>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n <p>This is the content of the first collapsible divider.</p>\n</onemrva-collapsible-page-divider>\n","demo-collapsible-page-divider.component.scss":"app-demo-collapsible-page-divider {\n width: 100%;\n}\n","demo-collapsible-page-divider.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { OnemrvaCollapsiblePageDivider } from '@onemrvapublic/design-system/collapsible-page-divider';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\n\n@Component({\n selector: 'app-demo-collapsible-page-divider',\n templateUrl: './demo-collapsible-page-divider.component.html',\n styleUrls: ['./demo-collapsible-page-divider.component.scss'],\n imports: [OnemrvaCollapsiblePageDivider, MatButtonModule, MatIconModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCollapsiblePageDividerComponent extends DemoComponentBase {\n readonly color = input(OnemrvaMatColor.PRIMARY);\n readonly hasSticker = input(true);\n\n get stickerText() {\n return this.hasSticker() ? 'Your Status Goes Here' : '';\n }\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\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
|
|
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 ariaLabel: 'Download file',\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 ariaLabel: 'Delete file',\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"}
|