@onemrvapublic/design-system-demos 20.7.0-develop.1 → 20.7.0-develop.11
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/button-toggle.json +1 -1
- package/assets/json/dialog-content.json +1 -1
- package/assets/json/dialog.json +1 -1
- package/assets/json/drawer.json +1 -1
- package/assets/json/jsonform.json +1 -1
- package/assets/json/layout.json +1 -1
- package/main.js +3 -3
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-button-toggle.component.html":"<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n <mat-button-toggle value=\"
|
|
1
|
+
{"demo-button-toggle.component.html":"<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n @for (toggle of toggles(); track $index) {\n <mat-button-toggle value=\"{{ toggle }}\">\n @if (type() === 'text') {\n {{ toggle }}\n } @else {\n <mat-icon>{{ toggle }}</mat-icon>\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n","demo-button-toggle.component.ts":"import {\n Component,\n effect,\n input,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatIcon } from '@angular/material/icon';\n\n@Component({\n selector: 'app-demo-button-toggle',\n templateUrl: 'demo-button-toggle.component.html',\n\n standalone: true,\n imports: [CommonModule, MatButtonToggleModule, MatIcon],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonToggleComponent extends DemoComponentBase {\n textToggles = ['Bold', 'Italic', 'Underline'];\n iconToggles = ['format_bold', 'format_italic', 'format_underlined'];\n\n type = input('text');\n toggles = signal(this.textToggles);\n\n constructor() {\n super();\n effect(() => {\n if (this.type() === 'text') {\n this.toggles.set(this.textToggles);\n } else {\n this.toggles.set(this.iconToggles);\n }\n });\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-dialog-content.component.html":"<
|
|
1
|
+
{"demo-dialog-content.component.html":"<div mat-dialog-title>\n I Have a Dream<span matDialogClose class=\"close-dialog\"\n ><mat-icon>close</mat-icon></span\n >\n</div>\n\n<mat-dialog-content>\n @if (panelSize === 'medium' || panelSize === 'small') {\n <span>\n I have a dream that one day this nation will rise up and live out the true\n meaning of its creed: \"We hold these truths to be self-evident, that all\n men are created equal.\"</span\n >\n } @else {\n <ng-container>\n I have a dream that one day this nation will rise up and live out the true\n meaning of its creed: \"We hold these truths to be self-evident, that all\n men are created equal.\" I have a dream that one day on the red hills of\n Georgia, the sons of former slaves and the sons of former slave owners\n will be able to sit down together at the table of brotherhood. I have a\n dream that one day even the state of Mississippi, a state sweltering with\n the heat of injustice, sweltering with the heat of oppression, will be\n transformed into an oasis of freedom and justice. I have a dream that my\n four little children will one day live in a nation where they will not be\n judged by the color of their skin but by the content of their character. I\n have a dream today! I have a dream that one day, down in Alabama, with its\n vicious racists, with its governor having his lips dripping with the words\n of \"interposition\" and \"nullification\" -- one day right there in Alabama\n little black boys and black girls will be able to join hands with little\n white boys and white girls as sisters and brothers. I have a dream\n today!</ng-container\n >\n }\n</mat-dialog-content>\n<mat-dialog-actions>\n <button mat-button color=\"primary\">Cancel</button>\n <button mat-flat-button color=\"accent\">OK</button>\n</mat-dialog-actions>\n","demo-dialog-content.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-content-dialog',\n templateUrl: 'demo-dialog-content.component.html',\n standalone: true,\n imports: [MatIcon, MatDialogModule, MatButton],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogContentComponent extends DemoComponentBase {\n panelSize!: string;\n panelType!: string;\n\n data = inject(MAT_DIALOG_DATA, { optional: true });\n\n constructor() {\n super();\n // Handle case where component is used outside of dialog context\n this.panelSize = this.data?.panelSize || 'medium';\n this.panelType = this.data?.panelType || 'default';\n }\n}\n"}
|
package/assets/json/dialog.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-dialog.component.html":"<button\n mat-flat-button\n color=\"accent\"\n (click)=\"openDialog(size, type)\"\n data-cy=\"click-me\"\n>\n Open Dialog\n</button>\n","demo-dialog.component.ts":"import {\n Component,\n ViewEncapsulation,\n OnDestroy,\n Input,\n inject,\n} from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { Subject, take } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\nimport { DemoDialogContentComponent } from '../dialog-content';\nimport {\n OnemrvaMatColor,\n OnemrvaMatSize,\n} from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-dialog',\n templateUrl: 'demo-dialog.component.html',\n\n standalone: true,\n imports: [CommonModule, FormsModule, MatDialogModule, MatButton],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogComponent\n extends DemoComponentBase\n implements OnDestroy\n{\n destroyNotifier$: Subject<void> = new Subject<void>();\n\n dialog = inject(MatDialog);\n\n @Input()\n size: OnemrvaMatSize = 'medium';\n @Input()\n type: OnemrvaMatColor = '';\n\n ngOnDestroy(): void {\n this.destroyNotifier$.next();\n this.destroyNotifier$.complete();\n }\n\n openDialog(\n panelSize: OnemrvaMatSize = 'medium',\n panelType: OnemrvaMatColor = '',\n ) {\n const panelClass: string[] = [];\n panelClass.push(panelSize);\n if (panelType !== '') {\n panelClass.push(`mat-${panelType}`);\n }\n const dialogRef = this.dialog.open(DemoDialogContentComponent, {\n data: { panelSize: panelSize, panelType: panelType },\n panelClass,\n });\n dialogRef\n .afterClosed()\n .pipe(take(1))\n .subscribe(() => {\n console.log('closed');\n });\n }\n}\n"}
|
|
1
|
+
{"demo-dialog.component.html":"<button\n mat-flat-button\n color=\"accent\"\n (click)=\"openDialog(size, type)\"\n data-cy=\"click-me\"\n>\n Open Dialog\n</button>\n","demo-dialog.component.ts":"import {\n Component,\n ViewEncapsulation,\n OnDestroy,\n Input,\n inject,\n} from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { Subject, take } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\nimport { DemoDialogContentComponent } from '../dialog-content';\nimport {\n OnemrvaMatColor,\n OnemrvaMatSize,\n} from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-dialog',\n templateUrl: 'demo-dialog.component.html',\n\n standalone: true,\n imports: [CommonModule, FormsModule, MatDialogModule, MatButton],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogComponent\n extends DemoComponentBase\n implements OnDestroy\n{\n destroyNotifier$: Subject<void> = new Subject<void>();\n\n dialog = inject(MatDialog);\n\n @Input()\n size: OnemrvaMatSize = 'medium';\n @Input()\n type: OnemrvaMatColor = '';\n\n ngOnDestroy(): void {\n this.destroyNotifier$.next();\n this.destroyNotifier$.complete();\n }\n\n openDialog(\n panelSize: OnemrvaMatSize = 'medium',\n panelType: OnemrvaMatColor = '',\n ) {\n const panelClass: string[] = [];\n panelClass.push(`${panelSize}`);\n\n if (panelType !== '') {\n panelClass.push(`mat-${panelType}`);\n }\n const dialogRef = this.dialog.open(DemoDialogContentComponent, {\n data: { panelSize: panelSize, panelType: panelType },\n panelClass,\n });\n dialogRef\n .afterClosed()\n .pipe(take(1))\n .subscribe(() => {\n console.log('closed');\n });\n }\n}\n"}
|
package/assets/json/drawer.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-drawer
|
|
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"}
|
|
@@ -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
|
|
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
|
@@ -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"}
|