@onemrvapublic/design-system-demos 22.0.0-develop.3 → 22.0.0-develop.7

package/3rdpartylicenses.txt

@@ -579,32 +579,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
---------------------------------------------------------------------------------
-Package: @angular/animations
-License: "MIT"
-
-The MIT License
-
-Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
 --------------------------------------------------------------------------------
 Package: @ngx-translate/core
 License: "MIT"

package/browser/assets/codes.json

@@ -1 +1 @@
-["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-new","card-table","carousel","checkbox","chips","chips-input","choice-chips","collapsible-page-divider","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","fab","file-panel","file-upload","file-upload-manual","form","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","select","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators"]
+["address","address-input","autocomplete","avatar","badge","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-new","card-table","carousel","checkbox","chips","chips-input","choice-chips","collapsible-page-divider","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","fab","file-panel","file-upload","file-upload-manual","form","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","select","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timeline","timepicker","toast","toc","toolbar","tooltip","typography","validators"]

package/browser/assets/i18n/de.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Zeitraum",
+    "month": "Monat",
+    "year": "Jahr",
+    "years": "Jahre",
+    "goToMonth": "Zum Monat",
+    "previousYear": "Zum vorherigen Jahr",
+    "nextYear": "Zum nächsten Jahr",
+    "previousMonth": "Zum vorherigen Monat",
+    "nextMonth": "Zum nächsten Monat",
+    "goTo": "Gehe zu {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/browser/assets/i18n/en.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Period",
+    "month": "Month",
+    "year": "Year",
+    "years": "Years",
+    "goToMonth": "Go to month",
+    "previousYear": "Go to previous year",
+    "nextYear": "Go to next year",
+    "previousMonth": "Go to previous month",
+    "nextMonth": "Go to next month",
+    "goTo": "Go to {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/browser/assets/i18n/fr.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Période",
+    "month": "Mois",
+    "year": "An",
+    "years": "Ans",
+    "goToMonth": "Aller au mois",
+    "previousYear": "Aller à l'année précédente",
+    "nextYear": "Aller à l'année suivante",
+    "previousMonth": "Aller au mois précédent",
+    "nextMonth": "Aller au mois suivant",
+    "goTo": "Aller à {{label}}"
+  },
   "demo.title": "Design System",
   "error": {
     "500": {

package/browser/assets/i18n/nl.json

@@ -1,4 +1,16 @@
 {
+  "timeline": {
+    "period": "Periode",
+    "month": "Maand",
+    "year": "Jaar",
+    "years": "Jaar",
+    "goToMonth": "Ga naar maand",
+    "previousYear": "Ga naar vorig jaar",
+    "nextYear": "Ga naar volgend jaar",
+    "previousMonth": "Ga naar vorige maand",
+    "nextMonth": "Ga naar volgende maand",
+    "goTo": "Ga naar {{label}}"
+  },
   "demo.title": "Ontwerpsysteem",
   "error": {
     "500": {

package/browser/assets/json/badge.json

@@ -1 +1 @@
-{"demo-badge.component.html":"<div [matBadge]=\"_value()\" [matBadgeSize]=\"_size()\">\n  Here is your badge demo {{ value() }}\n</div>\n","demo-badge.component.ts":"import { Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatBadge } from '@angular/material/badge';\n\n@Component({\n  selector: 'app-demo-badge',\n  templateUrl: 'demo-badge.component.html',\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    TranslateModule,\n    MatBadge,\n  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBadgeComponent extends DemoComponentBase {\n  value = input<number>(0);\n\n  protected _value = computed(() => {\n    if (this.value() === 0) return '';\n\n    return this.value() > 99 ? '99+' : this.value();\n  });\n\n  protected _size = () => {\n    return this.value() > 1 ? 'large' : 'small';\n  };\n}\n"}
+{"demo-badge.component.html":"<div [matBadge]=\"_value()\" [matBadgeSize]=\"_size()\">\n  Here is your badge demo {{ value() }}\n</div>\n","demo-badge.component.ts":"import { Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { MatBadge } from '@angular/material/badge';\n\n@Component({\n  selector: 'app-demo-badge',\n  templateUrl: 'demo-badge.component.html',\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    MatBadge,\n  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBadgeComponent extends DemoComponentBase {\n  value = input<number>(0);\n\n  protected _value = computed(() => {\n    if (this.value() === 0) return '';\n\n    return this.value() > 99 ? '99+' : this.value();\n  });\n\n  protected _size = () => {\n    return this.value() > 1 ? 'large' : 'small';\n  };\n}\n"}

package/browser/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\n  <mat-hint>hint</mat-hint>\n  @if (accountNumber.hasError('WrongBBANLength')) {\n    <mat-error>\n      {{ 'input.bank.length' | translate }}\n    </mat-error>\n  } @else if (\n    accountNumber.hasError('WrongBBANFormat') ||\n    accountNumber.hasError('WrongAccountBankBranchChecksum') ||\n    accountNumber.hasError('WrongIBANChecksum')\n  ) {\n    <mat-error> {{ 'input.bank.invalid' | translate }} ! </mat-error>\n  }\n  @if (accountNumber.hasError('NoIBANCountry')) {\n    <mat-error> NoIBANCountry </mat-error>\n  }\n  @if (accountNumber.hasError('required')) {\n    <mat-error>\n      {{ 'input.bank.required' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-bank-input.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatInputIbanComponent } from '@onemrvapublic/design-system/mat-input-iban';\nimport { bankAccountValidator } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-bank-input',\n  templateUrl: 'demo-bank-input.component.html',\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemrvaMatInputIbanComponent,\n    OnemRvaReadonlyDirective,\n  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBankInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  accountNumber = new FormControl('', [\n    Validators.required,\n    bankAccountValidator(),\n  ]);\n}\n"}
+{"demo-bank-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>IBAN</mat-label>\n\n  <onemrva-mat-input-iban [formControl]=\"accountNumber\" />\n\n  <mat-hint>hint</mat-hint>\n  @if (accountNumber.hasError('WrongBBANLength')) {\n    <mat-error>\n      {{ 'input.bank.length' | translate }}\n    </mat-error>\n  } @else if (\n    accountNumber.hasError('WrongBBANFormat') ||\n    accountNumber.hasError('WrongAccountBankBranchChecksum') ||\n    accountNumber.hasError('WrongIBANChecksum')\n  ) {\n    <mat-error> {{ 'input.bank.invalid' | translate }} ! </mat-error>\n  }\n  @if (accountNumber.hasError('NoIBANCountry')) {\n    <mat-error> NoIBANCountry </mat-error>\n  }\n  @if (accountNumber.hasError('required')) {\n    <mat-error>\n      {{ 'input.bank.required' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-bank-input.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { 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';\nimport { TranslatePipe } from '@ngx-translate/core';\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    OnemrvaMatInputIbanComponent,\n    OnemRvaReadonlyDirective,\n    TranslatePipe,\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/browser/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/>\n","demo-birthplace-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemRvaCommonCountry,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatInputBirthPlaceComponent } from '@onemrvapublic/design-system/mat-input-birthplace';\n\n@Component({\n  selector: 'app-demo-birthplace-input',\n  templateUrl: './demo-birthplace-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputBirthPlaceComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBirthplaceInputComponent extends DemoComponentBase {\n  form = new FormControl<OnemRvaCommonCountry | null>(null, [\n    Validators.required,\n  ]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  readonly returnValue = input('object');\n\n  constructor() {\n    super();\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-birthplace-input.component.html":"<onemrva-mat-input-birthplace\n  [readonly]=\"readonly()\"\n  [countryCode]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n  [returnValue]=\"returnValue()\"\n/>\n","demo-birthplace-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslatePipe } 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    TranslatePipe,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBirthplaceInputComponent extends DemoComponentBase {\n  form = new FormControl<OnemRvaCommonCountry | null>(null, [\n    Validators.required,\n  ]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  readonly returnValue = input('object');\n\n  constructor() {\n    super();\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

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

package/browser/assets/json/copy-to-clipboard.json

@@ -1 +1 @@
-{"demo-copy-to-clipboard.component.html":"<p>\n  You can say\n  <copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\"\n    >Hello world</copy-to-clipboard\n  >!\n</p>\n","demo-copy-to-clipboard.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system/mat-copy-to-clipboard';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-copy-to-clipboard',\n  templateUrl: 'demo-copy-to-clipboard.component.html',\n  standalone: true,\n\n  imports: [MatIconModule, OnemrvaCopyToClipboardComponent, TranslateModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCopyToClipboardComponent extends DemoComponentBase {}\n"}
+{"demo-copy-to-clipboard.component.html":"<p>\n  You can say\n  <copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\"\n    >Hello world</copy-to-clipboard\n  >!\n</p>\n","demo-copy-to-clipboard.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system/mat-copy-to-clipboard';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-copy-to-clipboard',\n  templateUrl: 'demo-copy-to-clipboard.component.html',\n  standalone: true,\n\n  imports: [MatIconModule, OnemrvaCopyToClipboardComponent, TranslatePipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCopyToClipboardComponent extends DemoComponentBase {}\n"}

package/browser/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/>\n","demo-country-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputCountryComponent } from '@onemrvapublic/design-system/mat-input-country';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-country-input',\n  templateUrl: './demo-country-input.component.html',\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputCountryComponent,\n    MatInputModule,\n    TranslateModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCountryInputComponent extends DemoComponentBase {\n  form = new FormControl('', [Validators.required]);\n\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('be');\n      }\n    });\n\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-country-input.component.html":"<onemrva-mat-input-country\n  [readonly]=\"readonly()\"\n  [country]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n/>\n","demo-country-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputCountryComponent } from '@onemrvapublic/design-system/mat-input-country';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslatePipe } 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    TranslatePipe,\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/browser/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    />\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    />\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonYearMonthProvider,\n} from '@onemrvapublic/design-system/shared';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-month-year',\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatDatepickerModule,\n    OnemrvaDateFormatDirective,\n  ],\n  standalone: true,\n  templateUrl: './demo-datepicker-month-year.component.html',\n\n  providers: [onemrvaDateLuxonYearMonthProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerMonthYearComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly dateControl: FormControl<DateTime | null> =\n    new FormControl<DateTime | null>(null);\n\n  setMonthAndYear(date: DateTime, datepicker: MatDatepicker<DateTime>) {\n    this.dateControl.setValue(date);\n\n    datepicker.close();\n  }\n\n  ngOnInit(): void {\n    this.dateControl.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-datepicker-month-year.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a year and month</mat-label>\n    <input\n      onemrvaDateFormat\n      matInput\n      [matDatepicker]=\"datePicker\"\n      [formControl]=\"dateControl\"\n    />\n    <mat-hint>MM YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matIconSuffix\n      [for]=\"datePicker\"\n      id=\"datepickertoggle\"\n      [aria-label]=\"'Pick a date' | translate\"\n      [title]=\"'Pick a date' | translate\"\n    />\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    />\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonYearMonthProvider,\n} from '@onemrvapublic/design-system/shared';\n\nimport { TranslatePipe } 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    TranslatePipe,\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/browser/assets/json/drawer.json

@@ -1 +1 @@
-{"demo-drawer-content.component.html":"<section>\n  <onemrva-drawer-title [showClose]=\"true\">\n    Example slide-over with content\n  </onemrva-drawer-title>\n  <onemrva-drawer-content>\n    <h2>Content title</h2>\n    <p>\n      The slide-over allows to get some content displayed on a panel with some\n      elements inside.\n    </p>\n    <div id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm()\">\n      <mat-form-field>\n        <mat-label>User ID</mat-label>\n        <input matInput [formControl]=\"userId\" />\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Left fiels</mat-label>\n        <input matInput [formControl]=\"leftField\" />\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Right field</mat-label>\n        <input matInput [formControl]=\"rightField\" />\n      </mat-form-field>\n    </div>\n  </onemrva-drawer-content>\n  <onemrva-drawer-actions>\n    <button\n      mat-stroked-button\n      color=\"primary\"\n      class=\"close\"\n      (click)=\"drawerService.close()\"\n    >\n      Cancel\n    </button>\n    <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n      Save\n    </button>\n  </onemrva-drawer-actions>\n</section>\n","demo-drawer-content.component.scss":":host > section {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\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 { 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  styleUrls: ['./demo-drawer-content.component.scss'],\n  imports: [\n    LayoutDrawerActionsComponent,\n    LayoutDrawerContentComponent,\n    LayoutDrawerTitleComponent,\n    ReactiveFormsModule,\n    MatIconModule,\n    MatLabel,\n    MatFormField,\n    MatInput,\n    MatButton,\n    OnemrvaMatPanelModule,\n  ],\n})\nexport class DemoDrawerContentComponent extends DemoComponentBase {\n  readonly myForm = input.required<FormGroup>();\n\n  get userId() {\n    return this.myForm().get('userId') as FormControl;\n  }\n  get leftField() {\n    return this.myForm().get('leftField') as FormControl;\n  }\n  get rightField() {\n    return this.myForm().get('rightField') as FormControl;\n  }\n  drawerService = inject(OnemrvaDrawerService);\n\n  save() {\n    this.drawerService.close();\n  }\n}\n","demo-drawer.component.html":"<!-- !! The layout already contains a mat-drawer-container -->\n<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost />\n  </mat-drawer>\n  <mat-drawer-content>\n    <div style=\"height: 60vh\">\n      <button\n        mat-flat-button\n        color=\"accent\"\n        (click)=\"toggleForm()\"\n        [attr.data-cy]=\"'click-me'\"\n      >\n        Open Drawer\n      </button>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n","demo-drawer.component.ts":"import {\n  AfterViewInit,\n  Component,\n  ComponentRef,\n  inject,\n  ViewEncapsulation,\n  viewChild,\n  input,\n  effect,\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 { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';\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  imports: [\n    RouterModule,\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  // private readonly size\n  readonly size = input<OnemrvaMatSize>(OnemrvaMatSize.XLARGE);\n\n  private readonly drawer = viewChild<MatDrawer>('mainDrawer');\n\n  private readonly drawerHost = viewChild(DrawerHostDirective);\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  constructor() {\n    effect(() => {\n      this.drawerService.size.set(this.size());\n    });\n  }\n\n  ngAfterViewInit(): void {\n    const drawer = this.drawer();\n    if (drawer) {\n      this.drawerService.setDrawer(drawer);\n    }\n    const drawerHost = this.drawerHost();\n    if (drawerHost) {\n      this.drawerService.host = drawerHost;\n    }\n  }\n\n  toggleForm() {\n    if (!this.componentRef) {\n      this.componentRef = this.drawerService.host?.createComponent(\n        DemoDrawerContentComponent,\n      );\n      if (this.componentRef) {\n        this.componentRef.setInput('myForm', this.dummyForm);\n      }\n    }\n    if (!this.componentRef) {\n      console.error('Drawer host is not available.');\n      return;\n    }\n    this.componentRef.setInput('myForm', this.dummyForm);\n\n    this.drawerService.toggle();\n  }\n\n  help() {\n    alert('HELP');\n  }\n}\n"}
+{"demo-drawer-content.component.html":"<section>\n  <onemrva-drawer-title [showClose]=\"true\">\n    Example slide-over with content\n  </onemrva-drawer-title>\n  <onemrva-drawer-content>\n    <h2>Content title</h2>\n    <p>\n      The slide-over allows to get some content displayed on a panel with some\n      elements inside.\n    </p>\n    <div id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm()\">\n      <mat-form-field>\n        <mat-label>User ID</mat-label>\n        <input matInput [formControl]=\"userId\" />\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Left fiels</mat-label>\n        <input matInput [formControl]=\"leftField\" />\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Right field</mat-label>\n        <input matInput [formControl]=\"rightField\" />\n      </mat-form-field>\n    </div>\n  </onemrva-drawer-content>\n  <onemrva-drawer-actions>\n    <button\n      mat-stroked-button\n      color=\"primary\"\n      class=\"close\"\n      (click)=\"drawerService.close()\"\n    >\n      Cancel\n    </button>\n    <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n      Save\n    </button>\n  </onemrva-drawer-actions>\n</section>\n","demo-drawer-content.component.scss":":host > section {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\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 { 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  styleUrls: ['./demo-drawer-content.component.scss'],\n  imports: [\n    LayoutDrawerActionsComponent,\n    LayoutDrawerContentComponent,\n    LayoutDrawerTitleComponent,\n    ReactiveFormsModule,\n    MatIconModule,\n    MatLabel,\n    MatFormField,\n    MatInput,\n    MatButton,\n    OnemrvaMatPanelModule,\n  ],\n})\nexport class DemoDrawerContentComponent extends DemoComponentBase {\n  readonly myForm = input.required<FormGroup>();\n\n  get userId() {\n    return this.myForm().get('userId') as FormControl;\n  }\n  get leftField() {\n    return this.myForm().get('leftField') as FormControl;\n  }\n  get rightField() {\n    return this.myForm().get('rightField') as FormControl;\n  }\n  drawerService = inject(OnemrvaDrawerService);\n\n  save() {\n    this.drawerService.close();\n  }\n}\n","demo-drawer.component.html":"<!-- !! The layout already contains a mat-drawer-container -->\n<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost />\n  </mat-drawer>\n  <mat-drawer-content>\n    <div style=\"height: 60vh\">\n      <button\n        mat-flat-button\n        color=\"accent\"\n        (click)=\"toggleForm()\"\n        [attr.data-cy]=\"'click-me'\"\n      >\n        Open Drawer\n      </button>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n","demo-drawer.component.ts":"import {\n  AfterViewInit,\n  Component,\n  ComponentRef,\n  inject,\n  ViewEncapsulation,\n  viewChild,\n  input,\n  effect,\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 { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';\n\nimport { RouterModule } from '@angular/router';\n\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  imports: [\n    RouterModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  // private readonly size\n  readonly size = input<OnemrvaMatSize>(OnemrvaMatSize.XLARGE);\n\n  private readonly drawer = viewChild<MatDrawer>('mainDrawer');\n\n  private readonly drawerHost = viewChild(DrawerHostDirective);\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  constructor() {\n    effect(() => {\n      this.drawerService.size.set(this.size());\n    });\n  }\n\n  ngAfterViewInit(): void {\n    const drawer = this.drawer();\n    if (drawer) {\n      this.drawerService.setDrawer(drawer);\n    }\n    const drawerHost = this.drawerHost();\n    if (drawerHost) {\n      this.drawerService.host = drawerHost;\n    }\n  }\n\n  toggleForm() {\n    if (!this.componentRef) {\n      this.componentRef = this.drawerService.host?.createComponent(\n        DemoDrawerContentComponent,\n      );\n      if (this.componentRef) {\n        this.componentRef.setInput('myForm', this.dummyForm);\n      }\n    }\n    if (!this.componentRef) {\n      console.error('Drawer host is not available.');\n      return;\n    }\n    this.componentRef.setInput('myForm', this.dummyForm);\n\n    this.drawerService.toggle();\n  }\n\n  help() {\n    alert('HELP');\n  }\n}\n"}

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

package/browser/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, ViewEncapsulation, input } 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  readonly code = input(500);\n}\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, ViewEncapsulation, input } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\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    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  readonly code = input(500);\n}\n"}

package/browser/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<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\" [showProgress]=\"true\" />\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"}
+{"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<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\" [showProgress]=\"true\" />\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 { 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],\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/browser/assets/json/layout.json

@@ -1 +1 @@
-{"demo-layout.component.html":"<onemrva-layout\n  [environment]=\"Environment.PROD\"\n  [profile]=\"profile\"\n  (login)=\"login()\"\n  (logout)=\"logout()\"\n  [showThemeSwitcher]=\"false\"\n>\n  <!-- Notification is picked up, inside the body  -->\n  <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n    Hello <a href=\"#\">world</a>\n  </onemrva-mat-notification>\n\n  <!-- APP NAME -->\n  <onemrva-layout-title>\n    <span class=\"nemo\">\n      <span>nemo</span>\n      <span>DESIGN SYSTEM</span>\n    </span></onemrva-layout-title\n  >\n\n  <onemrva-layout-login-menu>\n    <button\n      type=\"button\"\n      mat-menu-item\n      data-cy=\"go to admin\"\n      (click)=\"helpLink()\"\n      attr.aria-label=\"{{ 'Admin' | translate }}\"\n    >\n      <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n    </button>\n  </onemrva-layout-login-menu>\n\n  <!-- MENU -->\n  <onemrva-layout-route\n    routerLink=\"/\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"Guides\"\n    [label]=\"'Guides' | translate\"\n  />\n  <onemrva-layout-route\n    routerLink=\"/demos\"\n    [routerLinkActiveOptions]=\"{ exact: false }\"\n    dataCy=\"Components\"\n    [label]=\"'Components' | translate\"\n  />\n  <onemrva-layout-route\n    routerLink=\"/news\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"News\"\n    [label]=\"'News' | translate\"\n  />\n\n  <!-- AFTER NAV LINKS -->\n  <onemrva-layout-after-nav>\n    <button\n      (click)=\"helpLink()\"\n      mat-icon-button\n      data-cy=\"goToUserManual\"\n      rel=\"noopener noreferrer\"\n      [matTooltipClass]=\"'tooltip'\"\n      matTooltip=\"Create ticket\"\n      [attr.aria-label]=\"'Create ticket'\"\n      style=\"text-decoration: none !important\"\n    >\n      <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n        >help</mat-icon\n      >\n    </button>\n  </onemrva-layout-after-nav>\n\n  <!-- CONTENT -->\n  <onemrva-layout-content>\n    <router-outlet />\n\n    <!-- Open a drawer -->\n    <section\n      style=\"\n        width: 100%;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n      \"\n    >\n      <button class=\"m-m\" mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n        Open form\n      </button>\n      <div style=\"min-height: 50vh\">&nbsp;</div>\n    </section>\n  </onemrva-layout-content>\n\n  <!-- FOOTER -->\n  <onemrva-layout-footer> ONEM/RVA &copy; 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, ComponentRef, effect, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  Environment,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n  OnemrvaLeftSidenavService,\n  OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoDrawerContentComponent } from '../drawer';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    RouterOutlet,\n    OnemrvaLayoutModule,\n    MatIcon,\n    MatTooltip,\n    MatIconButton,\n    TranslateModule,\n    OverlayModule,\n    RouterLink,\n    MatMenuItem,\n    OnemRvaColorDirective,\n    OnemrvaMatNotificationComponent,\n    MatButton,\n  ],\n  templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n  http = inject(HttpClient);\n  route = inject(ActivatedRoute);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  // Use the drawer\n  drawerService = inject(OnemrvaDrawerService);\n\n  // Use the leftNav\n  leftNav = inject(OnemrvaLeftSidenavService);\n\n  navItems: NavItem[] = [\n    {\n      label: 'Home',\n      icon: 'home',\n      dataCy: 'home-nav',\n      routerLink: '/',\n      children: [],\n    },\n  ];\n\n  profile: OnemRvaProfile;\n\n  constructor() {\n    /** create a new empty profile */\n    this.profile = new OnemRvaProfile();\n\n    effect(() => {\n      this.leftNav.updateItems(this.navItems);\n    });\n  }\n\n  /**\n   * Login\n   */\n  login() {\n    this.profile.login('Anne', 'Onymous');\n  }\n\n  /**\n   * Logout\n   */\n  logout() {\n    //    this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n    this.profile.logout();\n    //    });\n  }\n\n  helpLink() {\n    alert('?');\n  }\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  toggleForm() {\n    this.drawerService.size.set('xlarge');\n\n    this.componentRef = this.drawerService.host?.createComponent(\n      DemoDrawerContentComponent,\n    );\n\n    this.componentRef?.setInput('myForm', this.dummyForm);\n\n    this.drawerService.toggle();\n  }\n\n  protected readonly Environment = Environment;\n}\n"}
+{"demo-layout.component.html":"<onemrva-layout\n  [environment]=\"Environment.PROD\"\n  [profile]=\"profile\"\n  (login)=\"login()\"\n  (logout)=\"logout()\"\n  [showThemeSwitcher]=\"false\"\n>\n  <!-- Notification is picked up, inside the body  -->\n  <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n    Hello <a href=\"#\">world</a>\n  </onemrva-mat-notification>\n\n  <!-- APP NAME -->\n  <onemrva-layout-title>\n    <span class=\"nemo\">\n      <span>nemo</span>\n      <span>DESIGN SYSTEM</span>\n    </span></onemrva-layout-title\n  >\n\n  <onemrva-layout-login-menu>\n    <button\n      type=\"button\"\n      mat-menu-item\n      data-cy=\"go to admin\"\n      (click)=\"helpLink()\"\n      attr.aria-label=\"{{ 'Admin' | translate }}\"\n    >\n      <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n    </button>\n  </onemrva-layout-login-menu>\n\n  <!-- MENU -->\n  <onemrva-layout-route\n    routerLink=\"/\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"Guides\"\n    [label]=\"'Guides' | translate\"\n  />\n  <onemrva-layout-route\n    routerLink=\"/demos\"\n    [routerLinkActiveOptions]=\"{ exact: false }\"\n    dataCy=\"Components\"\n    [label]=\"'Components' | translate\"\n  />\n  <onemrva-layout-route\n    routerLink=\"/news\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"News\"\n    [label]=\"'News' | translate\"\n  />\n\n  <!-- AFTER NAV LINKS -->\n  <onemrva-layout-after-nav>\n    <button\n      (click)=\"helpLink()\"\n      mat-icon-button\n      data-cy=\"goToUserManual\"\n      rel=\"noopener noreferrer\"\n      [matTooltipClass]=\"'tooltip'\"\n      matTooltip=\"Create ticket\"\n      [attr.aria-label]=\"'Create ticket'\"\n      style=\"text-decoration: none !important\"\n    >\n      <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n        >help</mat-icon\n      >\n    </button>\n  </onemrva-layout-after-nav>\n\n  <!-- CONTENT -->\n  <onemrva-layout-content>\n    <router-outlet />\n\n    <!-- Open a drawer -->\n    <section\n      style=\"\n        width: 100%;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n      \"\n    >\n      <button class=\"m-m\" mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n        Open form\n      </button>\n      <div style=\"min-height: 50vh\">&nbsp;</div>\n    </section>\n  </onemrva-layout-content>\n\n  <!-- FOOTER -->\n  <onemrva-layout-footer> ONEM/RVA &copy; 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, ComponentRef, effect, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslatePipe } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  Environment,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n  OnemrvaLeftSidenavService,\n  OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoDrawerContentComponent } from '../drawer';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    RouterOutlet,\n    OnemrvaLayoutModule,\n    MatIcon,\n    MatTooltip,\n    MatIconButton,\n    TranslatePipe,\n    OverlayModule,\n    RouterLink,\n    MatMenuItem,\n    OnemRvaColorDirective,\n    OnemrvaMatNotificationComponent,\n    MatButton,\n  ],\n  templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n  http = inject(HttpClient);\n  route = inject(ActivatedRoute);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  // Use the drawer\n  drawerService = inject(OnemrvaDrawerService);\n\n  // Use the leftNav\n  leftNav = inject(OnemrvaLeftSidenavService);\n\n  navItems: NavItem[] = [\n    {\n      label: 'Home',\n      icon: 'home',\n      dataCy: 'home-nav',\n      routerLink: '/',\n      children: [],\n    },\n  ];\n\n  profile: OnemRvaProfile;\n\n  constructor() {\n    /** create a new empty profile */\n    this.profile = new OnemRvaProfile();\n\n    effect(() => {\n      this.leftNav.updateItems(this.navItems);\n    });\n  }\n\n  /**\n   * Login\n   */\n  login() {\n    this.profile.login('Anne', 'Onymous');\n  }\n\n  /**\n   * Logout\n   */\n  logout() {\n    //    this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n    this.profile.logout();\n    //    });\n  }\n\n  helpLink() {\n    alert('?');\n  }\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  toggleForm() {\n    this.drawerService.size.set('xlarge');\n\n    this.componentRef = this.drawerService.host?.createComponent(\n      DemoDrawerContentComponent,\n    );\n\n    this.componentRef?.setInput('myForm', this.dummyForm);\n\n    this.drawerService.toggle();\n  }\n\n  protected readonly Environment = Environment;\n}\n"}

package/browser/assets/json/multiselect.json

@@ -1 +1 @@
-{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle()\"\n    [showFilter]=\"showFilter()\"\n  >\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AsyncPipe } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n  OnemrvaMatMultiSelectComponent,\n  OnemrvaMatMultiSelectModule,\n} from '@onemrvapublic/design-system/mat-multi-select';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-multiselect',\n  templateUrl: './demo-multiselect.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemrvaMatMultiSelectComponent,\n    OnemRvaReadonlyDirective,\n    AsyncPipe,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n  selectionToggle = input(true);\n  showFilter = input(true);\n\n  form: FormControl = new FormControl([], Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly() && !this.form.getRawValue()) {\n        this.form.setValue(['Pepperoni', 'Eggplant']);\n      }\n    });\n\n    // filtering the list\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return this.form;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}
+{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle()\"\n    [showFilter]=\"showFilter()\"\n  >\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AsyncPipe } from '@angular/common';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n  OnemrvaMatMultiSelectComponent,\n  OnemrvaMatMultiSelectModule,\n} from '@onemrvapublic/design-system/mat-multi-select';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-multiselect',\n  templateUrl: './demo-multiselect.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemrvaMatMultiSelectComponent,\n    OnemRvaReadonlyDirective,\n    AsyncPipe,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n  selectionToggle = input(true);\n  showFilter = input(true);\n\n  form: FormControl = new FormControl([], Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly() && !this.form.getRawValue()) {\n        this.form.setValue(['Pepperoni', 'Eggplant']);\n      }\n    });\n\n    // filtering the list\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return this.form;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

package/browser/assets/json/not-found.json

@@ -1 +1 @@
-{"demo-not-found.component.html":"<page-not-found>\n  <page-not-found-action>\n    <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n      <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n    </button>\n  </page-not-found-action>\n  <page-not-found-action>\n    <button mat-flat-button color=\"accent\" (click)=\"home()\">\n      <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n    </button>\n  </page-not-found-action>\n  <page-not-found-extra>\n    <h3>\n      {{ '404.extra' | translate }}\n    </h3>\n\n    <mat-form-field style=\"width: 400px\">\n      <mat-label for=\"searchInput\">{{\n        '404.search.input.label' | translate\n      }}</mat-label>\n      <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n      <mat-icon matSuffix>search</mat-icon> </mat-form-field\n    >&nbsp;&nbsp;\n    <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n  </page-not-found-extra>\n</page-not-found>\n","demo-not-found.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, 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  PageNotFoundActionComponent,\n  PageNotFoundExtraComponent,\n  PageNotFoundComponent,\n} from '@onemrvapublic/design-system/page-not-found';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-not-found',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageNotFoundComponent,\n    PageNotFoundActionComponent,\n    PageNotFoundExtraComponent,\n  ],\n  templateUrl: 'demo-not-found.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoNotFoundComponent extends DemoComponentBase {\n  searchInput: FormControl = new FormControl('');\n\n  search() {\n    if (this.searchInput.value.trim() !== '') {\n      // Do not try this at home!\n      // Use the usual Router when you play with the url.\n      // We use the window object so we can make it work in wordpress\n      window.location.href = '/?s=' + this.searchInput.value.trim();\n    }\n  }\n\n  contact() {\n    window.location.href = '/contact';\n  }\n\n  home() {\n    window.location.href = '/';\n  }\n}\n"}
+{"demo-not-found.component.html":"<page-not-found>\n  <page-not-found-action>\n    <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n      <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n    </button>\n  </page-not-found-action>\n  <page-not-found-action>\n    <button mat-flat-button color=\"accent\" (click)=\"home()\">\n      <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n    </button>\n  </page-not-found-action>\n  <page-not-found-extra>\n    <h3>\n      {{ '404.extra' | translate }}\n    </h3>\n\n    <mat-form-field style=\"width: 400px\">\n      <mat-label for=\"searchInput\">{{\n        '404.search.input.label' | translate\n      }}</mat-label>\n      <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n      <mat-icon matSuffix>search</mat-icon> </mat-form-field\n    >&nbsp;&nbsp;\n    <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n  </page-not-found-extra>\n</page-not-found>\n","demo-not-found.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  PageNotFoundActionComponent,\n  PageNotFoundExtraComponent,\n  PageNotFoundComponent,\n} from '@onemrvapublic/design-system/page-not-found';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-not-found',\n\n  standalone: true,\n  imports: [\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslatePipe,\n    MatInputModule,\n    MatButtonModule,\n    PageNotFoundComponent,\n    PageNotFoundActionComponent,\n    PageNotFoundExtraComponent,\n  ],\n  templateUrl: 'demo-not-found.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoNotFoundComponent extends DemoComponentBase {\n  searchInput: FormControl = new FormControl('');\n\n  search() {\n    if (this.searchInput.value.trim() !== '') {\n      // Do not try this at home!\n      // Use the usual Router when you play with the url.\n      // We use the window object so we can make it work in wordpress\n      window.location.href = '/?s=' + this.searchInput.value.trim();\n    }\n  }\n\n  contact() {\n    window.location.href = '/contact';\n  }\n\n  home() {\n    window.location.href = '/';\n  }\n}\n"}

package/browser/assets/json/paginator.json

@@ -1 +1 @@
-{"demo-paginator.component.html":"<h3>type = 'default'</h3>\n\n<p>\n  The default paginator shows pages 5 by 5 except if there are only 6 remaining\n  pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"10\"\n  [length]=\"69\"\n  (onRequestPage)=\"changePage($event)\"\n  recordKey=\"records.per.page\"\n  #paginator\n/>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n  To get the complex paginator, you need to set the type to 'complex'. It shows\n  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n  back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex2\"\n  [pageSize]=\"20\"\n  [length]=\"339\"\n  type=\"complex\"\n  recordKey=\"records.per.page\"\n  (onRequestPage)=\"changePage($event, 'complex')\"\n  #paginator\n/>\n","demo-paginator.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system/mat-paginator';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-paginator',\n  templateUrl: 'demo-paginator.component.html',\n\n  standalone: true,\n  imports: [\n    TranslateModule,\n    OnemrvaMatPaginatorModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPaginatorComponent extends DemoComponentBase {\n  pageIndex = 0;\n  pageIndex2 = 0;\n\n  changePage(pageIndex: number, type: 'default' | 'complex' = 'default') {\n    if (type === 'complex') this.pageIndex2 = pageIndex;\n    else this.pageIndex = pageIndex;\n  }\n}\n"}
+{"demo-paginator.component.html":"<h3>type = 'default'</h3>\n\n<p>\n  The default paginator shows pages 5 by 5 except if there are only 6 remaining\n  pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"10\"\n  [length]=\"69\"\n  (onRequestPage)=\"changePage($event)\"\n  recordKey=\"records.per.page\"\n  #paginator\n/>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n  To get the complex paginator, you need to set the type to 'complex'. It shows\n  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n  back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex2\"\n  [pageSize]=\"20\"\n  [length]=\"339\"\n  type=\"complex\"\n  recordKey=\"records.per.page\"\n  (onRequestPage)=\"changePage($event, 'complex')\"\n  #paginator\n/>\n","demo-paginator.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system/mat-paginator';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-paginator',\n  templateUrl: 'demo-paginator.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaMatPaginatorModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPaginatorComponent extends DemoComponentBase {\n  pageIndex = 0;\n  pageIndex2 = 0;\n\n  changePage(pageIndex: number, type: 'default' | 'complex' = 'default') {\n    if (type === 'complex') this.pageIndex2 = pageIndex;\n    else this.pageIndex = pageIndex;\n  }\n}\n"}

package/browser/assets/json/phone-input.json

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

package/browser/assets/json/select.json

@@ -1 +1 @@
-{"demo-select.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\" [formControl]=\"form\">\n    <mat-option>\n      <mat-select-search\n        [formControl]=\"filterCtrl\"\n        ariaLabel=\"{{ 'filter select' | translate }}\"\n        noEntriesFoundLabel=\"{{ 'Not found' | translate }}\"\n        placeholderLabel=\"{{ 'Search' | translate }}\"\n      />\n    </mat-option>\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n","demo-select.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AsyncPipe } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { OnemrvaMatMultiSelectModule } from '@onemrvapublic/design-system/mat-multi-select';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-select',\n  templateUrl: './demo-select.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemRvaReadonlyDirective,\n    AsyncPipe,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  form: FormControl = new FormControl('', Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return true;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}
+{"demo-select.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\" [formControl]=\"form\">\n    <mat-option>\n      <mat-select-search\n        [formControl]=\"filterCtrl\"\n        ariaLabel=\"{{ 'filter select' | translate }}\"\n        noEntriesFoundLabel=\"{{ 'Not found' | translate }}\"\n        placeholderLabel=\"{{ 'Search' | translate }}\"\n      />\n    </mat-option>\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n","demo-select.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { AsyncPipe } from '@angular/common';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { OnemrvaMatMultiSelectModule } from '@onemrvapublic/design-system/mat-multi-select';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-select',\n  templateUrl: './demo-select.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    TranslatePipe,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemRvaReadonlyDirective,\n    AsyncPipe,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  form: FormControl = new FormControl('', Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return true;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

package/browser/assets/json/timeline.json

@@ -0,0 +1 @@
+{"demo-timeline.component.html":"<onemrva-timeline\n  title=\"Career timeline\"\n  [periods]=\"displayedPeriods()\"\n  [legend]=\"legend\"\n  [filters]=\"filters\"\n  [showMonths]=\"showMonths()\"\n  [showLabels]=\"showLabels()\"\n  [showMonthPicker]=\"true\"\n  [fullSize]=\"fullSize()\"\n  maxHeight=\"280px\"\n  [(fixedYearCount)]=\"yearCount\"\n  [(activeFilter)]=\"activeFilter\"\n  [(selectedPeriod)]=\"selectedPeriod\"\n  (axisUnitChange)=\"axisUnit.set($event)\"\n  emptyMessage=\"No periods to display\"\n/>\n\n<div class=\"demo-timeline__controls\">\n  <mat-checkbox\n    class=\"demo-timeline__months-toggle\"\n    [checked]=\"showMonths()\"\n    [disabled]=\"axisUnit() === 'months' && yearCount() > 5\"\n    (change)=\"showMonths.set($event.checked)\"\n  >\n    {{ axisUnit() === 'days' ? 'Show days' : 'Show months' }}\n  </mat-checkbox>\n  @if (axisUnit() === 'months') {\n    <span class=\"demo-timeline__hint\"\n      >Available for a window of 5 years or less</span\n    >\n  }\n\n  <mat-checkbox\n    class=\"demo-timeline__labels-toggle\"\n    [checked]=\"showLabels()\"\n    (change)=\"showLabels.set($event.checked)\"\n  >\n    Show labels\n  </mat-checkbox>\n\n  <mat-checkbox\n    class=\"demo-timeline__fullsize-toggle\"\n    [checked]=\"fullSize()\"\n    (change)=\"fullSize.set($event.checked)\"\n  >\n    Full size\n  </mat-checkbox>\n\n  @if (selectedPeriod(); as selected) {\n    <span class=\"demo-timeline__selection\">\n      Selected period: <strong>{{ selected.label ?? selected.type }}</strong>\n    </span>\n  }\n</div>\n","demo-timeline.component.scss":".demo-timeline__controls {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px 16px;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #d7d5ed;\n}\n\n.demo-timeline__hint {\n  font-size: 12px;\n  color: #78767d;\n}\n\n.demo-timeline__selection {\n  margin-left: auto;\n  font-size: 14px;\n}\n\n@media (max-width: 600px) {\n  .demo-timeline__selection {\n    margin-left: 0;\n    flex-basis: 100%;\n  }\n}\n","demo-timeline.component.ts":"import { Component, ViewEncapsulation, computed, signal } from '@angular/core';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport {\n  OnemrvaTimelineComponent,\n  TimelineFilterOption,\n  TimelineLegend,\n  TimelinePeriod,\n} from '@onemrvapublic/design-system/timeline';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-timeline',\n  standalone: true,\n  imports: [OnemrvaTimelineComponent, MatCheckboxModule],\n  templateUrl: 'demo-timeline.component.html',\n  styleUrl: 'demo-timeline.component.scss',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimelineComponent extends DemoComponentBase {\n  readonly legend: TimelineLegend = [\n    { type: 'parentalleave', label: 'Parental leave', color: 'data-1' },\n    { type: 'careerbreak', label: 'Career break', color: 'data-2' },\n    { type: 'medicalcare', label: 'Medical care', color: 'data-3' },\n    { type: 'modification', label: 'Modification', color: 'data-4' },\n    { type: 'paliativecare', label: 'Palliative care', color: 'data-5' },\n    { type: 'thematic', label: 'Thematic', color: 'data-6' },\n    { type: 'timecredit', label: 'Time credit', color: 'data-7' },\n  ];\n\n  readonly periods = signal<TimelinePeriod[]>([\n    {\n      id: '1',\n      beginDate: new Date(2016, 0, 1),\n      endDate: new Date(2017, 5, 30),\n      type: 'parentalleave',\n      label: 'Parental leave',\n      description: 'Full-time parental leave after the birth of a child.',\n    },\n    {\n      id: '2',\n      beginDate: new Date(2017, 6, 1),\n      endDate: new Date(2018, 5, 30),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Voluntary full-time career break.',\n    },\n    {\n      id: '3',\n      beginDate: new Date(2018, 6, 1),\n      endDate: new Date(2019, 5, 30),\n      type: 'medicalcare',\n      label: 'Medical care',\n      description: 'Leave to provide medical care to a relative.',\n    },\n    {\n      id: '4',\n      beginDate: new Date(2019, 6, 1),\n      endDate: new Date(2020, 5, 30),\n      type: 'modification',\n      label: 'Modification',\n      description: 'Reduced working time (4/5th).',\n    },\n    {\n      id: '5',\n      beginDate: new Date(2020, 6, 1),\n      endDate: new Date(2021, 5, 30),\n      type: 'paliativecare',\n      label: 'Palliative care',\n      description: 'Palliative care leave.',\n    },\n    {\n      id: '6',\n      beginDate: new Date(2021, 6, 1),\n      endDate: new Date(2022, 5, 30),\n      type: 'thematic',\n      label: 'Thematic',\n      description: 'Thematic leave for training.',\n    },\n    {\n      id: '7',\n      beginDate: new Date(2022, 6, 1),\n      endDate: new Date(2023, 2, 31),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Second career break, half-time.',\n    },\n    {\n      id: '8',\n      beginDate: new Date(2023, 3, 1),\n      endDate: new Date(2023, 11, 31),\n      type: 'timecredit',\n      label: 'Time credit',\n      description: 'End-of-career time credit (pending approval).',\n      disabled: true,\n    },\n    {\n      id: '9',\n      beginDate: new Date(2016, 3, 10),\n      endDate: new Date(2016, 10, 20),\n      type: 'thematic',\n      label: 'Thematic',\n      description: 'Partial thematic leave.',\n    },\n    {\n      id: '10',\n      beginDate: new Date(2018, 8, 5),\n      endDate: new Date(2019, 3, 15),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Partial career break (1/5th).',\n    },\n    {\n      id: '11',\n      beginDate: new Date(2021, 8, 1),\n      endDate: new Date(2022, 1, 28),\n      type: 'timecredit',\n      label: 'Time credit',\n      description: 'Mid-career time credit.',\n    },\n    {\n      id: '12',\n      beginDate: new Date(2016, 4, 1),\n      endDate: new Date(2016, 7, 31),\n      type: 'modification',\n      label: 'Modification',\n      description: 'Temporary schedule modification.',\n    },\n    {\n      id: '13',\n      beginDate: new Date(2018, 9, 1),\n      endDate: new Date(2019, 1, 28),\n      type: 'paliativecare',\n      label: 'Palliative care',\n      description: 'Short palliative care leave.',\n    },\n    {\n      id: '14',\n      beginDate: new Date(2016, 1, 1),\n      endDate: new Date(2019, 11, 31),\n      type: 'timecredit',\n      label: 'Time credit',\n      description: 'Long-running mid-career time credit.',\n    },\n    {\n      id: '15',\n      beginDate: new Date(2017, 0, 1),\n      endDate: new Date(2021, 5, 30),\n      type: 'thematic',\n      label: 'Thematic',\n      description: 'Recurring thematic leave.',\n    },\n  ]);\n\n  readonly requestPeriods: TimelinePeriod[] = [\n    {\n      id: 'r1',\n      beginDate: new Date(2021, 2, 1),\n      endDate: new Date(2021, 8, 30),\n      type: 'parentalleave',\n      label: 'Parental leave',\n      description: 'Requested parental leave (pending approval).',\n    },\n    {\n      id: 'r2',\n      beginDate: new Date(2022, 0, 1),\n      endDate: new Date(2022, 7, 31),\n      type: 'careerbreak',\n      label: 'Career break',\n      description: 'Requested career break (pending approval).',\n    },\n    {\n      id: 'r3',\n      beginDate: new Date(2023, 1, 1),\n      endDate: new Date(2023, 6, 31),\n      type: 'medicalcare',\n      label: 'Medical care',\n      description: 'Requested medical care (pending approval).',\n    },\n  ];\n\n  readonly filters: TimelineFilterOption[] = [\n    { label: 'Toegewezen periodes', value: 'assigned' },\n    { label: 'Aanvragen', value: 'requests' },\n    { label: 'Alles', value: 'all' },\n  ];\n\n  readonly activeFilter = signal<string | undefined>('assigned');\n\n  readonly displayedPeriods = computed<TimelinePeriod[]>(() => {\n    switch (this.activeFilter()) {\n      case 'requests':\n        return this.requestPeriods;\n      case 'all':\n        return [...this.periods(), ...this.requestPeriods];\n      default:\n        return this.periods();\n    }\n  });\n\n  readonly yearCount = signal(5);\n\n  readonly showMonths = signal(true);\n\n  readonly axisUnit = signal<'months' | 'days'>('months');\n\n  readonly showLabels = signal(true);\n\n  readonly fullSize = signal(false);\n\n  readonly selectedPeriod = signal<TimelinePeriod | undefined>(undefined);\n}\n"}

package/browser/{chunk-3CNZWXNL.js → chunk-IAPKQCRW.js}

@@ -1,4 +1,4 @@
-import{a as or,b as hr}from"./chunk-DAQOROHW.js";var z=class r extends Error{constructor(e,t){var a="KaTeX parse error: "+e,n,s,u=t&&t.loc;if(u&&u.start<=u.end){var h=u.lexer.input;n=u.start,s=u.end,n===h.length?a+=" at end of input: ":a+=" at position "+(n+1)+": ";var c=h.slice(n,s).replace(/[^]/g,"$&\u0332"),v;n>15?v="\u2026"+h.slice(n-15,n):v=h.slice(0,n);var p;s+15<h.length?p=h.slice(s,s+15)+"\u2026":p=h.slice(s),a+=v+c+p}super(a),this.name="ParseError",this.position=void 0,this.length=void 0,this.rawMessage=void 0,Object.setPrototypeOf(this,r.prototype),this.position=n,n!=null&&s!=null&&(this.length=s-n),this.rawMessage=e}},J1=/([A-Z])/g,Q1=r=>r.replace(J1,"-$1").toLowerCase(),_1={"&":"&amp;",">":"&gt;","<":"&lt;",'"':"&quot;","'":"&#x27;"},ea=/[&><"']/g,i0=r=>String(r).replace(ea,e=>_1[e]),Ne=r=>r.type==="ordgroup"||r.type==="color"?r.body.length===1?Ne(r.body[0]):r:r.type==="font"?Ne(r.body):r,ta=new Set(["mathord","textord","atom"]),E0=r=>ta.has(Ne(r).type),ra=r=>{var e=/^[\x00-\x20]*([^\\/#?]*?)(:|&#0*58|&#x0*3a|&colon)/i.exec(r);return e?e[2]!==":"||!/^[a-zA-Z][a-zA-Z0-9+\-.]*$/.test(e[1])?null:e[1].toLowerCase():"_relative"},bt={displayMode:{type:"boolean",description:"Render math in display mode, which puts the math in display style (so \\int and \\sum are large, for example), and centers the math on the page on its own line.",cli:"-d, --display-mode"},output:{type:{enum:["htmlAndMathml","html","mathml"]},description:"Determines the markup language of the output.",cli:"-F, --format <type>"},leqno:{type:"boolean",description:"Render display math in leqno style (left-justified tags)."},fleqn:{type:"boolean",description:"Render display math flush left."},throwOnError:{type:"boolean",default:!0,cli:"-t, --no-throw-on-error",cliDescription:"Render errors (in the color given by --error-color) instead of throwing a ParseError exception when encountering an error."},errorColor:{type:"string",default:"#cc0000",cli:"-c, --error-color <color>",cliDescription:"A color string given in the format 'rgb' or 'rrggbb' (no #). This option determines the color of errors rendered by the -t option.",cliProcessor:r=>"#"+r},macros:{type:"object",cli:"-m, --macro <def>",cliDescription:"Define custom macro of the form '\\foo:expansion' (use multiple -m arguments for multiple macros).",cliDefault:[],cliProcessor:(r,e)=>(e.push(r),e)},minRuleThickness:{type:"number",description:"Specifies a minimum thickness, in ems, for fraction lines, `\\sqrt` top lines, `{array}` vertical lines, `\\hline`, `\\hdashline`, `\\underline`, `\\overline`, and the borders of `\\fbox`, `\\boxed`, and `\\fcolorbox`.",processor:r=>Math.max(0,r),cli:"--min-rule-thickness <size>",cliProcessor:parseFloat},colorIsTextColor:{type:"boolean",description:"Makes \\color behave like LaTeX's 2-argument \\textcolor, instead of LaTeX's one-argument \\color mode change.",cli:"-b, --color-is-text-color"},strict:{type:[{enum:["warn","ignore","error"]},"boolean","function"],description:"Turn on strict / LaTeX faithfulness mode, which throws an error if the input uses features that are not supported by LaTeX.",cli:"-S, --strict",cliDefault:!1},trust:{type:["boolean","function"],description:"Trust the input, enabling all HTML features such as \\url.",cli:"-T, --trust"},maxSize:{type:"number",default:1/0,description:"If non-zero, all user-specified sizes, e.g. in \\rule{500em}{500em}, will be capped to maxSize ems. Otherwise, elements and spaces can be arbitrarily large",processor:r=>Math.max(0,r),cli:"-s, --max-size <n>",cliProcessor:parseInt},maxExpand:{type:"number",default:1e3,description:"Limit the number of macro expansions to the specified number, to prevent e.g. infinite macro loops. If set to Infinity, the macro expander will try to fully expand as in LaTeX.",processor:r=>Math.max(0,r),cli:"-e, --max-expand <n>",cliProcessor:r=>r==="Infinity"?1/0:parseInt(r)},globalGroup:{type:"boolean",cli:!1}};function aa(r){if(typeof r!="string")return r.enum[0];switch(r){case"boolean":return!1;case"string":return"";case"number":return 0;case"object":return{};default:throw new Error("Unexpected schema type; settings must declare an explicit default.")}}function na(r){if(r.default!==void 0)return r.default;var e=Array.isArray(r.type)?r.type[0]:r.type;return aa(e)}function ia(r,e,t,a){var n=t[e];r[e]=n!==void 0?a.processor?a.processor(n):n:na(a)}var de=class{constructor(e){e===void 0&&(e={}),this.displayMode=void 0,this.output=void 0,this.leqno=void 0,this.fleqn=void 0,this.throwOnError=void 0,this.errorColor=void 0,this.macros=void 0,this.minRuleThickness=void 0,this.colorIsTextColor=void 0,this.strict=void 0,this.trust=void 0,this.maxSize=void 0,this.maxExpand=void 0,this.globalGroup=void 0,e=e||{};for(var t of Object.keys(bt)){var a=bt[t];a&&ia(this,t,e,a)}}reportNonstrict(e,t,a){var n=this.strict;if(typeof n=="function"&&(n=n(e,t,a)),!(!n||n==="ignore")){if(n===!0||n==="error")throw new z("LaTeX-incompatible input and strict mode is set to 'error': "+(t+" ["+e+"]"),a);n==="warn"?typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to 'warn': "+(t+" ["+e+"]")):typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to "+("unrecognized '"+n+"': "+t+" ["+e+"]"))}}useStrictBehavior(e,t,a){var n=this.strict;if(typeof n=="function")try{n=n(e,t,a)}catch{n="error"}return!n||n==="ignore"?!1:n===!0||n==="error"?!0:n==="warn"?(typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to 'warn': "+(t+" ["+e+"]")),!1):(typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to "+("unrecognized '"+n+"': "+t+" ["+e+"]")),!1)}isTrusted(e){if("url"in e&&e.url&&!e.protocol){var t=ra(e.url);if(t==null)return!1;e.protocol=t}var a=typeof this.trust=="function"?this.trust(e):this.trust;return!!a}},k0=class{constructor(e,t,a){this.id=void 0,this.size=void 0,this.cramped=void 0,this.id=e,this.size=t,this.cramped=a}sup(){return S0[sa[this.id]]}sub(){return S0[la[this.id]]}fracNum(){return S0[ua[this.id]]}fracDen(){return S0[oa[this.id]]}cramp(){return S0[ha[this.id]]}text(){return S0[ma[this.id]]}isTight(){return this.size>=2}},Lt=0,Oe=1,ee=2,q0=3,fe=4,p0=5,te=6,l0=7,S0=[new k0(Lt,0,!1),new k0(Oe,0,!0),new k0(ee,1,!1),new k0(q0,1,!0),new k0(fe,2,!1),new k0(p0,2,!0),new k0(te,3,!1),new k0(l0,3,!0)],sa=[fe,p0,fe,p0,te,l0,te,l0],la=[p0,p0,p0,p0,l0,l0,l0,l0],ua=[ee,q0,fe,p0,te,l0,te,l0],oa=[q0,q0,p0,p0,l0,l0,l0,l0],ha=[Oe,Oe,q0,q0,p0,p0,l0,l0],ma=[Lt,Oe,ee,q0,ee,q0,ee,q0],N={DISPLAY:S0[Lt],TEXT:S0[ee],SCRIPT:S0[fe],SCRIPTSCRIPT:S0[te]},yt=[{name:"latin",blocks:[[256,591],[768,879]]},{name:"cyrillic",blocks:[[1024,1279]]},{name:"armenian",blocks:[[1328,1423]]},{name:"brahmic",blocks:[[2304,4255]]},{name:"georgian",blocks:[[4256,4351]]},{name:"cjk",blocks:[[12288,12543],[19968,40879],[65280,65376]]},{name:"hangul",blocks:[[44032,55215]]}];function ca(r){for(var e=0;e<yt.length;e++)for(var t=yt[e],a=0;a<t.blocks.length;a++){var n=t.blocks[a];if(r>=n[0]&&r<=n[1])return t.name}return null}var Fe=[];yt.forEach(r=>r.blocks.forEach(e=>Fe.push(...e)));function Yr(r){for(var e=0;e<Fe.length;e+=2)if(r>=Fe[e]&&r<=Fe[e+1])return!0;return!1}var r0=r=>r+" "+r,_0=80,da=function(e,t){return"M95,"+(622+e+t)+`
+import{a as or,b as hr}from"./chunk-PRARYYF3.js";var z=class r extends Error{constructor(e,t){var a="KaTeX parse error: "+e,n,s,u=t&&t.loc;if(u&&u.start<=u.end){var h=u.lexer.input;n=u.start,s=u.end,n===h.length?a+=" at end of input: ":a+=" at position "+(n+1)+": ";var c=h.slice(n,s).replace(/[^]/g,"$&\u0332"),v;n>15?v="\u2026"+h.slice(n-15,n):v=h.slice(0,n);var p;s+15<h.length?p=h.slice(s,s+15)+"\u2026":p=h.slice(s),a+=v+c+p}super(a),this.name="ParseError",this.position=void 0,this.length=void 0,this.rawMessage=void 0,Object.setPrototypeOf(this,r.prototype),this.position=n,n!=null&&s!=null&&(this.length=s-n),this.rawMessage=e}},J1=/([A-Z])/g,Q1=r=>r.replace(J1,"-$1").toLowerCase(),_1={"&":"&amp;",">":"&gt;","<":"&lt;",'"':"&quot;","'":"&#x27;"},ea=/[&><"']/g,i0=r=>String(r).replace(ea,e=>_1[e]),Ne=r=>r.type==="ordgroup"||r.type==="color"?r.body.length===1?Ne(r.body[0]):r:r.type==="font"?Ne(r.body):r,ta=new Set(["mathord","textord","atom"]),E0=r=>ta.has(Ne(r).type),ra=r=>{var e=/^[\x00-\x20]*([^\\/#?]*?)(:|&#0*58|&#x0*3a|&colon)/i.exec(r);return e?e[2]!==":"||!/^[a-zA-Z][a-zA-Z0-9+\-.]*$/.test(e[1])?null:e[1].toLowerCase():"_relative"},bt={displayMode:{type:"boolean",description:"Render math in display mode, which puts the math in display style (so \\int and \\sum are large, for example), and centers the math on the page on its own line.",cli:"-d, --display-mode"},output:{type:{enum:["htmlAndMathml","html","mathml"]},description:"Determines the markup language of the output.",cli:"-F, --format <type>"},leqno:{type:"boolean",description:"Render display math in leqno style (left-justified tags)."},fleqn:{type:"boolean",description:"Render display math flush left."},throwOnError:{type:"boolean",default:!0,cli:"-t, --no-throw-on-error",cliDescription:"Render errors (in the color given by --error-color) instead of throwing a ParseError exception when encountering an error."},errorColor:{type:"string",default:"#cc0000",cli:"-c, --error-color <color>",cliDescription:"A color string given in the format 'rgb' or 'rrggbb' (no #). This option determines the color of errors rendered by the -t option.",cliProcessor:r=>"#"+r},macros:{type:"object",cli:"-m, --macro <def>",cliDescription:"Define custom macro of the form '\\foo:expansion' (use multiple -m arguments for multiple macros).",cliDefault:[],cliProcessor:(r,e)=>(e.push(r),e)},minRuleThickness:{type:"number",description:"Specifies a minimum thickness, in ems, for fraction lines, `\\sqrt` top lines, `{array}` vertical lines, `\\hline`, `\\hdashline`, `\\underline`, `\\overline`, and the borders of `\\fbox`, `\\boxed`, and `\\fcolorbox`.",processor:r=>Math.max(0,r),cli:"--min-rule-thickness <size>",cliProcessor:parseFloat},colorIsTextColor:{type:"boolean",description:"Makes \\color behave like LaTeX's 2-argument \\textcolor, instead of LaTeX's one-argument \\color mode change.",cli:"-b, --color-is-text-color"},strict:{type:[{enum:["warn","ignore","error"]},"boolean","function"],description:"Turn on strict / LaTeX faithfulness mode, which throws an error if the input uses features that are not supported by LaTeX.",cli:"-S, --strict",cliDefault:!1},trust:{type:["boolean","function"],description:"Trust the input, enabling all HTML features such as \\url.",cli:"-T, --trust"},maxSize:{type:"number",default:1/0,description:"If non-zero, all user-specified sizes, e.g. in \\rule{500em}{500em}, will be capped to maxSize ems. Otherwise, elements and spaces can be arbitrarily large",processor:r=>Math.max(0,r),cli:"-s, --max-size <n>",cliProcessor:parseInt},maxExpand:{type:"number",default:1e3,description:"Limit the number of macro expansions to the specified number, to prevent e.g. infinite macro loops. If set to Infinity, the macro expander will try to fully expand as in LaTeX.",processor:r=>Math.max(0,r),cli:"-e, --max-expand <n>",cliProcessor:r=>r==="Infinity"?1/0:parseInt(r)},globalGroup:{type:"boolean",cli:!1}};function aa(r){if(typeof r!="string")return r.enum[0];switch(r){case"boolean":return!1;case"string":return"";case"number":return 0;case"object":return{};default:throw new Error("Unexpected schema type; settings must declare an explicit default.")}}function na(r){if(r.default!==void 0)return r.default;var e=Array.isArray(r.type)?r.type[0]:r.type;return aa(e)}function ia(r,e,t,a){var n=t[e];r[e]=n!==void 0?a.processor?a.processor(n):n:na(a)}var de=class{constructor(e){e===void 0&&(e={}),this.displayMode=void 0,this.output=void 0,this.leqno=void 0,this.fleqn=void 0,this.throwOnError=void 0,this.errorColor=void 0,this.macros=void 0,this.minRuleThickness=void 0,this.colorIsTextColor=void 0,this.strict=void 0,this.trust=void 0,this.maxSize=void 0,this.maxExpand=void 0,this.globalGroup=void 0,e=e||{};for(var t of Object.keys(bt)){var a=bt[t];a&&ia(this,t,e,a)}}reportNonstrict(e,t,a){var n=this.strict;if(typeof n=="function"&&(n=n(e,t,a)),!(!n||n==="ignore")){if(n===!0||n==="error")throw new z("LaTeX-incompatible input and strict mode is set to 'error': "+(t+" ["+e+"]"),a);n==="warn"?typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to 'warn': "+(t+" ["+e+"]")):typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to "+("unrecognized '"+n+"': "+t+" ["+e+"]"))}}useStrictBehavior(e,t,a){var n=this.strict;if(typeof n=="function")try{n=n(e,t,a)}catch{n="error"}return!n||n==="ignore"?!1:n===!0||n==="error"?!0:n==="warn"?(typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to 'warn': "+(t+" ["+e+"]")),!1):(typeof console<"u"&&console.warn("LaTeX-incompatible input and strict mode is set to "+("unrecognized '"+n+"': "+t+" ["+e+"]")),!1)}isTrusted(e){if("url"in e&&e.url&&!e.protocol){var t=ra(e.url);if(t==null)return!1;e.protocol=t}var a=typeof this.trust=="function"?this.trust(e):this.trust;return!!a}},k0=class{constructor(e,t,a){this.id=void 0,this.size=void 0,this.cramped=void 0,this.id=e,this.size=t,this.cramped=a}sup(){return S0[sa[this.id]]}sub(){return S0[la[this.id]]}fracNum(){return S0[ua[this.id]]}fracDen(){return S0[oa[this.id]]}cramp(){return S0[ha[this.id]]}text(){return S0[ma[this.id]]}isTight(){return this.size>=2}},Lt=0,Oe=1,ee=2,q0=3,fe=4,p0=5,te=6,l0=7,S0=[new k0(Lt,0,!1),new k0(Oe,0,!0),new k0(ee,1,!1),new k0(q0,1,!0),new k0(fe,2,!1),new k0(p0,2,!0),new k0(te,3,!1),new k0(l0,3,!0)],sa=[fe,p0,fe,p0,te,l0,te,l0],la=[p0,p0,p0,p0,l0,l0,l0,l0],ua=[ee,q0,fe,p0,te,l0,te,l0],oa=[q0,q0,p0,p0,l0,l0,l0,l0],ha=[Oe,Oe,q0,q0,p0,p0,l0,l0],ma=[Lt,Oe,ee,q0,ee,q0,ee,q0],N={DISPLAY:S0[Lt],TEXT:S0[ee],SCRIPT:S0[fe],SCRIPTSCRIPT:S0[te]},yt=[{name:"latin",blocks:[[256,591],[768,879]]},{name:"cyrillic",blocks:[[1024,1279]]},{name:"armenian",blocks:[[1328,1423]]},{name:"brahmic",blocks:[[2304,4255]]},{name:"georgian",blocks:[[4256,4351]]},{name:"cjk",blocks:[[12288,12543],[19968,40879],[65280,65376]]},{name:"hangul",blocks:[[44032,55215]]}];function ca(r){for(var e=0;e<yt.length;e++)for(var t=yt[e],a=0;a<t.blocks.length;a++){var n=t.blocks[a];if(r>=n[0]&&r<=n[1])return t.name}return null}var Fe=[];yt.forEach(r=>r.blocks.forEach(e=>Fe.push(...e)));function Yr(r){for(var e=0;e<Fe.length;e+=2)if(r>=Fe[e]&&r<=Fe[e+1])return!0;return!1}var r0=r=>r+" "+r,_0=80,da=function(e,t){return"M95,"+(622+e+t)+`
 c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
 c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
 c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10

package/browser/chunk-PRARYYF3.js

@@ -0,0 +1 @@
+var k=Object.create;var g=Object.defineProperty,l=Object.defineProperties,m=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertyNames,f=Object.getOwnPropertySymbols,p=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var i=(a,b,c)=>b in a?g(a,b,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[b]=c,r=(a,b)=>{for(var c in b||={})h.call(b,c)&&i(a,c,b[c]);if(f)for(var c of f(b))j.call(b,c)&&i(a,c,b[c]);return a},s=(a,b)=>l(a,n(b));var t=a=>typeof a=="symbol"?a:a+"",u=(a,b)=>{var c={};for(var d in a)h.call(a,d)&&b.indexOf(d)<0&&(c[d]=a[d]);if(a!=null&&f)for(var d of f(a))b.indexOf(d)<0&&j.call(a,d)&&(c[d]=a[d]);return c};var v=(a,b)=>()=>(b||a((b={exports:{}}).exports,b),b.exports),w=(a,b)=>{for(var c in b)g(a,c,{get:b[c],enumerable:!0})},q=(a,b,c,d)=>{if(b&&typeof b=="object"||typeof b=="function")for(let e of o(b))!h.call(a,e)&&e!==c&&g(a,e,{get:()=>b[e],enumerable:!(d=m(b,e))||d.enumerable});return a};var x=(a,b,c)=>(c=a!=null?k(p(a)):{},q(b||!a||!a.__esModule?g(c,"default",{value:a,enumerable:!0}):c,a));export{r as a,s as b,t as c,u as d,v as e,w as f,x as g};

package/browser/index.html

@@ -44,5 +44,5 @@
         window.location.hash = demo;
       }
     </script>
-  <link rel="modulepreload" href="chunk-DAQOROHW.js"><script src="main.js" type="module"></script></body>
+  <link rel="modulepreload" href="chunk-PRARYYF3.js"><script src="main.js" type="module"></script></body>
 </html>