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

package/3rdpartylicenses.txt

@@ -223,6 +223,110 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
+@babel/runtime
+MIT
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+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.
+
+
+@jsonforms/angular
+MIT
+The MIT License
+
+Copyright (c) 2019 EclipseSource Munich
+https://github.com/eclipsesource/jsonforms
+
+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.
+
+
+@jsonforms/angular-material
+MIT
+The MIT License
+
+Copyright (c) 2019 EclipseSource Munich
+https://github.com/eclipsesource/jsonforms
+
+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.
+
+
+@jsonforms/core
+MIT
+The MIT License
+
+Copyright (c) 2019 EclipseSource Munich
+https://github.com/eclipsesource/jsonforms
+
+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.
+
+
 @ngrx/component-store
 MIT
 The MIT License (MIT)
@@ -268,6 +372,165 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 @onemrvapublic/design-system-demos
 
+ajv
+MIT
+The MIT License (MIT)
+
+Copyright (c) 2015-2021 Evgeny Poberezkin
+
+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.
+
+
+
+ajv-formats
+MIT
+MIT License
+
+Copyright (c) 2020 Evgeny Poberezkin
+
+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.
+
+
+dayjs
+MIT
+MIT License
+
+Copyright (c) 2018-present, iamkun
+
+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.
+
+
+fast-deep-equal
+MIT
+MIT License
+
+Copyright (c) 2017 Evgeny Poberezkin
+
+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.
+
+
+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
+All rights reserved.
+
+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
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * The names of any contributors may not be used to endorse or promote
+      products derived from this software without specific prior written
+      permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS AND CONTRIBUTORS BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+                                  *   *   *
+
+The complete list of contributors can be found at:
+- https://github.com/garycourt/uri-js/graphs/contributors
+
+hammerjs
+MIT
+The MIT License (MIT)
+
+Copyright (C) 2011-2014 by Jorik Tangelder (Eight Media)
+
+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.
+
+
 highlight.js
 BSD-3-Clause
 BSD 3-Clause License
@@ -305,6 +568,31 @@ ibantools
 MIT or MPL-2.0
 MIT OR MPL-2.0
 
+json-schema-traverse
+MIT
+MIT License
+
+Copyright (c) 2017 Evgeny Poberezkin
+
+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.
+
+
 libphonenumber-js
 MIT
 (The MIT License)
@@ -332,6 +620,57 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 libphonenumber-js/min
 
+lodash
+MIT
+Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+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.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+
 luxon
 MIT
 Copyright 2019 JS Foundation and other contributors

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","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","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/i18n/de.json

@@ -132,6 +132,10 @@
     "equilibriumThermodynamics": "Equilibrium thermodynamics",
     "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
   },
+  "input.field": {
+    "required": "Feld erforderlich",
+    "invalid": "Ungültiges Feld"
+  },
   "input.bank": {
     "length": "Falsche Anzahl von Ziffern für dieses Land",
     "checksum": "Die Bankkontonummer ist ungültig",

package/assets/i18n/en.json

@@ -132,6 +132,10 @@
     "equilibriumThermodynamics": "Equilibrium thermodynamics",
     "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
   },
+  "input.field": {
+    "required": "Field required",
+    "invalid": "Field invalid"
+  },
   "input.bank": {
     "length": "Incorrect number of digits for this country",
     "checksum": "Bank account number invalid",

package/assets/i18n/fr.json

@@ -132,7 +132,10 @@
     "equilibriumThermodynamics": "Equilibrium thermodynamics",
     "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
   },
-
+  "input.field": {
+    "required": "Champs requis",
+    "invalid": "Champs invalide"
+  },
   "input.bank": {
     "length": "Nombre de chiffres incorrect pour ce pays",
     "checksum": "Le numéro de compte bancaire est invalide",

package/assets/i18n/nl.json

@@ -131,6 +131,10 @@
     "equilibriumThermodynamics": "Equilibrium thermodynamics",
     "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
   },
+  "input.field": {
+    "required": "Veld vereist",
+    "invalid": "Ongeldig veld"
+  },
   "input.bank": {
     "length": "Onjuist aantal cijfers voor dit land",
     "checksum": "Bankrekeningnummer is ongeldig",

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 } 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"}
+{"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"}

package/assets/json/autocomplete.json

@@ -1 +1 @@
-{"demo-autocomplete.component.html":"<mat-form-field>\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 } from '@angular/core';\nimport { OnemrvaMatAvatarModule } 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  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAutocompleteComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  myControl = new FormControl('');\n\n  options: Record<string, string>[] = [\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  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 {\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"}

package/assets/json/bank-input.json

