add mdExpansionPanelGroup directive

add $mdExpansionPanelGroup service
added communication with mdExpansionPanelGroup from mdExpansionPanel
added remove function to mdExpansionPanel and $mdExpansionPanel
added returning promised on expand/contract/remove methods
fixed header so ill will not stay below panel when the panel bottom scroll above
updated readme documentation

README.md

@@ -148,16 +148,42 @@ To add Expansion Panels to you angular-material project, include the `material.c
 angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
 ```
 
+* [mdExpansionPanelGroup](#mdExpansionPanelGroup)
 * [mdExpansionPanel](#mdExpansionPanel)
 * [mdExpansionPanelCollapsed](#mdExpansionPanelCollapsed)
 * [mdExpansionPanelExpanded](#mdExpansionPanelExpanded)
 * [mdExpansionPanelHeader](#mdExpansionPanelHeader)
 * [mdExpansionPanelFooter](#mdExpansionPanelFooter)
 * [$mdExpansionPanel](#$mdExpansionPanel)
+* [$mdExpansionPanelGroup](#$mdExpansionPanelGroup)
 
 
 #### Directives
 
+
+
+## mdExpansionPanelGroup
+
+`mdExpansionPanelGroup` is a container to manage multiple panels
+
+```
+<md-expansion-panel-group
+  [md-component-id=""]
+  [auto-expand=""]
+  [multiple=""]>
+...
+</md-expansion-panel-group>
+```
+
+#### Attributes
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| md-component-id | string= | <p>add an id if you want to acces the panel via the <code>$mdExpansionPanelGroup</code> service</p>  |
+| auto-expand | string= | <p>panels expand when added to <code><md-expansion-panel-group></code></p>  |
+| multiple | string= | <p>allows for more than one panel to be expanded at a time</p>  |
+
+
 ## mdExpansionPanel
 
 `mdExpansionPanel` is the main container for panels
@@ -252,6 +278,8 @@ this is optional
 
 
 
+
+
 ### Services
 
 ## $mdExpansionPanel
@@ -262,5 +290,178 @@ Expand and collapse Expansion Panel using its `md-component-id`
 $mdExpansionPanel('theComponentId').then(function (instance) {
   instance.expand();
   instance.contract();
+  instance.remove();
+});
+```
+
+#### Methods
+
+### $mdExpansionPanel
+
+Get an instance of the expansion panel by its component id
+
+**Parameters**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| componentId | string | <p>the component id used on the element</p>  |
+
+**Returns**
+
+| Param | Details |
+| :--: | :--: |
+| promise | <p>a promise that will resolve with the panel instance</p>  |
+
+
+### $mdExpansionPanel#expand
+
+Exapnd Panel
+
+**Returns**
+
+| Param | Details |
+| :--: | :--: |
+| promise | <p>a promise that will resolve when panel is done animating</p>  |
+
+
+### $mdExpansionPanel#collapse
+
+Collapse Panle
+
+**Returns**
+
+| Param | Details |
+| :--: | :--: |
+| promise | <p>a promise that will resolve when panel is done animating</p>  |
+
+
+### $mdExpansionPanel#remove
+
+Remove panel from document
+
+**Parameters**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| noAnimation | boolean= | <p>remove without closeing animation</p>  |
+
+**Returns**
+
+| Type | Details |
+| :--: | :--: |
+| promise | <p>a promise that will resolve when panel is done animating</p>  |
+
+
+
+
+
+
+## $mdExpansionPanelGroup
+
+Control expansion panels and allow for adding and registering panels from code
+
+```javascript
+$mdExpansionPanelGroup('theComponentId').then(function (instance) {
+  instance.register('name', {
+    templateUrl: 'template.html',
+    controller: 'Controller'
+  });
+
+  instance.add({
+    templateUrl: 'template.html',
+    controller: 'Controller'
+  }).then(function (panelCtrl) {
+    panelCtrl.expand();
+  });
+
+  instance.add('name', {locals: 'data'});
+  instance.remove('name');
+  instance.removeAll();
 });
 ```
+
+
+
+#### Methods
+
+### $mdExpansionPanelGroup
+
+Get an instance of the expansion panel group by its component id
+
+**Parameters**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| componentId | string | <p>the component id used on the element</p>  |
+
+**Returns**
+
+| Param | Details |
+| :--: | :--: |
+| promise | <p>a promise that will resolve with the panel group instance</p>  |
+
+
+### $mdExpansionPanelGroup#register
+
+register panel that can be added by the given name
+
+**Parameters**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| name | string | <p>the name you can use to add the template</p>  |
+| options.template | string= | <p>template string</p>  |
+| options.templateUrl | string= | <p>template url</p>  |
+| options.controller | string= | <p>controller string or function</p>  |
+| options.controllerAs | string= | <p>controller as name</p>  |
+| options.locals | object= | <p>locals for injection</p>  |
+
+
+### $mdExpansionPanelGroup#add
+
+add a panel by either passing in a registered name or object. You can also pass in locals
+
+**Parameters**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| options | string|object | <p>registered panel name or object with details</p>  |
+| locals | object= | <p>object of locals to inject intp controller</p>  |
+
+**Options Object**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| options.template | string= | <p>template string</p>  |
+| options.templateUrl | string= | <p>template url</p>  |
+| options.controller | string= | <p>controller string or function</p>  |
+| options.controllerAs | string= | <p>controller as name</p>  |
+| options.locals | object= | <p>locals for injection</p>  |
+
+**Returns**
+
+| Param | Details |
+| :--: | :--: |
+| promise | <p>a promise that will return the panel instance</p>  |
+
+
+### $mdExpansionPanelGroup#remove
+
+Remove a panel form the group
+
+**Parameters**
+
+| Param | Type | Details |
+| :--: | :--: | :--: |
+| componentId | string | <p>component id on panel</p>  |
+
+**Returns**
+
+| Type | Details |
+| :--: | :--: |
+| promise | <p>a promise that will resolve when panel is done animating</p>  |
+
+
+### $mdExpansionPanelGroup#removeAll
+
+Remove all panels form the group

src/expansionPanels.scss

@@ -6,6 +6,7 @@ md-expansion-panel {
   outline: none;
   margin-top: 0;
   margin-bottom: 0;
+  padding: 0;
   box-shadow: 0 -1px 0 #e5e5e5,
               0 0 2px rgba(0,0,0,.12),
               0 2px 4px rgba(0,0,0,.24);