@onemrvapublic/design-system-demos 20.11.1-develop.5 → 20.11.1-develop.7

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

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';\nimport { CommonModule } from '@angular/common';\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: [CommonModule, 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\"></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"}

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 { CommonModule } from '@angular/common';\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: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n  ],\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, 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"}

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';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatIcon } from '@angular/material/icon';\n\n@Component({\n  selector: 'app-demo-button-toggle',\n  templateUrl: 'demo-button-toggle.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonToggleModule, MatIcon],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonToggleComponent extends DemoComponentBase {\n  textToggles = ['Bold', 'Italic', 'Underline'];\n  iconToggles = ['format_bold', 'format_italic', 'format_underlined'];\n\n  type = input('text');\n  toggles = signal(this.textToggles);\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.type() === 'text') {\n        this.toggles.set(this.textToggles);\n      } else {\n        this.toggles.set(this.iconToggles);\n      }\n    });\n  }\n}\n"}
+{"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"}

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';\nimport { CommonModule } from '@angular/common';\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    CommonModule,\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\"></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"}

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 { CommonModule } from '@angular/common';\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    CommonModule,\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, 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"}

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';\nimport { CommonModule } from '@angular/common';\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: [\n    CommonModule,\n    MatCheckboxModule,\n    FormsModule,\n    OnemRvaReadonlyDirective,\n  ],\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, 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"}

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';\nimport { CommonModule } from '@angular/common';\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    CommonModule,\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      >\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"}

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';\nimport { CommonModule } from '@angular/common';\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: [\n    CommonModule,\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    OnemRvaColorDirective,\n  ],\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, 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"}

package/assets/json/choice-chips.json

@@ -1 +1 @@
-{"demo-choice-chips.component.html":"<section class=\"example-section\" [formGroup]=\"form\">\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"pepperoni\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Pepperoni\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"extracheese\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Extra Cheese\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    formControlName=\"mushroom\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Mushroom\n  </onemrva-mat-choice-chip>\n</section>\n","demo-choice-chips.component.scss":".example-section {\n}\n","demo-choice-chips.component.ts":"import {\n  Component,\n  effect,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { OnemrvaMatChoiceChipComponent } from '@onemrvapublic/design-system/mat-choice-chip';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n  styleUrls: ['demo-choice-chips.component.scss'],\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatCheckboxModule,\n    OnemrvaMatChoiceChipComponent,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  private readonly _formBuilder = inject(FormBuilder);\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(val => {\n      this.output.set(val);\n    });\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  readonly form = this._formBuilder.group({\n    pepperoni: false,\n    extracheese: false,\n    mushroom: false,\n  });\n}\n"}
+{"demo-choice-chips.component.html":"<section class=\"example-section\" [formGroup]=\"form\">\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"pepperoni\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Pepperoni\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"extracheese\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Extra Cheese\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    formControlName=\"mushroom\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Mushroom\n  </onemrva-mat-choice-chip>\n</section>\n","demo-choice-chips.component.scss":".example-section {\n}\n","demo-choice-chips.component.ts":"import {\n  Component,\n  effect,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { OnemrvaMatChoiceChipComponent } from '@onemrvapublic/design-system/mat-choice-chip';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n  styleUrls: ['demo-choice-chips.component.scss'],\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatCheckboxModule,\n    OnemrvaMatChoiceChipComponent,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  private readonly _formBuilder = inject(FormBuilder);\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(val => {\n      this.output.set(val);\n    });\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  readonly form = this._formBuilder.group({\n    pepperoni: false,\n    extracheese: false,\n    mushroom: false,\n  });\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';\nimport { CommonModule } from '@angular/common';\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    CommonModule,\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></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"}

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';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\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    CommonModule,\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\"></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"}

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';\nimport { CommonModule } from '@angular/common';\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    CommonModule,\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    ></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"}

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';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\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    CommonModule,\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\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"}

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';\nimport { CommonModule } from '@angular/common';\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    CommonModule,\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\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"}

package/assets/json/dialog.json

