feat(list): add support for md-menu as proxied element

* Allow md-menu to be a proxied element in a list
* Smart detection of being right or left aligned
* Allows md-menu to be a secondary element

* Support for RTL pages, automatically detecting the menu origin.

Fixes #3339

Closes #6459

Author: devversion

src/components/list/demoListControls/index.html

@@ -20,6 +20,38 @@
 
   <md-divider></md-divider>
 
+  <md-subheader class="md-no-sticky">Secondary Menus</md-subheader>
+  <md-list-item>
+    <p>Click anywhere to fire the secondary action</p>
+
+    <md-menu class="md-secondary">
+      <md-button class="md-icon-button">
+        <md-icon md-svg-icon="communication:message"></md-icon>
+      </md-button>
+      <md-menu-content width="4">
+        <md-menu-item>
+          <md-button>
+            Redial
+          </md-button>
+        </md-menu-item>
+        <md-menu-item>
+          <md-button>
+            Check voicemail
+          </md-button>
+        </md-menu-item>
+        <md-menu-divider></md-menu-divider>
+        <md-menu-item>
+          <md-button>
+            Notifications
+          </md-button>
+        </md-menu-item>
+      </md-menu-content>
+    </md-menu>
+
+  </md-list-item>
+
+  <md-divider></md-divider>
+
   <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
   <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
     <md-icon md-svg-icon="{{setting.icon}}"></md-icon>

src/components/list/list.js

@@ -181,7 +181,7 @@ function mdListDirective($mdTheming) {
  *
  */
 function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
-  var proxiedTypes = ['md-checkbox', 'md-switch'];
+  var proxiedTypes = ['md-checkbox', 'md-switch', 'md-menu'];
   return {
     restrict: 'E',
     controller: 'MdListController',
@@ -210,9 +210,13 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
           tEl.addClass('_md-no-proxy');
         }
       }
+
       wrapSecondaryItems();
       setupToggleAria();
 
+      if (hasProxiedElement && proxyElement.nodeName === "MD-MENU") {
+        setupProxiedMenu();
+      }
 
       function setupToggleAria() {
         var toggleTypes = ['md-switch', 'md-checkbox'];
@@ -229,6 +233,35 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         }
       }
 
+      function setupProxiedMenu() {
+        var menuEl = angular.element(proxyElement);
+
+        var isEndAligned = menuEl.parent().hasClass('_md-secondary-container') ||
+                           proxyElement.parentNode.firstElementChild !== proxyElement;
+
+        var xAxisPosition = 'left';
+
+        if (isEndAligned) {
+          // When the proxy item is aligned at the end of the list, we have to set the origin to the end.
+          xAxisPosition = 'right';
+        }
+        
+        // Set the position mode / origin of the proxied menu.
+        if (!menuEl.attr('md-position-mode')) {
+          menuEl.attr('md-position-mode', xAxisPosition + ' target');
+        }
+
+        // Apply menu open binding to menu button
+        var menuOpenButton = menuEl.children().eq(0);
+        if (!hasClickEvent(menuOpenButton[0])) {
+          menuOpenButton.attr('ng-click', '$mdOpenMenu($event)');
+        }
+
+        if (!menuOpenButton.attr('aria-label')) {
+          menuOpenButton.attr('aria-label', 'Open List Menu');
+        }
+      }
+
       function wrapIn(type) {
         if (type == 'div') {
           itemContainer = angular.element('<div class="_md-no-style _md-list-item-inner">');
@@ -373,6 +406,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
 
           }
         }
+
         function computeClickable() {
           if (proxies.length == 1 || hasClick) {
             $element.addClass('md-clickable');
@@ -409,6 +443,9 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
             if (!parentButton && clickChild.contains(e.target)) {
               angular.forEach(proxies, function(proxy) {
                 if (e.target !== proxy && !proxy.contains(e.target)) {
+                  if (proxy.nodeName === 'MD-MENU') {
+                    proxy = proxy.children[0];
+                  }
                   angular.element(proxy).triggerHandler('click');
                 }
               });

src/components/list/list.spec.js

@@ -327,6 +327,61 @@ describe('mdListItem directive', function() {
     expect(button[0].hasAttribute('ng-disabled')).toBeTruthy();
   });
 
+  describe('with a md-menu', function() {
+    it('should forward click events on the md-menu trigger button', function() {
+      var template =
+        '<md-list-item>' +
+        '<md-menu>' +
+        '<md-button ng-click="openMenu()"></md-button>' +
+        '</md-menu>' +
+        '</md-list-item>';
+
+      var listItem = setup(template);
+      var cntr = listItem[0].querySelector('div');
+      var openMenu = jasmine.createSpy('openMenu');
+
+      $rootScope.openMenu = openMenu;
+
+      if (cntr && cntr.click) {
+        cntr.click();
+        expect(openMenu).toHaveBeenCalled();
+      }
+
+    });
+
+    it('should detect the menu position mode when md-menu is aligned at right', function() {
+      var template =
+        '<md-list-item>' +
+          '<span>Menu should be aligned right</span>' +
+          '<md-menu>' +
+            '<md-button ng-click="openMenu()"></md-button>' +
+          '</md-menu>' +
+        '</md-list-item>';
+
+      var listItem = setup(template);
+
+      var mdMenu = listItem.find('md-menu');
+
+      expect(mdMenu.attr('md-position-mode')).toBe('right target');
+    });
+
+    it('should detect the menu position mode when md-menu is aligned at left', function() {
+      var template =
+        '<md-list-item>' +
+          '<md-menu>' +
+            '<md-button ng-click="openMenu()"></md-button>' +
+          '</md-menu>' +
+          '<span>Menu should be aligned left</span>' +
+        '</md-list-item>';
+
+      var listItem = setup(template);
+
+      var mdMenu = listItem.find('md-menu');
+
+      expect(mdMenu.attr('md-position-mode')).toBe('left target');
+    });
+  });
+
   describe('with a clickable item', function() {
 
     it('should wrap secondary icons in a md-button', function() {

src/components/menu/js/menuServiceProvider.js

@@ -456,8 +456,17 @@ function MenuProvider($$interimElementProvider) {
           position.left = willFitRight ? originNodeRect.right - originNode.style.left : originNodeRect.left - originNode.style.left - openMenuNodeRect.width;
           transformOrigin += willFitRight ? 'left' : 'right';
           break;
+        case 'right':
+          if (rtl) {
+            position.left = originNodeRect.right - originNodeRect.width;
+            transformOrigin += 'left';
+          } else {
+            position.left = originNodeRect.right - openMenuNodeRect.width;
+            transformOrigin += 'right';
+          }
+          break;
         case 'left':
-          if(rtl) {
+          if (rtl) {
             position.left = originNodeRect.right - openMenuNodeRect.width;
             transformOrigin += 'right';
           } else {