feat(components): added image comparison component

Author: xmlking

PLAYBOOK.md

@@ -385,6 +385,11 @@ 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

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/assets/img/comp/1-after.jpg

@@ -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',
       },
     ],
   },

apps/webapp/src/assets/img/comp/1-before.jpg

@@ -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>