@@ -1 +1 @@
-{"demo-dialog.component.html":"<button\n  mat-flat-button\n  color=\"accent\"\n  (click)=\"openDialog(size, type)\"\n  data-cy=\"click-me\"\n>\n  Open Dialog\n</button>\n","demo-dialog.component.ts":"import {\n  Component,\n  ViewEncapsulation,\n  OnDestroy,\n  Input,\n  inject,\n} from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { Subject, take } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\nimport { DemoDialogContentComponent } from '../dialog-content';\nimport {\n  OnemrvaMatColor,\n  OnemrvaMatSize,\n} from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-dialog',\n  templateUrl: 'demo-dialog.component.html',\n\n  standalone: true,\n  imports: [CommonModule, FormsModule, MatDialogModule, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogComponent\n  extends DemoComponentBase\n  implements OnDestroy\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  dialog = inject(MatDialog);\n\n  @Input()\n  size: OnemrvaMatSize = 'medium';\n  @Input()\n  type: OnemrvaMatColor = '';\n\n  ngOnDestroy(): void {\n    this.destroyNotifier$.next();\n    this.destroyNotifier$.complete();\n  }\n\n  openDialog(\n    panelSize: OnemrvaMatSize = 'medium',\n    panelType: OnemrvaMatColor = '',\n  ) {\n    const panelClass: string[] = [];\n    panelClass.push(`${panelSize}`);\n\n    if (panelType !== '') {\n      panelClass.push(`mat-${panelType}`);\n    }\n    const dialogRef = this.dialog.open(DemoDialogContentComponent, {\n      data: { panelSize: panelSize, panelType: panelType },\n      panelClass,\n    });\n    dialogRef\n      .afterClosed()\n      .pipe(take(1))\n      .subscribe(() => {\n        console.log('closed');\n      });\n  }\n}\n"}
+{"demo-dialog.component.html":"<button\n  mat-flat-button\n  color=\"accent\"\n  (click)=\"openDialog(size, type)\"\n  data-cy=\"click-me\"\n>\n  Open Dialog\n</button>\n","demo-dialog.component.ts":"import {\n  Component,\n  ViewEncapsulation,\n  OnDestroy,\n  Input,\n  inject,\n} from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { Subject, take } from 'rxjs';\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"}

package/assets/json/digit-only.json

@@ -1 +1 @@
-{"demo-digit-only.component.html":"<mat-form-field>\n  <mat-label>Input</mat-label>\n  <input matInput digitOnly />\n</mat-form-field>\n","demo-digit-only.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-digit-only',\n  templateUrl: 'demo-digit-only.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatInputModule,\n    FormsModule,\n    OnemrvaSharedModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDigitOnlyComponent extends DemoComponentBase {}\n"}
+{"demo-digit-only.component.html":"<mat-form-field>\n  <mat-label>Input</mat-label>\n  <input matInput digitOnly />\n</mat-form-field>\n","demo-digit-only.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-digit-only',\n  templateUrl: 'demo-digit-only.component.html',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatInputModule,\n    FormsModule,\n    OnemrvaSharedModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDigitOnlyComponent extends DemoComponentBase {}\n"}

package/assets/json/drag-and-drop.json

