@onemrvapublic/design-system-demos 20.3.0-develop.3 → 20.3.0-develop.4

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","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","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","grid","horizontal-stepper","icon","icon-button","if-width-is","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":"<onemrva-address (update)=\"onUpdate($event)\" />\n","address.ts":"import { Component } from '@angular/core';\nimport { OnemRvaAddress } from '@onemrvapublic/design-system/mat-address';\n\n@Component({\n  selector: 'app-demo-address',\n  imports: [OnemRvaAddress],\n  templateUrl: './address.html',\n  standalone: true,\n})\nexport class DemoAddress {\n  onUpdate(val: any) {\n    console.log('val - ', val);\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 { OnemRvaAddress } from '@onemrvapublic/design-system/mat-address';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FormControl, FormGroup } 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  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = false;\n\n  form = new FormGroup({\n    country: new FormControl(''),\n    street: new FormControl(''),\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/birthplace-input.json

@@ -1 +1 @@
-{"demo-birthplace-input.component.html":"<onemrva-mat-input-birthplace\n  [countryCode]=\"countryForm\"\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 { Component, Input, ViewEncapsulation } 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 { OnemrvaMatInputBirthPlaceComponent } 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  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBirthplaceInputComponent extends DemoComponentBase {\n  countryForm = new FormControl(null, [Validators.required]);\n\n  @Input()\n  returnValue = 'object';\n\n  constructor() {\n    super();\n    this.countryForm.valueChanges.subscribe(value => {\n      this.output.set(value);\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 { Component, effect, Input, ViewEncapsulation } 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  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = 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/checkbox.json

@@ -1 +1 @@
-{"demo-checkbox.component.html":"<mat-checkbox\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';\n\n@Component({\n  selector: 'app-demo-checkbox',\n  templateUrl: './demo-checkbox.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatCheckboxModule, FormsModule],\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"}
+{"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"}

package/assets/json/country-input.json

@@ -1 +1 @@
-{"demo-country-input.component.html":"<onemrva-mat-input-country\n  [country]=\"countryForm\"\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, 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';\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  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCountryInputComponent extends DemoComponentBase {\n  countryForm = new FormControl('', [Validators.required]);\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 {\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  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = 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.json

@@ -1 +1 @@
-{"demo-datepicker.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\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</form>\n","demo-datepicker.component.ts":"import { Component, 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 { onemrvaDateNativeProvider } 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  ],\n  providers: [onemrvaDateNativeProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl('');\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  ngOnInit(): void {\n    this.date.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 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  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  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = 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/enterprise-number-input.json

@@ -1 +1 @@
-{"demo-enterprise-number-input.component.html":"<onemrva-mat-input-enterprise-number\n  [enterpriseNumber]=\"viesForm\"\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, 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';\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  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoEnterpriseNumberInputComponent extends DemoComponentBase {\n  viesForm = new FormControl('', [Validators.required]);\n  getCountry($event: any) {\n    console.log($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 {\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"}

package/assets/json/multiselect.json

@@ -1 +1 @@
-{"demo-multiselect.component.html":"<mat-form-field>\n  <mat-label>Select (single)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\">\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<br /><br />\n<mat-form-field>\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\">\n    <mat-option>\n      <mat-select-search\n        [formControl]=\"filterCtrl\"\n        ariaLabel=\"{{ 'filter select' | translate }}\"\n        noEntriesFoundLabel=\"{{ 'Not found' | translate }}\"\n        placeholderLabel=\"{{ 'Search' | translate }}\"\n      ></mat-select-search>\n    </mat-option>\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<br /><br />\n<mat-form-field>\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"multiselect\"\n    [selectionToggle]=\"true\"\n    [showFilter]=\"true\"\n  >\n    @for (value of toppingListMulti$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatSelectChange, MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, of, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n  OnemrvaMatMultiSelectComponent,\n  OnemrvaMatMultiSelectModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-multiselect',\n  templateUrl: './demo-multiselect.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemrvaMatMultiSelectComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  toppings: FormControl = new FormControl('', Validators.required);\n  toppingList: string[] = [\n    'Arugula',\n    'Beef',\n    'Cale',\n    'Egg',\n    'Eggplant',\n    'Extra cheese',\n    'Ham',\n    'Mushroom',\n    'Onion',\n    'Parmesan',\n    'Paprika',\n    'Pepper',\n    'Pepperoni',\n    'Raisin',\n    'Sausage',\n    'Tomato',\n  ];\n  toppingList$: Observable<string[]>;\n\n  toppingListMulti$: Observable<string[]> = of([]);\n\n  multiselect = new FormControl('', Validators.required);\n  selected: any = 'four';\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    setTimeout(() => {\n      this.toppingListMulti$ = of(this.toppingList);\n    }, 2000);\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return this.toppingList.filter((value: string) => {\n          if (!search || search === '') return this.toppings;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n\n  changed($event: MatSelectChange) {\n    alert($event.value);\n  }\n}\n"}
+{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle\"\n    [showFilter]=\"showFilter\"\n  >\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectChange, MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, of, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatSelectSearchModule,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n  OnemrvaMatMultiSelectComponent,\n  OnemrvaMatMultiSelectModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-multiselect',\n  templateUrl: './demo-multiselect.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemrvaMatMultiSelectComponent,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n\n  @Input()\n  selectionToggle = true;\n\n  @Input()\n  showFilter = true;\n\n  form: FormControl = new FormControl([], Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly) {\n        this.form.setValue(['Pepperoni', 'Eggplant']);\n      }\n    });\n\n    // filtering the list\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return this.form;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

package/assets/json/phone-input.json

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

package/assets/json/select.json

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

package/assets/json/text-input.json

@@ -1 +1 @@
-{"demo-text-input.component.html":"<h2>Regular input field</h2>\n<form [formGroup]=\"form\">\n  <mat-form-field [color]=\"color\">\n    <mat-label>Error demo</mat-label>\n    <input matInput [readonly]=\"readonly\" [formControl]=\"input\" />\n    <mat-hint>Hint</mat-hint>\n    @if (input.errors && input.errors['required']) {\n      <mat-error> This is a long error message displayed on 2 lines </mat-error>\n    }\n  </mat-form-field>\n</form>\n\n<h2>Onemrva Readonly applied</h2>\n<form [formGroup]=\"form\" onemrva-readonly>\n  <mat-form-field [color]=\"color\">\n    <mat-label>Error demo</mat-label>\n    <input matInput [readonly]=\"readonly\" [formControl]=\"input\" />\n    <mat-hint>Hint</mat-hint>\n    @if (input.errors && input.errors['required']) {\n      <mat-error> This is a long error message displayed on 2 lines </mat-error>\n    }\n  </mat-form-field>\n</form>\n","demo-text-input.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  UntypedFormControl,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { ReadOnlyFormDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    ReadOnlyFormDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  @Input()\n  color: 'primary' | 'warn' = 'primary';\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n\n  form = new FormGroup({\n    input: new UntypedFormControl('text', [Validators.required]),\n  });\n\n  get input() {\n    return this.form.get('input') as UntypedFormControl;\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled) this.input.disable();\n      else this.input.enable();\n    });\n  }\n}\n"}
+{"demo-text-input.component.html":"<mat-form-field [color]=\"color\" [readonly]=\"readonly\">\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"form\" />\n  <mat-hint>Hint</mat-hint>\n  @if (form.errors && form.errors['required']) {\n    <mat-error> This is a long error message displayed on 2 lines </mat-error>\n  }\n</mat-form-field>\n","demo-text-input.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  UntypedFormControl,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  form = new UntypedFormControl('text', [Validators.required]);\n\n  @Input()\n  color: 'primary' | 'warn' = 'primary';\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  }\n}\n"}

package/assets/json/textarea.json

@@ -1 +1 @@
-{"demo-textarea.component.html":"<mat-form-field>\n  <mat-label>Textarea</mat-label>\n  <textarea matInput [formControl]=\"text\" style=\"height: 100px\">\nRelax. I'll talk to Lando and see what I can find out.\nI don't trust Lando.\nWell, I don't trust him, either.</textarea\n  >\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ text.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n<br />\n<br />\n\n<mat-form-field>\n  <mat-label>Textarea (autoresize)</mat-label>\n  <textarea matInput [formControl]=\"text\" cdkTextareaAutosize>\nRelax. I'll talk to Lando and see what I can find out.\nI don't trust Lando.\nWell, I don't trust him, either.</textarea\n  >\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ text.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n\n<br />\n<br />\n<br />\n<br />\n\n<mat-form-field onemrva-readonly>\n  <mat-label>Textarea (autoresize)</mat-label>\n  <textarea matInput [formControl]=\"text\" cdkTextareaAutosize>\nRelax. I'll talk to Lando and see what I can find out.\nI don't trust Lando.\nWell, I don't trust him, either.</textarea\n  >\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ text.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n<br />\n<br />\n<br />\n","demo-textarea.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { ReadOnlyFormDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-textarea',\n  templateUrl: './demo-textarea.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    ReadOnlyFormDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextareaComponent extends DemoComponentBase {\n  text: FormControl = new FormControl(\n    \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuriess\",\n  );\n}\n"}
+{"demo-textarea.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Textarea</mat-label>\n  <textarea\n    matInput\n    [formControl]=\"form\"\n    [cdkTextareaAutosize]=\"autoresize\"\n    style=\"min-height: 200px\"\n  >\n  </textarea>\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ form.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n","demo-textarea.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-textarea',\n  templateUrl: './demo-textarea.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextareaComponent extends DemoComponentBase {\n  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  autoresize = false;\n\n  form: FormControl = new FormControl(\n    \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuriess\",\n  );\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

package/assets/json/timepicker.json

@@ -1 +1 @@
-{"demo-timepicker.component.html":"<mat-form-field class=\"example-full-width\" [formGroup]=\"form\">\n  <mat-label>Time</mat-label>\n  <input formControlName=\"time\" matInput [matTimepicker]=\"timepicker\" />\n  <mat-timepicker-toggle\n    [ariaLabel]=\"'Pick a time'\"\n    matSuffix\n    [for]=\"timepicker\"\n  ></mat-timepicker-toggle>\n  <mat-timepicker color=\"accent\" #timepicker></mat-timepicker>\n</mat-form-field>\n\n<br />\n<br />\n<br />\n\n<mat-form-field class=\"example-full-width\" [formGroup]=\"form2\" onemrva-readonly>\n  <mat-label>Time</mat-label>\n  <input formControlName=\"time\" matInput [matTimepicker]=\"timepicker2\" />\n  <mat-timepicker-toggle\n    [ariaLabel]=\"'Pick a time'\"\n    matSuffix\n    [for]=\"timepicker2\"\n  ></mat-timepicker-toggle>\n  <mat-timepicker color=\"accent\" #timepicker2></mat-timepicker>\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatTimepickerModule } from '@onemrvapublic/design-system/mat-timepicker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ReadOnlyFormDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-timepicker',\n  templateUrl: 'demo-timepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    OnemrvaMatTimepickerModule,\n    ReadOnlyFormDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormGroup({\n    time: new FormControl(),\n  });\n\n  public form2 = new FormGroup({\n    time: new FormControl('13:44'),\n  });\n\n  constructor() {\n    super();\n    this.form\n      .get('time')\n      ?.valueChanges.pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this.output.set(\n          `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n        );\n      });\n  }\n}\n"}
+{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Time</mat-label>\n  <input [formControl]=\"form\" matInput [matTimepicker]=\"timepicker\" />\n  <mat-timepicker-toggle\n    [ariaLabel]=\"'Pick a time'\"\n    matSuffix\n    [for]=\"timepicker\"\n  ></mat-timepicker-toggle>\n  <mat-timepicker color=\"accent\" #timepicker></mat-timepicker>\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatTimepickerModule } from '@onemrvapublic/design-system/mat-timepicker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-timepicker',\n  templateUrl: 'demo-timepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    OnemrvaMatTimepickerModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormControl();\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n\n  constructor() {\n    super();\n    this.form?.setValue(new Date());\n    this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(\n        `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n      );\n    });\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}