Merge pull request #14 from xmlking/develop

master merge 1

PLAYBOOK.md

@@ -21,7 +21,7 @@ Do-it-yourself step-by-step instructions to create this project structure from s
 brew update
 brew install node
 #brew upgrade node
-# upgrade npm to at least 6.3.0
+# upgrade npm to at least 6.x.x
 npm install -g npm
 ```
 
@@ -52,14 +52,14 @@ bazel clean --expunge
 npm remove -g @angular/cli
 npm remove -g @nrwl/schematics
 npm remove -g @nestjs/cli
+npm remove -g semantic-release-cli
+npm remove -g commitizen
 
 npm install -g @angular/cli
-npm install -g @nrwl/[email protected].1
+npm install -g @nrwl/[email protected].3
 npm install -g @nestjs/cli
-
-npm install -g ndb
-npm i -g semantic-release-cli
-npm i -g commitizen
+npm install -g semantic-release-cli
+npm install -g commitizen
 
 # verify globally installed packages
 npm list -g --depth=0
@@ -176,7 +176,7 @@ npm i -D tslint-config-prettier
 npx tslint-config-prettier-check ./tslint.json
 
 # install testCafe for e2e testing and remove protractor
-npm i testcafe testcafe-angular-selectors testcafe-live
+npm i -D testcafe testcafe-angular-selectors testcafe-live
 
 # for CI/CD automation and release
 # first time semantic-release setup
@@ -194,9 +194,9 @@ npm i -D lint-staged
 ```bash
 
 # generate `Lazy-loaded Feature Modules`
-ng g lib home           --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts       --unit-test-runner=jest  --tags=layout,entry-module
-ng g lib dashboard      --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts       --unit-test-runner=jest  --tags=layout,entry-module
-ng g lib NotFound       --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts        --unit-test-runner=jest --tags=entry-module
+ng g lib home           --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts             --unit-test-runner=jest  --tags=layout,entry-module
+ng g lib dashboard      --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts             --unit-test-runner=jest  --tags=layout,entry-module
+ng g lib NotFound       --routing --lazy --prefix=ngx --parent-module=apps/webapp/src/app/app.module.ts             --unit-test-runner=jest --tags=entry-module
 ng g lib experiments    --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts    --unit-test-runner=jest --tags=child-module
 ng g lib widgets        --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts    --unit-test-runner=jest --tags=child-module
 ng g lib grid           --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts    --unit-test-runner=jest --tags=child-module
@@ -385,14 +385,20 @@ ng g component containers/StickyTable --project=experiments --dry-run
 ng g component containers/clapButton --project=experiments  -s  -t --spec=false  --dry-run
 ng g component containers/knobDemo --project=experiments --dry-run
 ng g component containers/ledDemo --project=experiments  --dry-run
+ng g component containers/ImageComp --project=experiments  --dry-run
+
+# generate components for `ImageComparison` Module
+ng g lib ImageComparison  --prefix=ngx --tags=public-module --spec=false --publishable=true --dry-run
+ng g component ImageComparison --project=image-comparison --export --flat --dry-run 
 ```
 
 #### Workspace Schematics
 ```bash
 # generate workspace-schematic `store`
 ng g workspace-schematic store
 # run workspace-schematic `store`