@@ -1 +1 @@
-{"demo-drag-and-drop.component.html":"<div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  @for (item of list; track item.title) {\n    <div\n      style=\"margin-bottom: 8px\"\n      cdkDrag\n      cdkDragBoundary=\".cdk-drop-list\"\n      cdkDragPreviewContainer=\"parent\"\n    >\n      <div *cdkDragPlaceholder></div>\n      {{ item.title }}\n    </div>\n  }\n</div>\n","demo-drag-and-drop.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  CdkDragDrop,\n  DragDropModule,\n  moveItemInArray,\n} from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-drag-and-drop',\n  templateUrl: 'demo-drag-and-drop.component.html',\n\n  standalone: true,\n  imports: [CommonModule, DragDropModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDragAndDropComponent extends DemoComponentBase {\n  list = [\n    { id: 1, title: 'item1' },\n    { id: 2, title: 'item2' },\n    { id: 3, title: 'item3' },\n    { id: 4, title: 'item4' },\n    { id: 5, title: 'item5' },\n    { id: 6, title: 'item6' },\n  ];\n\n  drop(event: CdkDragDrop<any[]>) {\n    moveItemInArray(this.list, event.previousIndex, event.currentIndex);\n  }\n}\n"}
+{"demo-drag-and-drop.component.html":"<div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  @for (item of list; track item.title) {\n    <div\n      style=\"margin-bottom: 8px\"\n      cdkDrag\n      cdkDragBoundary=\".cdk-drop-list\"\n      cdkDragPreviewContainer=\"parent\"\n    >\n      <div *cdkDragPlaceholder></div>\n      {{ item.title }}\n    </div>\n  }\n</div>\n","demo-drag-and-drop.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  CdkDragDrop,\n  DragDropModule,\n  moveItemInArray,\n} from '@angular/cdk/drag-drop';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-drag-and-drop',\n  templateUrl: 'demo-drag-and-drop.component.html',\n\n  standalone: true,\n  imports: [DragDropModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDragAndDropComponent extends DemoComponentBase {\n  list = [\n    { id: 1, title: 'item1' },\n    { id: 2, title: 'item2' },\n    { id: 3, title: 'item3' },\n    { id: 4, title: 'item4' },\n    { id: 5, title: 'item5' },\n    { id: 6, title: 'item6' },\n  ];\n\n  drop(event: CdkDragDrop<any[]>) {\n    moveItemInArray(this.list, event.previousIndex, event.currentIndex);\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';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  MatDrawer,\n  MatDrawerContainer,\n  MatDrawerContent,\n} from '@angular/material/sidenav';\nimport { DemoDrawerContentComponent } from './demo-drawer-content.component';\n\n@Component({\n  selector: 'app-demo-drawer',\n  templateUrl: 'demo-drawer.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterModule,\n\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  @ViewChild('mainDrawer', { static: true })\n  private drawer?: MatDrawer;\n\n  @ViewChild(DrawerHostDirective, { static: true })\n  private drawerHost?: DrawerHostDirective;\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  ngAfterViewInit(): void {\n    if (this.drawer) {\n      this.drawerService.setDrawer(this.drawer);\n    }\n    if (this.drawerHost) {\n      this.drawerService.host = this.drawerHost;\n    }\n  }\n\n  toggleForm() {\n    if (!this.componentRef) {\n      this.componentRef = this.drawerService.host?.createComponent(\n        DemoDrawerContentComponent,\n      );\n    }\n    if (!this.componentRef) {\n      console.error('Drawer host is not available.');\n      return;\n    }\n    this.componentRef.instance.myForm = this.dummyForm;\n\n    this.drawerService.size.set('xlarge');\n    this.drawerService.toggle();\n  }\n\n  help() {\n    alert('HELP');\n  }\n}\n"}
+{"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"}

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';\nimport { CommonModule } from '@angular/common';\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    CommonModule,\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></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"}

package/assets/json/error-handler.json

