feat(cellMenu): starting adding new CellMenu Extension

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
 import { GridColspanComponent } from './examples/grid-colspan.component';
+import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
 import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
 import { GridEditorComponent } from './examples/grid-editor.component';
 import { GridFormatterComponent } from './examples/grid-formatter.component';
@@ -36,6 +37,7 @@ const routes: Routes = [
   { path: 'autoheight', component: GridAutoHeightComponent },
   { path: 'basic', component: GridBasicComponent },
   { path: 'colspan', component: GridColspanComponent },
+  { path: 'context', component: GridContextMenuComponent },
   { path: 'editor', component: GridEditorComponent },
   { path: 'formatter', component: GridFormatterComponent },
   { path: 'frozen', component: GridFrozenComponent },

src/app/app.component.html

@@ -1,26 +1,18 @@
-<nav class="navbar navbar-default navbar-fixed-top"
-     role="navigation">
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="navbar-header">
-    <button type="button"
-            class="navbar-toggle"
-            data-toggle="collapse"
-            data-target=".navbar-collapse"
-            menu-collapse>
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" menu-collapse>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a class="navbar-brand"
-       href="https://github.com/ghiscoding/Angular-Slickgrid">
+    <a class="navbar-brand" href="https://github.com/ghiscoding/Angular-Slickgrid">
       <i class="fa fa-github"></i>
       <span>{{title}}</span>
     </a>
     <span style="position: relative; top: 15px">
-      <iframe allowtransparency="true"
-              scrolling="no"
-              frameborder="0"
-              src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fghiscoding%2FAngular-Slickgrid&amp;aria-label=Star%20ghiscoding%2FAngular-Slickgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-show-count=true"
-              style="width: 90px; height: 20px; border: none;"></iframe>
+      <iframe allowtransparency="true" scrolling="no" frameborder="0"
+        src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fghiscoding%2FAngular-Slickgrid&amp;aria-label=Star%20ghiscoding%2FAngular-Slickgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-show-count=true"
+        style="width: 90px; height: 20px; border: none;"></iframe>
     </span>
   </div>
   <div class="navbar-collapse collapse">
@@ -36,8 +28,7 @@
 
 <div class="container-fluid">
   <div class="panel-wm">
-    <section id="panel-left"
-             class="panel-wm-left">
+    <section id="panel-left" class="panel-wm-left">
       <ul class="nav nav-pills nav-stacked">
         <li routerLinkActive="active">
           <a [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
@@ -114,6 +105,9 @@
         <li routerLinkActive="active">
           <a [routerLink]="['/range']">25- Filter by Range of Values</a>
         </li>
+        <li routerLinkActive="active">
+          <a [routerLink]="['/context']">26- Cell & Context Menu</a>
+        </li>
       </ul>
     </section>
 

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
 import { GridColspanComponent } from './examples/grid-colspan.component';
+import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
 import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
 import { GridEditorComponent } from './examples/grid-editor.component';
 import { GridAngularComponent } from './examples/grid-angular.component';
@@ -88,6 +89,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     GridBasicComponent,
     GridClientSideComponent,
     GridColspanComponent,
+    GridContextMenuComponent,
     GridDraggableGroupingComponent,
     GridEditorComponent,
     GridFormatterComponent,

src/app/examples/grid-angular.component.ts

@@ -1,4 +1,4 @@
-import { Component, Injectable, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
   AngularGridInstance,
@@ -30,7 +30,6 @@ const NB_ITEMS = 100;
   styleUrls: ['./grid-angular.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-@Injectable()
 export class GridAngularComponent implements OnInit {
   title = 'Example 22: Use of Angular Components';
   subTitle = `

src/app/examples/grid-contextmenu.component.html

@@ -0,0 +1,21 @@
+<div class="container-fluid">
+  <h2>{{title}}</h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <div class="row">
+    <button class="btn btn-default btn-sm" (click)="switchLanguage()">
+      <i class="fa fa-language"></i>
+      Switch Language
+    </button>
+    <b>Locale:</b>
+    <span style="font-style: italic" data-test="selected-locale">
+      {{selectedLanguage + '.json'}}
+    </span>
+  </div>
+
+  <div class="col-sm-12">
+    <angular-slickgrid gridId="grid2" (onAngularGridCreated)="angularGridReady($event)"
+      [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
+    </angular-slickgrid>
+  </div>
+</div>

src/app/examples/grid-contextmenu.component.scss

@@ -0,0 +1,32 @@
+.bold {
+  font-weight: bold;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.grey {
+  color: grey;
+}
+
+.orange {
+  color: orange;
+}
+
+.red {
+  color: red;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.disabled {
+  color: #ccc;
+}
+
+.fake-hyperlink {
+  cursor: pointer;
+  color: #08c;
+}