feat: adding rows count to textarea (#785)

* feat: adding rows count to textarea

* feat: adding UT

* feat: Removing log

* feat: fixing textarea index

* feat: renaming variable

* feat: fix test

* feat: fixing default rows

* feat: adding minHeight feature

* feat: textarea minHeight refactoring

* feat: fixing label in UT

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/textarea/textarea.component.scss

@@ -6,6 +6,7 @@
       display: block;
       height: 100%;
       width: 100%;
+      min-height: inherit;
     }
 
     &.mat-focused {
@@ -21,18 +22,21 @@
     .mat-form-field-infix {
       height: inherit;
       width: inherit;
+      min-height: inherit;
       border: unset;
       padding: 0 0 0 8px;
     }
 
     .mat-form-field-flex {
       height: inherit;
       width: inherit;
+      min-height: inherit;
     }
 
     .mat-form-field-wrapper {
       height: inherit;
       width: inherit;
+      min-height: inherit;
       padding-bottom: 0;
 
       .mat-form-field-label {
@@ -45,6 +49,7 @@
     .mat-input-element {
       height: inherit;
       width: inherit;
+      min-height: inherit;
       margin: 0;
 
       &:after {

projects/components/src/textarea/textarea.component.test.ts

@@ -45,4 +45,17 @@ describe('Textarea Component', () => {
 
     expect(disabled).toBe('true');
   });
+
+  test('should match the rows with the number of rows in the textarea', () => {
+    const rows = 10;
+
+    spectator = createHost(`<ht-textarea [placeholder]="placeholder" [rows]="rows"></ht-textarea>`, {
+      hostProps: {
+        placeholder: 'TEST',
+        rows: rows
+      }
+    });
+
+    expect((spectator.query('.textarea') as HTMLTextAreaElement).rows).toBe(rows);
+  });
 });

projects/components/src/textarea/textarea.component.ts

@@ -10,6 +10,7 @@ import { LoggerService } from '@hypertrace/common';
       <textarea
         class="textarea"
         matInput
+        [rows]="this.rows"
         [disabled]="this.disabled"
         [placeholder]="this.placeholder"
         [ngModel]="this.value"
@@ -29,6 +30,9 @@ export class TextareaComponent implements OnInit {
   @Input()
   public disabled: boolean | undefined;
 
+  @Input()
+  public rows: number = 2;
+
   @Output()
   public readonly valueChange: EventEmitter<string> = new EventEmitter();