Merge pull request #8 from taskbase/hide-keyboard-option

add option to hide keyboard

Author: bersling

projects/angular-keyboard/src/lib/keyboard-container/keyboard-container.component.html

@@ -7,5 +7,5 @@
 </div>
 <tb-keyboard class="keyboard"
              id="keyboard"
-             *ngIf="inputFocused != null">
+             *ngIf="!keyboardHidden && inputFocused != null">
 </tb-keyboard>

projects/angular-keyboard/src/lib/keyboard-container/keyboard-container.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {AngularKeyboardService} from '../angular-keyboard.service';
 import {isAncestor} from '../dom-utils';
 import {Subscription} from 'rxjs';
@@ -10,6 +10,8 @@ import {Subscription} from 'rxjs';
 })
 export class KeyboardContainerComponent implements OnInit, OnDestroy {
 
+  @Input() keyboardHidden = false;
+
   inputFocused: HTMLElement | null;
 
   constructor(

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

@@ -1,11 +1,15 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {KeyboardDemoComponent} from './keyboard-demo/keyboard-demo.component';
+import {KeyboardHiddenDemoComponent} from './keyboard-hidden-demo/keyboard-hidden-demo.component';
 
 
 const routes: Routes = [{
   path: '',
   component: KeyboardDemoComponent
+}, {
+  path: 'hidden',
+  component: KeyboardHiddenDemoComponent
 }];
 
 @NgModule({

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

@@ -5,9 +5,10 @@ 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';
+import {KeyboardHiddenDemoComponent} from './keyboard-hidden-demo/keyboard-hidden-demo.component';
 
 @NgModule({
-  declarations: [KeyboardDemoComponent],
+  declarations: [KeyboardDemoComponent, KeyboardHiddenDemoComponent],
   imports: [
     CommonModule,
     KeyboardDemoRoutingModule,

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

@@ -3,8 +3,7 @@ import {AngularKeyboardService} from '@taskbase/angular-keyboard';
 
 @Component({
   selector: 'app-keyboard-demo',
-  templateUrl: './keyboard-demo.component.html',
-  styleUrls: ['./keyboard-demo.component.scss']
+  templateUrl: './keyboard-demo.component.html'
 })
 export class KeyboardDemoComponent {
 

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

@@ -0,0 +1,15 @@
+<tb-keyboard-container [keyboardHidden]="true">
+  <app-nav></app-nav>
+  
+  <h1>Keyboard Hidden Demo</h1>
+  <div style="width: 400px; max-width: 100%; margin: 0 auto;">
+    <tb-input [suggestionMode]="true"
+              [initialText]="'Das ist ein Text mit Felern. Korigiere die Fehler!'"
+              (text)="onTextChange($event)">
+    </tb-input>
+  </div>
+  
+  <p>
+    You pressed <code>{{(input$ | async) || 'nothing yet'}}</code>.
+  </p>
+</tb-keyboard-container>

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

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {AngularKeyboardService} from '@taskbase/angular-keyboard';
+
+@Component({
+  selector: 'app-keyboard-hidden-demo',
+  templateUrl: './keyboard-hidden-demo.component.html'
+})
+export class KeyboardHiddenDemoComponent {
+
+  input$ = this.keyboardService.input$;
+
+  constructor(
+    private keyboardService: AngularKeyboardService
+  ) {
+  }
+
+  onTextChange(text: string) {
+    console.log(text);
+  }
+}

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

@@ -1,4 +1,5 @@
 <nav class="navbar">
   <button routerLink="">Home</button>
   <button routerLink="/keyboard">Keyboard</button>
+  <button routerLink="/keyboard/hidden">Keyboard Hidden</button>
 </nav>

src/app/nav/nav/nav.component.html

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-nav',
@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
   }