make it monorepo capable

Author: bersling

.gitignore

@@ -10,6 +10,10 @@
 # dependencies
 /node_modules
 
+# firebase
+.firebaserc
+.firebase
+
 # profiling files
 chrome-profiler-events*.json
 speed-measure-plugin*.json

projects/angular-keyboard/README.md

@@ -2,9 +2,37 @@
 
 ## Installation
 
-1. npm install @taskbase/angular-keyboard
-2. `import {AngularKeyboard} from '@taskbase/angular-keyboard'` and add to imports of your main AppModule.
-3. Wrap the whole app content in `app.component.html` with `<tb-keyboard-container>...</tb-keyboard-container>`
+1. npm install `@taskbase/angular-keyboard`
+2. Add `import {AngularKeyboard} from '@taskbase/angular-keyboard'` to your AppModule
+3. Configure the angular-keyboard in the module imports, something like this:
+```
+    AngularKeyboardModule.forRoot({
+      styles: {
+        inputField: {
+          'font-family': '"Palatino Linotype","Book Antiqua",Palatino,serif',
+          'font-size': '120%',
+          display: 'block',
+          'line-height': '1.61',
+          padding: '20px',
+          'border-radius': '5px',
+          background: '#f5f5f5',
+          'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.05)',
+          'text-align': 'left'
+        },
+        addedChar: {
+          'font-weight': 'bold',
+          color: 'blue'
+        },
+        removedChar: {
+          color: 'lightblue',
+          'text-decoration': 'line-through'
+        }
+      }
+    }),
+```
+4. Wrap the whole app content in `app.component.html` with `<tb-keyboard-container>...</tb-keyboard-container>`
+
+Note: If you only need the feature on some specific pages, you can also only load it there. Just make sure that the whole page content is wrapped.
 
 
 ## Demo

src/app/app-routing.module.ts

@@ -1,11 +1,20 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
 
-
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: 'keyboard',
+    loadChildren: () => import('./keyboard-demo/keyboard-demo.module').then(mod => mod.KeyboardDemoModule)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule)
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -1,24 +1 @@
-<tb-keyboard-container>
-  <h1>Keyboard Demo</h1>
-  <p>
-    Click into the input field to open the keyboard.
-  </p>
-  <div style="width: 500px; max-width: 100%; margin: 0 auto;">
-    <app-fake-input (text)="onTextChange($event)">
-    </app-fake-input>
-  </div>
-  
-  <p>
-    Here's a second input field with suggestion mode turned on.
-  </p>
-  <div style="width: 400px; max-width: 100%; margin: 0 auto;">
-    <app-fake-input [suggestionMode]="true"
-                    (text)="onTextChange($event)">
-    </app-fake-input>
-  </div>
-  
-  <p>
-    You pressed <code>{{(input$ | async) || 'nothing yet'}}</code>.
-  </p>
-</tb-keyboard-container>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,5 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
-import {AngularKeyboardService} from '../../projects/angular-keyboard/src/lib/angular-keyboard.service';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -8,15 +7,5 @@ import {AngularKeyboardService} from '../../projects/angular-keyboard/src/lib/an
 })
 export class AppComponent {
 
-  input$ = this.keyboardService.input$;
-
-  constructor(
-    private keyboardService: AngularKeyboardService
-  ) {
-  }
-
-  onTextChange(text: string) {
-    console.log(text);
-  }
 
 }

src/app/app.module.ts

@@ -3,7 +3,6 @@ import {NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import {AngularKeyboardModule} from '../../projects/angular-keyboard/src/lib/angular-keyboard.module';
 import {FormsModule} from '@angular/forms';
 
 @NgModule({
@@ -13,29 +12,6 @@ import {FormsModule} from '@angular/forms';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    AngularKeyboardModule.forRoot({
-      styles: {
-        inputField: {
-          'font-family': '"Palatino Linotype","Book Antiqua",Palatino,serif',
-          'font-size': '120%',
-          display: 'block',
-          'line-height': '1.61',
-          padding: '20px',
-          'border-radius': '5px',
-          background: '#f5f5f5',
-          'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.05)',
-          'text-align': 'left'
-        },
-        addedChar: {
-          'font-weight': 'bold',
-          color: 'blue'
-        },
-        removedChar: {
-          color: 'lightblue',
-          'text-decoration': 'line-through'
-        }
-      }
-    }),
     FormsModule
   ],
   providers: [],

src/app/home/home-routing.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {HomeComponent} from './home/home.component';
+
+const routes: Routes = [{
+  path: '', component: HomeComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule { }

src/app/home/home.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {HomeRoutingModule} from './home-routing.module';
+import {HomeComponent} from './home/home.component';
+import {NavModule} from '../nav/nav.module';
+
+@NgModule({
+  declarations: [
+    HomeComponent
+  ],
+  imports: [
+    CommonModule,
+    HomeRoutingModule,
+    NavModule
+  ]
+})
+export class HomeModule {
+}

src/app/home/home/home.component.html

@@ -0,0 +1,4 @@
+<app-nav></app-nav>
+<p>
+  Welcome to the taskbase-angular-libraries! Click the nav to view a demo.
+</p>