@onemrvapublic/design-system-demos 20.11.3 → 21.0.0-develop.10

package/3rdpartylicenses.txt

@@ -2,7 +2,7 @@
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -52,7 +52,7 @@ THE SOFTWARE.
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -77,7 +77,7 @@ THE SOFTWARE.
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -102,7 +102,7 @@ THE SOFTWARE.
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -127,7 +127,7 @@ THE SOFTWARE.
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -202,7 +202,7 @@ THE SOFTWARE.
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -227,7 +227,7 @@ THE SOFTWARE.
 MIT
 The MIT License
 
-Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/assets/i18n/de.json

@@ -71,8 +71,8 @@
     "search.input.label": "Suche"
   },
   "paginator": {
-    "Previous": "< Previous",
-    "Next": "Next >",
+    "Previous": "Previous",
+    "Next": "Next",
     "records.per.page": "Elemente pro Seite",
     "outOf": "out of"
   },

package/assets/i18n/en.json

@@ -71,8 +71,8 @@
     "search.input.label": "Search"
   },
   "paginator": {
-    "Previous": "< Previous",
-    "Next": "Next >",
+    "Previous": "Previous",
+    "Next": "Next",
     "records.per.page": "Elements per page",
     "outOf": "out of"
   },

package/assets/i18n/fr.json

@@ -71,8 +71,8 @@
     "search.input.label": "Recherche"
   },
   "paginator": {
-    "Previous": "< Précédent",
-    "Next": "Suivant >",
+    "Previous": "Précédent",
+    "Next": "Suivant",
     "records.per.page": "Eléments par page",
     "outOf": "de"
   },

package/assets/i18n/nl.json

@@ -71,8 +71,8 @@
     "search.input.label": "Search"
   },
   "paginator": {
-    "Previous": "< Vorig",
-    "Next": "Next >",
+    "Previous": "Vorig",
+    "Next": "Next",
     "records.per.page": "Elementen per pagina",
     "outOf": "out of"
   },

package/assets/json/address-input.json

@@ -1 +1 @@
-{"demo-address-input.component.html":"<onemrva-mat-input-address\n  style=\"width: 100%; display: block\"\n  [address]=\"addressControl\"\n  (getAddress)=\"onAddressSelected($event)\"\n>\n</onemrva-mat-input-address>\n","demo-address-input.component.ts":"import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system/mat-input-address';\nimport { OSMResult } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-address-input',\n  templateUrl: './demo-address-input.component.html',\n  standalone: true,\n  imports: [OnemrvaMatInputAddressComponent],\n})\nexport class DemoAddressInputComponent extends DemoComponentBase {\n  addressControl = new FormControl('');\n\n  onAddressSelected(result: OSMResult) {\n    this.output.set(result);\n  }\n}\n"}
+{"demo-address-input.component.html":"<onemrva-mat-input-address\n  style=\"width: 100%; display: block\"\n  [address]=\"addressControl\"\n  (getAddress)=\"onAddressSelected($event)\"\n/>\n","demo-address-input.component.ts":"import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system/mat-input-address';\nimport { OSMResult } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-address-input',\n  templateUrl: './demo-address-input.component.html',\n  standalone: true,\n  imports: [OnemrvaMatInputAddressComponent],\n})\nexport class DemoAddressInputComponent extends DemoComponentBase {\n  addressControl = new FormControl('');\n\n  onAddressSelected(result: OSMResult) {\n    this.output.set(result);\n  }\n}\n"}

package/assets/json/autocomplete.json

@@ -1 +1 @@
-{"demo-autocomplete.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Nom, prénom</mat-label>\n  <input\n    type=\"text\"\n    placeholder=\"Nom, prénom\"\n    aria-label=\"Number\"\n    matInput\n    [formControl]=\"myControl\"\n    [matAutocomplete]=\"auto\"\n  />\n  <mat-hint>Nom, prénom</mat-hint>\n  <mat-icon matSuffix>search</mat-icon>\n  <mat-autocomplete\n    autoActiveFirstOption\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"300\"\n  >\n    @for (option of filteredOptions | async; track option['name']) {\n      <mat-option\n        [value]=\"option['name'] | formatString\"\n        style=\"height: 62px; padding-top: 15px; font-size: 16px\"\n      >\n        <onemrva-mat-avatar\n          initials=\"LS\"\n          color=\"accent\"\n          size=\"extrasmall\"\n          style=\"vertical-align: top; margin: 1px 10px 0 0\"\n        ></onemrva-mat-avatar>\n        <div style=\"display: inline-block; height: 34px\">\n          <div\n            style=\"display: block; line-height: 18px\"\n            [innerHTML]=\"option['name']\"\n          ></div>\n          <div\n            style=\"font-size: 14px; line-height: 16px\"\n            [innerHTML]=\"option['email']\"\n          ></div>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-autocomplete.component.ts":"import { Component, ViewEncapsulation, OnInit, input } from '@angular/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\n\nimport {\n  MatFormField,\n  MatHint,\n  MatLabel,\n  MatSuffix,\n} from '@angular/material/form-field';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport {\n  MatAutocompleteModule,\n  MatAutocompleteTrigger,\n} from '@angular/material/autocomplete';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { Observable } from 'rxjs';\nimport { FormatStringPipe } from './format.pipe';\nimport { map, startWith } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-autocomplete',\n  templateUrl: 'demo-autocomplete.component.html',\n  standalone: true,\n  imports: [\n    OnemrvaMatAvatarModule,\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatFormField,\n    MatLabel,\n    FormsModule,\n    MatAutocompleteTrigger,\n    MatHint,\n    MatIcon,\n    MatInput,\n    MatSuffix,\n    AsyncPipe,\n    FormatStringPipe,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAutocompleteComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly = input(false);\n\n  myControl = new FormControl('');\n\n  options = [\n    { name: 'James Bond', email: 'james@onem.be' },\n    { name: 'Marleen Offergelt', email: 'offergelt.marleen@onem.be' },\n    { name: 'Barack Obama', email: 'barack@onem.be' },\n    { name: 'Donald Trump', email: 'donald@onem.be' },\n  ];\n\n  filteredOptions?: Observable<Record<string, string>[]>;\n\n  constructor() {\n    super();\n  }\n\n  ngOnInit() {\n    this.filteredOptions = this.myControl.valueChanges.pipe(\n      startWith(''),\n      map(value => this.getDataFromServer(value || '')),\n    );\n  }\n\n  private getDataFromServer(value: string): Record<string, string>[] {\n    const filterValue = value.toLowerCase();\n\n    return this.options\n      .filter(option =>\n        Object.values(option)\n          .map(x => x.toLowerCase().includes(filterValue))\n          .includes(true),\n      )\n      .map(option => {\n        return {\n          name: this.highlightPattern(option['name'], filterValue),\n          email: this.highlightPattern(option['email'], filterValue),\n        };\n      });\n  }\n\n  private highlightPattern(textIn: string, filterValue: string): string {\n    if (filterValue === '') return textIn;\n\n    const idx = textIn.toLowerCase().indexOf(filterValue);\n\n    if (idx === -1) return textIn;\n\n    return (\n      textIn.slice(0, idx) +\n      '<mark>' +\n      textIn.slice(idx, idx + filterValue.length) +\n      '</mark>' +\n      this.highlightPattern(textIn.slice(idx + filterValue.length), filterValue)\n    );\n  }\n\n  displayFn(option: Record<string, string>) {\n    return option['name'];\n  }\n}\n","format.pipe.ts":"import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'formatString',\n  standalone: true,\n})\nexport class FormatStringPipe implements PipeTransform {\n  transform(text: string): string {\n    return text.replace(/<[^>]*>?/gm, '');\n  }\n}\n"}
+{"demo-autocomplete.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Nom, prénom</mat-label>\n  <input\n    type=\"text\"\n    placeholder=\"Nom, prénom\"\n    aria-label=\"Number\"\n    matInput\n    [formControl]=\"myControl\"\n    [matAutocomplete]=\"auto\"\n  />\n  <mat-hint>Nom, prénom</mat-hint>\n  <mat-icon matSuffix>search</mat-icon>\n  <mat-autocomplete\n    autoActiveFirstOption\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"300\"\n  >\n    @for (option of filteredOptions | async; track option['name']) {\n      <mat-option\n        [value]=\"option['name'] | formatString\"\n        style=\"height: 62px; padding-top: 15px; font-size: 16px\"\n      >\n        <onemrva-mat-avatar\n          initials=\"LS\"\n          color=\"accent\"\n          size=\"extrasmall\"\n          style=\"vertical-align: top; margin: 1px 10px 0 0\"\n        />\n        <div style=\"display: inline-block; height: 34px\">\n          <div\n            style=\"display: block; line-height: 18px\"\n            [innerHTML]=\"option['name']\"\n          ></div>\n          <div\n            style=\"font-size: 14px; line-height: 16px\"\n            [innerHTML]=\"option['email']\"\n          ></div>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-autocomplete.component.ts":"import { Component, ViewEncapsulation, OnInit, input } from '@angular/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\n\nimport {\n  MatFormField,\n  MatHint,\n  MatLabel,\n  MatSuffix,\n} from '@angular/material/form-field';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport {\n  MatAutocompleteModule,\n  MatAutocompleteTrigger,\n} from '@angular/material/autocomplete';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { Observable } from 'rxjs';\nimport { FormatStringPipe } from './format.pipe';\nimport { map, startWith } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-autocomplete',\n  templateUrl: 'demo-autocomplete.component.html',\n  standalone: true,\n  imports: [\n    OnemrvaMatAvatarModule,\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatFormField,\n    MatLabel,\n    FormsModule,\n    MatAutocompleteTrigger,\n    MatHint,\n    MatIcon,\n    MatInput,\n    MatSuffix,\n    AsyncPipe,\n    FormatStringPipe,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAutocompleteComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly = input(false);\n\n  myControl = new FormControl('');\n\n  options = [\n    { name: 'James Bond', email: 'james@onem.be' },\n    { name: 'Marleen Offergelt', email: 'offergelt.marleen@onem.be' },\n    { name: 'Barack Obama', email: 'barack@onem.be' },\n    { name: 'Donald Trump', email: 'donald@onem.be' },\n  ];\n\n  filteredOptions?: Observable<Record<string, string>[]>;\n\n  constructor() {\n    super();\n  }\n\n  ngOnInit() {\n    this.filteredOptions = this.myControl.valueChanges.pipe(\n      startWith(''),\n      map(value => this.getDataFromServer(value || '')),\n    );\n  }\n\n  private getDataFromServer(value: string): Record<string, string>[] {\n    const filterValue = value.toLowerCase();\n\n    return this.options\n      .filter(option =>\n        Object.values(option)\n          .map(x => x.toLowerCase().includes(filterValue))\n          .includes(true),\n      )\n      .map(option => {\n        return {\n          name: this.highlightPattern(option['name'], filterValue),\n          email: this.highlightPattern(option['email'], filterValue),\n        };\n      });\n  }\n\n  private highlightPattern(textIn: string, filterValue: string): string {\n    if (filterValue === '') return textIn;\n\n    const idx = textIn.toLowerCase().indexOf(filterValue);\n\n    if (idx === -1) return textIn;\n\n    return (\n      textIn.slice(0, idx) +\n      '<mark>' +\n      textIn.slice(idx, idx + filterValue.length) +\n      '</mark>' +\n      this.highlightPattern(textIn.slice(idx + filterValue.length), filterValue)\n    );\n  }\n\n  displayFn(option: Record<string, string>) {\n    return option['name'];\n  }\n}\n","format.pipe.ts":"import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'formatString',\n  standalone: true,\n})\nexport class FormatStringPipe implements PipeTransform {\n  transform(text: string): string {\n    return text.replace(/<[^>]*>?/gm, '');\n  }\n}\n"}

