diff --git a/bower.json b/bower.json
index 1d713bd..cc29085 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "angular-material-expansion-panel",
- "version": "0.4.8",
+ "version": "0.5.0",
"description": "Material Design Expansion Panels.",
"main": [
"dist/md-expansion-panel.js",
diff --git a/dist/md-expansion-panel.css b/dist/md-expansion-panel.css
index f805b97..f16ae3f 100644
--- a/dist/md-expansion-panel.css
+++ b/dist/md-expansion-panel.css
@@ -14,8 +14,8 @@ md-expansion-panel {
md-expansion-panel md-expansion-panel-footer .md-expansion-panel-footer-container,
md-expansion-panel md-expansion-panel-header .md-expansion-panel-header-container {
border-color: #DDD; }
- md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon {
- color: #999; }
+ md-expansion-panel .md-expansion-panel-icon svg {
+ fill: #999; }
md-expansion-panel[disabled] md-expansion-panel-collapsed {
color: #DDD; }
md-expansion-panel:not(.md-open):not([disabled]):focus,
@@ -41,10 +41,10 @@ md-expansion-panel {
margin-top: 0; }
md-expansion-panel.md-close {
overflow: hidden; }
- md-expansion-panel.md-open {
+ md-expansion-panel:not(.md-no-animation).md-open {
-webkit-transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); }
- md-expansion-panel.md-close {
+ md-expansion-panel:not(.md-no-animation).md-close {
-webkit-transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1); }
@@ -74,7 +74,7 @@ md-expansion-panel-header .md-summary {
white-space: nowrap; }
/* --- Expansion Panel Collapsed ---- */
-md-expansion-panel-collapsed {
+md-expansion-panel md-expansion-panel-collapsed {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -84,38 +84,41 @@ md-expansion-panel-collapsed {
opacity: 1;
z-index: 2;
box-sizing: border-box; }
- md-expansion-panel-collapsed.md-absolute {
+ md-expansion-panel md-expansion-panel-collapsed.md-absolute {
position: absolute; }
- md-expansion-panel-collapsed.md-show {
- -webkit-transition: opacity 0.03s linear;
- transition: opacity 0.03s linear;
- -webkit-transition-delay: 0.03s;
- transition-delay: 0.03s; }
- md-expansion-panel-collapsed.md-hide {
- -webkit-transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
- transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
+ md-expansion-panel md-expansion-panel-collapsed.md-hide {
opacity: 0; }
+md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-show {
+ -webkit-transition: opacity 0.03s linear;
+ transition: opacity 0.03s linear; }
+
+md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-hide {
+ -webkit-transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1); }
+
/* --- Expansion Panel Expanded --- */
-md-expansion-panel-expanded {
+md-expansion-panel md-expansion-panel-expanded {
display: none;
min-height: 48px; }
- md-expansion-panel-expanded.md-show {
- -webkit-transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
- transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); }
- md-expansion-panel-expanded.md-hide {
- -webkit-transition: max-height 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
- transition: max-height 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.08s cubic-bezier(0.25, 0.8, 0.25, 1); }
- md-expansion-panel-expanded.md-show, md-expansion-panel-expanded.md-hide {
+ md-expansion-panel md-expansion-panel-expanded.md-show, md-expansion-panel md-expansion-panel-expanded.md-hide {
display: block; }
- md-expansion-panel-expanded.md-scroll-y {
+ md-expansion-panel md-expansion-panel-expanded.md-scroll-y {
overflow-y: auto; }
- md-expansion-panel-expanded.md-overflow {
+ md-expansion-panel md-expansion-panel-expanded.md-overflow {
overflow: hidden; }
- md-expansion-panel-expanded md-expansion-panel-content {
+ md-expansion-panel md-expansion-panel-expanded md-expansion-panel-content {
display: block;
padding: 16px 24px; }
+md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-show {
+ -webkit-transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); }
+
+md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-hide {
+ -webkit-transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1); }
+
/* --- Expansion Panel Header --- */
md-expansion-panel-header {
display: block;
@@ -162,26 +165,16 @@ md-expansion-panel-footer {
z-index: 2; }
/* --- expand icon --- */
-md-expansion-panel .md-expansion-panel-icon-container:first-child {
- padding-right: 12px; }
+md-expansion-panel:not(.md-no-animation) .md-expansion-panel-icon {
+ -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
-md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon:after {
- font-family: 'mdMaterialIcons';
- font-size: 18px;
- font-weight: 600;
- display: block;
- content: '\e315';
- position: relative;
- speak: none;
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
- transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
- transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
- transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
-
-md-expansion-panel.md-open > md-expansion-panel-collasped .md-expansion-panel-icon-container .md-expansion-panel-icon:after,
-md-expansion-panel.md-open > md-expansion-panel-header .md-expansion-panel-icon-container .md-expansion-panel-icon:after {
+md-expansion-panel .md-expansion-panel-icon:first-child {
+ margin-right: 18px; }
+
+md-expansion-panel.md-open .md-expansion-panel-icon {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
diff --git a/dist/md-expansion-panel.js b/dist/md-expansion-panel.js
index a4c8e44..a9f411d 100644
--- a/dist/md-expansion-panel.js
+++ b/dist/md-expansion-panel.js
@@ -10,6 +10,7 @@ angular
'material.core'
]);
}());
+(function(){"use strict";angular.module("material.components.expansionPanels").run(["$templateCache", function($templateCache) {$templateCache.put("icons/ic_keyboard_arrow_right_black_24px.svg","");}]);}());
(function(){"use strict";angular
.module('material.components.expansionPanels')
.directive('mdExpansionPanel', expansionPanelDirective);
@@ -177,9 +178,10 @@ function expansionPanelDirective() {
- function expand() {
+ function expand(options) {
if (isOpen === true || isDisabled === true) { return; }
isOpen = true;
+ options = options || {};
var deferred = $q.defer();
@@ -189,45 +191,57 @@ function expansionPanelDirective() {
$element.removeClass('md-close');
$element.addClass('md-open');
+ if (options.animation === false) {
+ $element.addClass('md-no-animation');
+ } else {
+ $element.removeClass('md-no-animation');
+ }
initEvents();
- collapsedCtrl.hide();
- expandedCtrl.show();
+ collapsedCtrl.hide(options);
+ expandedCtrl.show(options);
- if (headerCtrl) { headerCtrl.show(); }
- if (footerCtrl) { footerCtrl.show(); }
+ if (headerCtrl) { headerCtrl.show(options); }
+ if (footerCtrl) { footerCtrl.show(options); }
$timeout(function () {
deferred.resolve();
- }, ANIMATION_TIME);
+ }, options.animation === false ? 0 : ANIMATION_TIME);
return deferred.promise;
}
- function collapse() {
+ function collapse(options) {
if (isOpen === false) { return; }
isOpen = false;
+ options = options || {};
var deferred = $q.defer();
$element.addClass('md-close');
$element.removeClass('md-open');
+ if (options.animation === false) {
+ $element.addClass('md-no-animation');
+ } else {
+ $element.removeClass('md-no-animation');
+ }
killEvents();
- collapsedCtrl.show();
- expandedCtrl.hide();
+ collapsedCtrl.show(options);
+ expandedCtrl.hide(options);
- if (headerCtrl) { headerCtrl.hide(); }
- if (footerCtrl) { footerCtrl.hide(); }
+ if (headerCtrl) { headerCtrl.hide(options); }
+ if (footerCtrl) { footerCtrl.hide(options); }
$timeout(function () {
deferred.resolve();
- }, ANIMATION_TIME);
+ }, options.animation === false ? 0 : ANIMATION_TIME);
return deferred.promise;
}
- function remove(noAnimation) {
+ function remove(options) {
+ options = options || {};
var deferred = $q.defer();
if (vm.epxansionPanelGroupCtrl) {
@@ -239,7 +253,7 @@ function expansionPanelDirective() {
deregister = undefined;
}
- if (noAnimation === true || isOpen === false) {
+ if (options.animation === false || isOpen === false) {
$scope.$destroy();
$element.remove();
deferred.resolve();
@@ -427,8 +441,8 @@ function expansionPanelDirective() {
* @example
* $mdExpansionPanel('comonentId').then(function (instance) {
* instance.exapand();
- * instance.collapse();
- * instance.remove();
+ * instance.collapse({animation: false});
+ * instance.remove({animation: false});
* instance.onRemove(function () {});
* });
*/
@@ -502,18 +516,20 @@ function expansionPanelCollapsedDirective($animateCss) {
});
- function hide() {
+ function hide(options) {
// set width to maintian demensions when element is set to postion: absolute
element.css('width', element[0].offsetWidth + 'px');
-
// set min height so the expansion panel does not shrink when collapsed element is set to position: absolute
expansionPanelCtrl.$element.css('min-height', element[0].offsetHeight + 'px');
- $animateCss(element, {
+ var animationParams = {
addClass: 'md-absolute md-hide',
from: {opacity: 1},
to: {opacity: 0}
- })
+ };
+ if (options.animation === false) { animationParams.duration = 0; }
+ void 0;
+ $animateCss(element, animationParams)
.start()
.then(function () {
element.removeClass('md-hide');
@@ -522,17 +538,18 @@ function expansionPanelCollapsedDirective($animateCss) {
}
- function show() {
+ function show(options) {
element.css('display', '');
-
// set width to maintian demensions when element is set to postion: absolute
element.css('width', element[0].parentNode.offsetWidth + 'px');
- $animateCss(element, {
+ var animationParams = {
addClass: 'md-show',
from: {opacity: 0},
to: {opacity: 1}
- })
+ };
+ if (options.animation === false) { animationParams.duration = 0; }
+ $animateCss(element, animationParams)
.start()
.then(function () {
element.removeClass('md-absolute md-show');
@@ -589,15 +606,17 @@ function expansionPanelExpandedDirective($animateCss) {
- function hide() {
+ function hide(options) {
var height = setHeight ? setHeight : element[0].scrollHeight + 'px';
element.addClass('md-hide md-overflow');
element.removeClass('md-show md-scroll-y');
- $animateCss(element, {
+ var animationParams = {
from: {'max-height': height, opacity: 1},
to: {'max-height': '48px', opacity: 0}
- })
+ };
+ if (options.animation === false) { animationParams.duration = 0; }
+ $animateCss(element, animationParams)
.start()
.then(function () {
element.css('display', 'none');
@@ -606,17 +625,18 @@ function expansionPanelExpandedDirective($animateCss) {
}
- function show() {
+ function show(options) {
element.css('display', '');
element.addClass('md-show md-overflow');
-
// use passed in height or the contents height
var height = setHeight ? setHeight : element[0].scrollHeight + 'px';
- $animateCss(element, {
+ var animationParams = {
from: {'max-height': '48px', opacity: 0},
to: {'max-height': height, opacity: 1}
- })
+ };
+ if (options.animation === false) { animationParams.duration = 0; }
+ $animateCss(element, animationParams)
.start()
.then(function () {
@@ -827,13 +847,13 @@ function expansionPanelGroupDirective() {
closeOthers(componentId);
}
- function remove(componentId, noAnimation) {
- return panels[componentId].remove(noAnimation);
+ function remove(componentId, options) {
+ return panels[componentId].remove(options);
}
- function removeAll(noAnimation) {
+ function removeAll(options) {
Object.keys(panels).forEach(function (panelId) {
- panels[panelId].remove(noAnimation);
+ panels[panelId].remove(options);
});
}
@@ -893,8 +913,8 @@ function expansionPanelGroupDirective() {
* controller: 'Controller'
* });
* instance.add('cardComponentId', {local: localData});
- * instance.remove('cardComponentId');
- * instance.removeAll();
+ * instance.remove('cardComponentId', {animation: false});
+ * instance.removeAll({animation: false});
* });
*/
expansionPanelGroupService.$inject = ['$mdComponentRegistry', '$mdUtil', '$mdExpansionPanel', '$templateRequest', '$rootScope', '$compile', '$controller', '$q', '$log'];
@@ -965,12 +985,12 @@ function expansionPanelGroupService($mdComponentRegistry, $mdUtil, $mdExpansionP
instance.register(name, options);
}
- function remove(componentId) {
- return instance.remove(componentId);
+ function remove(componentId, options) {
+ return instance.remove(componentId, options);
}
- function removeAll(noAnimation) {
- instance.removeAll(noAnimation);
+ function removeAll(options) {
+ instance.removeAll(options);
}
function onChange(callback) {
@@ -1159,4 +1179,30 @@ function expansionPanelHeaderDirective() {
}
}
}
+}());
+(function(){"use strict";angular
+ .module('material.components.expansionPanels')
+ .directive('mdExpansionPanelIcon', mdExpansionPanelIconDirective);
+
+
+
+/**
+ * @ngdoc directive
+ * @name mdExpansionPanelIcon
+ * @module material.components.expansionPanels
+ *
+ * @restrict E
+ *
+ * @description
+ * `mdExpansionPanelIcon` can be used in both `md-expansion-panel-collapsed` and `md-expansion-panel-header` as the first or last element.
+ * Adding this will provide a animated arrow for expanded and collapsed states
+ **/
+function mdExpansionPanelIconDirective() {
+ var directive = {
+ restrict: 'E',
+ template: '',
+ replace: true
+ };
+ return directive;
+}
}());
\ No newline at end of file
diff --git a/dist/md-expansion-panel.min.css b/dist/md-expansion-panel.min.css
index e028e38..1d1ffe4 100644
--- a/dist/md-expansion-panel.min.css
+++ b/dist/md-expansion-panel.min.css
@@ -1 +1 @@
-md-expansion-panel,md-expansion-panel .md-expansion-panel-footer-container,md-expansion-panel .md-expansion-panel-header-container,md-expansion-panel md-expansion-panel-collapsed{background:#fff}md-expansion-panel .md-expansion-panel-footer-container .md-summary,md-expansion-panel .md-expansion-panel-footer-container .md-title,md-expansion-panel .md-expansion-panel-header-container .md-summary,md-expansion-panel .md-expansion-panel-header-container .md-title,md-expansion-panel md-expansion-panel-collapsed .md-summary,md-expansion-panel md-expansion-panel-collapsed .md-title{color:#333}md-expansion-panel md-expansion-panel-footer .md-expansion-panel-footer-container,md-expansion-panel md-expansion-panel-header .md-expansion-panel-header-container{border-color:#ddd}md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon{color:#999}md-expansion-panel[disabled] md-expansion-panel-collapsed{color:#ddd}md-expansion-panel:not(.md-open):not([disabled]):focus,md-expansion-panel:not(.md-open):not([disabled]):focus md-expansion-panel-collapsed{background:#eee}.layout-padding>md-expansion-panel-group{padding:0}md-expansion-panel{display:block;position:relative;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)}md-expansion-panel.md-open{margin-top:16px;margin-bottom:16px}md-expansion-panel.md-open:first-of-type{margin-top:0}md-expansion-panel.md-close{overflow:hidden}md-expansion-panel.md-open{-webkit-transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1);transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel.md-close{-webkit-transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1);transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-collapsed .md-title,md-expansion-panel-header .md-title{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:16px;font-weight:600;min-width:80px;max-width:184px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed .md-summary,md-expansion-panel-header .md-summary{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;opacity:1;z-index:1;box-sizing:border-box}md-expansion-panel-collapsed.md-absolute{position:absolute}md-expansion-panel-collapsed.md-show{-webkit-transition:opacity .03s linear;transition:opacity .03s linear;-webkit-transition-delay:.03s;transition-delay:.03s}md-expansion-panel-collapsed.md-hide{-webkit-transition:opacity .1s cubic-bezier(.25,.8,.25,1);transition:opacity .1s cubic-bezier(.25,.8,.25,1);opacity:0}md-expansion-panel-expanded{display:none;min-height:48px}md-expansion-panel-expanded.md-show{-webkit-transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1);transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-expanded.md-hide{-webkit-transition:max-height .08s cubic-bezier(.25,.8,.25,1),opacity .08s cubic-bezier(.25,.8,.25,1);transition:max-height .08s cubic-bezier(.25,.8,.25,1),opacity .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-expanded.md-hide,md-expansion-panel-expanded.md-show{display:block}md-expansion-panel-expanded.md-scroll-y{overflow-y:auto}md-expansion-panel-expanded.md-overflow{overflow:hidden}md-expansion-panel-expanded md-expansion-panel-content{display:block;padding:16px 24px}md-expansion-panel-header{display:block;position:relative;outline:none}md-expansion-panel-header .md-expansion-panel-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;box-sizing:border-box;border-bottom:1px solid;-webkit-box-align:center;-ms-flex-align:center;align-items:center}md-expansion-panel-header.md-stick .md-expansion-panel-header-container{position:fixed;z-index:1;-webkit-animation:a .3s ease-out both;animation:a .3s ease-out both}md-expansion-panel-header.md-no-stick .md-expansion-panel-header-container{-webkit-animation:b .3s ease-out both;animation:b .3s ease-out both}md-expansion-panel-footer{display:block;position:relative}md-expansion-panel-footer.md-hide,md-expansion-panel-footer.md-show{display:block}md-expansion-panel-footer .md-expansion-panel-footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;border-top:1px solid;box-sizing:border-box}md-expansion-panel-footer.md-stick .md-expansion-panel-footer-container{position:fixed;z-index:1}md-expansion-panel .md-expansion-panel-icon-container:first-child{padding-right:12px}md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon:after{font-family:mdMaterialIcons;font-size:18px;font-weight:600;display:block;content:'\e315';position:relative;speak:none;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1)}md-expansion-panel.md-open>md-expansion-panel-collasped .md-expansion-panel-icon-container .md-expansion-panel-icon:after,md-expansion-panel.md-open>md-expansion-panel-header .md-expansion-panel-icon-container .md-expansion-panel-icon:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@-webkit-keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@-webkit-keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}}@keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}}
\ No newline at end of file
+md-expansion-panel,md-expansion-panel .md-expansion-panel-footer-container,md-expansion-panel .md-expansion-panel-header-container,md-expansion-panel md-expansion-panel-collapsed{background:#fff}md-expansion-panel .md-expansion-panel-footer-container .md-summary,md-expansion-panel .md-expansion-panel-footer-container .md-title,md-expansion-panel .md-expansion-panel-header-container .md-summary,md-expansion-panel .md-expansion-panel-header-container .md-title,md-expansion-panel md-expansion-panel-collapsed .md-summary,md-expansion-panel md-expansion-panel-collapsed .md-title{color:#333}md-expansion-panel md-expansion-panel-footer .md-expansion-panel-footer-container,md-expansion-panel md-expansion-panel-header .md-expansion-panel-header-container{border-color:#ddd}md-expansion-panel .md-expansion-panel-icon svg{fill:#999}md-expansion-panel[disabled] md-expansion-panel-collapsed{color:#ddd}md-expansion-panel:not(.md-open):not([disabled]):focus,md-expansion-panel:not(.md-open):not([disabled]):focus md-expansion-panel-collapsed{background:#eee}.layout-padding>md-expansion-panel-group{padding:0}md-expansion-panel{display:block;position:relative;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)}md-expansion-panel.md-open{margin-top:16px;margin-bottom:16px}md-expansion-panel.md-open:first-of-type{margin-top:0}md-expansion-panel.md-close{overflow:hidden}md-expansion-panel:not(.md-no-animation).md-open{-webkit-transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1);transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel:not(.md-no-animation).md-close{-webkit-transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1);transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-collapsed .md-title,md-expansion-panel-header .md-title{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:16px;font-weight:600;min-width:80px;max-width:184px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed .md-summary,md-expansion-panel-header .md-summary{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel md-expansion-panel-collapsed{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;opacity:1;z-index:1;box-sizing:border-box}md-expansion-panel md-expansion-panel-collapsed.md-absolute{position:absolute}md-expansion-panel md-expansion-panel-collapsed.md-hide{opacity:0}md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-show{-webkit-transition:opacity .03s linear;transition:opacity .03s linear}md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-hide{-webkit-transition:opacity .1s cubic-bezier(.25,.8,.25,1);transition:opacity .1s cubic-bezier(.25,.8,.25,1)}md-expansion-panel md-expansion-panel-expanded{display:none;min-height:48px}md-expansion-panel md-expansion-panel-expanded.md-hide,md-expansion-panel md-expansion-panel-expanded.md-show{display:block}md-expansion-panel md-expansion-panel-expanded.md-scroll-y{overflow-y:auto}md-expansion-panel md-expansion-panel-expanded.md-overflow{overflow:hidden}md-expansion-panel md-expansion-panel-expanded md-expansion-panel-content{display:block;padding:16px 24px}md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-show{-webkit-transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1);transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-hide{-webkit-transition:max-height .06s cubic-bezier(.25,.8,.25,1),opacity .06s cubic-bezier(.25,.8,.25,1);transition:max-height .06s cubic-bezier(.25,.8,.25,1),opacity .06s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-header{display:block;position:relative;outline:none}md-expansion-panel-header .md-expansion-panel-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;box-sizing:border-box;border-bottom:1px solid;-webkit-box-align:center;-ms-flex-align:center;align-items:center}md-expansion-panel-header.md-stick .md-expansion-panel-header-container{position:fixed;z-index:1;-webkit-animation:a .3s ease-out both;animation:a .3s ease-out both}md-expansion-panel-header.md-no-stick .md-expansion-panel-header-container{-webkit-animation:b .3s ease-out both;animation:b .3s ease-out both}md-expansion-panel-footer{display:block;position:relative}md-expansion-panel-footer.md-hide,md-expansion-panel-footer.md-show{display:block}md-expansion-panel-footer .md-expansion-panel-footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;border-top:1px solid;box-sizing:border-box}md-expansion-panel-footer.md-stick .md-expansion-panel-footer-container{position:fixed;z-index:1}md-expansion-panel:not(.md-no-animation) .md-expansion-panel-icon{-webkit-transition:-webkit-transform .6s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .6s cubic-bezier(.25,.8,.25,1);transition:transform .6s cubic-bezier(.25,.8,.25,1);transition:transform .6s cubic-bezier(.25,.8,.25,1),-webkit-transform .6s cubic-bezier(.25,.8,.25,1)}md-expansion-panel .md-expansion-panel-icon:first-child{margin-right:18px}md-expansion-panel.md-open .md-expansion-panel-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@-webkit-keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@-webkit-keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}}@keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}}
\ No newline at end of file
diff --git a/dist/md-expansion-panel.min.js b/dist/md-expansion-panel.min.js
index 4753678..96e2e3f 100644
--- a/dist/md-expansion-panel.min.js
+++ b/dist/md-expansion-panel.min.js
@@ -1 +1 @@
-!function(){"use strict";angular.module("material.components.expansionPanels",["material.core"])}(),function(){"use strict";function e(){function e(e,n){var o="Invalid HTML for md-expansion-panel: ";if(e.attr("tabindex",n.tabindex||"0"),null===e[0].querySelector("md-expansion-panel-collapsed"))throw Error(o+"Expected a child element of `md-epxansion-panel-collapsed`");if(null===e[0].querySelector("md-expansion-panel-expanded"))throw Error(o+"Expected a child element of `md-epxansion-panel-expanded`");return function(e,n,o,t){var i=t[0],r=t[1];r&&(i.epxansionPanelGroupCtrl=r,r.addPanel(i.componentId,{expand:i.expand,collapse:i.collapse,remove:i.remove,onRemove:i.onRemove,destroy:i.destroy}))}}function o(e,o,t,i,r,a,s,c,l,d,u){function p(e){var n=a.KEY_CODE;switch(e.keyCode){case n.ENTER:m();break;case n.ESCAPE:f()}}function m(){if(U!==!0&&T!==!0){U=!0;var e=d.defer();return O.epxansionPanelGroupCtrl&&O.epxansionPanelGroupCtrl.expandPanel(O.componentId),o.removeClass("md-close"),o.addClass("md-open"),C(),b.hide(),I.show(),S&&S.show(),N&&N.show(),l(function(){e.resolve()},n),e.promise}}function f(){if(U!==!1){U=!1;var e=d.defer();return o.addClass("md-close"),o.removeClass("md-open"),$(),b.show(),I.hide(),S&&S.hide(),N&&N.hide(),l(function(){e.resolve()},n),e.promise}}function v(t){var i=d.defer();return O.epxansionPanelGroupCtrl&&O.epxansionPanelGroupCtrl.removePanel(O.componentId),"function"==typeof q&&(q(),q=void 0),t===!0||U===!1?(e.$destroy(),o.remove(),i.resolve(),g()):(f(),l(function(){e.$destroy(),o.remove(),i.resolve(),g()},n)),i.promise}function h(e){z=e}function g(){"function"==typeof z&&(z(),z=void 0)}function x(){e.$destroy()}function C(){(N&&N.noSticky!==!0||S&&S.noSticky!==!0)&&(j=e.$watch(function(){return o[0].offsetTop},F,!0),H=e.$watch(function(){return o[0].offsetWidth},_,!0),G=s.getNearestContentElement(o),"MD-CONTENT"===G.nodeName?(A=y(G),angular.element(G).on("scroll",F)):A=void 0,I.setHeight===!0&&I.$element.on("scroll",F),angular.element(i).on("scroll",F).on("resize",F).on("resize",_))}function $(){"function"==typeof j&&(j(),j=void 0),"function"==typeof H&&(H(),H=void 0),G&&"MD-CONTENT"===G.nodeName&&angular.element(G).off("scroll",F),I.setHeight===!0&&I.$element.off("scroll",F),angular.element(i).off("scroll",F).off("resize",F).off("resize",_)}function y(e){for(var n=e.parentNode;n&&n!==document;){if(E(n,"transform"))return n;n=n.parentNode}}function E(e,n){var o=!1;if(e){var t=i.getComputedStyle(e);o=void 0!==t[n]&&"none"!==t[n]}return o}function w(e){var n,o,t;t=I.setHeight===!0?I.$element[0].getBoundingClientRect():G.getBoundingClientRect();var i=A?A.getBoundingClientRect().top:0;n=Math.max(t.top,0),o=n+t.height,N&&N.noSticky===!1&&N.onScroll(n,o,i),S&&S.noSticky===!1&&S.onScroll(n,o,i)}function P(){var e=o[0].offsetWidth;N&&N.noSticky===!1&&N.onResize(e),S&&S.noSticky===!1&&S.onResize(e)}function k(n){B=s.createBackdrop(e),B[0].tabIndex=-1,"function"==typeof n&&B.on("click",n),u.enter(B,o.parent(),null,{duration:0}),o.css("z-index",60)}function R(){B&&(B.remove(),B.off("click"),B=void 0,o.css("z-index",""))}var b,I,S,N,q,G,j,H,z,A,B,O=this,U=!1,T=!1,F=r.throttle(w),_=r.throttle(P);O.registerCollapsed=function(e){b=e},O.registerExpanded=function(e){I=e},O.registerHeader=function(e){S=e},O.registerFooter=function(e){N=e},void 0===t.mdComponentId&&t.$set("mdComponentId","_expansion_panel_id_"+s.nextUid()),O.$element=o,O.componentId=t.mdComponentId,O.expand=m,O.collapse=f,O.remove=v,O.destroy=x,O.onRemove=h,t.$observe("disabled",function(e){T="string"==typeof e&&"false"!==e,T===!0?o.attr("tabindex","-1"):o.attr("tabindex","0")}),o.on("focus",function(e){o.on("keydown",p)}).on("blur",function(e){o.off("keydown",p)}),e.$panel={collapse:f,expand:m,remove:v},e.$on("$destroy",function(){R(),"function"==typeof q&&(q(),q=void 0),$()}),t.mdComponentId&&(q=c.register({expand:m,collapse:f,remove:v,onRemove:h,addClickCatcher:k,removeClickCatcher:R,componentId:t.mdComponentId},t.mdComponentId))}var t={restrict:"E",require:["mdExpansionPanel","?^^mdExpansionPanelGroup"],scope:!0,compile:e,controller:["$scope","$element","$attrs","$window","$$rAF","$mdConstant","$mdUtil","$mdComponentRegistry","$timeout","$q","$animate",o]};return t}angular.module("material.components.expansionPanels").directive("mdExpansionPanel",e);var n=180}(),function(){"use strict";function e(e,n,o){function t(t){var i=e.get(t);return i?i:void o.error(n.supplant(r,[t||""]))}function i(n){return e.when(n)["catch"](o.error)}var r="ExpansionPanel '{0}' is not available! Did you use md-component-id='{0}'?",a={find:t,waitFor:i};return function(e){return void 0===e?a:t(e)}}angular.module("material.components.expansionPanels").factory("$mdExpansionPanel",e),e.$inject=["$mdComponentRegistry","$mdUtil","$log"]}(),function(){"use strict";function e(e){function n(n,o,t,i){function r(){o.css("width",o[0].offsetWidth+"px"),i.$element.css("min-height",o[0].offsetHeight+"px"),e(o,{addClass:"md-absolute md-hide",from:{opacity:1},to:{opacity:0}}).start().then(function(){o.removeClass("md-hide"),o.css("display","none")})}function a(){o.css("display",""),o.css("width",o[0].parentNode.offsetWidth+"px"),e(o,{addClass:"md-show",from:{opacity:0},to:{opacity:1}}).start().then(function(){o.removeClass("md-absolute md-show"),o.css("width",""),i.$element.css("min-height","")})}i.registerCollapsed({show:a,hide:r}),o.on("click",function(){i.expand()})}var o={restrict:"E",require:"^^mdExpansionPanel",link:n};return o}angular.module("material.components.expansionPanels").directive("mdExpansionPanelCollapsed",e),e.$inject=["$animateCss"]}(),function(){"use strict";function e(e){function n(n,o,t,i){function r(){var n=s?s:o[0].scrollHeight+"px";o.addClass("md-hide md-overflow"),o.removeClass("md-show md-scroll-y"),e(o,{from:{"max-height":n,opacity:1},to:{"max-height":"48px",opacity:0}}).start().then(function(){o.css("display","none"),o.removeClass("md-hide")})}function a(){o.css("display",""),o.addClass("md-show md-overflow");var n=s?s:o[0].scrollHeight+"px";e(o,{from:{"max-height":"48px",opacity:0},to:{"max-height":n,opacity:1}}).start().then(function(){void 0!==s?o.addClass("md-scroll-y"):o.css("max-height","none"),o.removeClass("md-overflow")})}var s=t.height||void 0;void 0!==s&&(s=s.replace("px","")+"px"),i.registerExpanded({show:a,hide:r,setHeight:void 0!==s,$element:o})}var o={restrict:"E",require:"^^mdExpansionPanel",link:n};return o}angular.module("material.components.expansionPanels").directive("mdExpansionPanelExpanded",e),e.$inject=["$animateCss"]}(),function(){"use strict";function e(){function e(e,n,o,t){function i(){}function r(){c()}function a(e,o,i){var r,a,s=n[0].getBoundingClientRect();s.bottom>o?(r=u[0].offsetHeight,a=o-r-i,a