Squashed commit of the following:

commit 417d6cf
Merge: d83c1cb f22680d
Author: David Enke <post@davidenke.de>
Date:   Thu Feb 22 00:36:05 2018 +0100

Author: davidenke

.angular-cli.json

@@ -20,6 +20,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "mat-keyboard-demo",
       "styles": [
+        "../../node_modules/reset-css/_reset.scss",
+        "../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
         "styles.scss"
       ],
       "scripts": [],

.gitignore

@@ -2,6 +2,7 @@
 build/
 dist/
 docs/
+src/core/.ng_pkg_build
 target/
 
 .classpath

.nvmrc

@@ -1 +1 @@
-8.9.1
+8.9.4

package-lock.json

@@ -4,20 +4,20 @@
   "description": "Onscreen virtual keyboard for Angular ≥ 5 (https://angular.io/) using Material 2 (https://material.angular.io/).",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ngx-material-keyboard/ngx-material-keyboard.git"
+    "url": "git+https://github.com/ngx-material-keyboard/core.git"
   },
   "author": "David Enke <post@davidenke.de>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ngx-material-keyboard/ngx-material-keyboard/issues"
+    "url": "https://github.com/ngx-material-keyboard/core/issues"
   },
-  "homepage": "https://github.com/ngx-material-keyboard/ngx-material-keyboard.git#readme",
+  "homepage": "https://github.com/ngx-material-keyboard/core",
   "scripts": {
     "ng": "ng",
     "start": "npm run start:demo",
     "start:demo": "ng serve --host 0.0.0.0 --disable-host-check",
     "build": "npm run build:core && npm run build:demo && npm run build:docs",
-    "build:core": "ng-packagr && cpx -p README.md dist/core",
+    "build:core": "ng-packagr -p ./src/core/package.json && cpx -p README.md dist/core",
     "build:demo": "ng build --prod --locale=de --progress=false --base-href=/demo/",
     "build:docs": "compodoc ./src/core -p ./tsconfig.json --silent --disableCoverage --disablePrivateOrInternalSupport --theme readthedocs --output ./dist/docs",
     "test": "ng test",
@@ -27,49 +27,39 @@
     "postinstall": "npm rebuild node-sass"
   },
   "dependencies": {
-    "@angular/animations": "5.0.2",
-    "@angular/cdk": "5.0.0-rc.1",
-    "@angular/common": "5.0.2",
-    "@angular/compiler": "5.0.2",
-    "@angular/core": "5.0.2",
-    "@angular/forms": "5.0.2",
-    "@angular/http": "5.0.2",
-    "@angular/material": "5.0.0-rc.1",
-    "@angular/platform-browser": "5.0.2",
-    "@angular/platform-browser-dynamic": "5.0.2",
-    "@angular/router": "5.0.2",
+    "@angular/animations": "5.2.5",
+    "@angular/cdk": "5.2.2",
+    "@angular/common": "5.2.5",
+    "@angular/compiler": "5.2.5",
+    "@angular/core": "5.2.5",
+    "@angular/forms": "5.2.5",
+    "@angular/http": "5.2.5",
+    "@angular/material": "5.2.2",
+    "@angular/platform-browser": "5.2.5",
+    "@angular/platform-browser-dynamic": "5.2.5",
+    "@angular/router": "5.2.5",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.1",
+    "core-js": "2.5.3",
     "hammerjs": "2.0.8",
-    "reset.scss": "1.0.0",
-    "rxjs": "5.5.2",
+    "reset-css": "2.2.1",
+    "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.3",
-    "@angular/compiler-cli": "5.0.2",
-    "@angular/language-service": "5.0.2",
-    "@angular/tsc-wrapped": "4.4.6",
-    "@compodoc/compodoc": "1.0.4",
-    "@types/jasmine": "2.8.2",
-    "@types/node": "8.0.53",
-    "codelyzer": "4.0.1",
+    "@angular/cli": "1.7.0",
+    "@angular/compiler-cli": "5.2.5",
+    "@angular/language-service": "5.2.5",
+    "@compodoc/compodoc": "1.0.7",
+    "@types/jasmine": "2.8.6",
+    "@types/node": "9.4.6",
+    "codelyzer": "4.1.0",
     "cpx": "1.5.0",
-    "jasmine-core": "2.8.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
-    "karma-jasmine": "1.1.0",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "ng-packagr": "2.0.0-rc.2",
-    "protractor": "5.2.0",
-    "rxjs-tslint-rules": "3.1.1",
+    "ng-packagr": "2.1.0",
+    "rxjs-tslint-rules": "3.14.0",
     "sass-lint": "1.12.1",
-    "ts-node": "3.3.0",
-    "tslint": "5.8.0",
-    "typescript": "2.6.1"
+    "ts-node": "5.0.0",
+    "tslint": "5.9.1",
+    "typescript": "2.6.2"
   }
 }

