@onemrvapublic/design-system-demos 21.7.0-develop.1 → 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/drawer.json +1 -1
- package/main.js +2 -2
- package/package.json +1 -1
- package/styles.css +1 -1
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"}
|