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

package/3rdpartylicenses.txt

@@ -173,6 +173,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
+@angular/material-luxon-adapter
+MIT
+The MIT License
+
+Copyright (c) 2025 Google LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
 @angular/platform-browser
 MIT
 The MIT License
@@ -475,10 +500,12 @@ SOFTWARE.
 
 fast-uri
 BSD-3-Clause
-Copyright (c) 2021 The Fastify Team
 Copyright (c) 2011-2021, Gary Court until https://github.com/garycourt/uri-js/commit/a1acf730b4bba3f1097c9f52e7d9d3aba8cdcaae
+Copyright (c) 2021-present The Fastify team
 All rights reserved.
 
+The Fastify team members are listed at https://github.com/fastify/fastify#team.
+
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
     * Redistributions of source code must retain the above copyright

package/assets/i18n/en.json

@@ -139,7 +139,7 @@
   "input.bank": {
     "length": "Incorrect number of digits for this country",
     "checksum": "Bank account number invalid",
-    "invalid": "Field required"
+    "invalid": "Field invalid"
   },
   "input.phone": {
     "required": "Field required",

package/assets/json/bank-input.json

@@ -1 +1 @@
-{"demo-bank-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>IBAN</mat-label>\n\n  <onemrva-mat-input-iban [formControl]=\"accountNumber\">\n  </onemrva-mat-input-iban>\n\n  <mat-hint>hint</mat-hint>\n  @if (accountNumber.hasError('required')) {\n    <mat-error>\n      {{ 'input.bank.required' | translate }}\n    </mat-error>\n  }\n  @if (accountNumber.hasError('WrongBBANLength')) {\n    <mat-error>\n      {{ 'input.bank.length' | translate }}\n    </mat-error>\n  }\n  @if (accountNumber.hasError('NoIBANCountry')) {\n    <mat-error> NoIBANCountry </mat-error>\n  }\n  @if (\n    !accountNumber.hasError('WrongBBANLength') &&\n    (accountNumber.hasError('WrongBBANFormat') ||\n      accountNumber.hasError('WrongAccountBankBranchChecksum') ||\n      accountNumber.hasError('WrongIBANChecksum'))\n  ) {\n    <mat-error>\n      {{ 'input.bank.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-bank-input.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemrvaMatInputIbanComponent,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { bankAccountValidator } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-bank-input',\n  templateUrl: 'demo-bank-input.component.html',\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemrvaMatInputIbanComponent,\n    OnemRvaReadonlyDirective,\n  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBankInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  accountNumber = new FormControl('', [\n    Validators.required,\n    bankAccountValidator(),\n  ]);\n}\n"}
+{"demo-bank-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>IBAN</mat-label>\n\n  <onemrva-mat-input-iban [formControl]=\"accountNumber\">\n  </onemrva-mat-input-iban>\n\n  <mat-hint>hint</mat-hint>\n  @if (accountNumber.hasError('WrongBBANLength')) {\n    <mat-error>\n      {{ 'input.bank.length' | translate }}\n    </mat-error>\n  } @else if (\n    accountNumber.hasError('WrongBBANFormat') ||\n    accountNumber.hasError('WrongAccountBankBranchChecksum') ||\n    accountNumber.hasError('WrongIBANChecksum')\n  ) {\n    <mat-error> {{ 'input.bank.invalid' | translate }} ! </mat-error>\n  }\n  @if (accountNumber.hasError('NoIBANCountry')) {\n    <mat-error> NoIBANCountry </mat-error>\n  }\n  @if (accountNumber.hasError('required')) {\n    <mat-error>\n      {{ 'input.bank.required' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-bank-input.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemrvaMatInputIbanComponent,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { bankAccountValidator } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-bank-input',\n  templateUrl: 'demo-bank-input.component.html',\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemrvaMatInputIbanComponent,\n    OnemRvaReadonlyDirective,\n  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBankInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  accountNumber = new FormControl('', [\n    Validators.required,\n    bankAccountValidator(),\n  ]);\n}\n"}

package/assets/json/button-toggle.json

@@ -1 +1 @@
-{"demo-button-toggle.component.html":"<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n  <mat-button-toggle value=\"bold\">Bold</mat-button-toggle>\n  <mat-button-toggle value=\"italic\">Italic</mat-button-toggle>\n  <mat-button-toggle value=\"underline\">Underline</mat-button-toggle>\n</mat-button-toggle-group>\n","demo-button-toggle.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-toggle',\n  templateUrl: 'demo-button-toggle.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonToggleModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonToggleComponent extends DemoComponentBase {}\n"}
+{"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"}

package/assets/json/button.json

@@ -1 +1 @@
-{"demo-button.component.html":"@if (type() === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    class=\"{{ size() }}\"\n    aria-label=\"Action\"\n    [disabled]=\"disabled()\"\n  >\n    @if (icon() !== '') {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    Action\n  </button>\n} @else if (type() === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    class=\"{{ size() }}\"\n    aria-label=\"Normal\"\n    [disabled]=\"disabled()\"\n  >\n    @if (icon() !== '') {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    Normal\n  </button>\n} @else if (type() === 'text') {\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"{{ size() }}\"\n    aria-label=\"Basic\"\n    [disabled]=\"disabled()\"\n  >\n    @if (icon() !== '') {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    Basic\n  </button>\n}\n","demo-button.component.ts":"import {\n  Component,\n  effect,\n  input,\n  Input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\n\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button',\n  templateUrl: './demo-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaSharedModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonComponent extends DemoComponentBase {\n  type = input('outlined');\n  icon = input('');\n  size = input('');\n  disabled = input(false);\n}\n"}
+{"demo-button.component.html":"<p>Contained / Flat:</p>\n<button\n  mat-flat-button\n  color=\"accent\"\n  class=\"{{ size() }}\"\n  aria-label=\"Action\"\n  [disabled]=\"disabled()\"\n>\n  @if (icon() !== '') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  Action\n  @if (iconEnd() !== '') {\n    <mat-icon iconPositionEnd>{{ iconEnd() }}</mat-icon>\n  }\n</button>\n<p>Outlined / stroked:</p>\n<button\n  mat-stroked-button\n  color=\"primary\"\n  class=\"{{ size() }}\"\n  aria-label=\"Normal\"\n  [disabled]=\"disabled()\"\n>\n  @if (icon() !== '') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  Normal\n\n  @if (iconEnd() !== '') {\n    <mat-icon iconPositionEnd>{{ iconEnd() }}</mat-icon>\n  }\n</button>\n<p>Text:</p>\n<button\n  mat-button\n  color=\"primary\"\n  class=\"{{ size() }}\"\n  aria-label=\"Basic\"\n  [disabled]=\"disabled()\"\n>\n  Basic\n</button>\n","demo-button.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\n\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button',\n  templateUrl: './demo-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaSharedModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonComponent extends DemoComponentBase {\n  icon = input('');\n  iconEnd = input('');\n  size = input('');\n  disabled = input(false);\n}\n"}

package/assets/json/datepicker-luxon.json

@@ -1 +1 @@
-{"demo-datepicker-luxon.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" [formControl]=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-luxon.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { onemrvaDateLuxonProvider } from '@onemrvapublic/design-system/shared';\nimport { DateAdapter } from '@angular/material/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n  ],\n  providers: [onemrvaDateLuxonProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerLuxonComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl();\n\n  private readonly _adapter =\n    inject<DateAdapter<unknown, unknown>>(DateAdapter);\n\n  constructor() {\n    super();\n    const translateService = inject(TranslateService);\n    translateService.onLangChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this._adapter.setLocale(value.lang);\n      });\n  }\n\n  ngOnInit(): void {\n    this.date.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker-luxon.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" [formControl]=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-luxon.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { onemrvaDateLuxonProvider } from '@onemrvapublic/design-system/shared';\nimport { DateAdapter } from '@angular/material/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n  ],\n  providers: [onemrvaDateLuxonProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerLuxonComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl();\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  private readonly _adapter =\n    inject<DateAdapter<unknown, unknown>>(DateAdapter);\n\n  constructor() {\n    super();\n    const translateService = inject(TranslateService);\n    translateService.onLangChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this._adapter.setLocale(value.lang);\n      });\n  }\n\n  ngOnInit(): void {\n    this.date.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/dialog-content.json

@@ -1 +1 @@
-{"demo-dialog-content.component.html":"<h2 mat-dialog-title>\n  I Have a Dream<span matDialogClose class=\"close-dialog\"\n    ><mat-icon>close</mat-icon></span\n  >\n</h2>\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\n      true meaning of its creed: \"We hold these truths to be self-evident, that\n      all 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  @if (panelSize !== 'medium' && panelSize !== 'small') {\n    <button mat-button color=\"primary\">Tertiary</button>\n  }\n  <button mat-stroked-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"}
+{"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

@@ -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"}
+{"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

@@ -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"}
+{"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

@@ -1 +1 @@
-{"jsonform.html":"<jsonforms\n  [data]=\"data\"\n  [schema]=\"schema\"\n  [uischema]=\"uischema\"\n  [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component, effect, Input } 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';\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 = angularMaterialRenderers;\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  },\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: 'Control',\n      scope: '#/properties/name',\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/due_date',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/recurrence',\n        },\n      ],\n    },\n  ],\n};\n"}
+{"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

@@ -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"}
+{"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 &copy; 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"}

package/assets/json/phone-input.json

@@ -1 +1 @@
-{"demo-phone-input.component.html":"<onemrva-mat-input-phone\n  [readonly]=\"readonly\"\n  [phoneNumber]=\"form\"\n  label=\"{{ 'input.phone.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.phone.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.phone.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.phone.search' | translate }}\"\n  [defaultPrefix]=\"'+32'\"\n  hint=\" {{ 'input.phone.hint' | translate }}\"\n  (getCountry)=\"getCountry($event)\"\n></onemrva-mat-input-phone>\n","demo-phone-input.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-phone-input',\n  templateUrl: './demo-phone-input.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputPhoneComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = false;\n\n  form = new FormControl('', [Validators.required]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}
+{"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Phone number</mat-label>\n\n  <onemrva-mat-input-phone\n    [formControl]=\"form\"\n    (getCountry)=\"getCountry($event)\"\n    placeholder=\"+32 475 12 23 34\"\n  ></onemrva-mat-input-phone>\n\n  <mat-hint>hint</mat-hint>\n  @if (form.hasError('required')) {\n    <mat-error>\n      {{ 'input.phone.required' | translate }}\n    </mat-error>\n  } @else if (form.hasError('phoneNumber')) {\n    <mat-error>\n      {{ 'input.phone.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  OnemRvaReadonlyDirective,\n  phoneNumberValidator,\n} from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-phone-input',\n  templateUrl: './demo-phone-input.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputPhoneComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  disabled = input(false);\n\n  form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}