package.json

@@ -1,7 +1,8 @@
 {
+  "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@ngx-material-keyboard/core",
   "version": "0.0.12-SNAPSHOT",
-  "description": "Onscreen virtual keyboard for Angular ≥ 5 (https://angular.io/) using Material 2 (https://material.angular.io/).",
+  "description": "Onscreen virtual keyboard for Angular ≥ 5 (https://angular.io/) using Material 5 (https://material.angular.io/).",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ngx-material-keyboard/core.git"
@@ -11,16 +12,23 @@
   "bugs": {
     "url": "https://github.com/ngx-material-keyboard/core/issues"
   },
-  "homepage": "https://github.com/ngx-material-keyboard/core#readme",
+  "homepage": "https://github.com/ngx-material-keyboard/core",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "@angular/animations": "^5.0.0",
-    "@angular/cdk": "5.0.0-rc.1",
+    "@angular/cdk": "5.2.2",
     "@angular/common": "^5.0.0",
     "@angular/core": "^5.0.0",
-    "@angular/material": "5.0.0-rc.1",
+    "@angular/forms": "^5.0.0",
+    "@angular/material": "5.2.2",
     "rxjs": "^5.5.2"
+  },
+  "ngPackage": {
+    "dest": "../../dist/core",
+    "lib": {
+      "entryFile": "src/public_api.ts"
+    }
   }
 }

src/core/package.json

@@ -4,7 +4,7 @@
         [class.mat-keyboard-key-active]="active$ | async"
         [class.mat-keyboard-key-pressed]="pressed$ | async"
         [ngClass]="cssClass"
-        (click)="onClick()"
+        (click)="onClick($event)"
 >
   <mat-icon *ngIf="hasIcon">{{ icon }}</mat-icon>
   <ng-container *ngIf="!hasIcon">{{ key }}</ng-container>

src/core/src/components/keyboard-key/keyboard-key.component.html

@@ -1,11 +1,13 @@
 import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
-import { MatInput } from '@angular/material/input';
+import { FormControl } from '@angular/forms';
 
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { MAT_KEYBOARD_DEADKEYS } from '../../configs/keyboard-deadkey.config';
 import { MAT_KEYBOARD_ICONS } from '../../configs/keyboard-icons.config';
 import { KeyboardClassKey } from '../../enums/keyboard-class-key.enum';
+import { IKeyboardDeadkeys } from '../../interfaces/keyboard-deadkeys.interface';
+import { IKeyboardIcons } from '../../interfaces/keyboard-icons.interface';
 
 export const VALUE_NEWLINE = '\n\r';
 export const VALUE_SPACE = ' ';
