feat: add uiText[autoResize] param

Author: navix

projects/ui/src/lib/ui-text/demo/ui-text-demo.component.html

@@ -10,4 +10,11 @@ <h2>Input</h2>
   <h2>Textarea</h2>
   <textarea uiText [(ngModel)]="textareaModel" rows="6"></textarea>
   {{ textareaModel }}
+
+  <h3>With auto-resize</h3>
+  <textarea uiText
+            [(ngModel)]="textareaModel"
+            [autoResize]="true"
+            rows="2"></textarea>
+  {{ textareaModel }}
 </div>

projects/ui/src/lib/ui-text/ui-text/ui-text.component.ts

@@ -2,12 +2,15 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   HostBinding,
+  HostListener,
   Input,
   OnInit,
   Optional,
 } from '@angular/core';
-import { KitFormFieldService } from '@ngx-kit/core';
+import { NgControl } from '@angular/forms';
+import { KitFormFieldService, KitPlatformService } from '@ngx-kit/core';
 
 @Component({
   // tslint:disable-next-line
@@ -19,20 +22,54 @@ import { KitFormFieldService } from '@ngx-kit/core';
 export class UiTextComponent implements OnInit {
   @Input() uiText: void;
 
+  @Input() autoResize = false;
+
   @HostBinding('class.-has-errors') hasErrorsClass = false;
 
   constructor(
     @Optional() private formFieldService: KitFormFieldService,
+    @Optional() private ngControl: NgControl,
     private cdr: ChangeDetectorRef,
+    private el: ElementRef,
+    private platform: KitPlatformService,
   ) {
   }
 
   ngOnInit() {
+    // Control error state
     if (this.formFieldService) {
-      this.formFieldService.control.errorStateChanges.subscribe(errors => {
-        this.hasErrorsClass = !errors || errors.length > 0;
-        this.cdr.detectChanges();
-      });
+      this.formFieldService.control
+        .errorStateChanges
+        .subscribe(errors => {
+          this.hasErrorsClass = !errors || errors.length > 0;
+          this.cdr.detectChanges();
+        });
+    }
+    // Update size on model change
+    if (this.ngControl) {
+      this.ngControl
+        .valueChanges
+        .subscribe(() => {
+          this.resize();
+        });
+    }
+  }
+
+  @HostListener('keyup') keydownHandler() {
+    this.resize();
+  }
+
+  @HostListener('input') inputHandler() {
+    this.resize();
+  }
+
+  private resize() {
+    if (this.autoResize && this.platform.isBrowser()) {
+      const el = this.el.nativeElement;
+      // clean up hack
+      el.style.height = 'auto';
+      // set height
+      el.style.height = el.scrollHeight + el.offsetHeight - el.clientHeight + 'px';
     }
   }
 }