@@ -1 +1 @@
-{"demo-error-handler.component.html":"<button mat-flat-button color=\"primary\" (click)=\"saveTheWorld()\">\n  Save the world</button\n>&nbsp;&nbsp;&nbsp;\n\n<button mat-flat-button color=\"accent\" (click)=\"destroyTheWorld()\">\n  Destroy the world\n</button>\n","demo-error-handler.component.ts":"import { HttpClient } from '@angular/common/http';\nimport { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';\nimport { take } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-error-handler',\n  templateUrl: 'demo-error-handler.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatSnackBarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorHandlerComponent extends DemoComponentBase {\n  http = inject(HttpClient);\n  snackbar = inject(MatSnackBar);\n\n  saveTheWorld() {\n    this.http\n      .get('save-the-world')\n      .pipe(take(1))\n      .subscribe(\n        next => {\n          console.log(next);\n        },\n        error => {\n          console.error(error);\n          this.snackbar.open('You caught the error locally', 'Close');\n        },\n      );\n  }\n\n  destroyTheWorld() {\n    this.http.get('destroy-the-world').pipe(take(1)).subscribe();\n  }\n}\n"}
+{"demo-error-handler.component.html":"<button mat-flat-button color=\"primary\" (click)=\"saveTheWorld()\">\n  Save the world</button\n>&nbsp;&nbsp;&nbsp;\n\n<button mat-flat-button color=\"accent\" (click)=\"destroyTheWorld()\">\n  Destroy the world\n</button>\n","demo-error-handler.component.ts":"import { HttpClient } from '@angular/common/http';\nimport { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';\nimport { take } from 'rxjs/operators';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-error-handler',\n  templateUrl: 'demo-error-handler.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, MatSnackBarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorHandlerComponent extends DemoComponentBase {\n  http = inject(HttpClient);\n  snackbar = inject(MatSnackBar);\n\n  saveTheWorld() {\n    this.http\n      .get('save-the-world')\n      .pipe(take(1))\n      .subscribe(\n        next => {\n          console.log(next);\n        },\n        error => {\n          console.error(error);\n          this.snackbar.open('You caught the error locally', 'Close');\n        },\n      );\n  }\n\n  destroyTheWorld() {\n    this.http.get('destroy-the-world').pipe(take(1)).subscribe();\n  }\n}\n"}

package/assets/json/error.json

@@ -1 +1 @@
-{"demo-error.component.html":"<page-error [code]=\"code\">\n  <page-error-action> Custom action </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  PageErrorActionComponent,\n  PageErrorComponent,\n} from '@onemrvapublic/design-system/page-error';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-error',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageErrorComponent,\n    PageErrorActionComponent,\n  ],\n\n  templateUrl: 'demo-error.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n  @Input()\n  code = 500;\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:\n\n```\n    {\n    \"glob\": \"**/*\",\n    \"input\": \"node_modules/@onemrvapublic/design-system/page-not-found/assets\",\n    \"output\": \"/assets/\"\n    }\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.pageNotFound(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.651\n\nFix background shape\n\n## 14.1.604\n\nMigration from @onemrvapublic/core to @onemrvapublic/design-system\n\n## 14.1.512\n\nDraft version\n"}
+{"demo-error.component.html":"<page-error [code]=\"code\">\n  <page-error-action> Custom action </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  PageErrorActionComponent,\n  PageErrorComponent,\n} from '@onemrvapublic/design-system/page-error';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-error',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageErrorComponent,\n    PageErrorActionComponent,\n  ],\n\n  templateUrl: 'demo-error.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n  @Input()\n  code = 500;\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:\n\n```\n    {\n    \"glob\": \"**/*\",\n    \"input\": \"node_modules/@onemrvapublic/design-system/page-not-found/assets\",\n    \"output\": \"/assets/\"\n    }\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.pageNotFound(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.651\n\nFix background shape\n\n## 14.1.604\n\nMigration from @onemrvapublic/core to @onemrvapublic/design-system\n\n## 14.1.512\n\nDraft version\n"}

package/assets/json/fab.json

@@ -1 +1 @@
-{"demo-fab.component.html":"<button\n  mat-fab\n  matTooltip=\"Info about the action\"\n  [color]=\"color\"\n  [disabled]=\"disabled\"\n  aria-label=\"Example icon button with a delete icon\"\n>\n  <mat-icon>{{ icon }}</mat-icon>\n</button>\n","demo-fab.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\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-fab',\n  templateUrl: 'demo-fab.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatSelectModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFabComponent extends DemoComponentBase {\n  @Input() icon = 'home';\n  @Input() color: OnemrvaMatColor = '';\n  @Input() disabled = false;\n}\n"}
+{"demo-fab.component.html":"<button\n  mat-fab\n  matTooltip=\"Info about the action\"\n  [color]=\"color\"\n  [disabled]=\"disabled\"\n  aria-label=\"Example icon button with a delete icon\"\n>\n  <mat-icon>{{ icon }}</mat-icon>\n</button>\n","demo-fab.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\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-fab',\n  templateUrl: 'demo-fab.component.html',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatSelectModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFabComponent extends DemoComponentBase {\n  @Input() icon = 'home';\n  @Input() color: OnemrvaMatColor = '';\n  @Input() disabled = false;\n}\n"}