-npm run workspace-schematic store models/sumo -- --type=model --project=grid  --dry-run
+# *** always delete ./dist folder when you change schematic implementation ***
+npm run workspace-schematic store models/sumoDemo -- --project=grid  --dry-run
 ```
 
 ### Install

README.md

@@ -50,5 +50,7 @@ Run `npm run doc:serve` to serve docs.
 Run `npm run deploy:mock` to deploy demo app to gp-pages.
 
 Analyzing bundle size `npm run bundle-report`
+
+Analyzing and Visualizing the Dependency Graph (affected modules by uncommitted changes)
 
-Analyzing and Visualizing the Dependency Graph `npm run dep-graph`
+`npm run affected:dep-graph -- --uncommitted`

angular.json

@@ -1378,6 +1378,46 @@
           }
         }
       }
+    },
+    "image-comparison": {
+      "root": "libs/image-comparison",
+      "sourceRoot": "libs/image-comparison/src",
+      "projectType": "library",
+      "prefix": "ngx",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "libs/image-comparison/tsconfig.lib.json",
+            "project": "libs/image-comparison/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "project": "libs/image-comparison/ng-package.prod.json"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/image-comparison/tsconfig.lib.json",
+              "libs/image-comparison/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/builders:jest",
+          "options": {
+            "jestConfig": "libs/image-comparison/jest.config.js",
+            "tsConfig": "libs/image-comparison/tsconfig.spec.json",
+            "setupFile": "libs/image-comparison/src/test-setup.ts"
+          }
+        }
+      }
     }
   },
   "schematics": {

apps/webapp/src/styles.scss

@@ -36,6 +36,3 @@ $alt-theme: mat-dark-theme($alt-primary, $alt-accent);
 @import '~perfect-scrollbar/css/perfect-scrollbar.css';
 @import '~filepond/dist/filepond.min.css';
 @import '~filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
-
-$ionicons-font-path: '~ionicons/dist/fonts';
-@import '~ionicons/dist/scss/ionicons';

libs/auth/src/lib/auth.module.ts

@@ -9,6 +9,7 @@ import { AuthState } from './auth.state';
 import { LoginComponent } from './components/login/login.component';
 import { ROPCService } from './ropc.service';
 import { AuthService } from './auth.service';
+import { AuthGuard } from './auth.guard';
 
 import {
   MatButtonModule,
@@ -23,7 +24,7 @@ import {
 } from '@angular/material';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { AuthGuard } from './auth.guard';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   imports: [
@@ -40,6 +41,7 @@ import { AuthGuard } from './auth.guard';
     MatToolbarModule,
     FlexLayoutModule,
     ReactiveFormsModule,
+    FontAwesomeModule,
     OAuthModule.forRoot({
       resourceServer: {
         allowedUrls: ['http://localhost:8080/auth'],

libs/auth/src/lib/components/login/login.component.html

@@ -64,13 +64,13 @@
         <mat-icon>security</mat-icon>
       </button>
       <button mat-mini-fab matTooltip="Login with Google" matTooltipPosition="above">
-        <i class="icon ion-logo-google"></i>
+        <fa-icon [icon]="['fab', 'google']"></fa-icon>
       </button>
-      <button mat-mini-fab>
-        <i class="icon ion-logo-twitter" matTooltip="Login with Twitter" matTooltipPosition="above"></i>
+      <button mat-mini-fab  matTooltip="Login with Twitter" matTooltipPosition="above">
+        <fa-icon [icon]="['fab', 'twitter']"></fa-icon>
       </button>
-      <button mat-mini-fab>
-        <i class="icon ion-logo-github" matTooltip="Login with GitHub" matTooltipPosition="above"></i>
+      <button mat-mini-fab matTooltip="Login with GitHub" matTooltipPosition="above">
+        <fa-icon [icon]="['fab', 'github']"></fa-icon>
       </button>
     </span>
 

libs/core/src/lib/core.module.ts

@@ -8,6 +8,10 @@ import { NgxsFormPluginModule } from '@ngxs/form-plugin';
 import { NgxPageScrollModule } from 'ngx-page-scroll';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faTwitter, faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons';
+
 import { AuthModule, AuthState } from '@ngx-starter-kit/auth';
 import { NavigatorModule, MenuState } from '@ngx-starter-kit/navigator';
 import { NgxsWebsocketPluginModule } from '@ngx-starter-kit/socketio-plugin';
@@ -24,10 +28,18 @@ export function noop() {
   return function() {};
 }
 
+/**
+ * add icons that are needed during app boot up here.
+ * if more icons are needed, load them in respective modules and add FontAwesomeModule to it.
+ * for convenience, we also added FontAwesomeModule to SharedModule.
+ */
+library.add(faTwitter, faGithub, faGoogle);
+
 @NgModule({
   imports: [
     CommonModule,
     HttpClientModule,
+    FontAwesomeModule,
     NgxPageScrollModule,
     NavigatorModule.forRoot(defaultMenu),
     NgxsModule.forRoot([AuthState, MenuState, PreferenceState]),

libs/core/src/lib/menu-data.ts

@@ -67,22 +67,49 @@ export const defaultMenu: MenuItem[] = [
         icon: 'directions',
         link: '/dashboard/experiments/knob',
       },
+      // {
+      //   name: 'Microinteractions',
+      //   icon: 'casino',
+      //   disabled: false,
+      //   children: [
+      //     {
+      //       name: 'Clap',
+      //       icon: 'pan_tool',
+      //       link: '/dashboard/experiments/clap',
+      //     },
+      //     {
+      //       name: 'Led',
+      //       icon: 'highlight',
+      //       link: '/dashboard/experiments/led',
+      //     },
+      //     {
+      //       name: 'Image Comp',
+      //       icon: 'tonality',
+      //       link: '/dashboard/experiments/image-comp',
+      //     },
+      //   ],
+      // },
+    ],
+  },
+  {
+    name: 'Micro-Interactions',
+    icon: 'casino',
+    disabled: false,
+    children: [
       {
-        name: 'Microinteractions',
-        icon: 'casino',
-        disabled: false,
-        children: [
-          {
-            name: 'Clap',
-            icon: 'pan_tool',
-            link: '/dashboard/experiments/clap',
-          },
-          {
-            name: 'Led',
-            icon: 'highlight',
-            link: '/dashboard/experiments/led',
-          },
-        ],
+        name: 'Clap',
+        icon: 'pan_tool',
+        link: '/dashboard/experiments/clap',
+      },
+      {
+        name: 'Led',
+        icon: 'highlight',
+        link: '/dashboard/experiments/led',
+      },
+      {
+        name: 'Image Comp',
+        icon: 'tonality',
+        link: '/dashboard/experiments/image-comp',
       },
     ],
   },

libs/experiments/src/lib/containers/image-comp/image-comp.component.html

@@ -0,0 +1,14 @@
+<ngx-image-comparison startPosition="70">
+  <img #comparisonImage src="assets/img/comp/1-before.jpg" alt="first image"  data-label="first">
+  <img #comparisonImage src="assets/img/comp/1-after.jpg"  alt="second image" data-label="second">
+</ngx-image-comparison>
+<br/><br/>
+<ngx-image-comparison startPosition="40">
+  <img #comparisonImage src="assets/img/comp/2-before.jpg" alt="" data-label="1">
+  <img #comparisonImage src="assets/img/comp/2-after.jpg"  alt="" data-label="2">
+</ngx-image-comparison>
+<br/><br/>
+<ngx-image-comparison startPosition="60">
+  <img #comparisonImage src="assets/img/comp/3-before.jpg">
+  <img #comparisonImage src="assets/img/comp/3-after.jpg">
+</ngx-image-comparison>

libs/experiments/src/lib/containers/image-comp/image-comp.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  padding: 1.5%;
+  position: relative;
+}

libs/experiments/src/lib/containers/image-comp/image-comp.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageCompComponent } from './image-comp.component';
+
+describe('ImageCompComponent', () => {
+  let component: ImageCompComponent;
+  let fixture: ComponentFixture<ImageCompComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageCompComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageCompComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/experiments/src/lib/containers/image-comp/image-comp.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-image-comp',
+  templateUrl: './image-comp.component.html',
+  styleUrls: ['./image-comp.component.scss'],
+})
+export class ImageCompComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

libs/experiments/src/lib/experiments.module.ts

@@ -7,6 +7,7 @@ import { KnobModule } from '@xmlking/ngx-knob';
 
 import { ClapModule } from '@ngx-starter-kit/clap';
 import { LedModule } from '@ngx-starter-kit/led';
+import { ImageComparisonModule } from '@ngx-starter-kit/image-comparison';
 import { SharedModule } from '@ngx-starter-kit/shared';
 import { ContextMenuModule } from '@ngx-starter-kit/context-menu';
 import { AnimationsComponent } from './containers/animations/animations.component';
@@ -18,6 +19,7 @@ import { KnobDemoComponent } from './containers/knob-demo/knob-demo.component';
 import { VirtualScrollComponent } from './containers/virtual-scroll/virtual-scroll.component';
 import { StickyTableComponent } from './containers/sticky-table/sticky-table.component';
 import { LedDemoComponent } from './containers/led-demo/led-demo.component';
+import { ImageCompComponent } from './containers/image-comp/image-comp.component';
 
 // Registering plugins
 import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
@@ -36,6 +38,7 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F
     ClapModule,
     LedModule,
     KnobModule,
+    ImageComparisonModule,
     RouterModule.forChild([
       /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */
       { path: '', redirectTo: 'animations', pathMatch: 'full', data: { animation: 'experiments' } },
@@ -79,6 +82,11 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F
         component: KnobDemoComponent,
         data: { animation: 'Knob' },
       },
+      {
+        path: 'image-comp',
+        component: ImageCompComponent,
+        data: { animation: 'imagecomp' },
+      },
     ]),
   ],
   declarations: [
@@ -91,6 +99,7 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F
     ClapButtonComponent,
     KnobDemoComponent,
     LedDemoComponent,
+    ImageCompComponent,
   ],
 })
 export class ExperimentsModule {}

libs/grid/src/lib/components/account-edit/account-edit.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title [draggable] dragTarget=".mat-dialog-container">{{title}}</h1>
+<h1 mat-dialog-title cdkDrag cdkDragHandle  cdkDragRootElement=".mat-dialog-container" style="cursor: move">{{title}}</h1>
 
 <form [formGroup]="entityForm" (ngSubmit)="submit()">
   <mat-dialog-content>

libs/grid/src/lib/grid.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@ngx-starter-kit/shared';
 import { AppConfirmModule } from '@ngx-starter-kit/app-confirm';
-import { DraggableModule } from '@ngx-starter-kit/draggable';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgxPipesModule } from '@ngx-starter-kit/ngx-pipes';
 import { AccountsGridListComponent } from './containers/accounts-grid-list/accounts-grid-list.component';
@@ -15,7 +14,6 @@ import { AccountEditComponent } from './components/account-edit/account-edit.com
 @NgModule({
   imports: [
     SharedModule,
-    DraggableModule,
     DragDropModule,
     AppConfirmModule,
     NgxPipesModule,