@onemrvapublic/design-system-demos 20.8.0 → 20.10.0-develop.10

package/3rdpartylicenses.txt

@@ -397,6 +397,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 @onemrvapublic/design-system-demos
 
+@onemrvapublic/design-system-jsonforms
+
 ajv
 MIT
 The MIT License (MIT)

package/assets/codes.json

@@ -1 +1 @@
-["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-table","carousel","checkbox","chips","chips-input","choice-chips","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","expansion","fab","file-panel","file-upload","file-upload-manual","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","vertical-stepper"]
+["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-table","carousel","checkbox","chips","chips-input","choice-chips","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","expansion","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","vertical-stepper"]

package/assets/json/address.json

@@ -1 +1 @@
-{"address.html":"<form [readonly]=\"readonly()\">\n  <onemrva-address [form]=\"form\" (update)=\"onUpdate($event)\" />\n  <button mat-button color=\"primary\" type=\"submit\">Submit</button>\n</form>\n","address.ts":"import { Component, effect, input, Input } from '@angular/core';\nimport { OnemRvaAddress } from '@onemrvapublic/design-system/mat-address';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\n@Component({\n  selector: 'app-demo-address',\n  templateUrl: './address.html',\n  standalone: true,\n  imports: [OnemRvaAddress, OnemRvaReadonlyDirective, MatButton],\n})\nexport class DemoAddress extends DemoComponentBase {\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  form = new FormGroup({\n    country: new FormControl('', Validators.required),\n    street: new FormControl('', Validators.required),\n    postal_code: new FormControl(''),\n    city: new FormControl(''),\n    street_number: new FormControl(''),\n    box: new FormControl(''),\n  });\n\n  onUpdate(val: any) {\n    this.output.set(val);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly()) {\n        // we set a value for readonly demo\n        this.form.setValue({\n          country: 'be',\n          street: 'rue de la gare',\n          postal_code: '1000',\n          city: 'Bruxelles',\n          street_number: '1',\n          box: 'A',\n        });\n      }\n    });\n  }\n}\n"}
+{"address.html":"<form [readonly]=\"readonly()\">\n  <onemrva-address [form]=\"form\" (update)=\"onUpdate($event)\" />\n  <button mat-button color=\"primary\" type=\"submit\">Submit</button>\n</form>\n","address.ts":"import { Component, effect, input } from '@angular/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\nimport { OnemRvaAddress } from '@onemrvapublic/design-system/mat-address';\n\n@Component({\n  selector: 'app-demo-address',\n  templateUrl: './address.html',\n  standalone: true,\n  imports: [OnemRvaAddress, MatButton, OnemRvaReadonlyDirective],\n})\nexport class DemoAddress extends DemoComponentBase {\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  form = new FormGroup({\n    country: new FormControl('', Validators.required),\n    street: new FormControl('', Validators.required),\n    postal_code: new FormControl(''),\n    city: new FormControl(''),\n    street_number: new FormControl(''),\n    box: new FormControl(''),\n  });\n\n  onUpdate(val: any) {\n    this.output.set(val);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly()) {\n        // we set a value for readonly demo\n        this.form.setValue({\n          country: 'be',\n          street: 'rue de la gare',\n          postal_code: '1000',\n          city: 'Bruxelles',\n          street_number: '1',\n          box: 'A',\n        });\n      }\n    });\n  }\n}\n"}

package/assets/json/autocomplete.json

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

package/assets/json/avatar.json

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

package/assets/json/bank-input.json

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

package/assets/json/birthplace-input.json

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

package/assets/json/button-loading.json

@@ -1 +1 @@
-{"demo-button-loading.component.html":"@if (type === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n","demo-button-loading.component.ts":"import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n  ],\n  templateUrl: 'demo-button-loading.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonLoadingComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  @Input()\n  type: 'outlined' | 'contained' = 'contained';\n\n  @Input()\n  disabled = false;\n\n  loading = false;\n\n  send() {\n    this.loading = true;\n    setTimeout(() => {\n      this.loading = false;\n    }, 3000);\n  }\n\n  ngOnInit(): void {\n    this.send();\n  }\n}\n"}
+{"demo-button-loading.component.html":"@if (type === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n","demo-button-loading.component.ts":"import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n  ],\n  templateUrl: 'demo-button-loading.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonLoadingComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  @Input()\n  type: 'outlined' | 'contained' = 'contained';\n\n  @Input()\n  disabled = false;\n\n  loading = false;\n\n  send() {\n    this.loading = true;\n    setTimeout(() => {\n      this.loading = false;\n    }, 3000);\n  }\n\n  ngOnInit(): void {\n    this.send();\n  }\n}\n"}