package/assets/json/file-panel.json

@@ -1 +1 @@
-{"demo-file-panel.component.html":"<file-panel [file]=\"getFile()\"> </file-panel>\n","demo-file-panel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  convertToReferencedProgressFile,\n  ReferencedProgressFile,\n  OnemrvaMatFileUploadModule,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n  /**\n   * Document reference in document service\n   */\n  documentId?: string;\n  /**\n   * Name of the document\n   */\n  name?: string;\n}\n\n@Component({\n  selector: 'app-demo-file-panel',\n  templateUrl: 'demo-file-panel.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, OnemrvaMatFileUploadModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n  @Input()\n  color: '' | 'warn' | 'success' | 'error' = '';\n\n  testFile: Annex = {\n    documentId: '1',\n    name: 'File',\n  };\n\n  successFile: ReferencedProgressFile = {\n    ref: Symbol('1'),\n    enableProgressBar: false,\n    id: '1',\n    message: 'This is how a success file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Success',\n    file: undefined,\n    color: 'success',\n    maxSize: 100,\n  };\n  errorFile: ReferencedProgressFile = {\n    ref: Symbol('2'),\n    enableProgressBar: false,\n    id: '2',\n    message: 'This is how an error file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Error',\n    file: undefined,\n    color: 'error',\n    maxSize: 100,\n  };\n  warnFile: ReferencedProgressFile = {\n    ref: Symbol('3'),\n    enableProgressBar: false,\n    id: '3',\n    message: 'This is how a warn file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Warn',\n    file: undefined,\n    color: 'warn',\n    maxSize: 100,\n  };\n\n  convertToProgressFile(annex: Annex) {\n    return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n  }\n\n  getFile() {\n    switch (this.color) {\n      case 'success':\n        return this.successFile;\n      case 'error':\n        return this.errorFile;\n      case 'warn':\n        return this.warnFile;\n      default:\n        return this.convertToProgressFile(this.testFile);\n    }\n  }\n}\n"}
+{"demo-file-panel.component.html":"<file-panel [file]=\"getFile()\"> </file-panel>\n","demo-file-panel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  convertToReferencedProgressFile,\n  ReferencedProgressFile,\n  OnemrvaMatFileUploadModule,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n  /**\n   * Document reference in document service\n   */\n  documentId?: string;\n  /**\n   * Name of the document\n   */\n  name?: string;\n}\n\n@Component({\n  selector: 'app-demo-file-panel',\n  templateUrl: 'demo-file-panel.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, OnemrvaMatFileUploadModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n  @Input()\n  color: '' | 'warn' | 'success' | 'error' = '';\n\n  testFile: Annex = {\n    documentId: '1',\n    name: 'File',\n  };\n\n  successFile: ReferencedProgressFile = {\n    ref: Symbol('1'),\n    enableProgressBar: false,\n    id: '1',\n    message: 'This is how a success file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Success',\n    file: undefined,\n    color: 'success',\n    maxSize: 100,\n  };\n  errorFile: ReferencedProgressFile = {\n    ref: Symbol('2'),\n    enableProgressBar: false,\n    id: '2',\n    message: 'This is how an error file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Error',\n    file: undefined,\n    color: 'error',\n    maxSize: 100,\n  };\n  warnFile: ReferencedProgressFile = {\n    ref: Symbol('3'),\n    enableProgressBar: false,\n    id: '3',\n    message: 'This is how a warn file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Warn',\n    file: undefined,\n    color: 'warn',\n    maxSize: 100,\n  };\n\n  convertToProgressFile(annex: Annex) {\n    return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n  }\n\n  getFile() {\n    switch (this.color) {\n      case 'success':\n        return this.successFile;\n      case 'error':\n        return this.errorFile;\n      case 'warn':\n        return this.warnFile;\n      default:\n        return this.convertToProgressFile(this.testFile);\n    }\n  }\n}\n"}

