feat(panel): Panel provider (#10215)

Fixes #10006. Fixes #10162.

src/components/panel/demoPanelProvider/index.html

@@ -0,0 +1,52 @@
+<div ng-controller="PanelProviderCtrl as ctrl" ng-cloak>
+
+  <md-content layout-padding>
+
+    <div layout="row" layout-align="space-between center" flex>
+      <md-button
+        class="md-fab md-primary"
+        aria-label="Navigation"
+        ng-click="ctrl.showMenu($event, ctrl.navigation)">
+        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
+      </md-button>
+      <md-button
+        class="md-fab md-accent"
+        aria-label="Favorites"
+        ng-click="ctrl.showMenu($event, ctrl.favorites)">
+        <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
+      </md-button>
+      <md-button
+        class="md-fab md-background"
+        aria-label="More"
+        ng-click="ctrl.showMenu($event, ctrl.more)">
+        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
+      </md-button>
+    </div>
+
+    <p>
+      Configuration preset for upcoming panel elements can be created at the
+      <code>.config</code> level of your Angular application. To create a
+      preset configuration object, use the <code>$mdPanelProvider</code>
+      dependency within a <code>.config</code> method and call
+      <code>$mdPanelProvider.definePreset</code> with the preset name and an
+      object containing the options needed for the configuration of a panel.
+      This object will be stored for you so that the next time you need to
+      <code>create</code> or <code>open</code> a panel, you can include the
+      preset name in the method request, <code>$mdPanel.create('name', {...})</code>,
+      to have the preset configuration options be added to the panel.
+    </p>
+    <p>
+      The configuration object takes all of the options found within the
+      <code>$mdPanel.create</code> method; however, it will not accept any
+      options that depend on user interaction, panel positioning, or panel
+      animation.
+    </p>
+    <p>
+      This will help you reduce the necessary lines of configuration code that
+      are required to create a panel when you are wanting to have multiple
+      panels that are largely the same.
+    </p>
+
+  </md-content>
+
+</div>

src/components/panel/demoPanelProvider/script.js

@@ -0,0 +1,106 @@
+(function() {
+  'use strict';
+
+  angular
+      .module('panelProviderDemo', ['ngMaterial'])
+      .config(PanelProviderConfig)
+      .controller('PanelProviderCtrl', PanelProviderCtrl)
+      .controller('PanelMenuCtrl', PanelMenuCtrl);
+
+  /**
+   * Configuration method that is used to define a preset for the upcoming panel
+   * element. Each parameter in the preset is an available parameter in the
+   * `$mdPanel.create` and `$mdPanel.open` methods. When the parameters are
+   * defined here, they overwrite the default parameters for any panel that the
+   * preset is requested for.
+   * @param {!MdPanelProvider} $mdPanelProvider Provider method of the MdPanel
+   *     API.
+   */
+  function PanelProviderConfig($mdPanelProvider) {
+    $mdPanelProvider.definePreset('demoPreset', {
+      attachTo: angular.element(document.body),
+      controller: PanelMenuCtrl,
+      controllerAs: 'ctrl',
+      template: '' +
+          '<div class="menu-panel" md-whiteframe="4">' +
+          '  <div class="menu-content">' +
+          '    <div class="menu-item" ng-repeat="item in ctrl.items">' +
+          '      <button class="md-button">' +
+          '        <span>{{item}}</span>' +
+          '      </button>' +
+          '    </div>' +
+          '    <md-divider></md-divider>' +
+          '    <div class="menu-item">' +
+          '      <button class="md-button" ng-click="ctrl.closeMenu()">' +
+          '        <span>Close Menu</span>' +
+          '      </button>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>',
+      panelClass: 'menu-panel-container',
+      focusOnOpen: false,
+      zIndex: 100,
+      propagateContainerEvents: true,
+      groupName: 'menus'
+    });
+  }
+
+  function PanelProviderCtrl($mdPanel) {
+    this.navigation = {
+      name: 'navigation',
+      items: [
+        'Home',
+        'About',
+        'Contact'
+      ]
+    };
+    this.favorites = {
+      name: 'favorites',
+      items: [
+        'Add to Favorites'
+      ]
+    };
+    this.more = {
+      name: 'more',
+      items: [
+        'Account',
+        'Sign Out'
+      ]
+    };
+
+    $mdPanel.newPanelGroup('menus', {
+      maxOpen: 2
+    });
+
+    this.showMenu = function($event, menu) {
+      /**
+       * The request to open the panel has two arguments passed into it. The
+       * first is a preset name passed in as a string. This will request a
+       * cached preset and apply its configuration parameters. The second is an
+       * object containing parameters that can only be filled through a
+       * controller. These parameters represent configuration needs associated
+       * with user interaction, panel position, panel animation, and other
+       * miscellaneous needs.
+       */
+      $mdPanel.open('demoPreset', {
+        id: 'menu_' + menu.name,
+        position: $mdPanel.newPanelPosition()
+            .relativeTo($event.srcElement)
+            .addPanelPosition(
+              $mdPanel.xPosition.ALIGN_START,
+              $mdPanel.yPosition.BELOW
+            ),
+        locals: {
+          items: menu.items
+        },
+        openFrom: $event
+      });
+    };
+  }
+
+  function PanelMenuCtrl(mdPanelRef) {
+    this.closeMenu = function() {
+      mdPanelRef && mdPanelRef.close();
+    };
+  }
+})();

src/components/panel/demoPanelProvider/style.global.css

@@ -0,0 +1,77 @@
+.menu-panel-container {
+  pointer-events: auto;
+}
+
+.menu-panel {
+  width: 256px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.menu-panel .menu-divider {
+  width: 100%;
+  height: 1px;
+  min-height: 1px;
+  max-height: 1px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  background-color: rgba(0, 0, 0, 0.11);
+}
+
+.menu-panel .menu-content {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  max-height: 305px;
+  overflow-y: auto;
+  min-width: 256px;
+}
+
+.menu-panel .menu-item {
+  display: flex;
+  flex-direction: row;
+  min-height: 48px;
+  height: 48px;
+  align-content: center;
+  justify-content: flex-start;
+}
+.menu-panel .menu-item > * {
+  width: 100%;
+  margin: auto 0;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.menu-panel .menu-item > a.md-button {
+  padding-top: 5px;
+}
+.menu-panel .menu-item > .md-button {
+  display: inline-block;
+  border-radius: 0;
+  margin: auto 0;
+  font-size: 15px;
+  text-transform: none;
+  font-weight: 400;
+  height: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: 100%;
+  text-align: left;
+}
+.menu-panel .menu-item > .md-button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+.menu-panel .menu-item > .md-button md-icon {
+  margin: auto 16px auto 0;
+}
+.menu-panel .menu-item > .md-button p {
+  display: inline-block;
+  margin: auto;
+}
+.menu-panel .menu-item > .md-button span {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.menu-panel .menu-item > .md-button .md-ripple-container {
+  border-radius: inherit;
+}