package/assets/json/card-table.json

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

package/assets/json/card.json

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

package/assets/json/carousel.json

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

package/assets/json/checkbox.json

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

package/assets/json/chips-input.json

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

package/assets/json/choice-chips.json

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

package/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';\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 { 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"}

package/assets/json/country-input.json

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

package/assets/json/datepicker-luxon.json

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

package/assets/json/datepicker-month-year.json

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

package/assets/json/datepicker.json

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

package/assets/json/daterangepicker.json

@@ -1 +1 @@
-{"demo-daterangepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"campaignOnePicker\"\n  ></mat-datepicker-toggle>\n  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  onemrvaDateLuxonProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  readonly = input(false);\n  disabled = input(false);\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}
+{"demo-daterangepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      onemrvaDateFormat\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      onemrvaDateFormat\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"campaignOnePicker\"\n  ></mat-datepicker-toggle>\n  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import {\n  Component,\n  effect,\n  input,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport {\n  OnemrvaDateFormatDirective,\n  onemrvaDateLuxonProvider,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n    OnemrvaDateFormatDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  readonly = input(false);\n  disabled = input(false);\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/dialog-content.json

@@ -1 +1 @@
-{"demo-dialog-content.component.html":"<h2 mat-dialog-title>\n  I Have a Dream<span matDialogClose class=\"close-dialog\"\n    ><mat-icon>close</mat-icon></span\n  >\n</h2>\n\n<mat-dialog-content>\n  @if (panelSize === 'medium' || panelSize === 'small') {\n    <span>\n      >I have a dream that one day this nation will rise up and live out the\n      true meaning of its creed: \"We hold these truths to be self-evident, that\n      all men are created equal.\"</span\n    >\n  } @else {\n    <ng-container>\n      I have a dream that one day this nation will rise up and live out the true\n      meaning of its creed: \"We hold these truths to be self-evident, that all\n      men are created equal.\" I have a dream that one day on the red hills of\n      Georgia, the sons of former slaves and the sons of former slave owners\n      will be able to sit down together at the table of brotherhood. I have a\n      dream that one day even the state of Mississippi, a state sweltering with\n      the heat of injustice, sweltering with the heat of oppression, will be\n      transformed into an oasis of freedom and justice. I have a dream that my\n      four little children will one day live in a nation where they will not be\n      judged by the color of their skin but by the content of their character. I\n      have a dream today! I have a dream that one day, down in Alabama, with its\n      vicious racists, with its governor having his lips dripping with the words\n      of \"interposition\" and \"nullification\" -- one day right there in Alabama\n      little black boys and black girls will be able to join hands with little\n      white boys and white girls as sisters and brothers. I have a dream\n      today!</ng-container\n    >\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  @if (panelSize !== 'medium' && panelSize !== 'small') {\n    <button mat-button color=\"primary\">Tertiary</button>\n  }\n  <button mat-stroked-button color=\"primary\">Cancel</button>\n  <button mat-flat-button color=\"accent\">OK</button>\n</mat-dialog-actions>\n","demo-dialog-content.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-content-dialog',\n  templateUrl: 'demo-dialog-content.component.html',\n  standalone: true,\n  imports: [MatIcon, MatDialogModule, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogContentComponent extends DemoComponentBase {\n  panelSize!: string;\n  panelType!: string;\n\n  data = inject(MAT_DIALOG_DATA, { optional: true });\n\n  constructor() {\n    super();\n    // Handle case where component is used outside of dialog context\n    this.panelSize = this.data?.panelSize || 'medium';\n    this.panelType = this.data?.panelType || 'default';\n  }\n}\n"}
+{"demo-dialog-content.component.html":"<div mat-dialog-title>\n  I Have a Dream<span matDialogClose class=\"close-dialog\"\n    ><mat-icon>close</mat-icon></span\n  >\n</div>\n\n<mat-dialog-content>\n  @if (panelSize === 'medium' || panelSize === 'small') {\n    <span>\n      I have a dream that one day this nation will rise up and live out the true\n      meaning of its creed: \"We hold these truths to be self-evident, that all\n      men are created equal.\"</span\n    >\n  } @else {\n    <ng-container>\n      I have a dream that one day this nation will rise up and live out the true\n      meaning of its creed: \"We hold these truths to be self-evident, that all\n      men are created equal.\" I have a dream that one day on the red hills of\n      Georgia, the sons of former slaves and the sons of former slave owners\n      will be able to sit down together at the table of brotherhood. I have a\n      dream that one day even the state of Mississippi, a state sweltering with\n      the heat of injustice, sweltering with the heat of oppression, will be\n      transformed into an oasis of freedom and justice. I have a dream that my\n      four little children will one day live in a nation where they will not be\n      judged by the color of their skin but by the content of their character. I\n      have a dream today! I have a dream that one day, down in Alabama, with its\n      vicious racists, with its governor having his lips dripping with the words\n      of \"interposition\" and \"nullification\" -- one day right there in Alabama\n      little black boys and black girls will be able to join hands with little\n      white boys and white girls as sisters and brothers. I have a dream\n      today!</ng-container\n    >\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button color=\"primary\">Cancel</button>\n  <button mat-flat-button color=\"accent\">OK</button>\n</mat-dialog-actions>\n","demo-dialog-content.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-content-dialog',\n  templateUrl: 'demo-dialog-content.component.html',\n  standalone: true,\n  imports: [MatIcon, MatDialogModule, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogContentComponent extends DemoComponentBase {\n  panelSize!: string;\n  panelType!: string;\n\n  data = inject(MAT_DIALOG_DATA, { optional: true });\n\n  constructor() {\n    super();\n    // Handle case where component is used outside of dialog context\n    this.panelSize = this.data?.panelSize || 'medium';\n    this.panelType = this.data?.panelType || 'default';\n  }\n}\n"}

package/assets/json/dialog.json

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

package/assets/json/drawer.json

@@ -1 +1 @@
-{"demo-drawer-content.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n  Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n  <h2>Content title</h2>\n  <p>\n    The slide-over allows to get some content displayed on a panel with some\n    elements inside.\n  </p>\n  <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n    <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n      <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>User ID</mat-label>\n          <input matInput [formControl]=\"userId\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Left fiels</mat-label>\n          <input matInput [formControl]=\"leftField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Right field</mat-label>\n          <input matInput [formControl]=\"rightField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n    </mat-grid-list>\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n  </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    class=\"close\"\n    (click)=\"drawerService.close()\"\n  >\n    Cancel\n  </button>\n  <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n    Save\n  </button>\n</onemrva-drawer-actions>\n","demo-drawer-content.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  LayoutDrawerActionsComponent,\n  LayoutDrawerContentComponent,\n  LayoutDrawerTitleComponent,\n  OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'layout-drawer',\n  templateUrl: 'demo-drawer-content.component.html',\n  standalone: true,\n  imports: [\n    LayoutDrawerActionsComponent,\n    LayoutDrawerContentComponent,\n    LayoutDrawerTitleComponent,\n    ReactiveFormsModule,\n    MatIconModule,\n    MatLabel,\n    MatFormField,\n    MatGridTile,\n    MatGridList,\n    MatInput,\n    MatButton,\n    OnemrvaMatPanelModule,\n  ],\n})\nexport class DemoDrawerContentComponent extends DemoComponentBase {\n  @Input()\n  myForm!: FormGroup;\n\n  get userId() {\n    return this.myForm.get('userId') as FormControl;\n  }\n  get leftField() {\n    return this.myForm.get('leftField') as FormControl;\n  }\n  get rightField() {\n    return this.myForm.get('rightField') as FormControl;\n  }\n  drawerService = inject(OnemrvaDrawerService);\n\n  save() {\n    this.drawerService.close();\n  }\n}\n","demo-drawer.component.html":"<!-- !! The layout already contains a mat-drawer-container -->\n<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div style=\"height: 60vh\">\n      <button\n        mat-flat-button\n        color=\"accent\"\n        (click)=\"toggleForm()\"\n        [attr.data-cy]=\"'click-me'\"\n      >\n        Open form\n      </button>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n","demo-drawer.component.ts":"import {\n  AfterViewInit,\n  Component,\n  ComponentRef,\n  ViewChild,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  DrawerHostDirective,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  MatDrawer,\n  MatDrawerContainer,\n  MatDrawerContent,\n} from '@angular/material/sidenav';\nimport { DemoDrawerContentComponent } from './demo-drawer-content.component';\n\n@Component({\n  selector: 'app-demo-drawer',\n  templateUrl: 'demo-drawer.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterModule,\n\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  @ViewChild('mainDrawer', { static: true })\n  private drawer?: MatDrawer;\n\n  @ViewChild(DrawerHostDirective, { static: true })\n  private drawerHost?: DrawerHostDirective;\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  ngAfterViewInit(): void {\n    if (this.drawer) {\n      this.drawerService.setDrawer(this.drawer);\n    }\n    if (this.drawerHost) {\n      this.drawerService.host = this.drawerHost;\n    }\n  }\n\n  toggleForm() {\n    if (!this.componentRef) {\n      this.componentRef = this.drawerService.host?.createComponent(\n        DemoDrawerContentComponent,\n      );\n    }\n    if (!this.componentRef) {\n      console.error('Drawer host is not available.');\n      return;\n    }\n    this.componentRef.instance.myForm = this.dummyForm;\n\n    this.drawerService.size.set('xlarge');\n    this.drawerService.toggle();\n  }\n\n  help() {\n    alert('HELP');\n  }\n}\n"}
+{"demo-drawer-content.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n  Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n  <h2>Content title</h2>\n  <p>\n    The slide-over allows to get some content displayed on a panel with some\n    elements inside.\n  </p>\n  <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n    <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n      <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>User ID</mat-label>\n          <input matInput [formControl]=\"userId\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Left fiels</mat-label>\n          <input matInput [formControl]=\"leftField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Right field</mat-label>\n          <input matInput [formControl]=\"rightField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n    </mat-grid-list>\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n  </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    class=\"close\"\n    (click)=\"drawerService.close()\"\n  >\n    Cancel\n  </button>\n  <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n    Save\n  </button>\n</onemrva-drawer-actions>\n","demo-drawer-content.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  LayoutDrawerActionsComponent,\n  LayoutDrawerContentComponent,\n  LayoutDrawerTitleComponent,\n  OnemrvaDrawerService,\n} from '@onemrvapublic/design-system/layout';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'layout-drawer',\n  templateUrl: 'demo-drawer-content.component.html',\n  standalone: true,\n  imports: [\n    LayoutDrawerActionsComponent,\n    LayoutDrawerContentComponent,\n    LayoutDrawerTitleComponent,\n    ReactiveFormsModule,\n    MatIconModule,\n    MatLabel,\n    MatFormField,\n    MatGridTile,\n    MatGridList,\n    MatInput,\n    MatButton,\n    OnemrvaMatPanelModule,\n  ],\n})\nexport class DemoDrawerContentComponent extends DemoComponentBase {\n  @Input()\n  myForm!: FormGroup;\n\n  get userId() {\n    return this.myForm.get('userId') as FormControl;\n  }\n  get leftField() {\n    return this.myForm.get('leftField') as FormControl;\n  }\n  get rightField() {\n    return this.myForm.get('rightField') as FormControl;\n  }\n  drawerService = inject(OnemrvaDrawerService);\n\n  save() {\n    this.drawerService.close();\n  }\n}\n","demo-drawer.component.html":"<!-- !! The layout already contains a mat-drawer-container -->\n<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div style=\"height: 60vh\">\n      <button\n        mat-flat-button\n        color=\"accent\"\n        (click)=\"toggleForm()\"\n        [attr.data-cy]=\"'click-me'\"\n      >\n        Open form\n      </button>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n","demo-drawer.component.ts":"import {\n  AfterViewInit,\n  Component,\n  ComponentRef,\n  ViewChild,\n  inject,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  DrawerHostDirective,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system/layout';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  MatDrawer,\n  MatDrawerContainer,\n  MatDrawerContent,\n} from '@angular/material/sidenav';\nimport { DemoDrawerContentComponent } from './demo-drawer-content.component';\n\n@Component({\n  selector: 'app-demo-drawer',\n  templateUrl: 'demo-drawer.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterModule,\n\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n    DrawerHostDirective,\n    MatDrawer,\n    MatDrawerContainer,\n    MatDrawerContent,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent implements AfterViewInit {\n  drawerService = inject(OnemrvaDrawerService);\n  componentRef?: ComponentRef<DemoDrawerContentComponent>;\n\n  @ViewChild('mainDrawer', { static: true })\n  private drawer?: MatDrawer;\n\n  @ViewChild(DrawerHostDirective, { static: true })\n  private drawerHost?: DrawerHostDirective;\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  ngAfterViewInit(): void {\n    if (this.drawer) {\n      this.drawerService.setDrawer(this.drawer);\n    }\n    if (this.drawerHost) {\n      this.drawerService.host = this.drawerHost;\n    }\n  }\n\n  toggleForm() {\n    if (!this.componentRef) {\n      this.componentRef = this.drawerService.host?.createComponent(\n        DemoDrawerContentComponent,\n      );\n    }\n    if (!this.componentRef) {\n      console.error('Drawer host is not available.');\n      return;\n    }\n    this.componentRef.instance.myForm = this.dummyForm;\n\n    this.drawerService.size.set('xlarge');\n    this.drawerService.toggle();\n  }\n\n  help() {\n    alert('HELP');\n  }\n}\n"}

package/assets/json/empty.json

@@ -1 +1 @@
-{"demo-empty.component.html":"","demo-empty.component.ts":"import { Component } from '@angular/core';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system/mat-input-address';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-empty',\n  templateUrl: './demo-empty.component.html',\n  standalone: true,\n  imports: [],\n})\nexport class DemoEmptyComponent extends DemoComponentBase {}\n"}
+{"demo-empty.component.html":"","demo-empty.component.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-empty',\n  templateUrl: './demo-empty.component.html',\n  standalone: true,\n  imports: [],\n})\nexport class DemoEmptyComponent extends DemoComponentBase {}\n"}

package/assets/json/enterprise-number-input.json

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

package/assets/json/error.json

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

package/assets/json/file-panel.json

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

package/assets/json/file-upload-manual.json

@@ -1 +1 @@
-{"demo-file-upload-manual.component.html":"<h1>File Upload</h1>\n<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n  [uploadOnDrop]=\"false\"\n>\n</onemrva-mat-file-upload>\n<br />\n\n<div class=\"execute\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [loading]=\"!!(loadingGlossary | async)\"\n    (click)=\"send()\"\n  >\n    @if (loadingGlossary | async) {\n      <ng-container>{{ 'Loading' | translate }} ...</ng-container>\n    } @else {\n      <ng-container>{{ 'Send' | translate }}</ng-container>\n    }\n  </button>\n</div>\n\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\"> </file-panel>\n</ng-template>\n","demo-file-upload-manual.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { CommonModule } from '@angular/common';\nimport { Observable, of, Subject, take } from 'rxjs';\nimport { DemoFileUploadManualService } from './demo-file-upload-manual.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-file-upload-manual',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButton,\n    TranslatePipe,\n    OnemrvaMatLoadingDirective,\n  ],\n  templateUrl: 'demo-file-upload-manual.component.html',\n\n  providers: [\n    TranslateService,\n    TranslatePipe,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadManualService,\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadManualComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  public loadingGlossary = this.fileUploadStore.isSending;\n\n  public 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  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  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n\n  send() {\n    this.files$.pipe(take(1)).subscribe((files: any[]) => {\n      this.fileUploadStore.uploadFiles(files);\n    });\n  }\n}\n","demo-file-upload-manual.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';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadManualService {\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            body: { id: 'E', dummyProp: 'dummy value' },\n          });\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","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.fileUpload(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.XXX\n\nThibaut, tu as oublié de mettre à jour le changeLog\n"}
+{"demo-file-upload-manual.component.html":"<h1>File Upload</h1>\n<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n  [uploadOnDrop]=\"false\"\n>\n</onemrva-mat-file-upload>\n<br />\n\n<div class=\"execute\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [loading]=\"!!(loadingGlossary | async)\"\n    (click)=\"send()\"\n  >\n    @if (loadingGlossary | async) {\n      <ng-container>{{ 'Loading' | translate }} ...</ng-container>\n    } @else {\n      <ng-container>{{ 'Send' | translate }}</ng-container>\n    }\n  </button>\n</div>\n\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\"> </file-panel>\n</ng-template>\n","demo-file-upload-manual.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { CommonModule } from '@angular/common';\nimport { Observable, of, Subject, take } from 'rxjs';\nimport { DemoFileUploadManualService } from './demo-file-upload-manual.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system/mat-spinner';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-file-upload-manual',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButton,\n    TranslatePipe,\n    OnemrvaMatLoadingDirective,\n  ],\n  templateUrl: 'demo-file-upload-manual.component.html',\n\n  providers: [\n    TranslateService,\n    TranslatePipe,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadManualService,\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadManualComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  public loadingGlossary = this.fileUploadStore.isSending;\n\n  public 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  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  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n\n  send() {\n    this.files$.pipe(take(1)).subscribe((files: any[]) => {\n      this.fileUploadStore.uploadFiles(files);\n    });\n  }\n}\n","demo-file-upload-manual.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 DemoFileUploadManualService {\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            body: { id: 'E', dummyProp: 'dummy value' },\n          });\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","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.fileUpload(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.XXX\n\nThibaut, tu as oublié de mettre à jour le changeLog\n"}