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

package/assets/json/multiselect.json

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

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

package/assets/json/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"}

package/assets/json/select.json

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

package/assets/json/selectable-box.json

@@ -1 +1 @@
-{"demo-selectable-box.component.html":"<mat-radio-group\n  name=\"unemploymentType\"\n  required\n  [formControl]=\"formControl\"\n  class=\"d-flex w100\"\n>\n  @for (reason of reasons; track $index) {\n    <onemrva-mat-selectable-box\n      [value]=\"reason\"\n      [disabled]=\"reason === 'Disabled'\"\n    >\n      @if (title) {\n        <ng-container title>{{ reason }}</ng-container>\n      }\n      @if (icon) {\n        <ng-container icon>{{ icons[$index] }}</ng-container>\n      }\n      @if (content) {\n        <ng-container>\n          This<br />\n          Is<br />\n          A<br />\n          Short<br />\n          Content\n        </ng-container>\n      }\n    </onemrva-mat-selectable-box>\n  }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-selectable-box',\n  templateUrl: './demo-selectable-box.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    MatSelectModule,\n    MatFormFieldModule,\n    MatSelectSearchModule,\n    MatIconModule,\n    MatRadioModule,\n    OnemrvaMatSelectableBoxModule,\n    OnemrvaMatStickerModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n  formControl = new FormControl<string>('');\n\n  @Input()\n  title = true;\n\n  @Input()\n  content = true;\n\n  @Input()\n  icon = true;\n\n  reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n  icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}
+{"demo-selectable-box.component.html":"<mat-radio-group\n  name=\"unemploymentType\"\n  required\n  [formControl]=\"formControl\"\n  class=\"d-flex w100\"\n>\n  @for (reason of reasons; track $index) {\n    <onemrva-mat-selectable-box\n      [readonly]=\"readonly()\"\n      [value]=\"reason\"\n      [disabled]=\"reason === 'Disabled' || disabled()\"\n    >\n      @if (title()) {\n        <ng-container title>{{ reason }}</ng-container>\n      }\n      @if (icon()) {\n        <ng-container icon>{{ icons[$index] }}</ng-container>\n      }\n      @if (content()) {\n        <ng-container>\n          This<br />\n          Is<br />\n          A<br />\n          Short<br />\n          Content\n        </ng-container>\n      }\n    </onemrva-mat-selectable-box>\n  }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-selectable-box',\n  templateUrl: './demo-selectable-box.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    MatSelectModule,\n    MatFormFieldModule,\n    MatSelectSearchModule,\n    MatIconModule,\n    MatRadioModule,\n    OnemrvaMatSelectableBoxModule,\n    OnemrvaMatStickerModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n  formControl = new FormControl<string>('');\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n  title = input<boolean>(true);\n  content = input<boolean>(true);\n  icon = input<boolean>(true);\n\n  reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n  icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}

package/assets/json/task-list.json

@@ -1 +1 @@
-{"demo-task-list.component.html":"<onemrva-mat-task-list>\n  <onemrva-mat-task color=\"\" icon=\"home\">\n    <onemrva-mat-task-title> Go home</onemrva-mat-task-title>\n    <onemrva-mat-task-content>\n      <p>Just call a cab...</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n\n  <onemrva-mat-task color=\"\" bubble=\"2\">\n    <onemrva-mat-task-title> Drink some water</onemrva-mat-task-title>\n    <onemrva-mat-task-content>\n      <p>Stay hydrated...</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n\n  <onemrva-mat-task\n    [disabled]=\"disabled\"\n    [form]=\"formControl\"\n    aria-disabled=\"true\"\n  >\n    <onemrva-mat-task-title aria-disabled=\"true\">\n      Don't do this</onemrva-mat-task-title\n    >\n    <onemrva-mat-task-content aria-disabled=\"true\">\n      <p>This is why it is disabled...</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n\n  <onemrva-mat-task color=\"error\" [form]=\"formControl1\">\n    <onemrva-mat-task-title> Did you fail this task ?</onemrva-mat-task-title>\n    <onemrva-mat-task-content>\n      <p>Dunno? It is red !</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {\n  OnemrvaMatTaskComponent,\n  OnemrvaMatTaskContentComponent,\n  OnemrvaMatTaskListComponent,\n  OnemrvaMatTaskListModule,\n  OnemrvaMatTaskTitleComponent,\n} from '@onemrvapublic/design-system/mat-task-list';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-task-list',\n  templateUrl: 'demo-task-list.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatTaskListModule,\n    MatButtonModule,\n    MatIconModule,\n    OnemrvaMatTaskComponent,\n    OnemrvaMatTaskTitleComponent,\n    OnemrvaMatTaskContentComponent,\n    OnemrvaMatTaskListComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n  checkbox: any;\n  disabled = true;\n  formControl: FormControl = new FormControl(false);\n  formControl1: FormControl = new FormControl(false);\n}\n"}
+{"demo-task-list.component.html":"<onemrva-mat-task-list [readonly]=\"readonly()\">\n  @for (task of tasks; track $index) {\n    @if (type() === 'checkbox') {\n      <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    } @else if (type() === 'bubble') {\n      <onemrva-mat-task\n        [bubble]=\"'' + $index\"\n        [disabled]=\"disabled()\"\n        [color]=\"color()\"\n      >\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    } @else if (type() === 'icon') {\n      <onemrva-mat-task\n        [icon]=\"'home'\"\n        [disabled]=\"disabled()\"\n        [color]=\"color()\"\n      >\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    }\n  }\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {\n  OnemrvaMatTaskComponent,\n  OnemrvaMatTaskContentComponent,\n  OnemrvaMatTaskListComponent,\n  OnemrvaMatTaskListModule,\n  OnemrvaMatTaskTitleComponent,\n} from '@onemrvapublic/design-system/mat-task-list';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  OnemRvaColorDirective,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-task-list',\n  templateUrl: 'demo-task-list.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatTaskListModule,\n    MatButtonModule,\n    MatIconModule,\n    OnemrvaMatTaskComponent,\n    OnemrvaMatTaskTitleComponent,\n    OnemrvaMatTaskContentComponent,\n    OnemrvaMatTaskListComponent,\n    OnemRvaColorDirective,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n  readonly = input(false);\n  disabled = input(false);\n\n  type = input<'checkbox' | 'bubble' | 'icon'>('checkbox');\n  color = input<'' | 'error'>('');\n\n  tasks = ['Go Home', 'Go to Work', 'Go to School', 'Go to Shopping'];\n  tasksDesc = ['Get a cab, ', 'Get a taxi, ', 'Get a bus, ', 'Get a ride. '];\n\n  form: FormControl = new FormControl(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/text-input.json

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

package/assets/json/textarea.json

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

package/assets/json/timepicker.json

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