package/assets/json/file-upload.json

@@ -1 +1 @@
-{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n>\n</onemrva-mat-file-upload>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel\n    [file]=\"file\"\n    [actions]=\"actions\"\n    [showProgress]=\"true\"\n  ></file-panel>\n</ng-template>\n","demo-file-upload.component.ts":"import {\n  Component,\n  OnInit,\n  ViewEncapsulation,\n  InjectionToken,\n  Inject,\n  inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nexport const CUSTOM_VALIDATION_FN = new InjectionToken<any>(\n  'CUSTOM_VALIDATION_FN',\n);\n\n@Component({\n  selector: 'app-demo-file-upload',\n  templateUrl: 'demo-file-upload.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButtonModule,\n    TranslateModule,\n  ],\n  providers: [\n    TranslateService,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadService,\n    },\n    {\n      provide: CUSTOM_VALIDATION_FN,\n      useValue: (x: any) => x[0],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  fileUploadService = inject(OnemrvaMatFileUploadService);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  constructor() {\n    super();\n\n    this.fileUploadStore.files$.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(value);\n    });\n  }\n\n  actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  downloadFile(file: ReferencedProgressFile) {\n    this.fileUploadService.downloadFile(file.id);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n}\n","demo-file-upload.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadService {\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({});\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n}\n"}
+{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n>\n</onemrva-mat-file-upload>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel\n    [file]=\"file\"\n    [actions]=\"actions\"\n    [showProgress]=\"true\"\n  ></file-panel>\n</ng-template>\n","demo-file-upload.component.ts":"import {\n  Component,\n  OnInit,\n  ViewEncapsulation,\n  InjectionToken,\n  inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nexport const CUSTOM_VALIDATION_FN = new InjectionToken<any>(\n  'CUSTOM_VALIDATION_FN',\n);\n\n@Component({\n  selector: 'app-demo-file-upload',\n  templateUrl: 'demo-file-upload.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatFileUploadModule, MatButtonModule, TranslateModule],\n  providers: [\n    TranslateService,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadService,\n    },\n    {\n      provide: CUSTOM_VALIDATION_FN,\n      useValue: (x: any) => x[0],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  fileUploadService = inject(OnemrvaMatFileUploadService);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  constructor() {\n    super();\n\n    this.fileUploadStore.files$.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(value);\n    });\n  }\n\n  actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  downloadFile(file: ReferencedProgressFile) {\n    this.fileUploadService.downloadFile(file.id);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n}\n","demo-file-upload.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadService {\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({});\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n}\n"}

package/assets/json/grid.json

@@ -1 +1 @@
-{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}
+{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}

package/assets/json/horizontal-stepper.json

@@ -1 +1 @@
-{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>Name</mat-label>\n        <input\n          matInput\n          placeholder=\"Last name, First name\"\n          formControlName=\"firstCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !firstFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !secondFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step aria-label=\"Done\">\n    <ng-template matStepLabel>Done</ng-template>\n    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } from '@angular/core';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\nimport {\n  STEPPER_GLOBAL_OPTIONS,\n  StepperSelectionEvent,\n} from '@angular/cdk/stepper';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatInputModule,\n    MatFormFieldModule,\n    MatStepperModule,\n  ],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n  ],\n})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}
+{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>Name</mat-label>\n        <input\n          matInput\n          placeholder=\"Last name, First name\"\n          formControlName=\"firstCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !firstFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !secondFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step aria-label=\"Done\">\n    <ng-template matStepLabel>Done</ng-template>\n    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } from '@angular/core';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\nimport {\n  STEPPER_GLOBAL_OPTIONS,\n  StepperSelectionEvent,\n} from '@angular/cdk/stepper';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\n  imports: [\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatInputModule,\n    MatFormFieldModule,\n    MatStepperModule,\n  ],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n  ],\n})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}