@@ -1 +1 @@
-{"demo-bank-input.component.html":"<mat-form-field>\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, 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 { OnemrvaMatInputIbanComponent } 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  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBankInputComponent extends DemoComponentBase {\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('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"}

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 { 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"}
+{"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"}

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 { 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  @Input()\n  type = 'outlined';\n\n  @Input()\n  icon = '';\n\n  @Input()\n  size = '';\n\n  @Input()\n  disabled = false;\n}\n"}
+{"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"}

package/assets/json/chips-input.json

@@ -1 +1 @@
-{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    <mat-chip-row\n      *ngFor=\"let fruit of fruits\"\n      [color]=\"color\"\n      [disabled]=\"disabled\"\n      (removed)=\"removeFruit(fruit)\"\n      [removable]=\"!disabled\"\n    >\n      {{ fruit.name }}\n      <button\n        matChipRemove\n        [attr.aria-label]=\"'remove ' + fruit.name\"\n        *ngIf=\"!disabled\"\n      >\n        <mat-icon>cancel</mat-icon>\n      </button>\n    </mat-chip-row>\n    <input\n      placeholder=\"Add fruit...\"\n      [matChipInputFor]=\"chipGrid\"\n      [disabled]=\"disabled\"\n      (keydown.enter)=\"addFruit($event)\"\n      (blur)=\"addFruit($event)\"\n    />\n  </mat-chip-grid>\n</mat-form-field>\n","demo-chips-input.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { 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';\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  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  disabled = false;\n\n  fruits: Fruit[] = [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Orange' }];\n\n  addFruit(event: any): void {\n    const value = (event.target.value || '').trim();\n    if (value) {\n      this.fruits.push({ name: value });\n      event.target.value = '';\n    }\n  }\n\n  removeFruit(fruit: Fruit): void {\n    const index = this.fruits.indexOf(fruit);\n    if (index >= 0) {\n      this.fruits.splice(index, 1);\n    }\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        (removed)=\"removeFruit(fruit)\"\n        [removable]=\"!disabled\"\n      >\n        {{ fruit.name }}\n        @if (!disabled() && !readonly()) {\n          <button matChipRemove [attr.aria-label]=\"'remove ' + fruit.name\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        }\n      </mat-chip-row>\n    }\n\n    @if (!disabled()) {\n      <input\n        placeholder=\"Add fruit...\"\n        [matChipInputFor]=\"chipGrid\"\n        [disabled]=\"disabled()\"\n        (keydown.enter)=\"addFruit($event)\"\n        (blur)=\"addFruit($event)\"\n      />\n    }\n  </mat-chip-grid>\n</mat-form-field>\n","demo-chips-input.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { 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';\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  ],\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  fruits: Fruit[] = [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Orange' }];\n\n  addFruit(event: any): void {\n    const value = (event.target.value || '').trim();\n    if (value) {\n      this.fruits.push({ name: value });\n      event.target.value = '';\n    }\n  }\n\n  removeFruit(fruit: Fruit): void {\n    const index = this.fruits.indexOf(fruit);\n    if (index >= 0) {\n      this.fruits.splice(index, 1);\n    }\n  }\n}\n"}

package/assets/json/choice-chips.json

@@ -1 +1 @@
-{"demo-choice-chips.component.html":"<onemrva-mat-choice-chip formControlName=\"choice\"\n  >Choose this</onemrva-mat-choice-chip\n>\n","demo-choice-chips.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { OnemrvaMatChoiceChipComponent } from '@onemrvapublic/design-system';\nimport { FormControl } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [CommonModule, MatCheckboxModule, OnemrvaMatChoiceChipComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  form = new FormControl();\n}\n"}
+{"demo-choice-chips.component.html":"<onemrva-mat-choice-chip [formControl]=\"form\" [readonly]=\"readonly()\"\n  >Choose this</onemrva-mat-choice-chip\n>\n","demo-choice-chips.component.ts":"import { Component, effect, input, ViewEncapsulation } 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 { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatCheckboxModule,\n    OnemrvaMatChoiceChipComponent,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  form = new FormControl();\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(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/country-input.json

@@ -1 +1 @@
-{"demo-country-input.component.html":"<onemrva-mat-input-country\n  [readonly]=\"readonly\"\n  [country]=\"form\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n></onemrva-mat-input-country>\n","demo-country-input.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\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"}
+{"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"}

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  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"}
+{"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"}

package/assets/json/daterangepicker.json

@@ -1 +1 @@
-{"demo-daterangepicker.component.html":"<mat-form-field>\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 { Component, OnInit, ViewEncapsulation } 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 { onemrvaDateLuxonProvider } 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  ],\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  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    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      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"}

package/assets/json/jsonform.json

@@ -0,0 +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"}

package/assets/json/multiselect.json

@@ -1 +1 @@
-{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle\"\n    [showFilter]=\"showFilter\"\n  >\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { 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"}
+{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle()\"\n    [showFilter]=\"showFilter()\"\n  >\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { 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  disabled = input(false);\n  readonly = input(false);\n  selectionToggle = input(true);\n  showFilter = input(true);\n\n  form: FormControl = new FormControl([], Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly() && !this.form.getRawValue()) {\n        this.form.setValue(['Pepperoni', 'Eggplant']);\n      }\n    });\n\n    // filtering the list\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return this.form;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

package/assets/json/radio.json

@@ -1 +1 @@
-{"demo-radio.component.html":"<mat-radio-group>\n  <mat-radio-button value=\"YES\">Yes</mat-radio-button>\n  <mat-radio-button value=\"NO\" [checked]=\"true\">No</mat-radio-button>\n</mat-radio-group>\n<mat-radio-group disabled>\n  <mat-radio-button value=\"YES\" [checked]=\"true\"\n    >Yes (checked & disabled)</mat-radio-button\n  >\n  <mat-radio-button value=\"NO\">No (disabled)</mat-radio-button>\n</mat-radio-group>\n","demo-radio.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-radio',\n  templateUrl: './demo-radio.component.html',\n  standalone: true,\n  imports: [CommonModule, MatRadioModule],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRadioComponent extends DemoComponentBase {}\n"}
+{"demo-radio.component.html":"<mat-radio-group [disabled]=\"disabled()\" [readonly]=\"readonly()\">\n  <mat-radio-button value=\"YES\">Yes</mat-radio-button>\n  <mat-radio-button value=\"NO\" [checked]=\"true\">No</mat-radio-button>\n</mat-radio-group>\n","demo-radio.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-radio',\n  templateUrl: './demo-radio.component.html',\n  standalone: true,\n  imports: [CommonModule, MatRadioModule, OnemRvaReadonlyDirective],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRadioComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n}\n"}