npm - @onemrvapublic/design-system-demos - Versions diffs - 21.7.5 → 21.7.6 - Mend

@onemrvapublic/design-system-demos 21.7.5 → 21.7.6

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.

Files changed (4) hide show

package/browser/assets/json/drawer.json +1 -1
package/browser/assets/json/layout.json +1 -1
package/browser/main.js +142 -145
package/package.json +1 -1

package/browser/assets/json/drawer.json CHANGED Viewed

	@@ -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 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	+ {"demo-drawer-content.component.html":"<section>\n <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-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\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</section>\n","demo-drawer-content.component.scss":":host > section {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\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 { 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 styleUrls: ['./demo-drawer-content.component.scss'],\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\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 Drawer\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"}

package/browser/assets/json/layout.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-layout.component.html":"<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' \| translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' \| translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' \| translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' \| translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' \| translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n Environment,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n OnemrvaLeftSidenavService,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n RouterOutlet,\n OnemrvaLayoutModule,\n MatIcon,\n MatTooltip,\n MatIconButton,\n TranslateModule,\n OverlayModule,\n RouterLink,\n MatMenuItem,\n OnemRvaColorDirective,\n OnemrvaMatNotificationComponent,\n ],\n templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n http = inject(HttpClient);\n route = inject(ActivatedRoute);\n\n // Use the drawer\n drawerService = inject(OnemrvaDrawerService);\n\n // Use the leftNav\n leftNav = inject(OnemrvaLeftSidenavService);\n\n navItems: NavItem[] = [\n {\n label: 'Home',\n icon: 'home',\n dataCy: 'home-nav',\n routerLink: '/',\n children: [],\n },\n ];\n\n profile: OnemRvaProfile;\n\n constructor() {\n /** create a new empty profile /\n this.profile = new OnemRvaProfile();\n this.leftNav.updateItems(this.navItems);\n }\n\n /\n Login\n /\n login() {\n this.profile.login('Anne', 'Onymous');\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 helpLink() {\n alert('?');\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 // DemoDrawerContentComponent,\n // );\n // componentRef~~!.instance.~~myForm = this.dummyForm;\n\n this.drawerService.toggle();\n }\n\n protected readonly Environment = Environment;\n}\n"}
1	+ {"demo-layout.component.html":"<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' \| translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' \| translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' \| translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' \| translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' \| translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button class=\"m-m\" mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, ComponentRef, effect, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n Environment,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n OnemrvaLeftSidenavService,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoDrawerContentComponent } from '../drawer';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n RouterOutlet,\n OnemrvaLayoutModule,\n MatIcon,\n MatTooltip,\n MatIconButton,\n TranslateModule,\n OverlayModule,\n RouterLink,\n MatMenuItem,\n OnemRvaColorDirective,\n OnemrvaMatNotificationComponent,\n MatButton,\n ],\n templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n http = inject(HttpClient);\n route = inject(ActivatedRoute);\n componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n // Use the drawer\n drawerService = inject(OnemrvaDrawerService);\n\n // Use the leftNav\n leftNav = inject(OnemrvaLeftSidenavService);\n\n navItems: NavItem[] = [\n {\n label: 'Home',\n icon: 'home',\n dataCy: 'home-nav',\n routerLink: '/',\n children: [],\n },\n ];\n\n profile: OnemRvaProfile;\n\n constructor() {\n /** create a new empty profile /\n this.profile = new OnemRvaProfile();\n\n effect(() => {\n this.leftNav.updateItems(this.navItems);\n });\n }\n\n /\n Login\n /\n login() {\n this.profile.login('Anne', 'Onymous');\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 helpLink() {\n alert('?');\n }\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n this.drawerService.size.set('xlarge');\n\n this.componentRef = this.drawerService.host?.createComponent(\n DemoDrawerContentComponent,\n );\n\n this.componentRef?.setInput('myForm', this.dummyForm);\n\n this.drawerService.toggle();\n }\n\n protected readonly Environment = Environment;\n}\n"}