feat: DefaultEntryInputComponent#autofocus

Author: felixroos

packages/ui/src/lib/form/default-input/default-input.component.html

@@ -1,12 +1,12 @@
 <div [ngSwitch]="field.view" *ngIf="group" [formGroup]="group">
-  <input [id]="field.id" *ngSwitchCase="'string'" type="text" [formControl]="control" [placeholder]="field.getPlaceholder()"
-    class="input">
+  <input [id]="field.id" *ngSwitchCase="'string'" type="text" [formControl]="control"
+    [placeholder]="field.getPlaceholder()" class="input" [ecFocus]="focusEvent" />
 
-  <textarea [id]="field.id" *ngSwitchCase="'textarea'" type="text" [formControl]="control" [placeholder]="field.getPlaceholder()"
-    class="input"></textarea>
+  <textarea [id]="field.id" *ngSwitchCase="'textarea'" type="text" [formControl]="control"
+    [placeholder]="field.getPlaceholder()" class="input" [ecFocus]="focusEvent"></textarea>
 
-  <input [id]="field.id" *ngSwitchCase="'number'" type="number" [formControl]="control" [placeholder]="field.getPlaceholder()"
-    class="input">
+  <input [id]="field.id" *ngSwitchCase="'number'" type="number" [formControl]="control"
+    [placeholder]="field.getPlaceholder()" class="input" [ecFocus]="focusEvent">
 
   <div class="ec-input_color" *ngSwitchCase="'color'">
     <label [style.backgroundColor]="control.value">
@@ -19,20 +19,22 @@
     {{field.placeholder}}
   </label>
 
-  <input [id]="field.id" *ngSwitchCase="'email'" type="email" [formControl]="control" [placeholder]="field.getPlaceholder()"
-    class="input">
+  <input [id]="field.id" *ngSwitchCase="'email'" type="email" [formControl]="control"
+    [placeholder]="field.getPlaceholder()" class="input" [ecFocus]="focusEvent">
 
   <input [id]="field.id" *ngSwitchCase="'url'" type="url" [formControl]="control" [placeholder]="field.getPlaceholder()"
-    class="input">
+    class="input" [ecFocus]="focusEvent">
 
-  <ec-toggle [id]="field.id" *ngSwitchCase="'toggle'" [formControl]="control" [placeholder]="field.getPlaceholder()"></ec-toggle>
+  <ec-toggle [id]="field.id" *ngSwitchCase="'toggle'" [formControl]="control" [placeholder]="field.getPlaceholder()">
+  </ec-toggle>
 
   <ec-datetime *ngSwitchCase="'date'" [formControl]="control" [placeholder]="field.getPlaceholder()"></ec-datetime>
 
-  <select [id]="field.id" [formControl]="control" *ngSwitchCase="'select'" (change)="control.patchValue($event.target.value)"
-    class="input">
+  <select [id]="field.id" [formControl]="control" *ngSwitchCase="'select'" [ecFocus]="focusEvent"
+    (change)="control.patchValue($event.target.value)" class="input">
     <option></option>
-    <option *ngFor="let option of field.values" [selected]="control.value===(option.value?option.value:option)" [value]="option.value?option.value:option">
+    <option *ngFor="let option of field.values" [selected]="control.value===(option.value?option.value:option)"
+      [value]="option.value?option.value:option">
       {{option.label?option.label:option}}
     </option>
   </select>

packages/ui/src/lib/form/default-input/default-input.component.ts

@@ -1,12 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, AfterViewInit, OnChanges } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Field, Item } from '@ec.components/core';
+import { Focus } from '../../utility/focus/focus.interface';
 
 /** This component holds the templates for all basic field types. */
 @Component({
   templateUrl: './default-input.component.html',
 })
-export class DefaultInputComponent {
+export class DefaultInputComponent implements AfterViewInit, Focus {
   /** The field for which the input is meant. */
   public field: Field;
   /** The item that is targeted by the input */
@@ -15,4 +16,18 @@ export class DefaultInputComponent {
   public group: FormGroup;
   /** The form control that is used */
   public control: FormControl;
+  /** Emitter to focus the input field */
+  focusEvent: EventEmitter<boolean> = new EventEmitter();
+
+  ngAfterViewInit() {
+    if (this.field && this.field.autofocus) {
+      this.focus();
+    }
+  }
+
+  focus() {
+    setTimeout(() => {
+      this.focusEvent.emit(true);
+    }, 100);
+  }
 }

packages/ui/src/lib/form/form.module.ts

@@ -15,6 +15,7 @@ import { SymbolModule } from '../symbol/symbol.module';
 import { DefaultInputComponent } from './default-input/default-input.component';
 import { DefaultOutputComponent } from './default-output/default-output.component';
 import { CalendarModule } from '@ec.components/calendar';
+import { UtilityModule } from '../utility/utility.module';
 
 export const formModuleConfig = {
   entryComponents: [
@@ -38,9 +39,11 @@ export const formModuleConfig = {
     LoaderModule,
     IconModule,
     SymbolModule,
-    CalendarModule
+    CalendarModule,
+    UtilityModule
   ],
   exports: [
+    UtilityModule,
     ReactiveFormsModule,
     IoModule,
     FormComponent,