package/assets/json/avatar.json

@@ -1 +1 @@
-{"demo-avatar.component.html":"<onemrva-mat-avatar\n  [initials]=\"initials\"\n  [text]=\"text\"\n  [size]=\"size\"\n  [src]=\"src\"\n  [icon]=\"icon\"\n  [color]=\"color\"\n></onemrva-mat-avatar>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, Input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-avatar',\n  templateUrl: 'demo-avatar.component.html',\n  standalone: true,\n  imports: [\n    OnemrvaMatAvatarModule,\n    OnemRvaColorDirective,\n    OnemRvaSizeDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n  @Input() initials = 'TC';\n  @Input() text = '';\n  @Input() size: 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' = 'medium';\n  @Input() src = '';\n  @Input() icon = '';\n  @Input() color: OnemrvaMatColor = 'accent';\n}\n"}
+{"demo-avatar.component.html":"<onemrva-mat-avatar\n  [initials]=\"initials()\"\n  [text]=\"text()\"\n  [size]=\"size()\"\n  [src]=\"src()\"\n  [icon]=\"icon()\"\n  [color]=\"color()\"\n/>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-avatar',\n  templateUrl: 'demo-avatar.component.html',\n  standalone: true,\n  imports: [\n    OnemrvaMatAvatarModule,\n    OnemRvaColorDirective,\n    OnemRvaSizeDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n  readonly initials = input('TC');\n  readonly text = input('');\n  readonly size = input<'xlarge' | 'large' | 'medium' | 'small' | 'xsmall'>(\n    'medium',\n  );\n  readonly src = input('');\n  readonly icon = input('');\n  readonly color = input<OnemrvaMatColor>('accent');\n}\n"}

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('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 { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatInputIbanComponent } from '@onemrvapublic/design-system/mat-input-iban';\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    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\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 { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatInputIbanComponent } from '@onemrvapublic/design-system/mat-input-iban';\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    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/birthplace-input.json

@@ -1 +1 @@
-{"demo-birthplace-input.component.html":"<onemrva-mat-input-birthplace\n  [readonly]=\"readonly()\"\n  [countryCode]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n  [returnValue]=\"returnValue\"\n></onemrva-mat-input-birthplace>\n","demo-birthplace-input.component.ts":"import {\n  Component,\n  effect,\n  input,\n  Input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemRvaCommonCountry,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatInputBirthPlaceComponent } from '@onemrvapublic/design-system/mat-input-birthplace';\n\n@Component({\n  selector: 'app-demo-birthplace-input',\n  templateUrl: './demo-birthplace-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputBirthPlaceComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBirthplaceInputComponent extends DemoComponentBase {\n  form = new FormControl<OnemRvaCommonCountry | null>(null, [\n    Validators.required,\n  ]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  @Input()\n  returnValue = 'object';\n\n  constructor() {\n    super();\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-birthplace-input.component.html":"<onemrva-mat-input-birthplace\n  [readonly]=\"readonly()\"\n  [countryCode]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n  [returnValue]=\"returnValue()\"\n/>\n","demo-birthplace-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemRvaCommonCountry,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatInputBirthPlaceComponent } from '@onemrvapublic/design-system/mat-input-birthplace';\n\n@Component({\n  selector: 'app-demo-birthplace-input',\n  templateUrl: './demo-birthplace-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputBirthPlaceComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBirthplaceInputComponent extends DemoComponentBase {\n  form = new FormControl<OnemRvaCommonCountry | null>(null, [\n    Validators.required,\n  ]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  readonly returnValue = input('object');\n\n  constructor() {\n    super();\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

package/assets/json/breadcrumb.json

@@ -1 +1 @@
-{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb [paths]=\"paths\"></onemrva-mat-breadcrumb>\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport {\n  OnemrvaBreadcrumb,\n  OnemrvaMatBreadcrumbComponent,\n} from '@onemrvapublic/design-system/mat-breadcrumb';\nimport { Route } from '@angular/router';\nlet DummyComponent; // for the demo\n\n// You can set the titles in your routes for automatic generation like the route\nexport const routes: Route[] = [\n  {\n    path: '',\n    component: DummyComponent,\n    data: {\n      navigationTitle: 'Home',\n    },\n    children: [\n      {\n        path: 'about',\n        component: DummyComponent,\n        data: {\n          navigationTitle: 'About-us',\n        },\n      },\n      {\n        path: 'contact',\n        component: DummyComponent,\n        data: {\n          navigationTitle: 'Contact-us',\n        },\n        children: [\n          {\n            path: 'locations',\n            component: DummyComponent,\n            data: {\n              navigationTitle: 'Locations',\n            },\n          },\n        ],\n      },\n    ],\n  },\n];\n\n@Component({\n  selector: 'app-demo-breadcrumb',\n  templateUrl: 'demo-breadcrumb.component.html',\n  standalone: true,\n  imports: [OnemrvaMatBreadcrumbComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBreadcrumbComponent {\n  // or you can use custom paths like this (! links will not work in this demo)\n  paths: OnemrvaBreadcrumb[] = [\n    {\n      label: 'Home',\n      url: '',\n      translate: false,\n    },\n    {\n      label: 'Contact us',\n      url: '/contact',\n      translate: false,\n    },\n    {\n      label: 'Locations',\n      url: '/contact/locations',\n      translate: false,\n    },\n  ];\n}\n"}
+{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb [paths]=\"paths\" />\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport {\n  OnemrvaBreadcrumb,\n  OnemrvaMatBreadcrumbComponent,\n} from '@onemrvapublic/design-system/mat-breadcrumb';\nimport { Route } from '@angular/router';\nlet DummyComponent; // for the demo\n\n// You can set the titles in your routes for automatic generation like the route\nexport const routes: Route[] = [\n  {\n    path: '',\n    component: DummyComponent,\n    data: {\n      navigationTitle: 'Home',\n    },\n    children: [\n      {\n        path: 'about',\n        component: DummyComponent,\n        data: {\n          navigationTitle: 'About-us',\n        },\n      },\n      {\n        path: 'contact',\n        component: DummyComponent,\n        data: {\n          navigationTitle: 'Contact-us',\n        },\n        children: [\n          {\n            path: 'locations',\n            component: DummyComponent,\n            data: {\n              navigationTitle: 'Locations',\n            },\n          },\n        ],\n      },\n    ],\n  },\n];\n\n@Component({\n  selector: 'app-demo-breadcrumb',\n  templateUrl: 'demo-breadcrumb.component.html',\n  standalone: true,\n  imports: [OnemrvaMatBreadcrumbComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBreadcrumbComponent {\n  // or you can use custom paths like this (! links will not work in this demo)\n  paths: OnemrvaBreadcrumb[] = [\n    {\n      label: 'Home',\n      url: '',\n      translate: false,\n    },\n    {\n      label: 'Contact us',\n      url: '/contact',\n      translate: false,\n    },\n    {\n      label: 'Locations',\n      url: '/contact/locations',\n      translate: false,\n    },\n  ];\n}\n"}

package/assets/json/button-loading.json

@@ -1 +1 @@
-{"demo-button-loading.component.html":"@if (type === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n","demo-button-loading.component.ts":"import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaMatSpinnerModule],\n  templateUrl: 'demo-button-loading.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonLoadingComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  @Input()\n  type: 'outlined' | 'contained' = 'contained';\n\n  @Input()\n  disabled = false;\n\n  loading = false;\n\n  send() {\n    this.loading = true;\n    setTimeout(() => {\n      this.loading = false;\n    }, 3000);\n  }\n\n  ngOnInit(): void {\n    this.send();\n  }\n}\n"}
+{"demo-button-loading.component.html":"@if (type() === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type() === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled()\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n","demo-button-loading.component.ts":"import { Component, OnInit, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaMatSpinnerModule],\n  templateUrl: 'demo-button-loading.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonLoadingComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly type = input<'outlined' | 'contained'>('contained');\n\n  readonly disabled = input(false);\n\n  loading = false;\n\n  send() {\n    this.loading = true;\n    setTimeout(() => {\n      this.loading = false;\n    }, 3000);\n  }\n\n  ngOnInit(): void {\n    this.send();\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  @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';\n\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: [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"}
+{"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 }}\" aria-label=\"{{ toggle }}\">\n      @if (type() === 'text') {\n        {{ toggle }}\n      } @else {\n        <mat-icon [attr.aria-label]=\"toggle\">{{ 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';\n\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: [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  iconLabels: Record<string, string> = {\n    format_bold: 'Bold',\n    format_italic: 'Italic',\n    format_underlined: 'Underline',\n  };\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/card-table.json

@@ -1 +1 @@
-{"demo-card-table-datasource.ts":"import { DataSource } from '@angular/cdk/collections';\nimport { MatSort } from '@angular/material/sort';\nimport { map } from 'rxjs/operators';\nimport { BehaviorSubject, merge, Observable } from 'rxjs';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\n\n// TODO: Replace this with your own data model type\nexport interface ListItem {\n  id: number;\n  name: string;\n  description: string;\n  status: 'success' | 'error' | 'warn';\n  color: OnemrvaMatColor;\n}\n\n// TODO: replace this with real data from your application\nconst EXAMPLE_DATA: ListItem[] = [\n  {\n    id: 1,\n    name: 'Hydrogen',\n    description:\n      'Hydrogen is the chemical element with the symbol H and atomic number 1',\n    status: 'success',\n    color: 'primary',\n  },\n  {\n    id: 2,\n    name: 'Helium',\n    description:\n      \"Helium (from Greek: ἥλιος, romanized: helios, lit. 'sun') is a chemical element with the symbol He and atomic number 2\",\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 3,\n    name: 'Lithium',\n    description:\n      \"Lithium (from Greek: λίθος, romanized: lithos, lit. 'stone') is a chemical element with the symbol Li and atomic number 3\",\n    status: 'error',\n    color: 'error',\n  },\n  {\n    id: 4,\n    name: 'Beryllium',\n    description:\n      'Beryllium is a chemical element with the symbol Be and atomic number 4',\n    status: 'success',\n    color: 'success',\n  },\n  {\n    id: 5,\n    name: 'Boron',\n    description:\n      'Boron is a chemical element with the symbol B and atomic number 5',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 6,\n    name: 'Carbon',\n    description:\n      'Carbon (from Latin: carbo \"coal\") is a chemical element with the symbol C and atomic number 6',\n    status: 'warn',\n    color: 'warn',\n  },\n  {\n    id: 7,\n    name: 'Nitrogen',\n    description:\n      'Nitrogen is the chemical element with the symbol N and atomic number 7',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 8,\n    name: 'Oxygen',\n    description:\n      'Oxygen is the chemical element with the symbol O and atomic number 8',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 9,\n    name: 'Fluorine',\n    description:\n      'Fluorine is a chemical element with the symbol F and atomic number 9',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 10,\n    name: 'Neon',\n    description:\n      'Neon is a chemical element with the symbol Ne and atomic number 10',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 11,\n    name: 'Sodium',\n    description:\n      'Sodium is a chemical element with the symbol Na (from Latin natrium) and atomic number 11',\n    status: 'success',\n    color: '',\n  },\n  { id: 12, name: 'Magnesium', description: '', status: 'success', color: '' },\n  { id: 13, name: 'Aluminum', description: '', status: 'success', color: '' },\n  { id: 14, name: 'Silicon', description: '', status: 'error', color: '' },\n  { id: 15, name: 'Phosphorus', description: '', status: 'success', color: '' },\n  { id: 16, name: 'Sulfur', description: '', status: 'success', color: '' },\n  { id: 17, name: 'Chlorine', description: '', status: 'warn', color: '' },\n  { id: 18, name: 'Argon', description: '', status: 'success', color: '' },\n  { id: 19, name: 'Potassium', description: '', status: 'success', color: '' },\n  { id: 20, name: 'Calcium', description: '', status: 'success', color: '' },\n  { id: 21, name: 'Scandium', description: '', status: 'success', color: '' },\n  { id: 22, name: 'Titanium', description: '', status: 'success', color: '' },\n  { id: 23, name: 'Vanadium', description: '', status: 'success', color: '' },\n  { id: 24, name: 'Chromium', description: '', status: 'success', color: '' },\n];\n\n/**\n * Data source for the List view. This class should\n * encapsulate all logic for fetching and manipulating the displayed data\n * (including sorting, pagination, and filtering).\n */\nexport class ListDataSource extends DataSource<ListItem> {\n  data: ListItem[] = EXAMPLE_DATA;\n  paginator!: OnemrvaMatPaginatorComponent;\n  sort: MatSort | undefined;\n  data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);\n\n  constructor() {\n    super();\n    this.data$.next(this.data);\n  }\n\n  /**\n   * Connect this data source to the table. The table will only update when\n   * the returned stream emits new items.\n   * @returns A stream of the items to be rendered.\n   */\n  connect(): Observable<ListItem[]> {\n    if (this.sort) {\n      // Combine everything that affects the rendered data into one update\n      // stream for the data-table to consume.\n      return merge(this.data$, this.sort.sortChange).pipe(\n        map(() => {\n          return this.getPagedData(this.getSortedData([...this.data]));\n        }),\n      );\n    } else {\n      throw Error('Please set the sort on the data source before connecting.');\n    }\n  }\n\n  /**\n   *  Called when the table is being destroyed. Use this function, to clean up\n   * any open connections or free any held resources that were set up during connect.\n   */\n  disconnect(): void {\n    console.log('disconnect');\n  }\n\n  /**\n   * Paginate the data (client-side). If you're using server-side pagination,\n   * this would be replaced by requesting the appropriate data from the server.\n   */\n  private getPagedData(data: ListItem[]): ListItem[] {\n    if (this.paginator) {\n      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;\n      return data.splice(startIndex, this.paginator.pageSize);\n    } else {\n      return data;\n    }\n  }\n\n  /**\n   * Sort the data (client-side). If you're using server-side sorting,\n   * this would be replaced by requesting the appropriate data from the server.\n   */\n  private getSortedData(data: ListItem[]): ListItem[] {\n    if (!this.sort || !this.sort.active || this.sort.direction === '') {\n      return data;\n    }\n\n    return data.sort((a, b) => {\n      const isAsc = this.sort?.direction === 'asc';\n      switch (this.sort?.active) {\n        case 'status':\n          return compare(a.status, b.status, isAsc);\n        case 'description':\n          return compare(a.description, b.description, isAsc);\n        case 'name':\n          return compare(a.name, b.name, isAsc);\n        case 'id':\n          return compare(+a.id, +b.id, isAsc);\n        default:\n          return 0;\n      }\n    });\n  }\n\n  /**\n   * @param row\n   */\n  public remove(row: ListItem) {\n    const idx = this.data.indexOf(row);\n    if (idx >= 0) {\n      this.data.splice(idx, 1);\n      this.paginator.length = this.data.length;\n    }\n    this.data$.next(this.data);\n  }\n\n  /**\n   *\n   */\n  public touch() {\n    this.data$.next(this.data);\n  }\n}\n\n/** Simple sort comparator for example ID/Name columns (for client-side sorting). */\nfunction compare(\n  a: string | number,\n  b: string | number,\n  isAsc: boolean,\n): number {\n  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);\n}\n","demo-card-table.component.html":"<table\n  mat-table\n  class=\"full-width-table mat-card-table\"\n  matSort\n  aria-label=\"Elements\"\n>\n  <!-- Id Column -->\n  <ng-container matColumnDef=\"id\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header=\"id\">Id</th>\n    <td mat-cell *matCellDef=\"let row\">{{ row.id }}</td>\n  </ng-container>\n\n  <!-- Name Column -->\n  <ng-container matColumnDef=\"name\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Name</th>\n    <td mat-cell *matCellDef=\"let row\">\n      <strong\n        ><copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\">{{\n          row.name\n        }}</copy-to-clipboard></strong\n      >\n    </td>\n  </ng-container>\n\n  <!-- Description Column -->\n  <ng-container matColumnDef=\"description\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n      mat-sort-header=\"description\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      Description\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      <span></span>\n      {{ row.description }}\n    </td></ng-container\n  >\n\n  <!-- Status Column -->\n  <ng-container matColumnDef=\"status\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n      mat-sort-header=\"status\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      Status\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      @if (row.status === 'success') {\n        <onemrva-mat-sticker\n          aria-label=\"Success\"\n          class=\"sticker\"\n          color=\"success\"\n        >\n          <mat-icon>thumb_up</mat-icon>Success\n        </onemrva-mat-sticker>\n      }\n      @if (row.status === 'error') {\n        <onemrva-mat-sticker aria-label=\"Error\" class=\"sticker\" color=\"error\">\n          <mat-icon>error</mat-icon>Error\n        </onemrva-mat-sticker>\n      }\n      @if (row.status === 'warn') {\n        <onemrva-mat-sticker aria-label=\"Warning\" class=\"sticker\" color=\"warn\">\n          <mat-icon>warning</mat-icon>Warning\n        </onemrva-mat-sticker>\n      }\n    </td>\n  </ng-container>\n\n  <!-- More Column -->\n  <ng-container matColumnDef=\"more\">\n    <th mat-header-cell *matHeaderCellDef>More</th>\n    <td mat-cell *matCellDef=\"let row\" class=\"text-right\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"menu\"\n        (click)=\"$event.stopPropagation()\"\n        aria-label=\"More\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"edit(row)\" aria-label=\"Edit\">\n          <mat-icon>edit</mat-icon>Edit\n        </button>\n        <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n          <mat-icon>delete</mat-icon>Delete\n        </button>\n        <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n          <mat-icon>share</mat-icon>Share\n        </button>\n      </mat-menu>\n      <mat-divider [vertical]=\"true\"></mat-divider>\n      <button mat-icon-button aria-label=\"Continue\">\n        <mat-icon>chevron_right</mat-icon>\n      </button>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr\n    mat-row\n    (matRowClickable)=\"open(row)\"\n    [color]=\"row.color\"\n    *matRowDef=\"let row; columns: displayedColumns\"\n  ></tr>\n</table>\n<onemrva-mat-paginator\n  [pageSizeDefaultOption]=\"10\"\n  [pageIndex]=\"0\"\n  [length]=\"dataSource.data.length\"\n  (onRequestPage)=\"changePage($event)\"\n  previousKey=\"Previous\"\n  nextKey=\"Next\"\n  #paginator\n></onemrva-mat-paginator>\n","demo-card-table.component.ts":"import {\n  AfterViewInit,\n  Component,\n  inject,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatSort, MatSortModule } from '@angular/material/sort';\nimport { MatTable, MatTableModule } from '@angular/material/table';\nimport { ListDataSource, ListItem } from './demo-card-table-datasource';\nimport { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system/mat-copy-to-clipboard';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-card-table',\n  templateUrl: './demo-card-table.component.html',\n\n  standalone: true,\n  imports: [\n    MatCardModule,\n    MatChipsModule,\n    MatTableModule,\n    MatSortModule,\n    MatIconModule,\n    MatMenuModule,\n    MatButtonModule,\n    OnemrvaSharedModule,\n    MatDividerModule,\n    MatTooltipModule,\n    TranslateModule,\n    ClipboardModule,\n    OnemrvaCopyToClipboardComponent,\n    OnemrvaMatStickerModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCardTableComponent\n  extends DemoComponentBase\n  implements AfterViewInit\n{\n  @ViewChild(OnemrvaMatPaginatorComponent)\n  paginator!: OnemrvaMatPaginatorComponent;\n  @ViewChild(MatSort) sort!: MatSort;\n  @ViewChild(MatTable) table!: MatTable<ListItem>;\n  dataSource: ListDataSource;\n\n  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */\n  displayedColumns = ['id', 'name', 'description', 'status', 'more'];\n  bgcolor = '#123456';\n\n  clipboardService = inject(Clipboard);\n  constructor() {\n    super();\n    this.dataSource = new ListDataSource();\n  }\n\n  ngAfterViewInit(): void {\n    this.dataSource.sort = this.sort;\n    this.dataSource.paginator = this.paginator;\n    this.table.dataSource = this.dataSource;\n  }\n\n  edit(row: ListItem) {\n    alert(`Edit row n°${row.id}: ${row.name}`);\n  }\n\n  delete(row: ListItem) {\n    this.dataSource.remove(row);\n  }\n\n  share(row: ListItem) {\n    alert(`Share row n°${row.id}: ${row.name}`);\n  }\n\n  changePage(event: any) {\n    this.dataSource.paginator.pageIndex = event;\n    this.dataSource.touch();\n  }\n\n  open(row: any) {\n    alert(`Clicked : ${row.id}`);\n  }\n}\n"}
+{"demo-card-table-datasource.ts":"import { DataSource } from '@angular/cdk/collections';\nimport { MatSort } from '@angular/material/sort';\nimport { map } from 'rxjs/operators';\nimport { BehaviorSubject, merge, Observable } from 'rxjs';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\n\n// TODO: Replace this with your own data model type\nexport interface ListItem {\n  id: number;\n  name: string;\n  description: string;\n  status: 'success' | 'error' | 'warn';\n  color: OnemrvaMatColor;\n}\n\n// TODO: replace this with real data from your application\nconst EXAMPLE_DATA: ListItem[] = [\n  {\n    id: 1,\n    name: 'Hydrogen',\n    description:\n      'Hydrogen is the chemical element with the symbol H and atomic number 1',\n    status: 'success',\n    color: 'primary',\n  },\n  {\n    id: 2,\n    name: 'Helium',\n    description:\n      \"Helium (from Greek: ἥλιος, romanized: helios, lit. 'sun') is a chemical element with the symbol He and atomic number 2\",\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 3,\n    name: 'Lithium',\n    description:\n      \"Lithium (from Greek: λίθος, romanized: lithos, lit. 'stone') is a chemical element with the symbol Li and atomic number 3\",\n    status: 'error',\n    color: 'error',\n  },\n  {\n    id: 4,\n    name: 'Beryllium',\n    description:\n      'Beryllium is a chemical element with the symbol Be and atomic number 4',\n    status: 'success',\n    color: 'success',\n  },\n  {\n    id: 5,\n    name: 'Boron',\n    description:\n      'Boron is a chemical element with the symbol B and atomic number 5',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 6,\n    name: 'Carbon',\n    description:\n      'Carbon (from Latin: carbo \"coal\") is a chemical element with the symbol C and atomic number 6',\n    status: 'warn',\n    color: 'warn',\n  },\n  {\n    id: 7,\n    name: 'Nitrogen',\n    description:\n      'Nitrogen is the chemical element with the symbol N and atomic number 7',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 8,\n    name: 'Oxygen',\n    description:\n      'Oxygen is the chemical element with the symbol O and atomic number 8',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 9,\n    name: 'Fluorine',\n    description:\n      'Fluorine is a chemical element with the symbol F and atomic number 9',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 10,\n    name: 'Neon',\n    description:\n      'Neon is a chemical element with the symbol Ne and atomic number 10',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 11,\n    name: 'Sodium',\n    description:\n      'Sodium is a chemical element with the symbol Na (from Latin natrium) and atomic number 11',\n    status: 'success',\n    color: '',\n  },\n  { id: 12, name: 'Magnesium', description: '', status: 'success', color: '' },\n  { id: 13, name: 'Aluminum', description: '', status: 'success', color: '' },\n  { id: 14, name: 'Silicon', description: '', status: 'error', color: '' },\n  { id: 15, name: 'Phosphorus', description: '', status: 'success', color: '' },\n  { id: 16, name: 'Sulfur', description: '', status: 'success', color: '' },\n  { id: 17, name: 'Chlorine', description: '', status: 'warn', color: '' },\n  { id: 18, name: 'Argon', description: '', status: 'success', color: '' },\n  { id: 19, name: 'Potassium', description: '', status: 'success', color: '' },\n  { id: 20, name: 'Calcium', description: '', status: 'success', color: '' },\n  { id: 21, name: 'Scandium', description: '', status: 'success', color: '' },\n  { id: 22, name: 'Titanium', description: '', status: 'success', color: '' },\n  { id: 23, name: 'Vanadium', description: '', status: 'success', color: '' },\n  { id: 24, name: 'Chromium', description: '', status: 'success', color: '' },\n];\n\n/**\n * Data source for the List view. This class should\n * encapsulate all logic for fetching and manipulating the displayed data\n * (including sorting, pagination, and filtering).\n */\nexport class ListDataSource extends DataSource<ListItem> {\n  data: ListItem[] = EXAMPLE_DATA;\n  paginator!: OnemrvaMatPaginatorComponent;\n  sort: MatSort | undefined;\n  data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);\n\n  constructor() {\n    super();\n    this.data$.next(this.data);\n  }\n\n  /**\n   * Connect this data source to the table. The table will only update when\n   * the returned stream emits new items.\n   * @returns A stream of the items to be rendered.\n   */\n  connect(): Observable<ListItem[]> {\n    if (this.sort) {\n      // Combine everything that affects the rendered data into one update\n      // stream for the data-table to consume.\n      return merge(this.data$, this.sort.sortChange).pipe(\n        map(() => {\n          return this.getPagedData(this.getSortedData([...this.data]));\n        }),\n      );\n    } else {\n      throw Error('Please set the sort on the data source before connecting.');\n    }\n  }\n\n  /**\n   *  Called when the table is being destroyed. Use this function, to clean up\n   * any open connections or free any held resources that were set up during connect.\n   */\n  disconnect(): void {\n    console.log('disconnect');\n  }\n\n  /**\n   * Paginate the data (client-side). If you're using server-side pagination,\n   * this would be replaced by requesting the appropriate data from the server.\n   */\n  private getPagedData(data: ListItem[]): ListItem[] {\n    if (this.paginator) {\n      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;\n      return data.splice(startIndex, this.paginator.pageSize);\n    } else {\n      return data;\n    }\n  }\n\n  /**\n   * Sort the data (client-side). If you're using server-side sorting,\n   * this would be replaced by requesting the appropriate data from the server.\n   */\n  private getSortedData(data: ListItem[]): ListItem[] {\n    if (!this.sort || !this.sort.active || this.sort.direction === '') {\n      return data;\n    }\n\n    return data.sort((a, b) => {\n      const isAsc = this.sort?.direction === 'asc';\n      switch (this.sort?.active) {\n        case 'status':\n          return compare(a.status, b.status, isAsc);\n        case 'description':\n          return compare(a.description, b.description, isAsc);\n        case 'name':\n          return compare(a.name, b.name, isAsc);\n        case 'id':\n          return compare(+a.id, +b.id, isAsc);\n        default:\n          return 0;\n      }\n    });\n  }\n\n  /**\n   * @param row\n   */\n  public remove(row: ListItem) {\n    const idx = this.data.indexOf(row);\n    if (idx >= 0) {\n      this.data.splice(idx, 1);\n      this.paginator.length = this.data.length;\n    }\n    this.data$.next(this.data);\n  }\n\n  /**\n   *\n   */\n  public touch() {\n    this.data$.next(this.data);\n  }\n}\n\n/** Simple sort comparator for example ID/Name columns (for client-side sorting). */\nfunction compare(\n  a: string | number,\n  b: string | number,\n  isAsc: boolean,\n): number {\n  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);\n}\n","demo-card-table.component.html":"<table\n  mat-table\n  class=\"full-width-table mat-card-table\"\n  matSort\n  aria-label=\"Elements\"\n>\n  <!-- Id Column -->\n  <ng-container matColumnDef=\"id\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header=\"id\">Id</th>\n    <td mat-cell *matCellDef=\"let row\">{{ row.id }}</td>\n  </ng-container>\n\n  <!-- Name Column -->\n  <ng-container matColumnDef=\"name\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Name</th>\n    <td mat-cell *matCellDef=\"let row\">\n      <strong\n        ><copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\">{{\n          row.name\n        }}</copy-to-clipboard></strong\n      >\n    </td>\n  </ng-container>\n\n  <!-- Description Column -->\n  <ng-container matColumnDef=\"description\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n      mat-sort-header=\"description\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      Description\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      <span></span>\n      {{ row.description }}\n    </td></ng-container\n  >\n\n  <!-- Status Column -->\n  <ng-container matColumnDef=\"status\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n      mat-sort-header=\"status\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      Status\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      @if (row.status === 'success') {\n        <onemrva-mat-sticker\n          aria-label=\"Success\"\n          class=\"sticker\"\n          color=\"success\"\n        >\n          <mat-icon>thumb_up</mat-icon>Success\n        </onemrva-mat-sticker>\n      }\n      @if (row.status === 'error') {\n        <onemrva-mat-sticker aria-label=\"Error\" class=\"sticker\" color=\"error\">\n          <mat-icon>error</mat-icon>Error\n        </onemrva-mat-sticker>\n      }\n      @if (row.status === 'warn') {\n        <onemrva-mat-sticker aria-label=\"Warning\" class=\"sticker\" color=\"warn\">\n          <mat-icon>warning</mat-icon>Warning\n        </onemrva-mat-sticker>\n      }\n    </td>\n  </ng-container>\n\n  <!-- More Column -->\n  <ng-container matColumnDef=\"more\">\n    <th mat-header-cell *matHeaderCellDef>More</th>\n    <td mat-cell *matCellDef=\"let row\" class=\"text-right\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"menu\"\n        (click)=\"$event.stopPropagation()\"\n        aria-label=\"More\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"edit(row)\" aria-label=\"Edit\">\n          <mat-icon>edit</mat-icon>Edit\n        </button>\n        <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n          <mat-icon>delete</mat-icon>Delete\n        </button>\n        <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n          <mat-icon>share</mat-icon>Share\n        </button>\n      </mat-menu>\n      <mat-divider [vertical]=\"true\" />\n      <button mat-icon-button aria-label=\"Continue\">\n        <mat-icon>chevron_right</mat-icon>\n      </button>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr\n    mat-row\n    (matRowClickable)=\"open(row)\"\n    [color]=\"row.color\"\n    *matRowDef=\"let row; columns: displayedColumns\"\n  ></tr>\n</table>\n<onemrva-mat-paginator\n  [pageSizeDefaultOption]=\"10\"\n  [pageIndex]=\"0\"\n  [length]=\"dataSource.data.length\"\n  (onRequestPage)=\"changePage($event)\"\n  previousKey=\"Previous\"\n  nextKey=\"Next\"\n  #paginator\n/>\n","demo-card-table.component.ts":"import {\n  AfterViewInit,\n  Component,\n  inject,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport { MatSort, MatSortModule } from '@angular/material/sort';\nimport { MatTable, MatTableModule } from '@angular/material/table';\nimport { ListDataSource, ListItem } from './demo-card-table-datasource';\nimport { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system/mat-paginator';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system/mat-copy-to-clipboard';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-card-table',\n  templateUrl: './demo-card-table.component.html',\n\n  standalone: true,\n  imports: [\n    MatCardModule,\n    MatChipsModule,\n    MatTableModule,\n    MatSortModule,\n    MatIconModule,\n    MatMenuModule,\n    MatButtonModule,\n    OnemrvaSharedModule,\n    MatDividerModule,\n    MatTooltipModule,\n    TranslateModule,\n    ClipboardModule,\n    OnemrvaCopyToClipboardComponent,\n    OnemrvaMatStickerModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCardTableComponent\n  extends DemoComponentBase\n  implements AfterViewInit\n{\n  readonly paginator = viewChild.required(OnemrvaMatPaginatorComponent);\n  readonly sort = viewChild.required(MatSort);\n  readonly table = viewChild.required(MatTable);\n  dataSource: ListDataSource;\n\n  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */\n  displayedColumns = ['id', 'name', 'description', 'status', 'more'];\n  bgcolor = '#123456';\n\n  clipboardService = inject(Clipboard);\n  constructor() {\n    super();\n    this.dataSource = new ListDataSource();\n  }\n\n  ngAfterViewInit(): void {\n    this.dataSource.sort = this.sort();\n    this.dataSource.paginator = this.paginator();\n    this.table().dataSource = this.dataSource;\n  }\n\n  edit(row: ListItem) {\n    alert(`Edit row n°${row.id}: ${row.name}`);\n  }\n\n  delete(row: ListItem) {\n    this.dataSource.remove(row);\n  }\n\n  share(row: ListItem) {\n    alert(`Share row n°${row.id}: ${row.name}`);\n  }\n\n  changePage(event: any) {\n    this.dataSource.paginator.pageIndex = event;\n    this.dataSource.touch();\n  }\n\n  open(row: any) {\n    alert(`Clicked : ${row.id}`);\n  }\n}\n"}

package/assets/json/card.json

@@ -1 +1 @@
-{"demo-card.component.html":"<mat-card style=\"width: 275px\">\n  @if (image) {\n    <img\n      mat-card-image\n      src=\"/assets/images/actionmenu-thumbnail.png\"\n      alt=\"Photo of a Shiba Inu\"\n    />\n  }\n  <mat-card-header>\n    <mat-card-title>Shiba Inu</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <p>\n      The Shiba Inu is the smallest of the six original and distinct spitz\n      breeds of dog from Japan. A small, agile dog that copes very well with\n      mountainous terrain, the Shiba Inu was originally bred for hunting.\n    </p>\n    <onemrva-mat-sticker>Important</onemrva-mat-sticker>\n  </mat-card-content>\n</mat-card>\n","demo-card.component.ts":"import { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { Component, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  MatCard,\n  MatCardContent,\n  MatCardHeader,\n  MatCardImage,\n  MatCardTitle,\n} from '@angular/material/card';\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\n\n@Component({\n  selector: 'app-demo-card',\n  templateUrl: './demo-card.component.html',\n\n  standalone: true,\n  imports: [\n    MatCard,\n    MatCardHeader,\n    MatCardTitle,\n    MatCardContent,\n    MatCardImage,\n    OnemrvaMatStickerComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCardComponent extends DemoComponentBase {\n  @Input()\n  image = true;\n}\n"}
+{"demo-card.component.html":"<mat-card style=\"width: 275px\">\n  @if (image()) {\n    <img\n      mat-card-image\n      src=\"/assets/images/actionmenu-thumbnail.png\"\n      alt=\"Photo of a Shiba Inu\"\n    />\n  }\n  <mat-card-header>\n    <mat-card-title>Shiba Inu</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <p>\n      The Shiba Inu is the smallest of the six original and distinct spitz\n      breeds of dog from Japan. A small, agile dog that copes very well with\n      mountainous terrain, the Shiba Inu was originally bred for hunting.\n    </p>\n    <onemrva-mat-sticker>Important</onemrva-mat-sticker>\n  </mat-card-content>\n</mat-card>\n","demo-card.component.ts":"import { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { Component, ViewEncapsulation, input } from '@angular/core';\nimport {\n  MatCard,\n  MatCardContent,\n  MatCardHeader,\n  MatCardImage,\n  MatCardTitle,\n} from '@angular/material/card';\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\n\n@Component({\n  selector: 'app-demo-card',\n  templateUrl: './demo-card.component.html',\n\n  standalone: true,\n  imports: [\n    MatCard,\n    MatCardHeader,\n    MatCardTitle,\n    MatCardContent,\n    MatCardImage,\n    OnemrvaMatStickerComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCardComponent extends DemoComponentBase {\n  readonly image = input(true);\n}\n"}

package/assets/json/carousel.json

@@ -1 +1 @@
-{"demo-carousel.component.html":"<onemrva-mat-carousel>\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel [color]=\"color\">\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title {{ color }}\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <div class=\"row gy gx\">\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Adresse</span>\n            <br />\n            <strong>\n              RUE PONT A NOLE 92 <br />\n              6032 MONT-SUR-MARCHIENNE</strong\n            >\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Nationalité</span>\n            <br />\n            <strong> Belge </strong>\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Organisme de paiement</span>\n            <br />\n            <strong>FGTB Charleroi</strong>\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">IBAN</span>\n            <br />\n            <strong>BE37063984850028</strong>\n          </div>\n        </div>\n        <div class=\"row gy gx\">\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Données de contact</span>\n            <br />\n            <strong>\n              email&#64;email.com <br />\n              02 / 303 22 22</strong\n            >\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Autres informations</span>\n            <br />\n            <strong\n              >Femme (FR)<br />\n              Archivé dans le mainframe: Oui<br />\n              Date de décès: Ø</strong\n            >\n          </div>\n          <div class=\"col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Bureau de chômage</span>\n            <br />\n            <strong>Charleroi</strong>\n          </div>\n        </div>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel color=\"primary\">\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <p>\n          Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n          hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n          qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n          calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n          Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n          hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n          Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n          darth hutt jawa. Palpatine mon sebulba darth.\n        </p>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel>\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <p>\n          Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n          hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n          qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n          calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n          Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n          hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n          Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n          darth hutt jawa. Palpatine mon sebulba darth.\n        </p>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n</onemrva-mat-carousel>\n","demo-carousel.component.scss":"","demo-carousel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  OnemrvaMatCarouselComponent,\n  OnemrvaMatCarouselItemComponent,\n} from '@onemrvapublic/design-system/mat-carousel';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-carousel',\n  standalone: true,\n  imports: [\n    OnemrvaMatCarouselComponent,\n    OnemrvaMatCarouselItemComponent,\n    MatButtonModule,\n    MatIconModule,\n    OnemrvaMatPanelModule,\n    OnemRvaColorDirective,\n  ],\n\n  templateUrl: 'demo-carousel.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCarouselComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.slider(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.604\n\nPanels initial version\n"}
+{"demo-carousel.component.html":"<onemrva-mat-carousel>\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel [color]=\"color()\">\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title {{ color() }}\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <div class=\"row gy gx\">\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Adresse</span>\n            <br />\n            <strong>\n              RUE PONT A NOLE 92 <br />\n              6032 MONT-SUR-MARCHIENNE</strong\n            >\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Nationalité</span>\n            <br />\n            <strong> Belge </strong>\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Organisme de paiement</span>\n            <br />\n            <strong>FGTB Charleroi</strong>\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">IBAN</span>\n            <br />\n            <strong>BE37063984850028</strong>\n          </div>\n        </div>\n        <div class=\"row gy gx\">\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Données de contact</span>\n            <br />\n            <strong>\n              email&#64;email.com <br />\n              02 / 303 22 22</strong\n            >\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Autres informations</span>\n            <br />\n            <strong\n              >Femme (FR)<br />\n              Archivé dans le mainframe: Oui<br />\n              Date de décès: Ø</strong\n            >\n          </div>\n          <div class=\"col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Bureau de chômage</span>\n            <br />\n            <strong>Charleroi</strong>\n          </div>\n        </div>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel color=\"primary\">\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <p>\n          Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n          hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n          qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n          calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n          Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n          hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n          Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n          darth hutt jawa. Palpatine mon sebulba darth.\n        </p>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel>\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <p>\n          Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n          hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n          qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n          calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n          Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n          hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n          Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n          darth hutt jawa. Palpatine mon sebulba darth.\n        </p>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n</onemrva-mat-carousel>\n","demo-carousel.component.scss":"","demo-carousel.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  OnemrvaMatCarouselComponent,\n  OnemrvaMatCarouselItemComponent,\n} from '@onemrvapublic/design-system/mat-carousel';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-carousel',\n  standalone: true,\n  imports: [\n    OnemrvaMatCarouselComponent,\n    OnemrvaMatCarouselItemComponent,\n    MatButtonModule,\n    MatIconModule,\n    OnemrvaMatPanelModule,\n    OnemRvaColorDirective,\n  ],\n\n  templateUrl: 'demo-carousel.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCarouselComponent extends DemoComponentBase {\n  readonly color = input<OnemrvaMatColor>('');\n}\n"}

package/assets/json/checkbox.json

@@ -1 +1 @@
-{"demo-checkbox.component.html":"<mat-checkbox\n  [readonly]=\"readonly\"\n  [color]=\"color\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  [disabled]=\"disabled\"\n  >Check me!</mat-checkbox\n>\n","demo-checkbox.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-checkbox',\n  templateUrl: './demo-checkbox.component.html',\n\n  standalone: true,\n  imports: [MatCheckboxModule, FormsModule, OnemRvaReadonlyDirective],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCheckboxComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  checked = true;\n\n  @Input()\n  indeterminate = false;\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n}\n"}
+{"demo-checkbox.component.html":"<mat-checkbox\n  [readonly]=\"readonly()\"\n  [color]=\"color()\"\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabled()\"\n  >Check me!</mat-checkbox\n>\n","demo-checkbox.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-checkbox',\n  templateUrl: './demo-checkbox.component.html',\n\n  standalone: true,\n  imports: [MatCheckboxModule, FormsModule, OnemRvaReadonlyDirective],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCheckboxComponent extends DemoComponentBase {\n  readonly color = input<OnemrvaMatColor>('');\n\n  readonly checked = input(true);\n\n  readonly indeterminate = input(false);\n\n  readonly disabled = input(false);\n\n  readonly readonly = input(false);\n}\n"}

package/assets/json/chips-input.json

@@ -1 +1 @@
-{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits(); track fruit) {\n      <mat-chip-row\n        [color]=\"color()\"\n        [disabled]=\"disabled()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"remove(fruit)\"\n      >\n        {{ fruit }}\n        @if (!disabled() && !readonly()) {\n          <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        }\n      </mat-chip-row>\n    }\n\n    <input\n      #fruitInput\n      placeholder=\"Add fruit...\"\n      [(ngModel)]=\"currentFruit\"\n      [matChipInputFor]=\"chipGrid\"\n      [matAutocomplete]=\"auto\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      (matChipInputTokenEnd)=\"add($event)\"\n      [disabled]=\"disabled()\"\n    />\n  </mat-chip-grid>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits(); track fruit) {\n      <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport {\n  MatAutocomplete,\n  MatAutocompleteSelectedEvent,\n  MatAutocompleteTrigger,\n  MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips-input',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    MatIconModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    MatAutocomplete,\n    MatOption,\n    MatAutocompleteTrigger,\n  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>('');\n  disabled = input(false);\n  readonly = input(false);\n\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n  readonly filteredFruits = computed(() => {\n    const currentFruit = this.currentFruit().toLowerCase();\n    return currentFruit\n      ? this.allFruits.filter(fruit =>\n          fruit.toLowerCase().includes(currentFruit),\n        )\n      : this.allFruits.slice();\n  });\n  readonly currentFruit = model('');\n  readonly announcer = inject(LiveAnnouncer);\n  readonly fruits = signal(['Lemon']);\n  readonly allFruits: string[] = [\n    'Apple',\n    'Lemon',\n    'Lime',\n    'Orange',\n    'Strawberry',\n  ];\n\n  add(event: MatChipInputEvent): void {\n    const value = (event.value || '').trim();\n\n    // Add our fruit\n    if (value) {\n      this.fruits.update(fruits => [...fruits, value]);\n    }\n\n    // Clear the input value\n    this.currentFruit.set('');\n  }\n\n  remove(fruit: string): void {\n    this.fruits.update(fruits => {\n      const index = fruits.indexOf(fruit);\n      if (index < 0) {\n        return fruits;\n      }\n\n      fruits.splice(index, 1);\n      this.announcer.announce(`Removed ${fruit}`);\n      return [...fruits];\n    });\n  }\n\n  selected(event: MatAutocompleteSelectedEvent): void {\n    this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n    this.currentFruit.set('');\n    event.option.deselect();\n  }\n}\n"}
+{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits(); track fruit) {\n      <mat-chip-row\n        [color]=\"color()\"\n        [disabled]=\"disabled()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"remove(fruit)\"\n        aria-label=\"Fruit: {{ fruit }}\"\n      >\n        {{ fruit }}\n        @if (!disabled() && !readonly()) {\n          <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        }\n      </mat-chip-row>\n    }\n  </mat-chip-grid>\n\n  <input\n    #fruitInput\n    placeholder=\"Add fruit...\"\n    [(ngModel)]=\"currentFruit\"\n    [matChipInputFor]=\"chipGrid\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    (matChipInputTokenEnd)=\"add($event)\"\n    [disabled]=\"disabled()\"\n  />\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits(); track fruit) {\n      <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport {\n  MatAutocomplete,\n  MatAutocompleteSelectedEvent,\n  MatAutocompleteTrigger,\n  MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips-input',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    MatIconModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    MatAutocomplete,\n    MatOption,\n    MatAutocompleteTrigger,\n  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>('');\n  disabled = input(false);\n  readonly = input(false);\n\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n  readonly filteredFruits = computed(() => {\n    const currentFruit = this.currentFruit().toLowerCase();\n    return currentFruit\n      ? this.allFruits.filter(fruit =>\n          fruit.toLowerCase().includes(currentFruit),\n        )\n      : this.allFruits.slice();\n  });\n  readonly currentFruit = model('');\n  readonly announcer = inject(LiveAnnouncer);\n  readonly fruits = signal(['Lemon']);\n  readonly allFruits: string[] = [\n    'Apple',\n    'Lemon',\n    'Lime',\n    'Orange',\n    'Strawberry',\n  ];\n\n  add(event: MatChipInputEvent): void {\n    const value = (event.value || '').trim();\n\n    // Add our fruit\n    if (value) {\n      this.fruits.update(fruits => [...fruits, value]);\n    }\n\n    // Clear the input value\n    this.currentFruit.set('');\n  }\n\n  remove(fruit: string): void {\n    this.fruits.update(fruits => {\n      const index = fruits.indexOf(fruit);\n      if (index < 0) {\n        return fruits;\n      }\n\n      fruits.splice(index, 1);\n      this.announcer.announce(`Removed ${fruit}`);\n      return [...fruits];\n    });\n  }\n\n  selected(event: MatAutocompleteSelectedEvent): void {\n    this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n    this.currentFruit.set('');\n    event.option.deselect();\n  }\n}\n"}

package/assets/json/chips.json

@@ -1 +1 @@
-{"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n  <mat-chip [color]=\"color\" [disabled]=\"disabled\">chip 1</mat-chip>\n  <mat-chip [color]=\"color\" [disabled]=\"disabled\">chip 2</mat-chip>\n</mat-chip-set>\n","demo-chips.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips',\n  standalone: true,\n  imports: [FormsModule, MatChipsModule, DragDropModule, OnemRvaColorDirective],\n  templateUrl: './demo-chips.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  disabled = false;\n}\n"}
+{"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n  <mat-chip [color]=\"color()\" [disabled]=\"disabled()\">chip 1</mat-chip>\n  <mat-chip [color]=\"color()\" [disabled]=\"disabled()\">chip 2</mat-chip>\n</mat-chip-set>\n","demo-chips.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips',\n  standalone: true,\n  imports: [FormsModule, MatChipsModule, DragDropModule, OnemRvaColorDirective],\n  templateUrl: './demo-chips.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsComponent extends DemoComponentBase {\n  readonly color = input<OnemrvaMatColor>('');\n\n  readonly disabled = input(false);\n}\n"}

package/assets/json/country-input.json

@@ -1 +1 @@
-{"demo-country-input.component.html":"<onemrva-mat-input-country\n  [readonly]=\"readonly()\"\n  [country]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n></onemrva-mat-input-country>\n","demo-country-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputCountryComponent } from '@onemrvapublic/design-system/mat-input-country';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-country-input',\n  templateUrl: './demo-country-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputCountryComponent,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCountryInputComponent extends DemoComponentBase {\n  form = new FormControl('', [Validators.required]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\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('be');\n      }\n    });\n\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-country-input.component.html":"<onemrva-mat-input-country\n  [readonly]=\"readonly()\"\n  [country]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n/>\n","demo-country-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputCountryComponent } from '@onemrvapublic/design-system/mat-input-country';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-country-input',\n  templateUrl: './demo-country-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputCountryComponent,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCountryInputComponent extends DemoComponentBase {\n  form = new FormControl('', [Validators.required]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\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('be');\n      }\n    });\n\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\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\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"picker\"\n      [formControl]=\"date\"\n    />\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';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n} 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/mat-datepicker-header';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\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"}
+{"demo-datepicker-luxon.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"picker\"\n      [formControl]=\"date\"\n    />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    />\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';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n} 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/mat-datepicker-header';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\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/datepicker-month-year.json

@@ -1 +1 @@
-{"demo-datepicker-month-year.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a year and month</mat-label>\n    <input\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"datePicker\"\n      [formControl]=\"dateControl\"\n    />\n    <mat-hint>MM YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matIconSuffix\n      [for]=\"datePicker\"\n      id=\"datepickertoggle\"\n      [aria-label]=\"'Pick a date' | translate\"\n      [title]=\"'Pick a date' | translate\"\n    ></mat-datepicker-toggle>\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonYearMonthProvider,\n} from '@onemrvapublic/design-system/shared';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-month-year',\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\n  ],\n  standalone: true,\n  templateUrl: './demo-datepicker-month-year.component.html',\n\n  providers: [onemrvaDateLuxonYearMonthProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerMonthYearComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly dateControl: FormControl<DateTime | null> =\n    new FormControl<DateTime | null>(null);\n\n  setMonthAndYear(date: DateTime, datepicker: MatDatepicker<DateTime>) {\n    this.dateControl.setValue(date);\n\n    datepicker.close();\n  }\n\n  ngOnInit(): void {\n    this.dateControl.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker-month-year.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a year and month</mat-label>\n    <input\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"datePicker\"\n      [formControl]=\"dateControl\"\n    />\n    <mat-hint>MM YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matIconSuffix\n      [for]=\"datePicker\"\n      id=\"datepickertoggle\"\n      [aria-label]=\"'Pick a date' | translate\"\n      [title]=\"'Pick a date' | translate\"\n    />\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    />\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonYearMonthProvider,\n} from '@onemrvapublic/design-system/shared';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-month-year',\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\n  ],\n  standalone: true,\n  templateUrl: './demo-datepicker-month-year.component.html',\n\n  providers: [onemrvaDateLuxonYearMonthProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerMonthYearComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly dateControl: FormControl<DateTime | null> =\n    new FormControl<DateTime | null>(null);\n\n  setMonthAndYear(date: DateTime, datepicker: MatDatepicker<DateTime>) {\n    this.dateControl.setValue(date);\n\n    datepicker.close();\n  }\n\n  ngOnInit(): void {\n    this.dateControl.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/datepicker.json

@@ -1 +1 @@
-{"demo-datepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date</mat-label>\n  <input\n    onemrvaDateFormat\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"form\"\n  />\n  <mat-hint>DD/MM/YYYY</mat-hint>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"picker\"\n    [attr.data-cy]=\"'click-me'\"\n  ></mat-datepicker-toggle>\n  <mat-datepicker\n    [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n    #picker\n  ></mat-datepicker>\n</mat-form-field>\n","demo-datepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateNativeProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker',\n  templateUrl: './demo-datepicker.component.html',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  providers: [onemrvaDateNativeProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  form: FormControl = new FormControl('');\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.setValue(new Date());\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date</mat-label>\n  <input\n    onemrvaDateFormat\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"form\"\n  />\n  <mat-hint>DD/MM/YYYY</mat-hint>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [attr.data-cy]=\"'click-me'\" />\n  <mat-datepicker\n    [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n    #picker\n  />\n</mat-form-field>\n","demo-datepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateNativeProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system/mat-datepicker-header';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker',\n  templateUrl: './demo-datepicker.component.html',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  providers: [onemrvaDateNativeProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  form: FormControl = new FormControl('');\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.setValue(new Date());\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/daterangepicker.json

@@ -1 +1 @@
-{"demo-daterangepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      onemrvaDateFormat\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      onemrvaDateFormat\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"campaignOnePicker\"\n  ></mat-datepicker-toggle>\n  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  readonly = input(false);\n  disabled = input(false);\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-daterangepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      onemrvaDateFormat\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      onemrvaDateFormat\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle matSuffix [for]=\"campaignOnePicker\" />\n  <mat-date-range-picker #campaignOnePicker />\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  readonly = input(false);\n  disabled = input(false);\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.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":"<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"}
+{"demo-dialog-content.component.html":"<div mat-dialog-title>\n  I Have a Dream\n  <span matDialogClose class=\"close-dialog\">\n    <mat-icon>close</mat-icon>\n  </span>\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';\n\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: [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"}
+{"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  inject,\n  input,\n} from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { Subject, take } from 'rxjs';\n\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: [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  readonly size = input<OnemrvaMatSize>('medium');\n  readonly type = input<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      autoFocus: false,\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-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/layout';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'layout-drawer',\n  templateUrl: 'demo-drawer-content.component.html',\n  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/layout';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  MatDrawer,\n  MatDrawerContainer,\n  MatDrawerContent,\n} from '@angular/material/sidenav';\nimport { DemoDrawerContentComponent } from './demo-drawer-content.component';\n\n@Component({\n  selector: 'app-demo-drawer',\n  templateUrl: 'demo-drawer.component.html',\n  standalone: true,\n  imports: [\n    RouterModule,\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  @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"}
+{"demo-drawer-content.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n  Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n  <h2>Content title</h2>\n  <p>\n    The slide-over allows to get some content displayed on a panel with some\n    elements inside.\n  </p>\n  <div id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm()\">\n    <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n      <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>User ID</mat-label>\n          <input matInput [formControl]=\"userId\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Left fiels</mat-label>\n          <input matInput [formControl]=\"leftField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Right field</mat-label>\n          <input matInput [formControl]=\"rightField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n    </mat-grid-list>\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n  </div>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    class=\"close\"\n    (click)=\"drawerService.close()\"\n  >\n    Cancel\n  </button>\n  <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n    Save\n  </button>\n</onemrva-drawer-actions>\n","demo-drawer-content.component.ts":"import { Component, inject, input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  LayoutDrawerActionsComponent,\n  LayoutDrawerContentComponent,\n  LayoutDrawerTitleComponent,\n  OnemrvaDrawerService,\n} from '@onemrvapublic/design-system/layout';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'layout-drawer',\n  templateUrl: 'demo-drawer-content.component.html',\n  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  readonly myForm = input.required<FormGroup>();\n\n  get userId() {\n    return this.myForm().get('userId') as FormControl;\n  }\n  get leftField() {\n    return this.myForm().get('leftField') as FormControl;\n  }\n  get rightField() {\n    return this.myForm().get('rightField') as FormControl;\n  }\n  drawerService = inject(OnemrvaDrawerService);\n\n  save() {\n    this.drawerService.close();\n  }\n}\n","demo-drawer.component.html":"<!-- !! The layout already contains a mat-drawer-container -->\n<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost />\n  </mat-drawer>\n  <mat-drawer-content>\n    <div style=\"height: 60vh\">\n      <button\n        mat-flat-button\n        color=\"accent\"\n        (click)=\"toggleForm()\"\n        [attr.data-cy]=\"'click-me'\"\n      >\n        Open form\n      </button>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n","demo-drawer.component.ts":"import {\n  AfterViewInit,\n  Component,\n  ComponentRef,\n  inject,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport {\n  DrawerHostDirective,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system/layout';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  MatDrawer,\n  MatDrawerContainer,\n  MatDrawerContent,\n} from '@angular/material/sidenav';\nimport { DemoDrawerContentComponent } from './demo-drawer-content.component';\n\n@Component({\n  selector: 'app-demo-drawer',\n  templateUrl: 'demo-drawer.component.html',\n  standalone: true,\n  imports: [\n    RouterModule,\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  private readonly drawer = viewChild<MatDrawer>('mainDrawer');\n\n  private readonly drawerHost = viewChild(DrawerHostDirective);\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  ngAfterViewInit(): void {\n    const drawer = this.drawer();\n    if (drawer) {\n      this.drawerService.setDrawer(drawer);\n    }\n    const drawerHost = this.drawerHost();\n    if (drawerHost) {\n      this.drawerService.host = drawerHost;\n    }\n  }\n\n  toggleForm() {\n    if (!this.componentRef) {\n      this.componentRef = this.drawerService.host?.createComponent(\n        DemoDrawerContentComponent,\n      );\n    }\n    if (!this.componentRef) {\n      console.error('Drawer host is not available.');\n      return;\n    }\n\n    // TODO: signal\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/enterprise-number-input.json

@@ -1 +1 @@
-{"demo-enterprise-number-input.component.html":"<onemrva-mat-input-enterprise-number\n  [readonly]=\"readonly\"\n  [enterpriseNumber]=\"form\"\n  label=\"{{ 'input.vies.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.vies.notFound' | translate }}\"\n  placeholderLabel=\"{{ 'input.vies.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.vies.search' | translate }}\"\n  hint=\" {{ 'input.vies.hint' | translate }}\"\n  (getCountry)=\"getCountry($event)\"\n></onemrva-mat-input-enterprise-number>\n","demo-enterprise-number-input.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputEnterpriseNumberComponent } from '@onemrvapublic/design-system/mat-input-enterprise-number';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-enterprise-number-input',\n  templateUrl: './demo-enterprise-number-input.component.html',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputEnterpriseNumberComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoEnterpriseNumberInputComponent extends DemoComponentBase {\n  form = new FormControl('', [Validators.required]);\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\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('BE0666999888');\n      }\n    });\n  }\n\n  /**\n   * Output the country selected\n   * @param $event\n   */\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n}\n"}
+{"demo-enterprise-number-input.component.html":"<onemrva-mat-input-enterprise-number\n  [readonly]=\"readonly()\"\n  [enterpriseNumber]=\"form\"\n  label=\"{{ 'input.vies.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.vies.notFound' | translate }}\"\n  placeholderLabel=\"{{ 'input.vies.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.vies.search' | translate }}\"\n  hint=\" {{ 'input.vies.hint' | translate }}\"\n  (getCountry)=\"getCountry($event)\"\n/>\n","demo-enterprise-number-input.component.ts":"import { Component, effect, ViewEncapsulation, input } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputEnterpriseNumberComponent } from '@onemrvapublic/design-system/mat-input-enterprise-number';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-enterprise-number-input',\n  templateUrl: './demo-enterprise-number-input.component.html',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputEnterpriseNumberComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoEnterpriseNumberInputComponent extends DemoComponentBase {\n  form = new FormControl('', [Validators.required]);\n\n  readonly disabled = input(false);\n\n  readonly readonly = input(false);\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('BE0666999888');\n      }\n    });\n  }\n\n  /**\n   * Output the country selected\n   * @param $event\n   */\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n}\n"}