@@ -53,19 +55,34 @@ export class MatKeyboardKeyComponent implements OnInit {
   input?: ElementRef;
 
   @Input()
-  control?: MatInput;
+  control?: FormControl;
 
   @Output()
-  enterClick = new EventEmitter<void>();
+  genericClick = new EventEmitter<MouseEvent>();
 
   @Output()
-  capsClick = new EventEmitter<void>();
+  enterClick = new EventEmitter<MouseEvent>();
 
   @Output()
-  altClick = new EventEmitter<void>();
+  bkspClick = new EventEmitter<MouseEvent>();
 
   @Output()
-  shiftClick = new EventEmitter<void>();
+  capsClick = new EventEmitter<MouseEvent>();
+
+  @Output()
+  altClick = new EventEmitter<MouseEvent>();
+
+  @Output()
+  shiftClick = new EventEmitter<MouseEvent>();
+
+  @Output()
+  spaceClick = new EventEmitter<MouseEvent>();
+
+  @Output()
+  tabClick = new EventEmitter<MouseEvent>();
+
+  @Output()
+  keyClick = new EventEmitter<MouseEvent>();
 
   get lowerKey(): string {
     return `${this.key}`.toLowerCase();
@@ -118,15 +135,15 @@ export class MatKeyboardKeyComponent implements OnInit {
 
   set inputValue(inputValue: string) {
     if (this.control) {
-      this.control.value = inputValue;
-    } else if (this.input) {
+      this.control.setValue(inputValue);
+    } else if (this.input && this.input.nativeElement) {
       this.input.nativeElement.value = inputValue;
     }
   }
 
   // Inject dependencies
-  constructor(@Inject(MAT_KEYBOARD_DEADKEYS) private _deadkeys,
-              @Inject(MAT_KEYBOARD_ICONS) private _icons) {}
+  constructor(@Inject(MAT_KEYBOARD_DEADKEYS) private _deadkeys: IKeyboardDeadkeys,
+              @Inject(MAT_KEYBOARD_ICONS) private _icons: IKeyboardIcons) {}
 
   ngOnInit() {
     // read the deadkeys
@@ -136,11 +153,14 @@ export class MatKeyboardKeyComponent implements OnInit {
     this._iconKeys = Object.keys(this._icons);
   }
 
-  onClick() {
+  onClick(event: MouseEvent) {
     // Trigger a global key event
-    // TODO: determine whether an output should bubble the pressed key similar to the keybboard action or not
+    // TODO: investigate
     this._triggerKeyEvent();
 
+    // Trigger generic click event
+    this.genericClick.emit(event);
+
     // Manipulate the focused input / textarea value
     const value = this.inputValue;
     const caret = this.input ? this._getCursorPosition() : 0;
@@ -152,44 +172,48 @@ export class MatKeyboardKeyComponent implements OnInit {
       case KeyboardClassKey.Alt:
       case KeyboardClassKey.AltGr:
       case KeyboardClassKey.AltLk:
-        this.altClick.next();
+        this.altClick.emit(event);
         break;
 
       case KeyboardClassKey.Bksp:
         this.inputValue = [value.slice(0, caret - 1), value.slice(caret)].join('');
         this._setCursorPosition(caret - 1);
+        this.bkspClick.emit(event);
         break;
 
       case KeyboardClassKey.Caps:
-        this.capsClick.next();
+        this.capsClick.emit(event);
         break;
 
       case KeyboardClassKey.Enter:
         if (this._isTextarea()) {
           char = VALUE_NEWLINE;
         } else {
-          this.enterClick.next();
+          this.enterClick.emit(event);
           // TODO: trigger submit / onSubmit / ngSubmit properly (for the time being this has to be handled by the user himself)
           // console.log(this.control.ngControl.control.root)
           // this.input.nativeElement.form.submit();
         }
         break;
 
       case KeyboardClassKey.Shift:
-        this.shiftClick.next();
+        this.shiftClick.emit(event);
         break;
 
       case KeyboardClassKey.Space:
         char = VALUE_SPACE;
+        this.spaceClick.emit(event);
         break;
 
       case KeyboardClassKey.Tab:
         char = VALUE_TAB;
+        this.tabClick.emit(event);
         break;
 
       default:
         // the key is not mapped or a string
         char = `${this.key}`;
+        this.keyClick.emit(event);
         break;
     }
 
@@ -229,7 +253,7 @@ export class MatKeyboardKeyComponent implements OnInit {
     if ('selectionStart' in this.input.nativeElement) {
       // Standard-compliant browsers
       return this.input.nativeElement.selectionStart;
-    } else if (window.document['selection']) {
+    } else if ('selection' in window.document) {
       // IE
       this.input.nativeElement.focus();
       const sel = window.document['selection'].createRange();