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

package/assets/json/select.json

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