npm - @onemrvapublic/design-system-demos - Versions diffs - 20.7.0-develop.4 → 20.7.0-develop.5 - Mend

@onemrvapublic/design-system-demos 20.7.0-develop.4 → 20.7.0-develop.5

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 (6) hide show

package/assets/json/drawer.json CHANGED Viewed

	@@ -1 +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	+ {"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 <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-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';\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-drawer-content.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 DemoDrawerContentComponent 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-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></ng-template>\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 ViewChild,\n inject,\n ViewEncapsulation,\n} from '@angular/core';\nimport {\n DrawerHostDirective,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\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';\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 standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\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 @ViewChild('mainDrawer', { static: true })\n private drawer?: MatDrawer;\n\n @ViewChild(DrawerHostDirective, { static: true })\n private drawerHost?: DrawerHostDirective;\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n ngAfterViewInit(): void {\n if (this.drawer) {\n this.drawerService.setDrawer(this.drawer);\n }\n if (this.drawerHost) {\n this.drawerService.host = this.drawerHost;\n }\n }\n\n toggleForm() {\n if (!this.componentRef) {\n this.componentRef = this.drawerService.host?.createComponent(\n DemoDrawerContentComponent,\n );\n }\n if (!this.componentRef) {\n console.error('Drawer host is not available.');\n return;\n }\n this.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"}

package/assets/json/jsonform.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"jsonform.html":"<jsonforms\n [data]=\"data\"\n [schema]=\"schema\"\n [uischema]=\"uischema\"\n [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n CheckboxRendererComponent,\n checkboxTester,\n customLabelTester,\n DatepickerRendererComponent,\n DatePickerRendererTester,\n enumControlTester,\n EnumRendererComponent,\n ibanControlTester,\n IbanRendererComponent,\n LabelRendererComponent,\n nissControlTester,\n NissRendererComponent,\n phoneControllerTester,\n PhoneRendererComponent,\n RadioButtonRendererComponent,\n radioButtonTester,\n ReadonlyControlRendererComponent,\n readonlyControlTester,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-jsonform',\n templateUrl: './jsonform.html',\n standalone: true,\n imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n renderers = [\n ...angularMaterialRenderers,\n {\n tester: readonlyControlTester,\n renderer: ReadonlyControlRendererComponent,\n },\n { tester: enumControlTester, renderer: EnumRendererComponent },\n { tester: nissControlTester, renderer: NissRendererComponent },\n { tester: ibanControlTester, renderer: IbanRendererComponent },\n { tester: customLabelTester, renderer: LabelRendererComponent },\n { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n { tester: checkboxTester, renderer: CheckboxRendererComponent },\n { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n ];\n\n uischema = uischema;\n schema = schema;\n\n data = {};\n}\n","schema.form.ts":"export const schema = {\n type: 'object',\n properties: {\n exampleRadioEnum: {\n type: 'string',\n enum: ['One', 'Two', 'Three'],\n },\n name: {\n type: 'string',\n minLength: 1,\n },\n done: {\n type: 'boolean',\n },\n due_date: {\n type: 'string',\n format: 'date',\n },\n recurrence: {\n type: 'string',\n enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n },\n phone: {\n type: 'string',\n ~~value: '',\n~~ },\n niss: {\n type: 'string',\n },\n iban: {\n type: 'string',\n },\n },\n required: ['name', 'due_date'],\n};\n","uischema.form.ts":"export const uischema = {\n type: 'VerticalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/exampleRadioEnum',\n options: {\n format: 'radio',\n },\n },\n {\n type: 'Control',\n label: false,\n scope: '#/properties/done',\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/name',\n },\n {\n type: 'Control',\n scope: '#/properties/phone',\n },\n ],\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/due_date',\n },\n {\n type: 'Control',\n scope: '#/properties/niss',\n },\n {\n type: 'Control',\n scope: '#/properties/iban',\n },\n {\n type: 'Control',\n scope: '#/properties/recurrence',\n },\n ],\n },\n ],\n};\n"}
1	+ {"jsonform.html":"<jsonforms\n [data]=\"data\"\n [schema]=\"schema\"\n [uischema]=\"uischema\"\n [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n CheckboxRendererComponent,\n checkboxTester,\n customLabelTester,\n DatepickerRendererComponent,\n DatePickerRendererTester,\n enumControlTester,\n EnumRendererComponent,\n ibanControlTester,\n IbanRendererComponent,\n LabelRendererComponent,\n nissControlTester,\n NissRendererComponent,\n phoneControllerTester,\n PhoneRendererComponent,\n RadioButtonRendererComponent,\n radioButtonTester,\n ReadonlyControlRendererComponent,\n readonlyControlTester,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-jsonform',\n templateUrl: './jsonform.html',\n standalone: true,\n imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n renderers = [\n ...angularMaterialRenderers,\n {\n tester: readonlyControlTester,\n renderer: ReadonlyControlRendererComponent,\n },\n { tester: enumControlTester, renderer: EnumRendererComponent },\n { tester: nissControlTester, renderer: NissRendererComponent },\n { tester: ibanControlTester, renderer: IbanRendererComponent },\n { tester: customLabelTester, renderer: LabelRendererComponent },\n { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n { tester: checkboxTester, renderer: CheckboxRendererComponent },\n { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n ];\n\n uischema = uischema;\n schema = schema;\n\n data = {};\n}\n","schema.form.ts":"export const schema = {\n type: 'object',\n properties: {\n exampleRadioEnum: {\n type: 'string',\n enum: ['One', 'Two', 'Three'],\n },\n name: {\n type: 'string',\n minLength: 1,\n },\n done: {\n type: 'boolean',\n },\n due_date: {\n type: 'string',\n format: 'date',\n },\n recurrence: {\n type: 'string',\n enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n },\n phone: {\n type: 'string',\n },\n niss: {\n type: 'string',\n },\n iban: {\n type: 'string',\n },\n },\n required: ['name', 'due_date', 'phone'],\n};\n","uischema.form.ts":"export const uischema = {\n type: 'VerticalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/exampleRadioEnum',\n options: {\n format: 'radio',\n },\n },\n {\n type: 'Control',\n label: false,\n scope: '#/properties/done',\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/name',\n },\n {\n type: 'Control',\n scope: '#/properties/phone',\n },\n ],\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/due_date',\n },\n {\n type: 'Control',\n scope: '#/properties/niss',\n },\n {\n type: 'Control',\n scope: '#/properties/iban',\n },\n {\n type: 'Control',\n scope: '#/properties/recurrence',\n },\n ],\n },\n ],\n};\n"}

package/assets/json/layout.json CHANGED Viewed

	@@ -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.toggle();\n }\n\n help() {\n alert('HELP');\n }\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 <!-- 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 <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' \| translate\"\n >\n </onemrva-layout-route>\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' \| translate\"\n >\n </onemrva-layout-route>\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></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';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n Environment,\n NavItem,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n OnemrvaLeftSidenavService,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { DemoDrawerContentComponent } from '../drawer';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n CommonModule,\n RouterOutlet,\n OnemrvaLayoutModule,\n MatIcon,\n MatTooltip,\n MatIconButton,\n TranslateModule,\n OverlayModule,\n RouterLink,\n MatMenuItem,\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"}