Merge pull request #49 from frehn/master

"Passive" menu item without <a>.

Author: isaacplmann

README.md

@@ -28,6 +28,9 @@ The older syntax is deprecated and will be removed in version 1.x.  (I have no t
   <template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">
     Bye, {{item?.name}}
   </template>
+  <template contextMenuItem passive="true">
+    Input something: <input type="text">
+  </template>
 </context-menu>
 ```
 
@@ -54,6 +57,8 @@ export class MyContextMenuClass {
 - Every context menu item emits `execute` events. The `$event` object is of the form `{ event: MouseEvent, item: any }` where `event` is the mouse click event
   that triggered the execution and `item` is the current item.
 - The `divider` input parameter is optional.  Items default to normal menu items.  If `divider` is `true`, all the other inputs are ignored.
+- The `passive` input parameter is optional.  If `passive` is `true`, the menu item will not emit execute events or close
+  the context menu when clicked.
 - The `enabled` input parameter is optional.  Items are enabled by default.
   This can be a boolean value or a function definition that takes an item and returns a boolean.
 - The `visible` input parameter is optional.  Items are visible by default.  This property enables you to show certain context menu items based on what the data item is.
@@ -169,6 +174,7 @@ The html that is generated for the context menu looks like this:
   <ul class="dropdown-menu">
     <li>
       <a><!-- the template for each context menu item goes here --></a>
+      <span><!-- the template for each passive context menu item goes here --></span>
     </li>
   </ul>
 </div>

demo/app.component.html

@@ -53,6 +53,9 @@ <h3>Enabled and Visible as Functions</h3>
           <template contextMenuItem let-item (execute)="showMessage($event.event)">
             Bye, {{item?.name}}
           </template>
+          <template contextMenuItem passive="true">
+            Input something: <input type="text">
+          </template>
         </context-menu>
       </div>
     </div>

src/contextMenu.component.ts

@@ -32,6 +32,14 @@ export interface MouseLocation {
 @Component({
   selector: 'context-menu',
   styles: [
+    `.passive {
+       display: block;
+       padding: 3px 20px;
+       clear: both;
+       font-weight: normal;
+       line-height: @line-height-base;
+       white-space: nowrap;
+     }`
   ],
   template:
   `<div class="dropdown angular2-contextmenu">
@@ -46,11 +54,17 @@ export interface MouseLocation {
         <li *ngFor="let menuItem of visibleMenuItems" [class.disabled]="!isMenuItemEnabled(menuItem)"
             [class.divider]="menuItem.divider" [class.dropdown-divider]="useBootstrap4 && menuItem.divider"
             [attr.role]="menuItem.divider ? 'separator' : undefined">
-          <a *ngIf="!menuItem.divider" href [class.dropdown-item]="useBootstrap4"
+          <a *ngIf="!menuItem.divider && !menuItem.passive" href [class.dropdown-item]="useBootstrap4"
             [class.disabled]="useBootstrap4 && !isMenuItemEnabled(menuItem)"
             (click)="menuItem.triggerExecute(item, $event); $event.preventDefault(); $event.stopPropagation();">
             <template [ngTemplateOutlet]="menuItem.template" [ngOutletContext]="{ $implicit: item }"></template>
           </a>
+
+          <span (click)="stopEvent($event)" (contextmenu)="stopEvent($event)" class="passive"
+                *ngIf="!menuItem.divider && menuItem.passive" [class.dropdown-item]="useBootstrap4"
+                [class.disabled]="useBootstrap4 && !isMenuItemEnabled(menuItem)">
+            <template [ngTemplateOutlet]="menuItem.template" [ngOutletContext]="{ $implicit: item }"></template>
+          </span>
         </li>
       </ul>
     </div>
@@ -81,6 +95,10 @@ export class ContextMenuComponent implements AfterContentInit {
     _contextMenuService.show.subscribe(menuEvent => this.onMenuEvent(menuEvent));
   }
 
+  stopEvent($event : MouseEvent) {
+    $event.stopPropagation()
+  }
+
   get locationCss(): any {
     return {
       'position': 'fixed',

src/contextMenu.item.directive.ts

@@ -7,6 +7,7 @@ import { Directive, Input, Output, EventEmitter, TemplateRef } from '@angular/co
 })
 export class ContextMenuItemDirective {
   @Input() public divider: boolean = false;
+  @Input() public passive: boolean = false;
   @Input() public enabled: boolean | ((item: any) => boolean) = true;
   @Input() public visible: boolean | ((item: any) => boolean) = true;
   @Output() public execute: EventEmitter<{ event: Event, item: any }> = new EventEmitter<{ event: Event, item: any }>();