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

package/assets/json/text-input.json

@@ -1 +1 @@
-{"demo-text-input.component.html":"<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","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';\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  ],\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":"<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"}