fix empty-field

Author: bersling

…input/fake-char/fake-char.component.scss …-keyboard/src/lib/fake-input/cursor.scssprojects/angular-keyboard/src/lib/fake-input/fake-char/fake-char.component.scss renamed to projects/angular-keyboard/src/lib/fake-input/cursor.scss projects/angular-keyboard/src/lib/fake-input/fake-char/fake-char.component.scss renamed to projects/angular-keyboard/src/lib/fake-input/cursor.scss

@@ -7,7 +7,7 @@ import {AngularKeyboardModuleConfig} from '../../angular-keyboard.module';
 @Component({
   selector: 'tb-fake-char',
   templateUrl: './fake-char.component.html',
-  styleUrls: ['./fake-char.component.scss'],
+  styleUrls: ['../cursor.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FakeCharComponent implements OnInit {

projects/angular-keyboard/src/lib/fake-input/fake-char/fake-char.component.ts

@@ -2,11 +2,18 @@
      [ngStyle]="config.styles?.inputField"
      #wrapper
      (click)="onClickInputField($event)">
-  <ng-container *ngFor="let char of chars; let idx = index">
-    <tb-fake-char #fakechar
+  <ng-container *ngIf="chars.length > 0; else emptyField">
+    <tb-fake-char *ngFor="let char of chars; let idx = index"
+                  #fakechar
                   (clickLeft)="onClickCharLeft(char, idx)"
                   (clickRight)="onClickCharRight(char, idx)"
                   [char]="char"
-                  [cursor]="getCursor(idx)"></tb-fake-char>
+                  [cursor]="getCursor(idx)">
+    </tb-fake-char>
   </ng-container>
+  <ng-template #emptyField>
+    <span *ngIf="isFocused"
+          class="cursor-left">
+    </span>
+  </ng-template>
 </div>

projects/angular-keyboard/src/lib/fake-input/fake-input.component.html

@@ -1,3 +1,5 @@
+$cursor-width: 1px;
+
 .wrapper {
   white-space: pre-wrap; // to preserve multiple sequential whitespaces
   cursor: text;

projects/angular-keyboard/src/lib/fake-input/fake-input.component.scss

@@ -34,7 +34,7 @@ interface Cursor {
 @Component({
   selector: 'tb-input',
   templateUrl: './fake-input.component.html',
-  styleUrls: ['./fake-input.component.scss']
+  styleUrls: ['./fake-input.component.scss', './cursor.scss']
 })
 export class FakeInputComponent implements OnInit, OnDestroy {
 
@@ -47,6 +47,8 @@ export class FakeInputComponent implements OnInit, OnDestroy {
   @ViewChild('wrapper', {static: true}) wrapper: ElementRef;
   @ViewChildren('fakechar', {read: ElementRef}) charElements: QueryList<ElementRef>;
 
+  isFocused = false;
+
   chars: Char[] = [];
 
   private cursorInternal: Cursor | null = null;
@@ -99,6 +101,9 @@ export class FakeInputComponent implements OnInit, OnDestroy {
       this.angularKeyboardService.inputFocused$.subscribe(next => {
         if (next !== this.wrapper.nativeElement) {
           this.cursor = null;
+          this.isFocused = false;
+        } else {
+          this.isFocused = true;
         }
       })
     );
@@ -466,19 +471,26 @@ export class FakeInputComponent implements OnInit, OnDestroy {
 
   onClickInputField(e) {
     this.focusInput();
-    const closest = this.findClosestHorizontalChar(e);
-    if (closest != null) {
-      if (closest.isLeft) {
-        this.cursor = {
-          index: closest.idx,
-          side: Side.LEFT
-        };
-      } else {
-        this.cursor = {
-          index: closest.idx,
-          side: Side.RIGHT
-        };
+    if (this.chars.length > 0) {
+      const closest = this.findClosestHorizontalChar(e);
+      if (closest != null) {
+        if (closest.isLeft) {
+          this.cursor = {
+            index: closest.idx,
+            side: Side.LEFT
+          };
+        } else {
+          this.cursor = {
+            index: closest.idx,
+            side: Side.RIGHT
+          };
+        }
       }
+    } else {
+      this.cursor = {
+        index: 0,
+        side: Side.LEFT
+      };
     }
   }
 

projects/angular-keyboard/src/lib/fake-input/fake-input.component.ts

@@ -2,5 +2,5 @@
  * Public API Surface of angular-keyboard
  */
 
-export * from './lib/angular-keyboard.service';
-export * from './lib/angular-keyboard.module';
+export {AngularKeyboardService} from './lib/angular-keyboard.service';
+export {AngularKeyboardModule, AngularKeyboardModuleConfig} from './lib/angular-keyboard.module';

projects/angular-keyboard/src/public-api.ts

@@ -1,11 +1,10 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
-import { KeyboardDemoRoutingModule } from './keyboard-demo-routing.module';
-import { KeyboardDemoComponent } from './keyboard-demo/keyboard-demo.component';
-import {AngularKeyboardModule} from '../../../projects/angular-keyboard/src/lib/angular-keyboard.module';
+import {KeyboardDemoRoutingModule} from './keyboard-demo-routing.module';
+import {KeyboardDemoComponent} from './keyboard-demo/keyboard-demo.component';
 import {NavModule} from '../nav/nav.module';
-
+import {AngularKeyboardModule} from '@taskbase/angular-keyboard';
 
 @NgModule({
   declarations: [KeyboardDemoComponent],
@@ -35,7 +34,8 @@ import {NavModule} from '../nav/nav.module';
           'text-decoration': 'line-through'
         }
       }
-    }),
+    })
   ]
 })
-export class KeyboardDemoModule { }
+export class KeyboardDemoModule {
+}

src/app/keyboard-demo/keyboard-demo.module.ts

@@ -6,7 +6,8 @@ <h1>Keyboard Demo</h1>
     Click into the input field to open the keyboard.
   </p>
   <div style="width: 500px; max-width: 100%; margin: 0 auto;">
-    <tb-input (text)="onTextChange($event)">
+    <tb-input (text)="onTextChange($event)"
+              [initialText]="''">
     </tb-input>
   </div>
 
@@ -15,7 +16,8 @@ <h1>Keyboard Demo</h1>
   </p>
   <div style="width: 400px; max-width: 100%; margin: 0 auto;">
     <tb-input [suggestionMode]="true"
-                    (text)="onTextChange($event)">
+              [initialText]="'Das ist ein Text mit Felern. Korigiere die Fehler!'"
+              (text)="onTextChange($event)">
     </tb-input>
   </div>
 

src/app/keyboard-demo/keyboard-demo/keyboard-demo.component.html

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {AngularKeyboardService} from '../../../../projects/angular-keyboard/src/lib/angular-keyboard.service';
+import {AngularKeyboardService} from '@taskbase/angular-keyboard';
 
 @Component({
   selector: 'app-keyboard-demo',

src/app/keyboard-demo/keyboard-demo/keyboard-demo.component.ts

@@ -19,16 +19,13 @@
       "dom"
     ],
     "paths": {
-      "angular-keyboard": [
+      "@taskbase/angular-keyboard": [
         "dist/angular-keyboard"
-      ],
-      "angular-keyboard/*": [
-        "dist/angular-keyboard/*"
       ]
     }
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
   }
-}
+}