@onemrvapublic/design-system-demos 20.6.3-develop.3 → 20.7.0-develop.1

package/3rdpartylicenses.txt

@@ -173,6 +173,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
+@angular/material-luxon-adapter
+MIT
+The MIT License
+
+Copyright (c) 2025 Google LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
 @angular/platform-browser
 MIT
 The MIT License
@@ -475,10 +500,12 @@ SOFTWARE.
 
 fast-uri
 BSD-3-Clause
-Copyright (c) 2021 The Fastify Team
 Copyright (c) 2011-2021, Gary Court until https://github.com/garycourt/uri-js/commit/a1acf730b4bba3f1097c9f52e7d9d3aba8cdcaae
+Copyright (c) 2021-present The Fastify team
 All rights reserved.
 
+The Fastify team members are listed at https://github.com/fastify/fastify#team.
+
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
     * Redistributions of source code must retain the above copyright

package/assets/i18n/en.json

@@ -139,7 +139,7 @@
   "input.bank": {
     "length": "Incorrect number of digits for this country",
     "checksum": "Bank account number invalid",
-    "invalid": "Field required"
+    "invalid": "Field invalid"
   },
   "input.phone": {
     "required": "Field required",

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('required')) {\n    <mat-error>\n      {{ 'input.bank.required' | translate }}\n    </mat-error>\n  }\n  @if (accountNumber.hasError('WrongBBANLength')) {\n    <mat-error>\n      {{ 'input.bank.length' | translate }}\n    </mat-error>\n  }\n  @if (accountNumber.hasError('NoIBANCountry')) {\n    <mat-error> NoIBANCountry </mat-error>\n  }\n  @if (\n    !accountNumber.hasError('WrongBBANLength') &&\n    (accountNumber.hasError('WrongBBANFormat') ||\n      accountNumber.hasError('WrongAccountBankBranchChecksum') ||\n      accountNumber.hasError('WrongIBANChecksum'))\n  ) {\n    <mat-error>\n      {{ 'input.bank.invalid' | 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 {\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"}

package/assets/json/button.json

@@ -1 +1 @@
-{"demo-button.component.html":"@if (type() === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    class=\"{{ size() }}\"\n    aria-label=\"Action\"\n    [disabled]=\"disabled()\"\n  >\n    @if (icon() !== '') {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    Action\n  </button>\n} @else if (type() === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    class=\"{{ size() }}\"\n    aria-label=\"Normal\"\n    [disabled]=\"disabled()\"\n  >\n    @if (icon() !== '') {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    Normal\n  </button>\n} @else if (type() === 'text') {\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"{{ size() }}\"\n    aria-label=\"Basic\"\n    [disabled]=\"disabled()\"\n  >\n    @if (icon() !== '') {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    Basic\n  </button>\n}\n","demo-button.component.ts":"import {\n  Component,\n  effect,\n  input,\n  Input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\n\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button',\n  templateUrl: './demo-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaSharedModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonComponent extends DemoComponentBase {\n  type = input('outlined');\n  icon = input('');\n  size = input('');\n  disabled = input(false);\n}\n"}
+{"demo-button.component.html":"<p>Contained / Flat:</p>\n<button\n  mat-flat-button\n  color=\"accent\"\n  class=\"{{ size() }}\"\n  aria-label=\"Action\"\n  [disabled]=\"disabled()\"\n>\n  @if (icon() !== '') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  Action\n  @if (iconEnd() !== '') {\n    <mat-icon iconPositionEnd>{{ iconEnd() }}</mat-icon>\n  }\n</button>\n<p>Outlined / stroked:</p>\n<button\n  mat-stroked-button\n  color=\"primary\"\n  class=\"{{ size() }}\"\n  aria-label=\"Normal\"\n  [disabled]=\"disabled()\"\n>\n  @if (icon() !== '') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  Normal\n\n  @if (iconEnd() !== '') {\n    <mat-icon iconPositionEnd>{{ iconEnd() }}</mat-icon>\n  }\n</button>\n<p>Text:</p>\n<button\n  mat-button\n  color=\"primary\"\n  class=\"{{ size() }}\"\n  aria-label=\"Basic\"\n  [disabled]=\"disabled()\"\n>\n  Basic\n</button>\n","demo-button.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\n\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button',\n  templateUrl: './demo-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaSharedModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonComponent extends DemoComponentBase {\n  icon = input('');\n  iconEnd = input('');\n  size = input('');\n  disabled = input(false);\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 #picker></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';\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  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 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"}

package/assets/json/jsonform.json

@@ -1 +1 @@
-{"jsonform.html":"<jsonforms\n  [data]=\"data\"\n  [schema]=\"schema\"\n  [uischema]=\"uischema\"\n  [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component, effect, Input } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\n\n@Component({\n  selector: 'app-demo-jsonform',\n  templateUrl: './jsonform.html',\n  standalone: true,\n  imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n  renderers = angularMaterialRenderers;\n\n  uischema = uischema;\n  schema = schema;\n\n  data = {};\n}\n","schema.form.ts":"export const schema = {\n  type: 'object',\n  properties: {\n    exampleRadioEnum: {\n      type: 'string',\n      enum: ['One', 'Two', 'Three'],\n    },\n    name: {\n      type: 'string',\n      minLength: 1,\n    },\n    done: {\n      type: 'boolean',\n    },\n    due_date: {\n      type: 'string',\n      format: 'date',\n    },\n    recurrence: {\n      type: 'string',\n      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n    },\n  },\n  required: ['name', 'due_date'],\n};\n","uischema.form.ts":"export const uischema = {\n  type: 'VerticalLayout',\n  elements: [\n    {\n      type: 'Control',\n      scope: '#/properties/exampleRadioEnum',\n      options: {\n        format: 'radio',\n      },\n    },\n    {\n      type: 'Control',\n      label: false,\n      scope: '#/properties/done',\n    },\n    {\n      type: 'Control',\n      scope: '#/properties/name',\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/due_date',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/recurrence',\n        },\n      ],\n    },\n  ],\n};\n"}
+{"jsonform.html":"<jsonforms\n  [data]=\"data\"\n  [schema]=\"schema\"\n  [uischema]=\"uischema\"\n  [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n  CheckboxRendererComponent,\n  checkboxTester,\n  customLabelTester,\n  DatepickerRendererComponent,\n  DatePickerRendererTester,\n  enumControlTester,\n  EnumRendererComponent,\n  ibanControlTester,\n  IbanRendererComponent,\n  LabelRendererComponent,\n  nissControlTester,\n  NissRendererComponent,\n  phoneControllerTester,\n  PhoneRendererComponent,\n  RadioButtonRendererComponent,\n  radioButtonTester,\n  ReadonlyControlRendererComponent,\n  readonlyControlTester,\n} from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-jsonform',\n  templateUrl: './jsonform.html',\n  standalone: true,\n  imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n  renderers = [\n    ...angularMaterialRenderers,\n    {\n      tester: readonlyControlTester,\n      renderer: ReadonlyControlRendererComponent,\n    },\n    { tester: enumControlTester, renderer: EnumRendererComponent },\n    { tester: nissControlTester, renderer: NissRendererComponent },\n    { tester: ibanControlTester, renderer: IbanRendererComponent },\n    { tester: customLabelTester, renderer: LabelRendererComponent },\n    { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n    { tester: checkboxTester, renderer: CheckboxRendererComponent },\n    { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n    { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n  ];\n\n  uischema = uischema;\n  schema = schema;\n\n  data = {};\n}\n","schema.form.ts":"export const schema = {\n  type: 'object',\n  properties: {\n    exampleRadioEnum: {\n      type: 'string',\n      enum: ['One', 'Two', 'Three'],\n    },\n    name: {\n      type: 'string',\n      minLength: 1,\n    },\n    done: {\n      type: 'boolean',\n    },\n    due_date: {\n      type: 'string',\n      format: 'date',\n    },\n    recurrence: {\n      type: 'string',\n      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n    },\n    phone: {\n      type: 'string',\n      value: '',\n    },\n    niss: {\n      type: 'string',\n    },\n    iban: {\n      type: 'string',\n    },\n  },\n  required: ['name', 'due_date'],\n};\n","uischema.form.ts":"export const uischema = {\n  type: 'VerticalLayout',\n  elements: [\n    {\n      type: 'Control',\n      scope: '#/properties/exampleRadioEnum',\n      options: {\n        format: 'radio',\n      },\n    },\n    {\n      type: 'Control',\n      label: false,\n      scope: '#/properties/done',\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/name',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/phone',\n        },\n      ],\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/due_date',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/niss',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/iban',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/recurrence',\n        },\n      ],\n    },\n  ],\n};\n"}

package/assets/json/phone-input.json

@@ -1 +1 @@
-{"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"}
+{"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Phone number</mat-label>\n\n  <onemrva-mat-input-phone\n    [formControl]=\"form\"\n    (getCountry)=\"getCountry($event)\"\n    placeholder=\"+32 475 12 23 34\"\n  ></onemrva-mat-input-phone>\n\n  <mat-hint>hint</mat-hint>\n  @if (form.hasError('required')) {\n    <mat-error>\n      {{ 'input.phone.required' | translate }}\n    </mat-error>\n  } @else if (form.hasError('phoneNumber')) {\n    <mat-error>\n      {{ 'input.phone.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\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 {\n  OnemRvaReadonlyDirective,\n  phoneNumberValidator,\n} 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  readonly = input(false);\n\n  disabled = input(false);\n\n  form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}