' +
- '',
+ '',
compile: compile
};
@@ -6759,28 +8606,57 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
// **********************************************************
function compile (tElement, tAttrs) {
+ tAttrs.$set('tabindex', tAttrs.tabindex || '0');
+ tAttrs.$set('type', 'checkbox');
+ tAttrs.$set('role', tAttrs.type);
+
+ return {
+ pre: function(scope, element) {
+ // Attach a click handler during preLink, in order to immediately stop propagation
+ // (especially for ng-click) when the checkbox is disabled.
+ element.on('click', function(e) {
+ if (this.hasAttribute('disabled')) {
+ e.stopImmediatePropagation();
+ }
+ });
+ },
+ post: postLink
+ };
+
+ function postLink(scope, element, attr, ctrls) {
+ var isIndeterminate;
+ var containerCtrl = ctrls[0];
+ var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
+ var formCtrl = ctrls[2];
+
+ if (containerCtrl) {
+ var isErrorGetter = containerCtrl.isErrorGetter || function() {
+ return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
+ };
- tAttrs.type = 'checkbox';
- tAttrs.tabindex = tAttrs.tabindex || '0';
- tElement.attr('role', tAttrs.type);
+ containerCtrl.input = element;
- // Attach a click handler in compile in order to immediately stop propagation
- // (especially for ng-click) when the checkbox is disabled.
- tElement.on('click', function(event) {
- if (this.hasAttribute('disabled')) {
- event.stopImmediatePropagation();
+ scope.$watch(isErrorGetter, containerCtrl.setInvalid);
}
- });
- return function postLink(scope, element, attr, ngModelCtrl) {
- ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
$mdTheming(element);
+ // Redirect focus events to the root element, because IE11 is always focusing the container element instead
+ // of the md-checkbox element. This causes issues when using ngModelOptions: `updateOnBlur`
+ element.children().on('focus', function() {
+ element.focus();
+ });
+
+ if ($mdUtil.parseAttributeBoolean(attr.mdIndeterminate)) {
+ setIndeterminateState();
+ scope.$watch(attr.mdIndeterminate, setIndeterminateState);
+ }
+
if (attr.ngChecked) {
- scope.$watch(
- scope.$eval.bind(scope, attr.ngChecked),
- ngModelCtrl.$setViewValue.bind(ngModelCtrl)
- );
+ scope.$watch(scope.$eval.bind(scope, attr.ngChecked), function(value) {
+ ngModelCtrl.$setViewValue(value);
+ ngModelCtrl.$render();
+ });
}
$$watchExpr('ngDisabled', 'tabindex', {
@@ -6798,17 +8674,10 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
0: {}
}, attr, [ngModelCtrl]);
- scope.mouseActive = false;
element.on('click', listener)
.on('keypress', keypressHandler)
- .on('mousedown', function() {
- scope.mouseActive = true;
- $timeout(function() {
- scope.mouseActive = false;
- }, 100);
- })
.on('focus', function() {
- if (scope.mouseActive === false) {
+ if ($mdInteraction.getLastInteractionType() === 'keyboard') {
element.addClass('md-focused');
}
})
@@ -6832,16 +8701,15 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
var keyCode = ev.which || ev.keyCode;
if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
ev.preventDefault();
-
- if (!element.hasClass('md-focused')) {
- element.addClass('md-focused');
- }
-
+ element.addClass('md-focused');
listener(ev);
}
}
+
function listener(ev) {
- if (element[0].hasAttribute('disabled')) {
+ // skipToggle boolean is used by the switch directive to prevent the click event
+ // when releasing the drag. There will be always a click if releasing the drag over the checkbox
+ if (element[0].hasAttribute('disabled') || scope.skipToggle) {
return;
}
@@ -6849,22 +8717,26 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
// Toggle the checkbox value...
var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
- ngModelCtrl.$setViewValue( viewValue, ev && ev.type);
+ ngModelCtrl.$setViewValue(viewValue, ev && ev.type);
ngModelCtrl.$render();
});
}
function render() {
- if(ngModelCtrl.$viewValue) {
- element.addClass(CHECKED_CSS);
- } else {
- element.removeClass(CHECKED_CSS);
+ // Cast the $viewValue to a boolean since it could be undefined
+ element.toggleClass('md-checked', !!ngModelCtrl.$viewValue && !isIndeterminate);
+ }
+
+ function setIndeterminateState(newValue) {
+ isIndeterminate = newValue !== false;
+ if (isIndeterminate) {
+ element.attr('aria-checked', 'mixed');
}
+ element.toggleClass('md-indeterminate', isIndeterminate);
}
- };
+ }
}
}
-MdCheckboxDirective.$inject = ["inputDirective", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$timeout"];
})();
(function(){
@@ -6886,3157 +8758,9514 @@ angular.module('material.components.chips', [
(function(){
"use strict";
-/**
- * @ngdoc module
- * @name material.components.content
- *
- * @description
- * Scrollable content
- */
-angular.module('material.components.content', [
- 'material.core'
-])
- .directive('mdContent', mdContentDirective);
-
-/**
- * @ngdoc directive
- * @name mdContent
- * @module material.components.content
- *
- * @restrict E
- *
- * @description
- *
- * The `` directive is a container element useful for scrollable content. It achieves
- * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.
- *
- * In general, `` components are not designed to be nested inside one another. If
- * possible, it is better to make them siblings. This often results in a better user experience as
- * having nested scrollbars may confuse the user.
- *
- * ## Troubleshooting
- *
- * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's
- * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
- * SVG icons and some other components.
- *
- * @usage
- *
- * Add the `[layout-padding]` attribute to make the content padded.
- *
- *
- *
- * Lorem ipsum dolor sit amet, ne quod novum mei.
- *
- *
- *
- */
-
-function mdContentDirective($mdTheming) {
- return {
- restrict: 'E',
- controller: ['$scope', '$element', ContentController],
- link: function(scope, element, attr) {
- var node = element[0];
-
- $mdTheming(element);
- scope.$broadcast('$mdContentLoaded', element);
-
- iosScrollFix(element[0]);
- }
- };
-
- function ContentController($scope, $element) {
- this.$scope = $scope;
- this.$element = $element;
- }
-}
-mdContentDirective.$inject = ["$mdTheming"];
-
-function iosScrollFix(node) {
- // IOS FIX:
- // If we scroll where there is no more room for the webview to scroll,
- // by default the webview itself will scroll up and down, this looks really
- // bad. So if we are scrolling to the very top or bottom, add/subtract one
- angular.element(node).on('$md.pressdown', function(ev) {
- // Only touch events
- if (ev.pointer.type !== 't') return;
- // Don't let a child content's touchstart ruin it for us.
- if (ev.$materialScrollFixed) return;
- ev.$materialScrollFixed = true;
-
- if (node.scrollTop === 0) {
- node.scrollTop = 1;
- } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
- node.scrollTop -= 1;
- }
- });
-}
-
-})();
-(function(){
-"use strict";
-
-(function() {
- 'use strict';
+(function () {
+ "use strict";
/**
- * @ngdoc module
- * @name material.components.datepicker
- * @description Datepicker
+ * Use a RegExp to check if the `md-colors=""` is static string
+ * or one that should be observed and dynamically interpolated.
*/
- angular.module('material.components.datepicker', [
- 'material.core',
- 'material.components.icon',
- 'material.components.virtualRepeat'
- ]).directive('mdCalendar', calendarDirective);
-
-
- // POST RELEASE
- // TODO(jelbourn): Mac Cmd + left / right == Home / End
- // TODO(jelbourn): Clicking on the month label opens the month-picker.
- // TODO(jelbourn): Minimum and maximum date
- // TODO(jelbourn): Refactor month element creation to use cloneNode (performance).
- // TODO(jelbourn): Define virtual scrolling constants (compactness) users can override.
- // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat)
- // TODO(jelbourn): Scroll snapping (virtual repeat)
- // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat)
- // TODO(jelbourn): Month headers stick to top when scrolling.
- // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.
- // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live
- // announcement and key handling).
- // Read-only calendar (not just date-picker).
+ MdColorsDirective.$inject = ["$mdColors", "$mdUtil", "$log", "$parse"];
+ MdColorsService.$inject = ["$mdTheming", "$mdUtil", "$log"];
+ var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/;
+ var colorPalettes = null;
/**
- * Height of one calendar month tbody. This must be made known to the virtual-repeat and is
- * subsequently used for scrolling to specific months.
+ * @ngdoc module
+ * @name material.components.colors
+ *
+ * @description
+ * Define $mdColors service and a `md-colors=""` attribute directive
*/
- var TBODY_HEIGHT = 265;
+ angular
+ .module('material.components.colors', ['material.core'])
+ .directive('mdColors', MdColorsDirective)
+ .service('$mdColors', MdColorsService);
/**
- * Height of a calendar month with a single row. This is needed to calculate the offset for
- * rendering an extra month in virtual-repeat that only contains one row.
+ * @ngdoc service
+ * @name $mdColors
+ * @module material.components.colors
+ *
+ * @description
+ * With only defining themes, one couldn't get non ngMaterial elements colored with Material colors,
+ * `$mdColors` service is used by the md-color directive to convert the 1..n color expressions to RGBA values and will apply
+ * those values to element as CSS property values.
+ *
+ * @usage
+ *
+ * angular.controller('myCtrl', function ($mdColors) {
+ * var color = $mdColors.getThemeColor('myTheme-red-200-0.5');
+ * ...
+ * });
+ *
+ *
*/
- var TBODY_SINGLE_ROW_HEIGHT = 45;
+ function MdColorsService($mdTheming, $mdUtil, $log) {
+ colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);
- function calendarDirective() {
+ // Publish service instance
return {
- template:
- '
' +
- '
' +
- '' +
- '
' +
- '' +
- '
' +
- '' +
- '
',
- scope: {
- minDate: '=mdMinDate',
- maxDate: '=mdMaxDate',
- dateFilter: '=mdDateFilter',
- },
- require: ['ngModel', 'mdCalendar'],
- controller: CalendarCtrl,
- controllerAs: 'ctrl',
- bindToController: true,
- link: function(scope, element, attrs, controllers) {
- var ngModelCtrl = controllers[0];
- var mdCalendarCtrl = controllers[1];
- mdCalendarCtrl.configureNgModel(ngModelCtrl);
- }
+ applyThemeColors: applyThemeColors,
+ getThemeColor: getThemeColor,
+ hasTheme: hasTheme
};
- }
-
- /** Class applied to the selected date cell/. */
- var SELECTED_DATE_CLASS = 'md-calendar-selected-date';
- /** Class applied to the focused date cell/. */
- var FOCUSED_DATE_CLASS = 'md-focus';
+ // ********************************************
+ // Internal Methods
+ // ********************************************
- /** Next identifier for calendar instance. */
- var nextUniqueId = 0;
+ /**
+ * @ngdoc method
+ * @name $mdColors#applyThemeColors
+ *
+ * @description
+ * Gets a color json object, keys are css properties and values are string of the wanted color
+ * Then calculate the rgba() values based on the theme color parts
+ *
+ * @param {DOMElement} element the element to apply the styles on.
+ * @param {object} colorExpression json object, keys are css properties and values are string of the wanted color,
+ * for example: `{color: 'red-A200-0.3'}`.
+ *
+ * @usage
+ *
+ * app.directive('myDirective', function($mdColors) {
+ * return {
+ * ...
+ * link: function (scope, elem) {
+ * $mdColors.applyThemeColors(elem, {color: 'red'});
+ * }
+ * }
+ * });
+ *
+ */
+ function applyThemeColors(element, colorExpression) {
+ try {
+ if (colorExpression) {
+ // Assign the calculate RGBA color values directly as inline CSS
+ element.css(interpolateColors(colorExpression));
+ }
+ } catch (e) {
+ $log.error(e.message);
+ }
- /** The first renderable date in the virtual-scrolling calendar (for all instances). */
- var firstRenderableDate = null;
+ }
- /**
- * Controller for the mdCalendar component.
- * @ngInject @constructor
- */
- function CalendarCtrl($element, $attrs, $scope, $animate, $q, $mdConstant,
- $mdTheming, $$mdDateUtil, $mdDateLocale, $mdInkRipple, $mdUtil) {
- $mdTheming($element);
/**
- * Dummy array-like object for virtual-repeat to iterate over. The length is the total
- * number of months that can be viewed. This is shorter than ideal because of (potential)
- * Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1181658.
+ * @ngdoc method
+ * @name $mdColors#getThemeColor
+ *
+ * @description
+ * Get parsed color from expression
+ *
+ * @param {string} expression string of a color expression (for instance `'red-700-0.8'`)
+ *
+ * @returns {string} a css color expression (for instance `rgba(211, 47, 47, 0.8)`)
+ *
+ * @usage
+ *
+ * angular.controller('myCtrl', function ($mdColors) {
+ * var color = $mdColors.getThemeColor('myTheme-red-200-0.5');
+ * ...
+ * });
+ *
*/
- this.items = {length: 2000};
+ function getThemeColor(expression) {
+ var color = extractColorOptions(expression);
- if (this.maxDate && this.minDate) {
- // Limit the number of months if min and max dates are set.
- var numMonths = $$mdDateUtil.getMonthDistance(this.minDate, this.maxDate) + 1;
- numMonths = Math.max(numMonths, 1);
- // Add an additional month as the final dummy month for rendering purposes.
- numMonths += 1;
- this.items.length = numMonths;
+ return parseColor(color);
}
- /** @final {!angular.$animate} */
- this.$animate = $animate;
-
- /** @final {!angular.$q} */
- this.$q = $q;
+ /**
+ * Return the parsed color
+ * @param color hashmap of color definitions
+ * @param contrast whether use contrast color for foreground
+ * @returns rgba color string
+ */
+ function parseColor(color, contrast) {
+ contrast = contrast || false;
+ var rgbValues = $mdTheming.PALETTES[color.palette][color.hue];
- /** @final */
- this.$mdInkRipple = $mdInkRipple;
+ rgbValues = contrast ? rgbValues.contrast : rgbValues.value;
- /** @final */
- this.$mdUtil = $mdUtil;
-
- /** @final */
- this.keyCode = $mdConstant.KEY_CODE;
-
- /** @final */
- this.dateUtil = $$mdDateUtil;
-
- /** @final */
- this.dateLocale = $mdDateLocale;
-
- /** @final {!angular.JQLite} */
- this.$element = $element;
-
- /** @final {!angular.Scope} */
- this.$scope = $scope;
+ return $mdUtil.supplant('rgba({0}, {1}, {2}, {3})',
+ [rgbValues[0], rgbValues[1], rgbValues[2], rgbValues[3] || color.opacity]
+ );
+ }
- /** @final {HTMLElement} */
- this.calendarElement = $element[0].querySelector('.md-calendar');
+ /**
+ * Convert the color expression into an object with scope-interpolated values
+ * Then calculate the rgba() values based on the theme color parts
+ *
+ * @results Hashmap of CSS properties with associated `rgba( )` string vales
+ *
+ *
+ */
+ function interpolateColors(themeColors) {
+ var rgbColors = {};
- /** @final {HTMLElement} */
- this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');
+ var hasColorProperty = themeColors.hasOwnProperty('color');
- /** @final {Date} */
- this.today = this.dateUtil.createDateAtMidnight();
+ angular.forEach(themeColors, function (value, key) {
+ var color = extractColorOptions(value);
+ var hasBackground = key.indexOf('background') > -1;
- /** @type {Date} */
- this.firstRenderableDate = this.dateUtil.incrementMonths(this.today, -this.items.length / 2);
+ rgbColors[key] = parseColor(color);
+ if (hasBackground && !hasColorProperty) {
+ rgbColors.color = parseColor(color, true);
+ }
+ });
- if (this.minDate && this.minDate > this.firstRenderableDate) {
- this.firstRenderableDate = this.minDate;
- } else if (this.maxDate) {
- // Calculate the difference between the start date and max date.
- // Subtract 1 because it's an inclusive difference and 1 for the final dummy month.
- //
- var monthDifference = this.items.length - 2;
- this.firstRenderableDate = this.dateUtil.incrementMonths(this.maxDate, -(this.items.length - 2));
+ return rgbColors;
}
-
- /** @final {number} Unique ID for this calendar instance. */
- this.id = nextUniqueId++;
-
- /** @type {!angular.NgModelController} */
- this.ngModelCtrl = null;
-
/**
- * The selected date. Keep track of this separately from the ng-model value so that we
- * can know, when the ng-model value changes, what the previous value was before it's updated
- * in the component's UI.
- *
- * @type {Date}
+ * Check if expression has defined theme
+ * e.g.
+ * 'myTheme-primary' => true
+ * 'red-800' => false
*/
- this.selectedDate = null;
+ function hasTheme(expression) {
+ return angular.isDefined($mdTheming.THEMES[expression.split('-')[0]]);
+ }
/**
- * The date that is currently focused or showing in the calendar. This will initially be set
- * to the ng-model value if set, otherwise to today. It will be updated as the user navigates
- * to other months. The cell corresponding to the displayDate does not necesarily always have
- * focus in the document (such as for cases when the user is scrolling the calendar).
- * @type {Date}
+ * For the evaluated expression, extract the color parts into a hash map
*/
- this.displayDate = null;
+ function extractColorOptions(expression) {
+ var parts = expression.split('-');
+ var hasTheme = angular.isDefined($mdTheming.THEMES[parts[0]]);
+ var theme = hasTheme ? parts.splice(0, 1)[0] : $mdTheming.defaultTheme();
+
+ return {
+ theme: theme,
+ palette: extractPalette(parts, theme),
+ hue: extractHue(parts, theme),
+ opacity: parts[2] || 1
+ };
+ }
/**
- * The date that has or should have focus.
- * @type {Date}
+ * Calculate the theme palette name
*/
- this.focusDate = null;
-
- /** @type {boolean} */
- this.isInitialized = false;
-
- /** @type {boolean} */
- this.isMonthTransitionInProgress = false;
+ function extractPalette(parts, theme) {
+ // If the next section is one of the palettes we assume it's a two word palette
+ // Two word palette can be also written in camelCase, forming camelCase to dash-case
- // Unless the user specifies so, the calendar should not be a tab stop.
- // This is necessary because ngAria might add a tabindex to anything with an ng-model
- // (based on whether or not the user has turned that particular feature on/off).
- if (!$attrs['tabindex']) {
- $element.attr('tabindex', '-1');
- }
+ var isTwoWord = parts.length > 1 && colorPalettes.indexOf(parts[1]) !== -1;
+ var palette = parts[0].replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
- var self = this;
+ if (isTwoWord) palette = parts[0] + '-' + parts.splice(1, 1);
- /**
- * Handles a click event on a date cell.
- * Created here so that every cell can use the same function instance.
- * @this {HTMLTableCellElement} The cell that was clicked.
- */
- this.cellClickHandler = function() {
- var cellElement = this;
- if (this.hasAttribute('data-timestamp')) {
- $scope.$apply(function() {
- var timestamp = Number(cellElement.getAttribute('data-timestamp'));
- self.setNgModelValue(self.dateUtil.createDateAtMidnight(timestamp));
- });
+ if (colorPalettes.indexOf(palette) === -1) {
+ // If the palette is not in the palette list it's one of primary/accent/warn/background
+ var scheme = $mdTheming.THEMES[theme].colors[palette];
+ if (!scheme) {
+ throw new Error($mdUtil.supplant('mdColors: couldn\'t find \'{palette}\' in the palettes.', {palette: palette}));
+ }
+ palette = scheme.name;
}
- };
- this.attachCalendarEventListeners();
- }
- CalendarCtrl.$inject = ["$element", "$attrs", "$scope", "$animate", "$q", "$mdConstant", "$mdTheming", "$$mdDateUtil", "$mdDateLocale", "$mdInkRipple", "$mdUtil"];
+ return palette;
+ }
+ function extractHue(parts, theme) {
+ var themeColors = $mdTheming.THEMES[theme].colors;
- /*** Initialization ***/
+ if (parts[1] === 'hue') {
+ var hueNumber = parseInt(parts.splice(2, 1)[0], 10);
- /**
- * Sets up the controller's reference to ngModelController.
- * @param {!angular.NgModelController} ngModelCtrl
- */
- CalendarCtrl.prototype.configureNgModel = function(ngModelCtrl) {
- this.ngModelCtrl = ngModelCtrl;
+ if (hueNumber < 1 || hueNumber > 3) {
+ throw new Error($mdUtil.supplant('mdColors: \'hue-{hueNumber}\' is not a valid hue, can be only \'hue-1\', \'hue-2\' and \'hue-3\'', {hueNumber: hueNumber}));
+ }
+ parts[1] = 'hue-' + hueNumber;
- var self = this;
- ngModelCtrl.$render = function() {
- self.changeSelectedDate(self.ngModelCtrl.$viewValue);
- };
- };
+ if (!(parts[0] in themeColors)) {
+ throw new Error($mdUtil.supplant('mdColors: \'hue-x\' can only be used with [{availableThemes}], but was used with \'{usedTheme}\'', {
+ availableThemes: Object.keys(themeColors).join(', '),
+ usedTheme: parts[0]
+ }));
+ }
- /**
- * Initialize the calendar by building the months that are initially visible.
- * Initialization should occur after the ngModel value is known.
- */
- CalendarCtrl.prototype.buildInitialCalendarDisplay = function() {
- this.buildWeekHeader();
- this.hideVerticalScrollbar();
+ return themeColors[parts[0]].hues[parts[1]];
+ }
- this.displayDate = this.selectedDate || this.today;
- this.isInitialized = true;
- };
+ return parts[1] || themeColors[parts[0] in themeColors ? parts[0] : 'primary'].hues['default'];
+ }
+ }
/**
- * Hides the vertical scrollbar on the calendar scroller by setting the width on the
- * calendar scroller and the `overflow: hidden` wrapper around the scroller, and then setting
- * a padding-right on the scroller equal to the width of the browser's scrollbar.
+ * @ngdoc directive
+ * @name mdColors
+ * @module material.components.colors
+ *
+ * @restrict A
+ *
+ * @description
+ * `mdColors` directive will apply the theme-based color expression as RGBA CSS style values.
+ *
+ * The format will be similar to our color defining in the scss files:
+ *
+ * ## `[?theme]-[palette]-[?hue]-[?opacity]`
+ * - [theme] - default value is the default theme
+ * - [palette] - can be either palette name or primary/accent/warn/background
+ * - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)
+ * - [opacity] - default is 1
+ *
+ * > `?` indicates optional parameter
+ *
+ * @usage
+ *
+ *
+ *
+ * Color demo
+ *
+ *
+ *
+ *
+ * `mdColors` directive will automatically watch for changes in the expression if it recognizes an interpolation
+ * expression or a function. For performance options, you can use `::` prefix to the `md-colors` expression
+ * to indicate a one-time data binding.
+ *
+ *
+ *
+ *
*
- * This will cause a reflow.
*/
- CalendarCtrl.prototype.hideVerticalScrollbar = function() {
- var element = this.$element[0];
-
- var scrollMask = element.querySelector('.md-calendar-scroll-mask');
- var scroller = this.calendarScroller;
-
- var headerWidth = element.querySelector('.md-calendar-day-header').clientWidth;
- var scrollbarWidth = scroller.offsetWidth - scroller.clientWidth;
-
- scrollMask.style.width = headerWidth + 'px';
- scroller.style.width = (headerWidth + scrollbarWidth) + 'px';
- scroller.style.paddingRight = scrollbarWidth + 'px';
- };
+ function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {
+ return {
+ restrict: 'A',
+ require: ['^?mdTheme'],
+ compile: function (tElem, tAttrs) {
+ var shouldWatch = shouldColorsWatch();
+ return function (scope, element, attrs, ctrl) {
+ var mdThemeController = ctrl[0];
- /** Attach event listeners for the calendar. */
- CalendarCtrl.prototype.attachCalendarEventListeners = function() {
- // Keyboard interaction.
- this.$element.on('keydown', angular.bind(this, this.handleKeyEvent));
- };
+ var lastColors = {};
- /*** User input handling ***/
+ var parseColors = function (theme) {
+ if (typeof theme !== 'string') {
+ theme = '';
+ }
- /**
- * Handles a key event in the calendar with the appropriate action. The action will either
- * be to select the focused date or to navigate to focus a new date.
- * @param {KeyboardEvent} event
- */
- CalendarCtrl.prototype.handleKeyEvent = function(event) {
- var self = this;
- this.$scope.$apply(function() {
- // Capture escape and emit back up so that a wrapping component
- // (such as a date-picker) can decide to close.
- if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) {
- self.$scope.$emit('md-calendar-close');
+ if (!attrs.mdColors) {
+ attrs.mdColors = '{}';
+ }
- if (event.which == self.keyCode.TAB) {
- event.preventDefault();
- }
+ /**
+ * Json.parse() does not work because the keys are not quoted;
+ * use $parse to convert to a hash map
+ */
+ var colors = $parse(attrs.mdColors)(scope);
- return;
- }
+ /**
+ * If mdTheme is defined up the DOM tree
+ * we add mdTheme theme to colors who doesn't specified a theme
+ *
+ * # example
+ *
+ *
+ *
+ * Color demo
+ *
+ *
+ *
+ *
+ * 'primary-600' will be 'myTheme-primary-600',
+ * but 'mySecondTheme-accent-200' will stay the same cause it has a theme prefix
+ */
+ if (mdThemeController) {
+ Object.keys(colors).forEach(function (prop) {
+ var color = colors[prop];
+ if (!$mdColors.hasTheme(color)) {
+ colors[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;
+ }
+ });
+ }
- // Remaining key events fall into two categories: selection and navigation.
- // Start by checking if this is a selection event.
- if (event.which === self.keyCode.ENTER) {
- self.setNgModelValue(self.displayDate);
- event.preventDefault();
- return;
- }
+ cleanElement(colors);
- // Selection isn't occuring, so the key event is either navigation or nothing.
- var date = self.getFocusDateFromKeyEvent(event);
- if (date) {
- date = self.boundDateByMinAndMax(date);
- event.preventDefault();
- event.stopPropagation();
+ return colors;
+ };
- // Since this is a keyboard interaction, actually give the newly focused date keyboard
- // focus after the been brought into view.
- self.changeDisplayDate(date).then(function () {
- self.focus(date);
- });
- }
- });
- };
+ var cleanElement = function (colors) {
+ if (!angular.equals(colors, lastColors)) {
+ var keys = Object.keys(lastColors);
- /**
- * Gets the date to focus as the result of a key event.
- * @param {KeyboardEvent} event
- * @returns {Date} Date to navigate to, or null if the key does not match a calendar shortcut.
- */
- CalendarCtrl.prototype.getFocusDateFromKeyEvent = function(event) {
- var dateUtil = this.dateUtil;
- var keyCode = this.keyCode;
+ if (lastColors.background && !keys.color) {
+ keys.push('color');
+ }
- switch (event.which) {
- case keyCode.RIGHT_ARROW: return dateUtil.incrementDays(this.displayDate, 1);
- case keyCode.LEFT_ARROW: return dateUtil.incrementDays(this.displayDate, -1);
- case keyCode.DOWN_ARROW:
- return event.metaKey ?
- dateUtil.incrementMonths(this.displayDate, 1) :
- dateUtil.incrementDays(this.displayDate, 7);
- case keyCode.UP_ARROW:
- return event.metaKey ?
- dateUtil.incrementMonths(this.displayDate, -1) :
- dateUtil.incrementDays(this.displayDate, -7);
- case keyCode.PAGE_DOWN: return dateUtil.incrementMonths(this.displayDate, 1);
- case keyCode.PAGE_UP: return dateUtil.incrementMonths(this.displayDate, -1);
- case keyCode.HOME: return dateUtil.getFirstDateOfMonth(this.displayDate);
- case keyCode.END: return dateUtil.getLastDateOfMonth(this.displayDate);
- default: return null;
- }
- };
+ keys.forEach(function (key) {
+ element.css(key, '');
+ });
+ }
- /**
- * Gets the "index" of the currently selected date as it would be in the virtual-repeat.
- * @returns {number}
- */
- CalendarCtrl.prototype.getSelectedMonthIndex = function() {
- return this.dateUtil.getMonthDistance(this.firstRenderableDate,
- this.selectedDate || this.today);
- };
+ lastColors = colors;
+ };
- /**
- * Scrolls to the month of the given date.
- * @param {Date} date
- */
- CalendarCtrl.prototype.scrollToMonth = function(date) {
- if (!this.dateUtil.isValidDate(date)) {
- return;
- }
+ /**
+ * Registering for mgTheme changes and asking mdTheme controller run our callback whenever a theme changes
+ */
+ var unregisterChanges = angular.noop;
- var monthDistance = this.dateUtil.getMonthDistance(this.firstRenderableDate, date);
- this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;
- };
+ if (mdThemeController) {
+ unregisterChanges = mdThemeController.registerChanges(function (theme) {
+ $mdColors.applyThemeColors(element, parseColors(theme));
+ });
+ }
- /**
- * Sets the ng-model value for the calendar and emits a change event.
- * @param {Date} date
- */
- CalendarCtrl.prototype.setNgModelValue = function(date) {
- this.$scope.$emit('md-calendar-change', date);
- this.ngModelCtrl.$setViewValue(date);
- this.ngModelCtrl.$render();
- };
+ scope.$on('$destroy', function () {
+ unregisterChanges();
+ });
- /**
- * Focus the cell corresponding to the given date.
- * @param {Date=} opt_date
- */
- CalendarCtrl.prototype.focus = function(opt_date) {
- var date = opt_date || this.selectedDate || this.today;
+ try {
+ if (shouldWatch) {
+ scope.$watch(parseColors, angular.bind(this,
+ $mdColors.applyThemeColors, element
+ ), true);
+ }
+ else {
+ $mdColors.applyThemeColors(element, parseColors());
+ }
- var previousFocus = this.calendarElement.querySelector('.md-focus');
- if (previousFocus) {
- previousFocus.classList.remove(FOCUSED_DATE_CLASS);
- }
+ }
+ catch (e) {
+ $log.error(e.message);
+ }
- var cellId = this.getDateId(date);
- var cell = document.getElementById(cellId);
- if (cell) {
- cell.classList.add(FOCUSED_DATE_CLASS);
- cell.focus();
- } else {
- this.focusDate = date;
- }
- };
+ };
- /**
- * If a date exceeds minDate or maxDate, returns date matching minDate or maxDate, respectively.
- * Otherwise, returns the date.
- * @param {Date} date
- * @return {Date}
- */
- CalendarCtrl.prototype.boundDateByMinAndMax = function(date) {
- var boundDate = date;
- if (this.minDate && date < this.minDate) {
- boundDate = new Date(this.minDate.getTime());
- }
- if (this.maxDate && date > this.maxDate) {
- boundDate = new Date(this.maxDate.getTime());
- }
- return boundDate;
- };
+ function shouldColorsWatch() {
+ // Simulate 1x binding and mark mdColorsWatch == false
+ var rawColorExpression = tAttrs.mdColors;
+ var bindOnce = rawColorExpression.indexOf('::') > -1;
+ var isStatic = bindOnce ? true : STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);
- /*** Updating the displayed / selected date ***/
+ // Remove it for the postLink...
+ tAttrs.mdColors = rawColorExpression.replace('::', '');
- /**
- * Change the selected date in the calendar (ngModel value has already been changed).
- * @param {Date} date
- */
- CalendarCtrl.prototype.changeSelectedDate = function(date) {
- var self = this;
- var previousSelectedDate = this.selectedDate;
- this.selectedDate = date;
- this.changeDisplayDate(date).then(function() {
+ var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);
- // Remove the selected class from the previously selected date, if any.
- if (previousSelectedDate) {
- var prevDateCell =
- document.getElementById(self.getDateId(previousSelectedDate));
- if (prevDateCell) {
- prevDateCell.classList.remove(SELECTED_DATE_CLASS);
- prevDateCell.setAttribute('aria-selected', 'false');
+ return (bindOnce || isStatic) ? false :
+ hasWatchAttr ? $mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch) : true;
}
}
+ };
- // Apply the select class to the new selected date if it is set.
- if (date) {
- var dateCell = document.getElementById(self.getDateId(date));
- if (dateCell) {
- dateCell.classList.add(SELECTED_DATE_CLASS);
- dateCell.setAttribute('aria-selected', 'true');
- }
- }
- });
- };
+ }
- /**
- * Change the date that is being shown in the calendar. If the given date is in a different
- * month, the displayed month will be transitioned.
- * @param {Date} date
- */
- CalendarCtrl.prototype.changeDisplayDate = function(date) {
- // Initialization is deferred until this function is called because we want to reflect
- // the starting value of ngModel.
- if (!this.isInitialized) {
- this.buildInitialCalendarDisplay();
- return this.$q.when();
- }
+})();
- // If trying to show an invalid date or a transition is in progress, do nothing.
- if (!this.dateUtil.isValidDate(date) || this.isMonthTransitionInProgress) {
- return this.$q.when();
- }
+})();
+(function(){
+"use strict";
- this.isMonthTransitionInProgress = true;
- var animationPromise = this.animateDateChange(date);
+/**
+ * @ngdoc module
+ * @name material.components.content
+ *
+ * @description
+ * Scrollable content
+ */
+mdContentDirective.$inject = ["$mdTheming"];
+angular.module('material.components.content', [
+ 'material.core'
+])
+ .directive('mdContent', mdContentDirective);
- this.displayDate = date;
+/**
+ * @ngdoc directive
+ * @name mdContent
+ * @module material.components.content
+ *
+ * @restrict E
+ *
+ * @description
+ *
+ * The `` directive is a container element useful for scrollable content. It achieves
+ * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.
+ *
+ * In general, `` components are not designed to be nested inside one another. If
+ * possible, it is better to make them siblings. This often results in a better user experience as
+ * having nested scrollbars may confuse the user.
+ *
+ * ## Troubleshooting
+ *
+ * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's
+ * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
+ * SVG icons and some other components.
+ *
+ * Additionally, we now also offer the `md-no-flicker` class which can be applied to any element
+ * and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements
+ * inside (which eliminates the flicker on iOS devices).
+ *
+ * _Note: Forcing an element to render on the GPU can have unintended side-effects, especially
+ * related to the z-index of elements. Please use with caution and only on the elements needed._
+ *
+ * @usage
+ *
+ * Add the `[layout-padding]` attribute to make the content padded.
+ *
+ *
+ *
+ * Lorem ipsum dolor sit amet, ne quod novum mei.
+ *
+ *
+ */
- var self = this;
- animationPromise.then(function() {
- self.isMonthTransitionInProgress = false;
- });
+function mdContentDirective($mdTheming) {
+ return {
+ restrict: 'E',
+ controller: ['$scope', '$element', ContentController],
+ link: function(scope, element) {
+ element.addClass('_md'); // private md component indicator for styling
- return animationPromise;
- };
+ $mdTheming(element);
+ scope.$broadcast('$mdContentLoaded', element);
- /**
- * Animates the transition from the calendar's current month to the given month.
- * @param {Date} date
- * @returns {angular.$q.Promise} The animation promise.
- */
- CalendarCtrl.prototype.animateDateChange = function(date) {
- this.scrollToMonth(date);
- return this.$q.when();
+ iosScrollFix(element[0]);
+ }
};
- /*** Constructing the calendar table ***/
+ function ContentController($scope, $element) {
+ this.$scope = $scope;
+ this.$element = $element;
+ }
+}
- /**
- * Builds and appends a day-of-the-week header to the calendar.
- * This should only need to be called once during initialization.
- */
- CalendarCtrl.prototype.buildWeekHeader = function() {
- var firstDayOfWeek = this.dateLocale.firstDayOfWeek;
- var shortDays = this.dateLocale.shortDays;
+function iosScrollFix(node) {
+ // IOS FIX:
+ // If we scroll where there is no more room for the webview to scroll,
+ // by default the webview itself will scroll up and down, this looks really
+ // bad. So if we are scrolling to the very top or bottom, add/subtract one
+ angular.element(node).on('$md.pressdown', function(ev) {
+ // Only touch events
+ if (ev.pointer.type !== 't') return;
+ // Don't let a child content's touchstart ruin it for us.
+ if (ev.$materialScrollFixed) return;
+ ev.$materialScrollFixed = true;
- var row = document.createElement('tr');
- for (var i = 0; i < 7; i++) {
- var th = document.createElement('th');
- th.textContent = shortDays[(i + firstDayOfWeek) % 7];
- row.appendChild(th);
+ if (node.scrollTop === 0) {
+ node.scrollTop = 1;
+ } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
+ node.scrollTop -= 1;
}
-
- this.$element.find('thead').append(row);
- };
-
- /**
- * Gets an identifier for a date unique to the calendar instance for internal
- * purposes. Not to be displayed.
- * @param {Date} date
- * @returns {string}
- */
- CalendarCtrl.prototype.getDateId = function(date) {
- return [
- 'md',
- this.id,
- date.getFullYear(),
- date.getMonth(),
- date.getDate()
- ].join('-');
- };
-})();
+ });
+}
})();
(function(){
"use strict";
-(function() {
- 'use strict';
-
-
- angular.module('material.components.datepicker')
- .directive('mdCalendarMonth', mdCalendarMonthDirective);
-
-
- /**
- * Private directive consumed by md-calendar. Having this directive lets the calender use
- * md-virtual-repeat and also cleanly separates the month DOM construction functions from
- * the rest of the calendar controller logic.
- */
- function mdCalendarMonthDirective() {
- return {
- require: ['^^mdCalendar', 'mdCalendarMonth'],
- scope: {offset: '=mdMonthOffset'},
- controller: CalendarMonthCtrl,
- controllerAs: 'mdMonthCtrl',
- bindToController: true,
- link: function(scope, element, attrs, controllers) {
- var calendarCtrl = controllers[0];
- var monthCtrl = controllers[1];
-
- monthCtrl.calendarCtrl = calendarCtrl;
- monthCtrl.generateContent();
+/**
+ * @ngdoc module
+ * @name material.components.datepicker
+ * @description Module for the datepicker component.
+ */
- // The virtual-repeat re-uses the same DOM elements, so there are only a limited number
- // of repeated items that are linked, and then those elements have their bindings updataed.
- // Since the months are not generated by bindings, we simply regenerate the entire thing
- // when the binding (offset) changes.
- scope.$watch(function() { return monthCtrl.offset; }, function(offset, oldOffset) {
- if (offset != oldOffset) {
- monthCtrl.generateContent();
- }
- });
- }
- };
- }
+angular.module('material.components.datepicker', [
+ 'material.core',
+ 'material.components.icon',
+ 'material.components.virtualRepeat'
+]);
- /** Class applied to the cell for today. */
- var TODAY_CLASS = 'md-calendar-date-today';
+})();
+(function(){
+"use strict";
- /** Class applied to the selected date cell/. */
- var SELECTED_DATE_CLASS = 'md-calendar-selected-date';
+/**
+ * @ngdoc module
+ * @name material.components.dialog
+ */
+MdDialogDirective.$inject = ["$$rAF", "$mdTheming", "$mdDialog"];
+MdDialogProvider.$inject = ["$$interimElementProvider"];
+angular
+ .module('material.components.dialog', [
+ 'material.core',
+ 'material.components.backdrop'
+ ])
+ .directive('mdDialog', MdDialogDirective)
+ .provider('$mdDialog', MdDialogProvider);
- /** Class applied to the focused date cell/. */
- var FOCUSED_DATE_CLASS = 'md-focus';
+/**
+ * @ngdoc directive
+ * @name mdDialog
+ * @module material.components.dialog
+ *
+ * @restrict E
+ *
+ * @description
+ * `` - The dialog's template must be inside this element.
+ *
+ * Inside, use an `` element for the dialog's content, and use
+ * an `` element for the dialog's actions.
+ *
+ * ## CSS
+ * - `.md-dialog-content` - class that sets the padding on the content as the spec file
+ *
+ * ## Notes
+ * - If you specify an `id` for the ``, the `` will have the same `id`
+ * prefixed with `dialogContent_`.
+ *
+ * @usage
+ * ### Dialog template
+ *
+ *
+ *
+ *
+ *
+ *
Number {{item}}
+ *
+ *
+ *
+ *
+ * Close Dialog
+ *
+ *
+ *
+ */
+function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
+ return {
+ restrict: 'E',
+ link: function(scope, element) {
+ element.addClass('_md'); // private md component indicator for styling
- /**
- * Controller for a single calendar month.
- * @ngInject @constructor
- */
- function CalendarMonthCtrl($element, $$mdDateUtil, $mdDateLocale) {
- this.dateUtil = $$mdDateUtil;
- this.dateLocale = $mdDateLocale;
- this.$element = $element;
- this.calendarCtrl = null;
+ $mdTheming(element);
+ $$rAF(function() {
+ var images;
+ var content = element[0].querySelector('md-dialog-content');
- /**
- * Number of months from the start of the month "items" that the currently rendered month
- * occurs. Set via angular data binding.
- * @type {number}
- */
- this.offset;
+ if (content) {
+ images = content.getElementsByTagName('img');
+ addOverflowClass();
+ //-- delayed image loading may impact scroll height, check after images are loaded
+ angular.element(images).on('load', addOverflowClass);
+ }
- /**
- * Date cell to focus after appending the month to the document.
- * @type {HTMLElement}
- */
- this.focusAfterAppend = null;
- }
- CalendarMonthCtrl.$inject = ["$element", "$$mdDateUtil", "$mdDateLocale"];
+ scope.$on('$destroy', function() {
+ $mdDialog.destroy(element);
+ });
- /** Generate and append the content for this month to the directive element. */
- CalendarMonthCtrl.prototype.generateContent = function() {
- var calendarCtrl = this.calendarCtrl;
- var date = this.dateUtil.incrementMonths(calendarCtrl.firstRenderableDate, this.offset);
+ /**
+ *
+ */
+ function addOverflowClass() {
+ element.toggleClass('md-content-overflow', content.scrollHeight > content.clientHeight);
+ }
- this.$element.empty();
- this.$element.append(this.buildCalendarForMonth(date));
- if (this.focusAfterAppend) {
- this.focusAfterAppend.classList.add(FOCUSED_DATE_CLASS);
- this.focusAfterAppend.focus();
- this.focusAfterAppend = null;
+ });
}
};
+}
- /**
- * Creates a single cell to contain a date in the calendar with all appropriate
- * attributes and classes added. If a date is given, the cell content will be set
- * based on the date.
- * @param {Date=} opt_date
- * @returns {HTMLElement}
+/**
+ * @ngdoc service
+ * @name $mdDialog
+ * @module material.components.dialog
+ *
+ * @description
+ * `$mdDialog` opens a dialog over the app to inform users about critical information or require
+ * them to make decisions. There are two approaches for setup: a simple promise API
+ * and regular object syntax.
+ *
+ * ## Restrictions
+ *
+ * - The dialog is always given an isolate scope.
+ * - The dialog's template must have an outer `` element.
+ * Inside, use an `` element for the dialog's content, and use
+ * an `` element for the dialog's actions.
+ * - Dialogs must cover the entire application to keep interactions inside of them.
+ * Use the `parent` option to change where dialogs are appended.
+ *
+ * ## Sizing
+ * - Complex dialogs can be sized with `flex="percentage"`, i.e. `flex="66"`.
+ * - Default max-width is 80% of the `rootElement` or `parent`.
+ *
+ * ## CSS
+ * - `.md-dialog-content` - class that sets the padding on the content as the spec file
+ *
+ * @usage
+ *
+ *
' +
+ * ' '+
+ * ' '+
+ * ' ' +
+ * ' ' +
+ * ' ' +
+ * ' Close Dialog' +
+ * ' ' +
+ * ' ' +
+ * '',
+ * locals: {
+ * items: $scope.items
+ * },
+ * controller: DialogController
+ * });
+ * function DialogController($scope, $mdDialog, items) {
+ * $scope.items = items;
+ * $scope.closeDialog = function() {
+ * $mdDialog.hide();
+ * }
+ * }
+ * }
+ * }
+ * })(angular);
+ *
+ *
+ * ### Multiple Dialogs
+ * Using the `multiple` option for the `$mdDialog` service allows developers to show multiple dialogs
+ * at the same time.
+ *
+ *
+ * // From plain options
+ * $mdDialog.show({
+ * multiple: true
+ * });
+ *
+ * // From a dialog preset
+ * $mdDialog.show(
+ * $mdDialog
+ * .alert()
+ * .multiple(true)
+ * );
+ *
+ *
+ *
+ * ### Pre-Rendered Dialogs
+ * By using the `contentElement` option, it is possible to use an already existing element in the DOM.
+ *
+ * > Pre-rendered dialogs will be not linked to any scope and will not instantiate any new controller.
+ * > You can manually link the elements to a scope or instantiate a controller from the template (`ng-controller`)
+ *
+ *
+ * $scope.showPrerenderedDialog = function() {
+ * $mdDialog.show({
+ * contentElement: '#myStaticDialog',
+ * parent: angular.element(document.body)
+ * });
+ * };
+ *
+ *
+ * When using a string as value, `$mdDialog` will automatically query the DOM for the specified CSS selector.
+ *
+ *
+ *
+ *
+ *
+ * This is a pre-rendered dialog.
+ *
+ *
+ *
+ *
+ *
+ * **Notice**: It is important, to use the `.md-dialog-container` as the content element, otherwise the dialog
+ * will not show up.
+ *
+ * It also possible to use a DOM element for the `contentElement` option.
+ * - `contentElement: document.querySelector('#myStaticDialog')`
+ * - `contentElement: angular.element(TEMPLATE)`
+ *
+ * When using a `template` as content element, it will be not compiled upon open.
+ * This allows you to compile the element yourself and use it each time the dialog opens.
+ *
+ * ### Custom Presets
+ * Developers are also able to create their own preset, which can be easily used without repeating
+ * their options each time.
+ *
+ *
+ * $mdDialogProvider.addPreset('testPreset', {
+ * options: function() {
+ * return {
+ * template:
+ * '' +
+ * 'This is a custom preset' +
+ * '',
+ * controllerAs: 'dialog',
+ * bindToController: true,
+ * clickOutsideToClose: true,
+ * escapeToClose: true
+ * };
+ * }
+ * });
+ *
+ *
+ * After you created your preset at config phase, you can easily access it.
+ *
+ *
+ * $mdDialog.show(
+ * $mdDialog.testPreset()
+ * );
+ *
+ *
+ * ### JavaScript: promise API syntax, custom dialog template
+ *
+ * (function(angular, undefined){
+ * "use strict";
+ *
+ * angular
+ * .module('demoApp', ['ngMaterial'])
+ * .controller('EmployeeController', EmployeeEditor)
+ * .controller('GreetingController', GreetingController);
+ *
+ * // Fictitious Employee Editor to show how to use simple and complex dialogs.
+ *
+ * function EmployeeEditor($scope, $mdDialog) {
+ * var alert;
+ *
+ * $scope.showAlert = showAlert;
+ * $scope.closeAlert = closeAlert;
+ * $scope.showGreeting = showCustomGreeting;
+ *
+ * $scope.hasAlert = function() { return !!alert };
+ * $scope.userName = $scope.userName || 'Bobby';
+ *
+ * // Dialog #1 - Show simple alert dialog and cache
+ * // reference to dialog instance
+ *
+ * function showAlert() {
+ * alert = $mdDialog.alert()
+ * .title('Attention, ' + $scope.userName)
+ * .textContent('This is an example of how easy dialogs can be!')
+ * .ok('Close');
+ *
+ * $mdDialog
+ * .show( alert )
+ * .finally(function() {
+ * alert = undefined;
+ * });
+ * }
+ *
+ * // Close the specified dialog instance and resolve with 'finished' flag
+ * // Normally this is not needed, just use '$mdDialog.hide()' to close
+ * // the most recent dialog popup.
+ *
+ * function closeAlert() {
+ * $mdDialog.hide( alert, "finished" );
+ * alert = undefined;
+ * }
+ *
+ * // Dialog #2 - Demonstrate more complex dialogs construction and popup.
+ *
+ * function showCustomGreeting($event) {
+ * $mdDialog.show({
+ * targetEvent: $event,
+ * template:
+ * '' +
+ *
+ * ' Hello {{ employee }}!' +
+ *
+ * ' ' +
+ * ' ' +
+ * ' Close Greeting' +
+ * ' ' +
+ * ' ' +
+ * '',
+ * controller: 'GreetingController',
+ * onComplete: afterShowAnimation,
+ * locals: { employee: $scope.userName }
+ * });
+ *
+ * // When the 'enter' animation finishes...
+ *
+ * function afterShowAnimation(scope, element, options) {
+ * // post-show code here: DOM element focus, etc.
+ * }
+ * }
+ *
+ * // Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog
+ * // Here we used ng-controller="GreetingController as vm" and
+ * // $scope.vm ===
+ *
+ * function showCustomGreeting() {
+ *
+ * $mdDialog.show({
+ * clickOutsideToClose: true,
+ *
+ * scope: $scope, // use parent scope in template
+ * preserveScope: true, // do not forget this if use parent scope
+
+ * // Since GreetingController is instantiated with ControllerAs syntax
+ * // AND we are passing the parent '$scope' to the dialog, we MUST
+ * // use 'vm.' in the template markup
+ *
+ * template: '' +
+ * ' ' +
+ * ' Hi There {{vm.employee}}' +
+ * ' ' +
+ * '',
+ *
+ * controller: function DialogController($scope, $mdDialog) {
+ * $scope.closeDialog = function() {
+ * $mdDialog.hide();
+ * }
+ * }
+ * });
+ * }
+ *
+ * }
+ *
+ * // Greeting controller used with the more complex 'showCustomGreeting()' custom dialog
+ *
+ * function GreetingController($scope, $mdDialog, employee) {
+ * // Assigned from construction locals options...
+ * $scope.employee = employee;
+ *
+ * $scope.closeDialog = function() {
+ * // Easily hides most recent dialog shown...
+ * // no specific instance reference is needed.
+ * $mdDialog.hide();
+ * };
+ * }
+ *
+ * })(angular);
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdDialog#alert
+ *
+ * @description
+ * Builds a preconfigured dialog with the specified message.
+ *
+ * @returns {obj} an `$mdDialogPreset` with the chainable configuration methods:
+ *
+ * - $mdDialogPreset#title(string) - Sets the alert title.
+ * - $mdDialogPreset#textContent(string) - Sets the alert message.
+ * - $mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize
+ * module to be loaded. HTML is not run through Angular's compiler.
+ * - $mdDialogPreset#ok(string) - Sets the alert "Okay" button text.
+ * - $mdDialogPreset#theme(string) - Sets the theme of the alert dialog.
+ * - $mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option,
+ * the location of the click will be used as the starting point for the opening animation
+ * of the the dialog.
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdDialog#confirm
+ *
+ * @description
+ * Builds a preconfigured dialog with the specified message. You can call show and the promise returned
+ * will be resolved only if the user clicks the confirm action on the dialog.
+ *
+ * @returns {obj} an `$mdDialogPreset` with the chainable configuration methods:
+ *
+ * Additionally, it supports the following methods:
+ *
+ * - $mdDialogPreset#title(string) - Sets the confirm title.
+ * - $mdDialogPreset#textContent(string) - Sets the confirm message.
+ * - $mdDialogPreset#htmlContent(string) - Sets the confirm message as HTML. Requires ngSanitize
+ * module to be loaded. HTML is not run through Angular's compiler.
+ * - $mdDialogPreset#ok(string) - Sets the confirm "Okay" button text.
+ * - $mdDialogPreset#cancel(string) - Sets the confirm "Cancel" button text.
+ * - $mdDialogPreset#theme(string) - Sets the theme of the confirm dialog.
+ * - $mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option,
+ * the location of the click will be used as the starting point for the opening animation
+ * of the the dialog.
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdDialog#prompt
+ *
+ * @description
+ * Builds a preconfigured dialog with the specified message and input box. You can call show and the promise returned
+ * will be resolved only if the user clicks the prompt action on the dialog, passing the input value as the first argument.
+ *
+ * @returns {obj} an `$mdDialogPreset` with the chainable configuration methods:
+ *
+ * Additionally, it supports the following methods:
+ *
+ * - $mdDialogPreset#title(string) - Sets the prompt title.
+ * - $mdDialogPreset#textContent(string) - Sets the prompt message.
+ * - $mdDialogPreset#htmlContent(string) - Sets the prompt message as HTML. Requires ngSanitize
+ * module to be loaded. HTML is not run through Angular's compiler.
+ * - $mdDialogPreset#placeholder(string) - Sets the placeholder text for the input.
+ * - $mdDialogPreset#initialValue(string) - Sets the initial value for the prompt input.
+ * - $mdDialogPreset#ok(string) - Sets the prompt "Okay" button text.
+ * - $mdDialogPreset#cancel(string) - Sets the prompt "Cancel" button text.
+ * - $mdDialogPreset#theme(string) - Sets the theme of the prompt dialog.
+ * - $mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option,
+ * the location of the click will be used as the starting point for the opening animation
+ * of the the dialog.
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdDialog#show
+ *
+ * @description
+ * Show a dialog with the specified options.
+ *
+ * @param {object} optionsOrPreset Either provide an `$mdDialogPreset` returned from `alert()`, and
+ * `confirm()`, or an options object with the following properties:
+ * - `templateUrl` - `{string=}`: The url of a template that will be used as the content
+ * of the dialog.
+ * - `template` - `{string=}`: HTML template to show in the dialog. This **must** be trusted HTML
+ * with respect to Angular's [$sce service](https://docs.angularjs.org/api/ng/service/$sce).
+ * This template should **never** be constructed with any kind of user input or user data.
+ * - `contentElement` - `{string|Element}`: Instead of using a template, which will be compiled each time a
+ * dialog opens, you can also use a DOM element.
+ * * When specifying an element, which is present on the DOM, `$mdDialog` will temporary fetch the element into
+ * the dialog and restores it at the old DOM position upon close.
+ * * When specifying a string, the string be used as a CSS selector, to lookup for the element in the DOM.
+ * - `autoWrap` - `{boolean=}`: Whether or not to automatically wrap the template with a
+ * `` tag if one is not provided. Defaults to true. Can be disabled if you provide a
+ * custom dialog directive.
+ * - `targetEvent` - `{DOMClickEvent=}`: A click's event object. When passed in as an option,
+ * the location of the click will be used as the starting point for the opening animation
+ * of the the dialog.
+ * - `openFrom` - `{string|Element|object}`: The query selector, DOM element or the Rect object
+ * that is used to determine the bounds (top, left, height, width) from which the Dialog will
+ * originate.
+ * - `closeTo` - `{string|Element|object}`: The query selector, DOM element or the Rect object
+ * that is used to determine the bounds (top, left, height, width) to which the Dialog will
+ * target.
+ * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified,
+ * it will create a new isolate scope.
+ * This scope will be destroyed when the dialog is removed unless `preserveScope` is set to true.
+ * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
+ * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the dialog is open.
+ * Default true.
+ * - `hasBackdrop` - `{boolean=}`: Whether there should be an opaque backdrop behind the dialog.
+ * Default true.
+ * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the dialog to
+ * close it. Default false.
+ * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the dialog.
+ * Default true.
+ * - `focusOnOpen` - `{boolean=}`: An option to override focus behavior on open. Only disable if
+ * focusing some other way, as focus management is required for dialogs to be accessible.
+ * Defaults to true.
+ * - `controller` - `{function|string=}`: The controller to associate with the dialog. The controller
+ * will be injected with the local `$mdDialog`, which passes along a scope for the dialog.
+ * - `locals` - `{object=}`: An object containing key/value pairs. The keys will be used as names
+ * of values to inject into the controller. For example, `locals: {three: 3}` would inject
+ * `three` into the controller, with the value 3. If `bindToController` is true, they will be
+ * copied to the controller instead.
+ * - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in.
+ * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values, and the
+ * dialog will not open until all of the promises resolve.
+ * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
+ * - `parent` - `{element=}`: The element to append the dialog to. Defaults to appending
+ * to the root element of the application.
+ * - `onShowing` - `function(scope, element)`: Callback function used to announce the show() action is
+ * starting.
+ * - `onComplete` - `function(scope, element)`: Callback function used to announce when the show() action is
+ * finished.
+ * - `onRemoving` - `function(element, removePromise)`: Callback function used to announce the
+ * close/hide() action is starting. This allows developers to run custom animations
+ * in parallel the close animations.
+ * - `fullscreen` `{boolean=}`: An option to toggle whether the dialog should show in fullscreen
+ * or not. Defaults to `false`.
+ * @returns {promise} A promise that can be resolved with `$mdDialog.hide()` or
+ * rejected with `$mdDialog.cancel()`.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdDialog#hide
+ *
+ * @description
+ * Hide an existing dialog and resolve the promise returned from `$mdDialog.show()`.
+ *
+ * @param {*=} response An argument for the resolved promise.
+ *
+ * @returns {promise} A promise that is resolved when the dialog has been closed.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdDialog#cancel
+ *
+ * @description
+ * Hide an existing dialog and reject the promise returned from `$mdDialog.show()`.
+ *
+ * @param {*=} response An argument for the rejected promise.
+ *
+ * @returns {promise} A promise that is resolved when the dialog has been closed.
+ */
+
+function MdDialogProvider($$interimElementProvider) {
+ // Elements to capture and redirect focus when the user presses tab at the dialog boundary.
+ advancedDialogOptions.$inject = ["$mdDialog", "$mdConstant"];
+ dialogDefaultOptions.$inject = ["$mdDialog", "$mdAria", "$mdUtil", "$mdConstant", "$animate", "$document", "$window", "$rootElement", "$log", "$injector", "$mdTheming", "$interpolate", "$mdInteraction"];
+ var topFocusTrap, bottomFocusTrap;
+
+ return $$interimElementProvider('$mdDialog')
+ .setDefaults({
+ methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose',
+ 'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen', 'multiple'],
+ options: dialogDefaultOptions
+ })
+ .addPreset('alert', {
+ methods: ['title', 'htmlContent', 'textContent', 'content', 'ariaLabel', 'ok', 'theme',
+ 'css'],
+ options: advancedDialogOptions
+ })
+ .addPreset('confirm', {
+ methods: ['title', 'htmlContent', 'textContent', 'content', 'ariaLabel', 'ok', 'cancel',
+ 'theme', 'css'],
+ options: advancedDialogOptions
+ })
+ .addPreset('prompt', {
+ methods: ['title', 'htmlContent', 'textContent', 'initialValue', 'content', 'placeholder', 'ariaLabel',
+ 'ok', 'cancel', 'theme', 'css'],
+ options: advancedDialogOptions
+ });
+
+ /* @ngInject */
+ function advancedDialogOptions($mdDialog, $mdConstant) {
+ return {
+ template: [
+ '',
+ ' ',
+ '
{{ dialog.title }}
',
+ ' ',
+ '
',
+ '
{{::dialog.mdTextContent}}
',
+ '
',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' ',
+ ' {{ dialog.cancel }}',
+ ' ',
+ ' ',
+ ' {{ dialog.ok }}',
+ ' ',
+ ' ',
+ ''
+ ].join('').replace(/\s\s+/g, ''),
+ controller: function mdDialogCtrl() {
+ var isPrompt = this.$type == 'prompt';
+
+ if (isPrompt && this.initialValue) {
+ this.result = this.initialValue;
+ }
+
+ this.hide = function() {
+ $mdDialog.hide(isPrompt ? this.result : true);
+ };
+ this.abort = function() {
+ $mdDialog.cancel();
+ };
+ this.keypress = function($event) {
+ if ($event.keyCode === $mdConstant.KEY_CODE.ENTER) {
+ $mdDialog.hide(this.result);
+ }
+ };
+ },
+ controllerAs: 'dialog',
+ bindToController: true,
+ };
+ }
+
+ /* @ngInject */
+ function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement,
+ $log, $injector, $mdTheming, $interpolate, $mdInteraction) {
+
+ return {
+ hasBackdrop: true,
+ isolateScope: true,
+ onCompiling: beforeCompile,
+ onShow: onShow,
+ onShowing: beforeShow,
+ onRemove: onRemove,
+ clickOutsideToClose: false,
+ escapeToClose: true,
+ targetEvent: null,
+ closeTo: null,
+ openFrom: null,
+ focusOnOpen: true,
+ disableParentScroll: true,
+ autoWrap: true,
+ fullscreen: false,
+ transformTemplate: function(template, options) {
+ // Make the dialog container focusable, because otherwise the focus will be always redirected to
+ // an element outside of the container, and the focus trap won't work probably..
+ // Also the tabindex is needed for the `escapeToClose` functionality, because
+ // the keyDown event can't be triggered when the focus is outside of the container.
+ var startSymbol = $interpolate.startSymbol();
+ var endSymbol = $interpolate.endSymbol();
+ var theme = startSymbol + (options.themeWatch ? '' : '::') + 'theme' + endSymbol;
+ return '
' + validatedTemplate(template) + '
';
+
+ /**
+ * The specified template should contain a wrapper element....
+ */
+ function validatedTemplate(template) {
+ if (options.autoWrap && !/<\/md-dialog>/g.test(template)) {
+ return '' + (template || '') + '';
+ } else {
+ return template || '';
+ }
+ }
+ }
+ };
+
+ function beforeCompile(options) {
+ // Automatically apply the theme, if the user didn't specify a theme explicitly.
+ // Those option changes need to be done, before the compilation has started, because otherwise
+ // the option changes will be not available in the $mdCompilers locales.
+ options.defaultTheme = $mdTheming.defaultTheme();
+
+ detectTheming(options);
+ }
+
+ function beforeShow(scope, element, options, controller) {
+
+ if (controller) {
+ var mdHtmlContent = controller.htmlContent || options.htmlContent || '';
+ var mdTextContent = controller.textContent || options.textContent ||
+ controller.content || options.content || '';
+
+ if (mdHtmlContent && !$injector.has('$sanitize')) {
+ throw Error('The ngSanitize module must be loaded in order to use htmlContent.');
+ }
+
+ if (mdHtmlContent && mdTextContent) {
+ throw Error('md-dialog cannot have both `htmlContent` and `textContent`');
+ }
+
+ // Only assign the content if nothing throws, otherwise it'll still be compiled.
+ controller.mdHtmlContent = mdHtmlContent;
+ controller.mdTextContent = mdTextContent;
+ }
+ }
+
+ /** Show method for dialogs */
+ function onShow(scope, element, options, controller) {
+ angular.element($document[0].body).addClass('md-dialog-is-showing');
+
+ var dialogElement = element.find('md-dialog');
+
+ // Once a dialog has `ng-cloak` applied on his template the dialog animation will not work properly.
+ // This is a very common problem, so we have to notify the developer about this.
+ if (dialogElement.hasClass('ng-cloak')) {
+ var message = '$mdDialog: using `` will affect the dialog opening animations.';
+ $log.warn( message, element[0] );
+ }
+
+ captureParentAndFromToElements(options);
+ configureAria(dialogElement, options);
+ showBackdrop(scope, element, options);
+ activateListeners(element, options);
+
+ return dialogPopIn(element, options)
+ .then(function() {
+ lockScreenReader(element, options);
+ warnDeprecatedActions();
+ focusOnOpen();
+ });
+
+ /**
+ * Check to see if they used the deprecated .md-actions class and log a warning
+ */
+ function warnDeprecatedActions() {
+ if (element[0].querySelector('.md-actions')) {
+ $log.warn('Using a class of md-actions is deprecated, please use .');
+ }
+ }
+
+ /**
+ * For alerts, focus on content... otherwise focus on
+ * the close button (or equivalent)
+ */
+ function focusOnOpen() {
+ if (options.focusOnOpen) {
+ var target = $mdUtil.findFocusTarget(element) || findCloseButton() || dialogElement;
+ target.focus();
+ }
+
+ /**
+ * If no element with class dialog-close, try to find the last
+ * button child in md-actions and assume it is a close button.
+ *
+ * If we find no actions at all, log a warning to the console.
+ */
+ function findCloseButton() {
+ return element[0].querySelector('.dialog-close, md-dialog-actions button:last-child');
+ }
+ }
+ }
+
+ /**
+ * Remove function for all dialogs
+ */
+ function onRemove(scope, element, options) {
+ options.deactivateListeners();
+ options.unlockScreenReader();
+ options.hideBackdrop(options.$destroy);
+
+ // Remove the focus traps that we added earlier for keeping focus within the dialog.
+ if (topFocusTrap && topFocusTrap.parentNode) {
+ topFocusTrap.parentNode.removeChild(topFocusTrap);
+ }
+
+ if (bottomFocusTrap && bottomFocusTrap.parentNode) {
+ bottomFocusTrap.parentNode.removeChild(bottomFocusTrap);
+ }
+
+ // For navigation $destroy events, do a quick, non-animated removal,
+ // but for normal closes (from clicks, etc) animate the removal
+ return !!options.$destroy ? detachAndClean() : animateRemoval().then( detachAndClean );
+
+ /**
+ * For normal closes, animate the removal.
+ * For forced closes (like $destroy events), skip the animations
+ */
+ function animateRemoval() {
+ return dialogPopOut(element, options);
+ }
+
+ /**
+ * Detach the element
+ */
+ function detachAndClean() {
+ angular.element($document[0].body).removeClass('md-dialog-is-showing');
+
+ // Reverse the container stretch if using a content element.
+ if (options.contentElement) {
+ options.reverseContainerStretch();
+ }
+
+ // Exposed cleanup function from the $mdCompiler.
+ options.cleanupElement();
+
+ // Restores the focus to the origin element if the last interaction upon opening was a keyboard.
+ if (!options.$destroy && options.originInteraction === 'keyboard') {
+ options.origin.focus();
+ }
+ }
+ }
+
+ function detectTheming(options) {
+ // Once the user specifies a targetEvent, we will automatically try to find the correct
+ // nested theme.
+ var targetEl;
+ if (options.targetEvent && options.targetEvent.target) {
+ targetEl = angular.element(options.targetEvent.target);
+ }
+
+ var themeCtrl = targetEl && targetEl.controller('mdTheme');
+
+ if (!themeCtrl) {
+ return;
+ }
+
+ options.themeWatch = themeCtrl.$shouldWatch;
+
+ var theme = options.theme || themeCtrl.$mdTheme;
+
+ if (theme) {
+ options.scope.theme = theme;
+ }
+
+ var unwatch = themeCtrl.registerChanges(function (newTheme) {
+ options.scope.theme = newTheme;
+
+ if (!options.themeWatch) {
+ unwatch();
+ }
+ });
+ }
+
+ /**
+ * Capture originator/trigger/from/to element information (if available)
+ * and the parent container for the dialog; defaults to the $rootElement
+ * unless overridden in the options.parent
+ */
+ function captureParentAndFromToElements(options) {
+ options.origin = angular.extend({
+ element: null,
+ bounds: null,
+ focus: angular.noop
+ }, options.origin || {});
+
+ options.parent = getDomElement(options.parent, $rootElement);
+ options.closeTo = getBoundingClientRect(getDomElement(options.closeTo));
+ options.openFrom = getBoundingClientRect(getDomElement(options.openFrom));
+
+ if ( options.targetEvent ) {
+ options.origin = getBoundingClientRect(options.targetEvent.target, options.origin);
+ options.originInteraction = $mdInteraction.getLastInteractionType();
+ }
+
+
+ /**
+ * Identify the bounding RECT for the target element
+ *
+ */
+ function getBoundingClientRect (element, orig) {
+ var source = angular.element((element || {}));
+ if (source && source.length) {
+ // Compute and save the target element's bounding rect, so that if the
+ // element is hidden when the dialog closes, we can shrink the dialog
+ // back to the same position it expanded from.
+ //
+ // Checking if the source is a rect object or a DOM element
+ var bounds = {top:0,left:0,height:0,width:0};
+ var hasFn = angular.isFunction(source[0].getBoundingClientRect);
+
+ return angular.extend(orig || {}, {
+ element : hasFn ? source : undefined,
+ bounds : hasFn ? source[0].getBoundingClientRect() : angular.extend({}, bounds, source[0]),
+ focus : angular.bind(source, source.focus),
+ });
+ }
+ }
+
+ /**
+ * If the specifier is a simple string selector, then query for
+ * the DOM element.
+ */
+ function getDomElement(element, defaultElement) {
+ if (angular.isString(element)) {
+ element = $document[0].querySelector(element);
+ }
+
+ // If we have a reference to a raw dom element, always wrap it in jqLite
+ return angular.element(element || defaultElement);
+ }
+
+ }
+
+ /**
+ * Listen for escape keys and outside clicks to auto close
+ */
+ function activateListeners(element, options) {
+ var window = angular.element($window);
+ var onWindowResize = $mdUtil.debounce(function() {
+ stretchDialogContainerToViewport(element, options);
+ }, 60);
+
+ var removeListeners = [];
+ var smartClose = function() {
+ // Only 'confirm' dialogs have a cancel button... escape/clickOutside will
+ // cancel or fallback to hide.
+ var closeFn = ( options.$type == 'alert' ) ? $mdDialog.hide : $mdDialog.cancel;
+ $mdUtil.nextTick(closeFn, true);
+ };
+
+ if (options.escapeToClose) {
+ var parentTarget = options.parent;
+ var keyHandlerFn = function(ev) {
+ if (ev.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
+ ev.stopPropagation();
+ ev.preventDefault();
+
+ smartClose();
+ }
+ };
+
+ // Add keydown listeners
+ element.on('keydown', keyHandlerFn);
+ parentTarget.on('keydown', keyHandlerFn);
+
+ // Queue remove listeners function
+ removeListeners.push(function() {
+
+ element.off('keydown', keyHandlerFn);
+ parentTarget.off('keydown', keyHandlerFn);
+
+ });
+ }
+
+ // Register listener to update dialog on window resize
+ window.on('resize', onWindowResize);
+
+ removeListeners.push(function() {
+ window.off('resize', onWindowResize);
+ });
+
+ if (options.clickOutsideToClose) {
+ var target = element;
+ var sourceElem;
+
+ // Keep track of the element on which the mouse originally went down
+ // so that we can only close the backdrop when the 'click' started on it.
+ // A simple 'click' handler does not work,
+ // it sets the target object as the element the mouse went down on.
+ var mousedownHandler = function(ev) {
+ sourceElem = ev.target;
+ };
+
+ // We check if our original element and the target is the backdrop
+ // because if the original was the backdrop and the target was inside the dialog
+ // we don't want to dialog to close.
+ var mouseupHandler = function(ev) {
+ if (sourceElem === target[0] && ev.target === target[0]) {
+ ev.stopPropagation();
+ ev.preventDefault();
+
+ smartClose();
+ }
+ };
+
+ // Add listeners
+ target.on('mousedown', mousedownHandler);
+ target.on('mouseup', mouseupHandler);
+
+ // Queue remove listeners function
+ removeListeners.push(function() {
+ target.off('mousedown', mousedownHandler);
+ target.off('mouseup', mouseupHandler);
+ });
+ }
+
+ // Attach specific `remove` listener handler
+ options.deactivateListeners = function() {
+ removeListeners.forEach(function(removeFn) {
+ removeFn();
+ });
+ options.deactivateListeners = null;
+ };
+ }
+
+ /**
+ * Show modal backdrop element...
+ */
+ function showBackdrop(scope, element, options) {
+
+ if (options.disableParentScroll) {
+ // !! DO this before creating the backdrop; since disableScrollAround()
+ // configures the scroll offset; which is used by mdBackDrop postLink()
+ options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);
+ }
+
+ if (options.hasBackdrop) {
+ options.backdrop = $mdUtil.createBackdrop(scope, "md-dialog-backdrop md-opaque");
+ $animate.enter(options.backdrop, options.parent);
+ }
+
+ /**
+ * Hide modal backdrop element...
+ */
+ options.hideBackdrop = function hideBackdrop($destroy) {
+ if (options.backdrop) {
+ if ( !!$destroy ) options.backdrop.remove();
+ else $animate.leave(options.backdrop);
+ }
+
+
+ if (options.disableParentScroll) {
+ options.restoreScroll && options.restoreScroll();
+ delete options.restoreScroll;
+ }
+
+ options.hideBackdrop = null;
+ };
+ }
+
+ /**
+ * Inject ARIA-specific attributes appropriate for Dialogs
+ */
+ function configureAria(element, options) {
+
+ var role = (options.$type === 'alert') ? 'alertdialog' : 'dialog';
+ var dialogContent = element.find('md-dialog-content');
+ var existingDialogId = element.attr('id');
+ var dialogContentId = 'dialogContent_' + (existingDialogId || $mdUtil.nextUid());
+
+ element.attr({
+ 'role': role,
+ 'tabIndex': '-1'
+ });
+
+ if (dialogContent.length === 0) {
+ dialogContent = element;
+ // If the dialog element already had an ID, don't clobber it.
+ if (existingDialogId) {
+ dialogContentId = existingDialogId;
+ }
+ }
+
+ dialogContent.attr('id', dialogContentId);
+ element.attr('aria-describedby', dialogContentId);
+
+ if (options.ariaLabel) {
+ $mdAria.expect(element, 'aria-label', options.ariaLabel);
+ }
+ else {
+ $mdAria.expectAsync(element, 'aria-label', function() {
+ var words = dialogContent.text().split(/\s+/);
+ if (words.length > 3) words = words.slice(0, 3).concat('...');
+ return words.join(' ');
+ });
+ }
+
+ // Set up elements before and after the dialog content to capture focus and
+ // redirect back into the dialog.
+ topFocusTrap = document.createElement('div');
+ topFocusTrap.classList.add('md-dialog-focus-trap');
+ topFocusTrap.tabIndex = 0;
+
+ bottomFocusTrap = topFocusTrap.cloneNode(false);
+
+ // When focus is about to move out of the dialog, we want to intercept it and redirect it
+ // back to the dialog element.
+ var focusHandler = function() {
+ element.focus();
+ };
+ topFocusTrap.addEventListener('focus', focusHandler);
+ bottomFocusTrap.addEventListener('focus', focusHandler);
+
+ // The top focus trap inserted immeidately before the md-dialog element (as a sibling).
+ // The bottom focus trap is inserted at the very end of the md-dialog element (as a child).
+ element[0].parentNode.insertBefore(topFocusTrap, element[0]);
+ element.after(bottomFocusTrap);
+ }
+
+ /**
+ * Prevents screen reader interaction behind modal window
+ * on swipe interfaces
+ */
+ function lockScreenReader(element, options) {
+ var isHidden = true;
+
+ // get raw DOM node
+ walkDOM(element[0]);
+
+ options.unlockScreenReader = function() {
+ isHidden = false;
+ walkDOM(element[0]);
+
+ options.unlockScreenReader = null;
+ };
+
+ /**
+ * Walk DOM to apply or remove aria-hidden on sibling nodes
+ * and parent sibling nodes
+ *
+ */
+ function walkDOM(element) {
+ while (element.parentNode) {
+ if (element === document.body) {
+ return;
+ }
+ var children = element.parentNode.children;
+ for (var i = 0; i < children.length; i++) {
+ // skip over child if it is an ascendant of the dialog
+ // or a script or style tag
+ if (element !== children[i] && !isNodeOneOf(children[i], ['SCRIPT', 'STYLE'])) {
+ children[i].setAttribute('aria-hidden', isHidden);
+ }
+ }
+
+ walkDOM(element = element.parentNode);
+ }
+ }
+ }
+
+ /**
+ * Ensure the dialog container fill-stretches to the viewport
+ */
+ function stretchDialogContainerToViewport(container, options) {
+ var isFixed = $window.getComputedStyle($document[0].body).position == 'fixed';
+ var backdrop = options.backdrop ? $window.getComputedStyle(options.backdrop[0]) : null;
+ var height = backdrop ? Math.min($document[0].body.clientHeight, Math.ceil(Math.abs(parseInt(backdrop.height, 10)))) : 0;
+
+ var previousStyles = {
+ top: container.css('top'),
+ height: container.css('height')
+ };
+
+ // If the body is fixed, determine the distance to the viewport in relative from the parent.
+ var parentTop = Math.abs(options.parent[0].getBoundingClientRect().top);
+
+ container.css({
+ top: (isFixed ? parentTop : 0) + 'px',
+ height: height ? height + 'px' : '100%'
+ });
+
+ return function() {
+ // Reverts the modified styles back to the previous values.
+ // This is needed for contentElements, which should have the same styles after close
+ // as before.
+ container.css(previousStyles);
+ };
+ }
+
+ /**
+ * Dialog open and pop-in animation
+ */
+ function dialogPopIn(container, options) {
+ // Add the `md-dialog-container` to the DOM
+ options.parent.append(container);
+ options.reverseContainerStretch = stretchDialogContainerToViewport(container, options);
+
+ var dialogEl = container.find('md-dialog');
+ var animator = $mdUtil.dom.animator;
+ var buildTranslateToOrigin = animator.calculateZoomToOrigin;
+ var translateOptions = {transitionInClass: 'md-transition-in', transitionOutClass: 'md-transition-out'};
+ var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
+ var to = animator.toTransformCss(""); // defaults to center display (or parent or $rootElement)
+
+ dialogEl.toggleClass('md-dialog-fullscreen', !!options.fullscreen);
+
+ return animator
+ .translate3d(dialogEl, from, to, translateOptions)
+ .then(function(animateReversal) {
+
+ // Build a reversal translate function synced to this translation...
+ options.reverseAnimate = function() {
+ delete options.reverseAnimate;
+
+ if (options.closeTo) {
+ // Using the opposite classes to create a close animation to the closeTo element
+ translateOptions = {transitionInClass: 'md-transition-out', transitionOutClass: 'md-transition-in'};
+ from = to;
+ to = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.closeTo));
+
+ return animator
+ .translate3d(dialogEl, from, to,translateOptions);
+ }
+
+ return animateReversal(
+ to = animator.toTransformCss(
+ // in case the origin element has moved or is hidden,
+ // let's recalculate the translateCSS
+ buildTranslateToOrigin(dialogEl, options.origin)
+ )
+ );
+
+ };
+
+ // Function to revert the generated animation styles on the dialog element.
+ // Useful when using a contentElement instead of a template.
+ options.clearAnimate = function() {
+ delete options.clearAnimate;
+
+ // Remove the transition classes, added from $animateCSS, since those can't be removed
+ // by reversely running the animator.
+ dialogEl.removeClass([
+ translateOptions.transitionOutClass,
+ translateOptions.transitionInClass
+ ].join(' '));
+
+ // Run the animation reversely to remove the previous added animation styles.
+ return animator.translate3d(dialogEl, to, animator.toTransformCss(''), {});
+ };
+
+ return true;
+ });
+ }
+
+ /**
+ * Dialog close and pop-out animation
+ */
+ function dialogPopOut(container, options) {
+ return options.reverseAnimate().then(function() {
+ if (options.contentElement) {
+ // When we use a contentElement, we want the element to be the same as before.
+ // That means, that we have to clear all the animation properties, like transform.
+ options.clearAnimate();
+ }
+ });
+ }
+
+ /**
+ * Utility function to filter out raw DOM nodes
+ */
+ function isNodeOneOf(elem, nodeTypeArray) {
+ if (nodeTypeArray.indexOf(elem.nodeName) !== -1) {
+ return true;
+ }
+ }
+
+ }
+}
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.divider
+ * @description Divider module!
+ */
+MdDividerDirective.$inject = ["$mdTheming"];
+angular.module('material.components.divider', [
+ 'material.core'
+])
+ .directive('mdDivider', MdDividerDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdDivider
+ * @module material.components.divider
+ * @restrict E
+ *
+ * @description
+ * Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content.
+ *
+ * @param {boolean=} md-inset Add this attribute to activate the inset divider style.
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+function MdDividerDirective($mdTheming) {
+ return {
+ restrict: 'E',
+ link: $mdTheming
+ };
+}
+
+})();
+(function(){
+"use strict";
+
+(function() {
+ 'use strict';
+
+ /**
+ * @ngdoc module
+ * @name material.components.fabActions
+ */
+ MdFabActionsDirective.$inject = ["$mdUtil"];
+ angular
+ .module('material.components.fabActions', ['material.core'])
+ .directive('mdFabActions', MdFabActionsDirective);
+
+ /**
+ * @ngdoc directive
+ * @name mdFabActions
+ * @module material.components.fabActions
+ *
+ * @restrict E
+ *
+ * @description
+ * The `` directive is used inside of a `` or
+ * `` directive to mark an element (or elements) as the actions and setup the
+ * proper event listeners.
+ *
+ * @usage
+ * See the `` or `` directives for example usage.
+ */
+ function MdFabActionsDirective($mdUtil) {
+ return {
+ restrict: 'E',
+
+ require: ['^?mdFabSpeedDial', '^?mdFabToolbar'],
+
+ compile: function(element, attributes) {
+ var children = element.children();
+
+ var hasNgRepeat = $mdUtil.prefixer().hasAttribute(children, 'ng-repeat');
+
+ // Support both ng-repeat and static content
+ if (hasNgRepeat) {
+ children.addClass('md-fab-action-item');
+ } else {
+ // Wrap every child in a new div and add a class that we can scale/fling independently
+ children.wrap('
');
+ }
+ }
+ };
+ }
+
+})();
+
+})();
+(function(){
+"use strict";
+
+(function() {
+ 'use strict';
+
+ MdFabController.$inject = ["$scope", "$element", "$animate", "$mdUtil", "$mdConstant", "$timeout"];
+ angular.module('material.components.fabShared', ['material.core'])
+ .controller('MdFabController', MdFabController);
+
+ function MdFabController($scope, $element, $animate, $mdUtil, $mdConstant, $timeout) {
+ var vm = this;
+ var initialAnimationAttempts = 0;
+
+ // NOTE: We use async eval(s) below to avoid conflicts with any existing digest loops
+
+ vm.open = function() {
+ $scope.$evalAsync("vm.isOpen = true");
+ };
+
+ vm.close = function() {
+ // Async eval to avoid conflicts with existing digest loops
+ $scope.$evalAsync("vm.isOpen = false");
+
+ // Focus the trigger when the element closes so users can still tab to the next item
+ $element.find('md-fab-trigger')[0].focus();
+ };
+
+ // Toggle the open/close state when the trigger is clicked
+ vm.toggle = function() {
+ $scope.$evalAsync("vm.isOpen = !vm.isOpen");
+ };
+
+ /*
+ * Angular Lifecycle hook for newer Angular versions.
+ * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook.
+ */
+ vm.$onInit = function() {
+ setupDefaults();
+ setupListeners();
+ setupWatchers();
+
+ fireInitialAnimations();
+ };
+
+ // For Angular 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned,
+ // manually call the $onInit hook.
+ if (angular.version.major === 1 && angular.version.minor <= 4) {
+ this.$onInit();
+ }
+
+ function setupDefaults() {
+ // Set the default direction to 'down' if none is specified
+ vm.direction = vm.direction || 'down';
+
+ // Set the default to be closed
+ vm.isOpen = vm.isOpen || false;
+
+ // Start the keyboard interaction at the first action
+ resetActionIndex();
+
+ // Add an animations waiting class so we know not to run
+ $element.addClass('md-animations-waiting');
+ }
+
+ function setupListeners() {
+ var eventTypes = [
+ 'click', 'focusin', 'focusout'
+ ];
+
+ // Add our listeners
+ angular.forEach(eventTypes, function(eventType) {
+ $element.on(eventType, parseEvents);
+ });
+
+ // Remove our listeners when destroyed
+ $scope.$on('$destroy', function() {
+ angular.forEach(eventTypes, function(eventType) {
+ $element.off(eventType, parseEvents);
+ });
+
+ // remove any attached keyboard handlers in case element is removed while
+ // speed dial is open
+ disableKeyboard();
+ });
+ }
+
+ var closeTimeout;
+ function parseEvents(event) {
+ // If the event is a click, just handle it
+ if (event.type == 'click') {
+ handleItemClick(event);
+ }
+
+ // If we focusout, set a timeout to close the element
+ if (event.type == 'focusout' && !closeTimeout) {
+ closeTimeout = $timeout(function() {
+ vm.close();
+ }, 100, false);
+ }
+
+ // If we see a focusin and there is a timeout about to run, cancel it so we stay open
+ if (event.type == 'focusin' && closeTimeout) {
+ $timeout.cancel(closeTimeout);
+ closeTimeout = null;
+ }
+ }
+
+ function resetActionIndex() {
+ vm.currentActionIndex = -1;
+ }
+
+ function setupWatchers() {
+ // Watch for changes to the direction and update classes/attributes
+ $scope.$watch('vm.direction', function(newDir, oldDir) {
+ // Add the appropriate classes so we can target the direction in the CSS
+ $animate.removeClass($element, 'md-' + oldDir);
+ $animate.addClass($element, 'md-' + newDir);
+
+ // Reset the action index since it may have changed
+ resetActionIndex();
+ });
+
+ var trigger, actions;
+
+ // Watch for changes to md-open
+ $scope.$watch('vm.isOpen', function(isOpen) {
+ // Reset the action index since it may have changed
+ resetActionIndex();
+
+ // We can't get the trigger/actions outside of the watch because the component hasn't been
+ // linked yet, so we wait until the first watch fires to cache them.
+ if (!trigger || !actions) {
+ trigger = getTriggerElement();
+ actions = getActionsElement();
+ }
+
+ if (isOpen) {
+ enableKeyboard();
+ } else {
+ disableKeyboard();
+ }
+
+ var toAdd = isOpen ? 'md-is-open' : '';
+ var toRemove = isOpen ? '' : 'md-is-open';
+
+ // Set the proper ARIA attributes
+ trigger.attr('aria-haspopup', true);
+ trigger.attr('aria-expanded', isOpen);
+ actions.attr('aria-hidden', !isOpen);
+
+ // Animate the CSS classes
+ $animate.setClass($element, toAdd, toRemove);
+ });
+ }
+
+ function fireInitialAnimations() {
+ // If the element is actually visible on the screen
+ if ($element[0].scrollHeight > 0) {
+ // Fire our animation
+ $animate.addClass($element, '_md-animations-ready').then(function() {
+ // Remove the waiting class
+ $element.removeClass('md-animations-waiting');
+ });
+ }
+
+ // Otherwise, try for up to 1 second before giving up
+ else if (initialAnimationAttempts < 10) {
+ $timeout(fireInitialAnimations, 100);
+
+ // Increment our counter
+ initialAnimationAttempts = initialAnimationAttempts + 1;
+ }
+ }
+
+ function enableKeyboard() {
+ $element.on('keydown', keyPressed);
+
+ // On the next tick, setup a check for outside clicks; we do this on the next tick to avoid
+ // clicks/touches that result in the isOpen attribute changing (e.g. a bound radio button)
+ $mdUtil.nextTick(function() {
+ angular.element(document).on('click touchend', checkForOutsideClick);
+ });
+
+ // TODO: On desktop, we should be able to reset the indexes so you cannot tab through, but
+ // this breaks accessibility, especially on mobile, since you have no arrow keys to press
+ //resetActionTabIndexes();
+ }
+
+ function disableKeyboard() {
+ $element.off('keydown', keyPressed);
+ angular.element(document).off('click touchend', checkForOutsideClick);
+ }
+
+ function checkForOutsideClick(event) {
+ if (event.target) {
+ var closestTrigger = $mdUtil.getClosest(event.target, 'md-fab-trigger');
+ var closestActions = $mdUtil.getClosest(event.target, 'md-fab-actions');
+
+ if (!closestTrigger && !closestActions) {
+ vm.close();
+ }
+ }
+ }
+
+ function keyPressed(event) {
+ switch (event.which) {
+ case $mdConstant.KEY_CODE.ESCAPE: vm.close(); event.preventDefault(); return false;
+ case $mdConstant.KEY_CODE.LEFT_ARROW: doKeyLeft(event); return false;
+ case $mdConstant.KEY_CODE.UP_ARROW: doKeyUp(event); return false;
+ case $mdConstant.KEY_CODE.RIGHT_ARROW: doKeyRight(event); return false;
+ case $mdConstant.KEY_CODE.DOWN_ARROW: doKeyDown(event); return false;
+ }
+ }
+
+ function doActionPrev(event) {
+ focusAction(event, -1);
+ }
+
+ function doActionNext(event) {
+ focusAction(event, 1);
+ }
+
+ function focusAction(event, direction) {
+ var actions = resetActionTabIndexes();
+
+ // Increment/decrement the counter with restrictions
+ vm.currentActionIndex = vm.currentActionIndex + direction;
+ vm.currentActionIndex = Math.min(actions.length - 1, vm.currentActionIndex);
+ vm.currentActionIndex = Math.max(0, vm.currentActionIndex);
+
+ // Focus the element
+ var focusElement = angular.element(actions[vm.currentActionIndex]).children()[0];
+ angular.element(focusElement).attr('tabindex', 0);
+ focusElement.focus();
+
+ // Make sure the event doesn't bubble and cause something else
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ }
+
+ function resetActionTabIndexes() {
+ // Grab all of the actions
+ var actions = getActionsElement()[0].querySelectorAll('.md-fab-action-item');
+
+ // Disable all other actions for tabbing
+ angular.forEach(actions, function(action) {
+ angular.element(angular.element(action).children()[0]).attr('tabindex', -1);
+ });
+
+ return actions;
+ }
+
+ function doKeyLeft(event) {
+ if (vm.direction === 'left') {
+ doActionNext(event);
+ } else {
+ doActionPrev(event);
+ }
+ }
+
+ function doKeyUp(event) {
+ if (vm.direction === 'down') {
+ doActionPrev(event);
+ } else {
+ doActionNext(event);
+ }
+ }
+
+ function doKeyRight(event) {
+ if (vm.direction === 'left') {
+ doActionPrev(event);
+ } else {
+ doActionNext(event);
+ }
+ }
+
+ function doKeyDown(event) {
+ if (vm.direction === 'up') {
+ doActionPrev(event);
+ } else {
+ doActionNext(event);
+ }
+ }
+
+ function isTrigger(element) {
+ return $mdUtil.getClosest(element, 'md-fab-trigger');
+ }
+
+ function isAction(element) {
+ return $mdUtil.getClosest(element, 'md-fab-actions');
+ }
+
+ function handleItemClick(event) {
+ if (isTrigger(event.target)) {
+ vm.toggle();
+ }
+
+ if (isAction(event.target)) {
+ vm.close();
+ }
+ }
+
+ function getTriggerElement() {
+ return $element.find('md-fab-trigger');
+ }
+
+ function getActionsElement() {
+ return $element.find('md-fab-actions');
+ }
+ }
+})();
+
+})();
+(function(){
+"use strict";
+
+(function() {
+ 'use strict';
+
+ /**
+ * The duration of the CSS animation in milliseconds.
+ *
+ * @type {number}
+ */
+ MdFabSpeedDialFlingAnimation.$inject = ["$timeout"];
+ MdFabSpeedDialScaleAnimation.$inject = ["$timeout"];
+ var cssAnimationDuration = 300;
+
+ /**
+ * @ngdoc module
+ * @name material.components.fabSpeedDial
+ */
+ angular
+ // Declare our module
+ .module('material.components.fabSpeedDial', [
+ 'material.core',
+ 'material.components.fabShared',
+ 'material.components.fabActions'
+ ])
+
+ // Register our directive
+ .directive('mdFabSpeedDial', MdFabSpeedDialDirective)
+
+ // Register our custom animations
+ .animation('.md-fling', MdFabSpeedDialFlingAnimation)
+ .animation('.md-scale', MdFabSpeedDialScaleAnimation)
+
+ // Register a service for each animation so that we can easily inject them into unit tests
+ .service('mdFabSpeedDialFlingAnimation', MdFabSpeedDialFlingAnimation)
+ .service('mdFabSpeedDialScaleAnimation', MdFabSpeedDialScaleAnimation);
+
+ /**
+ * @ngdoc directive
+ * @name mdFabSpeedDial
+ * @module material.components.fabSpeedDial
+ *
+ * @restrict E
+ *
+ * @description
+ * The `` directive is used to present a series of popup elements (usually
+ * ``s) for quick access to common actions.
+ *
+ * There are currently two animations available by applying one of the following classes to
+ * the component:
+ *
+ * - `md-fling` - The speed dial items appear from underneath the trigger and move into their
+ * appropriate positions.
+ * - `md-scale` - The speed dial items appear in their proper places by scaling from 0% to 100%.
+ *
+ * You may also easily position the trigger by applying one one of the following classes to the
+ * `` element:
+ * - `md-fab-top-left`
+ * - `md-fab-top-right`
+ * - `md-fab-bottom-left`
+ * - `md-fab-bottom-right`
+ *
+ * These CSS classes use `position: absolute`, so you need to ensure that the container element
+ * also uses `position: absolute` or `position: relative` in order for them to work.
+ *
+ * Additionally, you may use the standard `ng-mouseenter` and `ng-mouseleave` directives to
+ * open or close the speed dial. However, if you wish to allow users to hover over the empty
+ * space where the actions will appear, you must also add the `md-hover-full` class to the speed
+ * dial element. Without this, the hover effect will only occur on top of the trigger.
+ *
+ * See the demos for more information.
+ *
+ * ## Troubleshooting
+ *
+ * If your speed dial shows the closing animation upon launch, you may need to use `ng-cloak` on
+ * the parent container to ensure that it is only visible once ready. We have plans to remove this
+ * necessity in the future.
+ *
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * @param {string} md-direction From which direction you would like the speed dial to appear
+ * relative to the trigger element.
+ * @param {expression=} md-open Programmatically control whether or not the speed-dial is visible.
+ */
+ function MdFabSpeedDialDirective() {
+ return {
+ restrict: 'E',
+
+ scope: {
+ direction: '@?mdDirection',
+ isOpen: '=?mdOpen'
+ },
+
+ bindToController: true,
+ controller: 'MdFabController',
+ controllerAs: 'vm',
+
+ link: FabSpeedDialLink
+ };
+
+ function FabSpeedDialLink(scope, element) {
+ // Prepend an element to hold our CSS variables so we can use them in the animations below
+ element.prepend('');
+ }
+ }
+
+ function MdFabSpeedDialFlingAnimation($timeout) {
+ function delayDone(done) { $timeout(done, cssAnimationDuration, false); }
+
+ function runAnimation(element) {
+ // Don't run if we are still waiting and we are not ready
+ if (element.hasClass('md-animations-waiting') && !element.hasClass('_md-animations-ready')) {
+ return;
+ }
+
+ var el = element[0];
+ var ctrl = element.controller('mdFabSpeedDial');
+ var items = el.querySelectorAll('.md-fab-action-item');
+
+ // Grab our trigger element
+ var triggerElement = el.querySelector('md-fab-trigger');
+
+ // Grab our element which stores CSS variables
+ var variablesElement = el.querySelector('._md-css-variables');
+
+ // Setup JS variables based on our CSS variables
+ var startZIndex = parseInt(window.getComputedStyle(variablesElement).zIndex);
+
+ // Always reset the items to their natural position/state
+ angular.forEach(items, function(item, index) {
+ var styles = item.style;
+
+ styles.transform = styles.webkitTransform = '';
+ styles.transitionDelay = '';
+ styles.opacity = 1;
+
+ // Make the items closest to the trigger have the highest z-index
+ styles.zIndex = (items.length - index) + startZIndex;
+ });
+
+ // Set the trigger to be above all of the actions so they disappear behind it.
+ triggerElement.style.zIndex = startZIndex + items.length + 1;
+
+ // If the control is closed, hide the items behind the trigger
+ if (!ctrl.isOpen) {
+ angular.forEach(items, function(item, index) {
+ var newPosition, axis;
+ var styles = item.style;
+
+ // Make sure to account for differences in the dimensions of the trigger verses the items
+ // so that we can properly center everything; this helps hide the item's shadows behind
+ // the trigger.
+ var triggerItemHeightOffset = (triggerElement.clientHeight - item.clientHeight) / 2;
+ var triggerItemWidthOffset = (triggerElement.clientWidth - item.clientWidth) / 2;
+
+ switch (ctrl.direction) {
+ case 'up':
+ newPosition = (item.scrollHeight * (index + 1) + triggerItemHeightOffset);
+ axis = 'Y';
+ break;
+ case 'down':
+ newPosition = -(item.scrollHeight * (index + 1) + triggerItemHeightOffset);
+ axis = 'Y';
+ break;
+ case 'left':
+ newPosition = (item.scrollWidth * (index + 1) + triggerItemWidthOffset);
+ axis = 'X';
+ break;
+ case 'right':
+ newPosition = -(item.scrollWidth * (index + 1) + triggerItemWidthOffset);
+ axis = 'X';
+ break;
+ }
+
+ var newTranslate = 'translate' + axis + '(' + newPosition + 'px)';
+
+ styles.transform = styles.webkitTransform = newTranslate;
+ });
+ }
+ }
+
+ return {
+ addClass: function(element, className, done) {
+ if (element.hasClass('md-fling')) {
+ runAnimation(element);
+ delayDone(done);
+ } else {
+ done();
+ }
+ },
+ removeClass: function(element, className, done) {
+ runAnimation(element);
+ delayDone(done);
+ }
+ };
+ }
+
+ function MdFabSpeedDialScaleAnimation($timeout) {
+ function delayDone(done) { $timeout(done, cssAnimationDuration, false); }
+
+ var delay = 65;
+
+ function runAnimation(element) {
+ var el = element[0];
+ var ctrl = element.controller('mdFabSpeedDial');
+ var items = el.querySelectorAll('.md-fab-action-item');
+
+ // Grab our element which stores CSS variables
+ var variablesElement = el.querySelector('._md-css-variables');
+
+ // Setup JS variables based on our CSS variables
+ var startZIndex = parseInt(window.getComputedStyle(variablesElement).zIndex);
+
+ // Always reset the items to their natural position/state
+ angular.forEach(items, function(item, index) {
+ var styles = item.style,
+ offsetDelay = index * delay;
+
+ styles.opacity = ctrl.isOpen ? 1 : 0;
+ styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
+ styles.transitionDelay = (ctrl.isOpen ? offsetDelay : (items.length - offsetDelay)) + 'ms';
+
+ // Make the items closest to the trigger have the highest z-index
+ styles.zIndex = (items.length - index) + startZIndex;
+ });
+ }
+
+ return {
+ addClass: function(element, className, done) {
+ runAnimation(element);
+ delayDone(done);
+ },
+
+ removeClass: function(element, className, done) {
+ runAnimation(element);
+ delayDone(done);
+ }
+ };
+ }
+})();
+
+})();
+(function(){
+"use strict";
+
+(function() {
+ 'use strict';
+
+ /**
+ * @ngdoc module
+ * @name material.components.fabToolbar
+ */
+ angular
+ // Declare our module
+ .module('material.components.fabToolbar', [
+ 'material.core',
+ 'material.components.fabShared',
+ 'material.components.fabActions'
+ ])
+
+ // Register our directive
+ .directive('mdFabToolbar', MdFabToolbarDirective)
+
+ // Register our custom animations
+ .animation('.md-fab-toolbar', MdFabToolbarAnimation)
+
+ // Register a service for the animation so that we can easily inject it into unit tests
+ .service('mdFabToolbarAnimation', MdFabToolbarAnimation);
+
+ /**
+ * @ngdoc directive
+ * @name mdFabToolbar
+ * @module material.components.fabToolbar
+ *
+ * @restrict E
+ *
+ * @description
+ *
+ * The `` directive is used to present a toolbar of elements (usually ``s)
+ * for quick access to common actions when a floating action button is activated (via click or
+ * keyboard navigation).
+ *
+ * You may also easily position the trigger by applying one one of the following classes to the
+ * `` element:
+ * - `md-fab-top-left`
+ * - `md-fab-top-right`
+ * - `md-fab-bottom-left`
+ * - `md-fab-bottom-right`
+ *
+ * These CSS classes use `position: absolute`, so you need to ensure that the container element
+ * also uses `position: absolute` or `position: relative` in order for them to work.
+ *
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * @param {string} md-direction From which direction you would like the toolbar items to appear
+ * relative to the trigger element. Supports `left` and `right` directions.
+ * @param {expression=} md-open Programmatically control whether or not the toolbar is visible.
+ */
+ function MdFabToolbarDirective() {
+ return {
+ restrict: 'E',
+ transclude: true,
+ template: '
' +
+ ' ' +
+ '
',
+
+ scope: {
+ direction: '@?mdDirection',
+ isOpen: '=?mdOpen'
+ },
+
+ bindToController: true,
+ controller: 'MdFabController',
+ controllerAs: 'vm',
+
+ link: link
+ };
+
+ function link(scope, element, attributes) {
+ // Add the base class for animations
+ element.addClass('md-fab-toolbar');
+
+ // Prepend the background element to the trigger's button
+ element.find('md-fab-trigger').find('button')
+ .prepend('');
+ }
+ }
+
+ function MdFabToolbarAnimation() {
+
+ function runAnimation(element, className, done) {
+ // If no className was specified, don't do anything
+ if (!className) {
+ return;
+ }
+
+ var el = element[0];
+ var ctrl = element.controller('mdFabToolbar');
+
+ // Grab the relevant child elements
+ var backgroundElement = el.querySelector('.md-fab-toolbar-background');
+ var triggerElement = el.querySelector('md-fab-trigger button');
+ var toolbarElement = el.querySelector('md-toolbar');
+ var iconElement = el.querySelector('md-fab-trigger button md-icon');
+ var actions = element.find('md-fab-actions').children();
+
+ // If we have both elements, use them to position the new background
+ if (triggerElement && backgroundElement) {
+ // Get our variables
+ var color = window.getComputedStyle(triggerElement).getPropertyValue('background-color');
+ var width = el.offsetWidth;
+ var height = el.offsetHeight;
+
+ // Make it twice as big as it should be since we scale from the center
+ var scale = 2 * (width / triggerElement.offsetWidth);
+
+ // Set some basic styles no matter what animation we're doing
+ backgroundElement.style.backgroundColor = color;
+ backgroundElement.style.borderRadius = width + 'px';
+
+ // If we're open
+ if (ctrl.isOpen) {
+ // Turn on toolbar pointer events when closed
+ toolbarElement.style.pointerEvents = 'inherit';
+
+ backgroundElement.style.width = triggerElement.offsetWidth + 'px';
+ backgroundElement.style.height = triggerElement.offsetHeight + 'px';
+ backgroundElement.style.transform = 'scale(' + scale + ')';
+
+ // Set the next close animation to have the proper delays
+ backgroundElement.style.transitionDelay = '0ms';
+ iconElement && (iconElement.style.transitionDelay = '.3s');
+
+ // Apply a transition delay to actions
+ angular.forEach(actions, function(action, index) {
+ action.style.transitionDelay = (actions.length - index) * 25 + 'ms';
+ });
+ } else {
+ // Turn off toolbar pointer events when closed
+ toolbarElement.style.pointerEvents = 'none';
+
+ // Scale it back down to the trigger's size
+ backgroundElement.style.transform = 'scale(1)';
+
+ // Reset the position
+ backgroundElement.style.top = '0';
+
+ if (element.hasClass('md-right')) {
+ backgroundElement.style.left = '0';
+ backgroundElement.style.right = null;
+ }
+
+ if (element.hasClass('md-left')) {
+ backgroundElement.style.right = '0';
+ backgroundElement.style.left = null;
+ }
+
+ // Set the next open animation to have the proper delays
+ backgroundElement.style.transitionDelay = '200ms';
+ iconElement && (iconElement.style.transitionDelay = '0ms');
+
+ // Apply a transition delay to actions
+ angular.forEach(actions, function(action, index) {
+ action.style.transitionDelay = 200 + (index * 25) + 'ms';
+ });
+ }
+ }
+ }
+
+ return {
+ addClass: function(element, className, done) {
+ runAnimation(element, className, done);
+ done();
+ },
+
+ removeClass: function(element, className, done) {
+ runAnimation(element, className, done);
+ done();
+ }
+ };
+ }
+})();
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.gridList
+ */
+GridListController.$inject = ["$mdUtil"];
+GridLayoutFactory.$inject = ["$mdUtil"];
+GridListDirective.$inject = ["$interpolate", "$mdConstant", "$mdGridLayout", "$mdMedia"];
+GridTileDirective.$inject = ["$mdMedia"];
+angular.module('material.components.gridList', ['material.core'])
+ .directive('mdGridList', GridListDirective)
+ .directive('mdGridTile', GridTileDirective)
+ .directive('mdGridTileFooter', GridTileCaptionDirective)
+ .directive('mdGridTileHeader', GridTileCaptionDirective)
+ .factory('$mdGridLayout', GridLayoutFactory);
+
+/**
+ * @ngdoc directive
+ * @name mdGridList
+ * @module material.components.gridList
+ * @restrict E
+ * @description
+ * Grid lists are an alternative to standard list views. Grid lists are distinct
+ * from grids used for layouts and other visual presentations.
+ *
+ * A grid list is best suited to presenting a homogenous data type, typically
+ * images, and is optimized for visual comprehension and differentiating between
+ * like data types.
+ *
+ * A grid list is a continuous element consisting of tessellated, regular
+ * subdivisions called cells that contain tiles (`md-grid-tile`).
+ *
+ *
+ *
+ *
+ * Cells are arrayed vertically and horizontally within the grid.
+ *
+ * Tiles hold content and can span one or more cells vertically or horizontally.
+ *
+ * ### Responsive Attributes
+ *
+ * The `md-grid-list` directive supports "responsive" attributes, which allow
+ * different `md-cols`, `md-gutter` and `md-row-height` values depending on the
+ * currently matching media query.
+ *
+ * In order to set a responsive attribute, first define the fallback value with
+ * the standard attribute name, then add additional attributes with the
+ * following convention: `{base-attribute-name}-{media-query-name}="{value}"`
+ * (ie. `md-cols-lg="8"`)
+ *
+ * @param {number} md-cols Number of columns in the grid.
+ * @param {string} md-row-height One of
+ *
+ *
CSS length - Fixed height rows (eg. `8px` or `1rem`)
+ *
`{width}:{height}` - Ratio of width to height (eg.
+ * `md-row-height="16:9"`)
+ *
`"fit"` - Height will be determined by subdividing the available
+ * height by the number of rows
+ *
+ * @param {string=} md-gutter The amount of space between tiles in CSS units
+ * (default 1px)
+ * @param {expression=} md-on-layout Expression to evaluate after layout. Event
+ * object is available as `$event`, and contains performance information.
+ *
+ * @usage
+ * Basic:
+ *
+ *
+ *
+ *
+ *
+ *
+ * Fixed-height rows:
+ *
+ *
+ *
+ *
+ *
+ *
+ * Fit rows:
+ *
+ *
+ *
+ *
+ *
+ *
+ * Using responsive attributes:
+ *
+ *
+ *
+ *
+ *
+ */
+function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia) {
+ return {
+ restrict: 'E',
+ controller: GridListController,
+ scope: {
+ mdOnLayout: '&'
+ },
+ link: postLink
+ };
+
+ function postLink(scope, element, attrs, ctrl) {
+ element.addClass('_md'); // private md component indicator for styling
+
+ // Apply semantics
+ element.attr('role', 'list');
+
+ // Provide the controller with a way to trigger layouts.
+ ctrl.layoutDelegate = layoutDelegate;
+
+ var invalidateLayout = angular.bind(ctrl, ctrl.invalidateLayout),
+ unwatchAttrs = watchMedia();
+ scope.$on('$destroy', unwatchMedia);
+
+ /**
+ * Watches for changes in media, invalidating layout as necessary.
+ */
+ function watchMedia() {
+ for (var mediaName in $mdConstant.MEDIA) {
+ $mdMedia(mediaName); // initialize
+ $mdMedia.getQuery($mdConstant.MEDIA[mediaName])
+ .addListener(invalidateLayout);
+ }
+ return $mdMedia.watchResponsiveAttributes(
+ ['md-cols', 'md-row-height', 'md-gutter'], attrs, layoutIfMediaMatch);
+ }
+
+ function unwatchMedia() {
+ ctrl.layoutDelegate = angular.noop;
+
+ unwatchAttrs();
+ for (var mediaName in $mdConstant.MEDIA) {
+ $mdMedia.getQuery($mdConstant.MEDIA[mediaName])
+ .removeListener(invalidateLayout);
+ }
+ }
+
+ /**
+ * Performs grid layout if the provided mediaName matches the currently
+ * active media type.
+ */
+ function layoutIfMediaMatch(mediaName) {
+ if (mediaName == null) {
+ // TODO(shyndman): It would be nice to only layout if we have
+ // instances of attributes using this media type
+ ctrl.invalidateLayout();
+ } else if ($mdMedia(mediaName)) {
+ ctrl.invalidateLayout();
+ }
+ }
+
+ var lastLayoutProps;
+
+ /**
+ * Invokes the layout engine, and uses its results to lay out our
+ * tile elements.
+ *
+ * @param {boolean} tilesInvalidated Whether tiles have been
+ * added/removed/moved since the last layout. This is to avoid situations
+ * where tiles are replaced with properties identical to their removed
+ * counterparts.
+ */
+ function layoutDelegate(tilesInvalidated) {
+ var tiles = getTileElements();
+ var props = {
+ tileSpans: getTileSpans(tiles),
+ colCount: getColumnCount(),
+ rowMode: getRowMode(),
+ rowHeight: getRowHeight(),
+ gutter: getGutter()
+ };
+
+ if (!tilesInvalidated && angular.equals(props, lastLayoutProps)) {
+ return;
+ }
+
+ var performance =
+ $mdGridLayout(props.colCount, props.tileSpans, tiles)
+ .map(function(tilePositions, rowCount) {
+ return {
+ grid: {
+ element: element,
+ style: getGridStyle(props.colCount, rowCount,
+ props.gutter, props.rowMode, props.rowHeight)
+ },
+ tiles: tilePositions.map(function(ps, i) {
+ return {
+ element: angular.element(tiles[i]),
+ style: getTileStyle(ps.position, ps.spans,
+ props.colCount, rowCount,
+ props.gutter, props.rowMode, props.rowHeight)
+ }
+ })
+ }
+ })
+ .reflow()
+ .performance();
+
+ // Report layout
+ scope.mdOnLayout({
+ $event: {
+ performance: performance
+ }
+ });
+
+ lastLayoutProps = props;
+ }
+
+ // Use $interpolate to do some simple string interpolation as a convenience.
+
+ var startSymbol = $interpolate.startSymbol();
+ var endSymbol = $interpolate.endSymbol();
+
+ // Returns an expression wrapped in the interpolator's start and end symbols.
+ function expr(exprStr) {
+ return startSymbol + exprStr + endSymbol;
+ }
+
+ // The amount of space a single 1x1 tile would take up (either width or height), used as
+ // a basis for other calculations. This consists of taking the base size percent (as would be
+ // if evenly dividing the size between cells), and then subtracting the size of one gutter.
+ // However, since there are no gutters on the edges, each tile only uses a fration
+ // (gutterShare = numGutters / numCells) of the gutter size. (Imagine having one gutter per
+ // tile, and then breaking up the extra gutter on the edge evenly among the cells).
+ var UNIT = $interpolate(expr('share') + '% - (' + expr('gutter') + ' * ' + expr('gutterShare') + ')');
+
+ // The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
+ // The position comes the size of a 1x1 tile plus gutter for each previous tile in the
+ // row/column (offset).
+ var POSITION = $interpolate('calc((' + expr('unit') + ' + ' + expr('gutter') + ') * ' + expr('offset') + ')');
+
+ // The actual size of a tile, e.g., width or height, taking rowSpan or colSpan into account.
+ // This is computed by multiplying the base unit by the rowSpan/colSpan, and then adding back
+ // in the space that the gutter would normally have used (which was already accounted for in
+ // the base unit calculation).
+ var DIMENSION = $interpolate('calc((' + expr('unit') + ') * ' + expr('span') + ' + (' + expr('span') + ' - 1) * ' + expr('gutter') + ')');
+
+ /**
+ * Gets the styles applied to a tile element described by the given parameters.
+ * @param {{row: number, col: number}} position The row and column indices of the tile.
+ * @param {{row: number, col: number}} spans The rowSpan and colSpan of the tile.
+ * @param {number} colCount The number of columns.
+ * @param {number} rowCount The number of rows.
+ * @param {string} gutter The amount of space between tiles. This will be something like
+ * '5px' or '2em'.
+ * @param {string} rowMode The row height mode. Can be one of:
+ * 'fixed': all rows have a fixed size, given by rowHeight,
+ * 'ratio': row height defined as a ratio to width, or
+ * 'fit': fit to the grid-list element height, divinding evenly among rows.
+ * @param {string|number} rowHeight The height of a row. This is only used for 'fixed' mode and
+ * for 'ratio' mode. For 'ratio' mode, this is the *ratio* of width-to-height (e.g., 0.75).
+ * @returns {Object} Map of CSS properties to be applied to the style element. Will define
+ * values for top, left, width, height, marginTop, and paddingTop.
+ */
+ function getTileStyle(position, spans, colCount, rowCount, gutter, rowMode, rowHeight) {
+ // TODO(shyndman): There are style caching opportunities here.
+
+ // Percent of the available horizontal space that one column takes up.
+ var hShare = (1 / colCount) * 100;
+
+ // Fraction of the gutter size that each column takes up.
+ var hGutterShare = (colCount - 1) / colCount;
+
+ // Base horizontal size of a column.
+ var hUnit = UNIT({share: hShare, gutterShare: hGutterShare, gutter: gutter});
+
+ // The width and horizontal position of each tile is always calculated the same way, but the
+ // height and vertical position depends on the rowMode.
+ var style = {
+ left: POSITION({ unit: hUnit, offset: position.col, gutter: gutter }),
+ width: DIMENSION({ unit: hUnit, span: spans.col, gutter: gutter }),
+ // resets
+ paddingTop: '',
+ marginTop: '',
+ top: '',
+ height: ''
+ };
+
+ switch (rowMode) {
+ case 'fixed':
+ // In fixed mode, simply use the given rowHeight.
+ style.top = POSITION({ unit: rowHeight, offset: position.row, gutter: gutter });
+ style.height = DIMENSION({ unit: rowHeight, span: spans.row, gutter: gutter });
+ break;
+
+ case 'ratio':
+ // Percent of the available vertical space that one row takes up. Here, rowHeight holds
+ // the ratio value. For example, if the width:height ratio is 4:3, rowHeight = 1.333.
+ var vShare = hShare / rowHeight;
+
+ // Base veritcal size of a row.
+ var vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });
+
+ // padidngTop and marginTop are used to maintain the given aspect ratio, as
+ // a percentage-based value for these properties is applied to the *width* of the
+ // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
+ style.paddingTop = DIMENSION({ unit: vUnit, span: spans.row, gutter: gutter});
+ style.marginTop = POSITION({ unit: vUnit, offset: position.row, gutter: gutter });
+ break;
+
+ case 'fit':
+ // Fraction of the gutter size that each column takes up.
+ var vGutterShare = (rowCount - 1) / rowCount;
+
+ // Percent of the available vertical space that one row takes up.
+ var vShare = (1 / rowCount) * 100;
+
+ // Base vertical size of a row.
+ var vUnit = UNIT({share: vShare, gutterShare: vGutterShare, gutter: gutter});
+
+ style.top = POSITION({unit: vUnit, offset: position.row, gutter: gutter});
+ style.height = DIMENSION({unit: vUnit, span: spans.row, gutter: gutter});
+ break;
+ }
+
+ return style;
+ }
+
+ function getGridStyle(colCount, rowCount, gutter, rowMode, rowHeight) {
+ var style = {};
+
+ switch(rowMode) {
+ case 'fixed':
+ style.height = DIMENSION({ unit: rowHeight, span: rowCount, gutter: gutter });
+ style.paddingBottom = '';
+ break;
+
+ case 'ratio':
+ // rowHeight is width / height
+ var hGutterShare = colCount === 1 ? 0 : (colCount - 1) / colCount,
+ hShare = (1 / colCount) * 100,
+ vShare = hShare * (1 / rowHeight),
+ vUnit = UNIT({ share: vShare, gutterShare: hGutterShare, gutter: gutter });
+
+ style.height = '';
+ style.paddingBottom = DIMENSION({ unit: vUnit, span: rowCount, gutter: gutter});
+ break;
+
+ case 'fit':
+ // noop, as the height is user set
+ break;
+ }
+
+ return style;
+ }
+
+ function getTileElements() {
+ return [].filter.call(element.children(), function(ele) {
+ return ele.tagName == 'MD-GRID-TILE' && !ele.$$mdDestroyed;
+ });
+ }
+
+ /**
+ * Gets an array of objects containing the rowspan and colspan for each tile.
+ * @returns {Array<{row: number, col: number}>}
+ */
+ function getTileSpans(tileElements) {
+ return [].map.call(tileElements, function(ele) {
+ var ctrl = angular.element(ele).controller('mdGridTile');
+ return {
+ row: parseInt(
+ $mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-rowspan'), 10) || 1,
+ col: parseInt(
+ $mdMedia.getResponsiveAttribute(ctrl.$attrs, 'md-colspan'), 10) || 1
+ };
+ });
+ }
+
+ function getColumnCount() {
+ var colCount = parseInt($mdMedia.getResponsiveAttribute(attrs, 'md-cols'), 10);
+ if (isNaN(colCount)) {
+ throw 'md-grid-list: md-cols attribute was not found, or contained a non-numeric value';
+ }
+ return colCount;
+ }
+
+ function getGutter() {
+ return applyDefaultUnit($mdMedia.getResponsiveAttribute(attrs, 'md-gutter') || 1);
+ }
+
+ function getRowHeight() {
+ var rowHeight = $mdMedia.getResponsiveAttribute(attrs, 'md-row-height');
+ if (!rowHeight) {
+ throw 'md-grid-list: md-row-height attribute was not found';
+ }
+
+ switch (getRowMode()) {
+ case 'fixed':
+ return applyDefaultUnit(rowHeight);
+ case 'ratio':
+ var whRatio = rowHeight.split(':');
+ return parseFloat(whRatio[0]) / parseFloat(whRatio[1]);
+ case 'fit':
+ return 0; // N/A
+ }
+ }
+
+ function getRowMode() {
+ var rowHeight = $mdMedia.getResponsiveAttribute(attrs, 'md-row-height');
+ if (!rowHeight) {
+ throw 'md-grid-list: md-row-height attribute was not found';
+ }
+
+ if (rowHeight == 'fit') {
+ return 'fit';
+ } else if (rowHeight.indexOf(':') !== -1) {
+ return 'ratio';
+ } else {
+ return 'fixed';
+ }
+ }
+
+ function applyDefaultUnit(val) {
+ return /\D$/.test(val) ? val : val + 'px';
+ }
+ }
+}
+
+/* @ngInject */
+function GridListController($mdUtil) {
+ this.layoutInvalidated = false;
+ this.tilesInvalidated = false;
+ this.$timeout_ = $mdUtil.nextTick;
+ this.layoutDelegate = angular.noop;
+}
+
+GridListController.prototype = {
+ invalidateTiles: function() {
+ this.tilesInvalidated = true;
+ this.invalidateLayout();
+ },
+
+ invalidateLayout: function() {
+ if (this.layoutInvalidated) {
+ return;
+ }
+ this.layoutInvalidated = true;
+ this.$timeout_(angular.bind(this, this.layout));
+ },
+
+ layout: function() {
+ try {
+ this.layoutDelegate(this.tilesInvalidated);
+ } finally {
+ this.layoutInvalidated = false;
+ this.tilesInvalidated = false;
+ }
+ }
+};
+
+
+/* @ngInject */
+function GridLayoutFactory($mdUtil) {
+ var defaultAnimator = GridTileAnimator;
+
+ /**
+ * Set the reflow animator callback
+ */
+ GridLayout.animateWith = function(customAnimator) {
+ defaultAnimator = !angular.isFunction(customAnimator) ? GridTileAnimator : customAnimator;
+ };
+
+ return GridLayout;
+
+ /**
+ * Publish layout function
+ */
+ function GridLayout(colCount, tileSpans) {
+ var self, layoutInfo, gridStyles, layoutTime, mapTime, reflowTime;
+
+ layoutTime = $mdUtil.time(function() {
+ layoutInfo = calculateGridFor(colCount, tileSpans);
+ });
+
+ return self = {
+
+ /**
+ * An array of objects describing each tile's position in the grid.
+ */
+ layoutInfo: function() {
+ return layoutInfo;
+ },
+
+ /**
+ * Maps grid positioning to an element and a set of styles using the
+ * provided updateFn.
+ */
+ map: function(updateFn) {
+ mapTime = $mdUtil.time(function() {
+ var info = self.layoutInfo();
+ gridStyles = updateFn(info.positioning, info.rowCount);
+ });
+ return self;
+ },
+
+ /**
+ * Default animator simply sets the element.css( ). An alternate
+ * animator can be provided as an argument. The function has the following
+ * signature:
+ *
+ * function({grid: {element: JQLite, style: Object}, tiles: Array<{element: JQLite, style: Object}>)
+ */
+ reflow: function(animatorFn) {
+ reflowTime = $mdUtil.time(function() {
+ var animator = animatorFn || defaultAnimator;
+ animator(gridStyles.grid, gridStyles.tiles);
+ });
+ return self;
+ },
+
+ /**
+ * Timing for the most recent layout run.
+ */
+ performance: function() {
+ return {
+ tileCount: tileSpans.length,
+ layoutTime: layoutTime,
+ mapTime: mapTime,
+ reflowTime: reflowTime,
+ totalTime: layoutTime + mapTime + reflowTime
+ };
+ }
+ };
+ }
+
+ /**
+ * Default Gridlist animator simple sets the css for each element;
+ * NOTE: any transitions effects must be manually set in the CSS.
+ * e.g.
+ *
+ * md-grid-tile {
+ * transition: all 700ms ease-out 50ms;
+ * }
+ *
+ */
+ function GridTileAnimator(grid, tiles) {
+ grid.element.css(grid.style);
+ tiles.forEach(function(t) {
+ t.element.css(t.style);
+ })
+ }
+
+ /**
+ * Calculates the positions of tiles.
+ *
+ * The algorithm works as follows:
+ * An Array with length colCount (spaceTracker) keeps track of
+ * available tiling positions, where elements of value 0 represents an
+ * empty position. Space for a tile is reserved by finding a sequence of
+ * 0s with length <= than the tile's colspan. When such a space has been
+ * found, the occupied tile positions are incremented by the tile's
+ * rowspan value, as these positions have become unavailable for that
+ * many rows.
+ *
+ * If the end of a row has been reached without finding space for the
+ * tile, spaceTracker's elements are each decremented by 1 to a minimum
+ * of 0. Rows are searched in this fashion until space is found.
+ */
+ function calculateGridFor(colCount, tileSpans) {
+ var curCol = 0,
+ curRow = 0,
+ spaceTracker = newSpaceTracker();
+
+ return {
+ positioning: tileSpans.map(function(spans, i) {
+ return {
+ spans: spans,
+ position: reserveSpace(spans, i)
+ };
+ }),
+ rowCount: curRow + Math.max.apply(Math, spaceTracker)
+ };
+
+ function reserveSpace(spans, i) {
+ if (spans.col > colCount) {
+ throw 'md-grid-list: Tile at position ' + i + ' has a colspan ' +
+ '(' + spans.col + ') that exceeds the column count ' +
+ '(' + colCount + ')';
+ }
+
+ var start = 0,
+ end = 0;
+
+ // TODO(shyndman): This loop isn't strictly necessary if you can
+ // determine the minimum number of rows before a space opens up. To do
+ // this, recognize that you've iterated across an entire row looking for
+ // space, and if so fast-forward by the minimum rowSpan count. Repeat
+ // until the required space opens up.
+ while (end - start < spans.col) {
+ if (curCol >= colCount) {
+ nextRow();
+ continue;
+ }
+
+ start = spaceTracker.indexOf(0, curCol);
+ if (start === -1 || (end = findEnd(start + 1)) === -1) {
+ start = end = 0;
+ nextRow();
+ continue;
+ }
+
+ curCol = end + 1;
+ }
+
+ adjustRow(start, spans.col, spans.row);
+ curCol = start + spans.col;
+
+ return {
+ col: start,
+ row: curRow
+ };
+ }
+
+ function nextRow() {
+ curCol = 0;
+ curRow++;
+ adjustRow(0, colCount, -1); // Decrement row spans by one
+ }
+
+ function adjustRow(from, cols, by) {
+ for (var i = from; i < from + cols; i++) {
+ spaceTracker[i] = Math.max(spaceTracker[i] + by, 0);
+ }
+ }
+
+ function findEnd(start) {
+ var i;
+ for (i = start; i < spaceTracker.length; i++) {
+ if (spaceTracker[i] !== 0) {
+ return i;
+ }
+ }
+
+ if (i === spaceTracker.length) {
+ return i;
+ }
+ }
+
+ function newSpaceTracker() {
+ var tracker = [];
+ for (var i = 0; i < colCount; i++) {
+ tracker.push(0);
+ }
+ return tracker;
+ }
+ }
+}
+
+/**
+ * @ngdoc directive
+ * @name mdGridTile
+ * @module material.components.gridList
+ * @restrict E
+ * @description
+ * Tiles contain the content of an `md-grid-list`. They span one or more grid
+ * cells vertically or horizontally, and use `md-grid-tile-{footer,header}` to
+ * display secondary content.
+ *
+ * ### Responsive Attributes
+ *
+ * The `md-grid-tile` directive supports "responsive" attributes, which allow
+ * different `md-rowspan` and `md-colspan` values depending on the currently
+ * matching media query.
+ *
+ * In order to set a responsive attribute, first define the fallback value with
+ * the standard attribute name, then add additional attributes with the
+ * following convention: `{base-attribute-name}-{media-query-name}="{value}"`
+ * (ie. `md-colspan-sm="4"`)
+ *
+ * @param {number=} md-colspan The number of columns to span (default 1). Cannot
+ * exceed the number of columns in the grid. Supports interpolation.
+ * @param {number=} md-rowspan The number of rows to span (default 1). Supports
+ * interpolation.
+ *
+ * @usage
+ * With header:
+ *
+ *
+ *
+ *
This is a header
+ *
+ *
+ *
+ *
+ * With footer:
+ *
+ *
+ *
+ *
This is a footer
+ *
+ *
+ *
+ *
+ * Spanning multiple rows/columns:
+ *
+ *
+ *
+ *
+ *
+ * Responsive attributes:
+ *
+ *
+ *
+ *
+ */
+function GridTileDirective($mdMedia) {
+ return {
+ restrict: 'E',
+ require: '^mdGridList',
+ template: '',
+ transclude: true,
+ scope: {},
+ // Simple controller that exposes attributes to the grid directive
+ controller: ["$attrs", function($attrs) {
+ this.$attrs = $attrs;
+ }],
+ link: postLink
+ };
+
+ function postLink(scope, element, attrs, gridCtrl) {
+ // Apply semantics
+ element.attr('role', 'listitem');
+
+ // If our colspan or rowspan changes, trigger a layout
+ var unwatchAttrs = $mdMedia.watchResponsiveAttributes(['md-colspan', 'md-rowspan'],
+ attrs, angular.bind(gridCtrl, gridCtrl.invalidateLayout));
+
+ // Tile registration/deregistration
+ gridCtrl.invalidateTiles();
+ scope.$on('$destroy', function() {
+ // Mark the tile as destroyed so it is no longer considered in layout,
+ // even if the DOM element sticks around (like during a leave animation)
+ element[0].$$mdDestroyed = true;
+ unwatchAttrs();
+ gridCtrl.invalidateLayout();
+ });
+
+ if (angular.isDefined(scope.$parent.$index)) {
+ scope.$watch(function() { return scope.$parent.$index; },
+ function indexChanged(newIdx, oldIdx) {
+ if (newIdx === oldIdx) {
+ return;
+ }
+ gridCtrl.invalidateTiles();
+ });
+ }
+ }
+}
+
+
+function GridTileCaptionDirective() {
+ return {
+ template: '',
+ transclude: true
+ };
+}
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.icon
+ * @description
+ * Icon
+ */
+angular.module('material.components.icon', ['material.core']);
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.input
+ */
+mdInputContainerDirective.$inject = ["$mdTheming", "$parse"];
+inputTextareaDirective.$inject = ["$mdUtil", "$window", "$mdAria", "$timeout", "$mdGesture"];
+mdMaxlengthDirective.$inject = ["$animate", "$mdUtil"];
+placeholderDirective.$inject = ["$compile"];
+ngMessageDirective.$inject = ["$mdUtil"];
+mdSelectOnFocusDirective.$inject = ["$timeout"];
+mdInputInvalidMessagesAnimation.$inject = ["$$AnimateRunner", "$animateCss", "$mdUtil", "$log"];
+ngMessagesAnimation.$inject = ["$$AnimateRunner", "$animateCss", "$mdUtil", "$log"];
+ngMessageAnimation.$inject = ["$$AnimateRunner", "$animateCss", "$mdUtil", "$log"];
+var inputModule = angular.module('material.components.input', [
+ 'material.core'
+ ])
+ .directive('mdInputContainer', mdInputContainerDirective)
+ .directive('label', labelDirective)
+ .directive('input', inputTextareaDirective)
+ .directive('textarea', inputTextareaDirective)
+ .directive('mdMaxlength', mdMaxlengthDirective)
+ .directive('placeholder', placeholderDirective)
+ .directive('ngMessages', ngMessagesDirective)
+ .directive('ngMessage', ngMessageDirective)
+ .directive('ngMessageExp', ngMessageDirective)
+ .directive('mdSelectOnFocus', mdSelectOnFocusDirective)
+
+ .animation('.md-input-invalid', mdInputInvalidMessagesAnimation)
+ .animation('.md-input-messages-animation', ngMessagesAnimation)
+ .animation('.md-input-message-animation', ngMessageAnimation);
+
+// If we are running inside of tests; expose some extra services so that we can test them
+if (window._mdMocksIncluded) {
+ inputModule.service('$$mdInput', function() {
+ return {
+ // special accessor to internals... useful for testing
+ messages: {
+ show : showInputMessages,
+ hide : hideInputMessages,
+ getElement : getMessagesElement
+ }
+ }
+ })
+
+ // Register a service for each animation so that we can easily inject them into unit tests
+ .service('mdInputInvalidAnimation', mdInputInvalidMessagesAnimation)
+ .service('mdInputMessagesAnimation', ngMessagesAnimation)
+ .service('mdInputMessageAnimation', ngMessageAnimation);
+}
+
+/**
+ * @ngdoc directive
+ * @name mdInputContainer
+ * @module material.components.input
+ *
+ * @restrict E
+ *
+ * @description
+ * `` is the parent of any input or textarea element.
+ *
+ * Input and textarea elements will not behave properly unless the md-input-container
+ * parent is provided.
+ *
+ * A single `` should contain only one `` element, otherwise it will throw an error.
+ *
+ * Exception: Hidden inputs (``) are ignored and will not throw an error, so
+ * you may combine these with other inputs.
+ *
+ * Note: When using `ngMessages` with your input element, make sure the message and container elements
+ * are *block* elements, otherwise animations applied to the messages will not look as intended. Either use a `div` and
+ * apply the `ng-message` and `ng-messages` classes respectively, or use the `md-block` class on your element.
+ *
+ * @param md-is-error {expression=} When the given expression evaluates to true, the input container
+ * will go into error state. Defaults to erroring if the input has been touched and is invalid.
+ * @param md-no-float {boolean=} When present, `placeholder` attributes on the input will not be converted to floating
+ * labels.
+ *
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * - Requires [ngMessages](https://docs.angularjs.org/api/ngMessages).
+ * - Behaves like the [AngularJS input directive](https://docs.angularjs.org/api/ng/directive/input).
+ *
+ * The `md-input` and `md-input-container` directives use very specific positioning to achieve the
+ * error animation effects. Therefore, it is *not* advised to use the Layout system inside of the
+ * `` tags. Instead, use relative or absolute positioning.
+ *
+ *
+ *
Textarea directive
+ * The `textarea` element within a `md-input-container` has the following specific behavior:
+ * - By default the `textarea` grows as the user types. This can be disabled via the `md-no-autogrow`
+ * attribute.
+ * - If a `textarea` has the `rows` attribute, it will treat the `rows` as the minimum height and will
+ * continue growing as the user types. For example a textarea with `rows="3"` will be 3 lines of text
+ * high initially. If no rows are specified, the directive defaults to 1.
+ * - The textarea's height gets set on initialization, as well as while the user is typing. In certain situations
+ * (e.g. while animating) the directive might have been initialized, before the element got it's final height. In
+ * those cases, you can trigger a resize manually by broadcasting a `md-resize-textarea` event on the scope.
+ * - If you wan't a `textarea` to stop growing at a certain point, you can specify the `max-rows` attribute.
+ * - The textarea's bottom border acts as a handle which users can drag, in order to resize the element vertically.
+ * Once the user has resized a `textarea`, the autogrowing functionality becomes disabled. If you don't want a
+ * `textarea` to be resizeable by the user, you can add the `md-no-resize` attribute.
+ */
+
+function inputTextareaDirective($mdUtil, $window, $mdAria, $timeout, $mdGesture) {
+ return {
+ restrict: 'E',
+ require: ['^?mdInputContainer', '?ngModel', '?^form'],
+ link: postLink
+ };
+
+ function postLink(scope, element, attr, ctrls) {
+
+ var containerCtrl = ctrls[0];
+ var hasNgModel = !!ctrls[1];
+ var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
+ var parentForm = ctrls[2];
+ var isReadonly = angular.isDefined(attr.readonly);
+ var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
+ var tagName = element[0].tagName.toLowerCase();
+
+
+ if (!containerCtrl) return;
+ if (attr.type === 'hidden') {
+ element.attr('aria-hidden', 'true');
+ return;
+ } else if (containerCtrl.input) {
+ if (containerCtrl.input[0].contains(element[0])) {
+ return;
+ } else {
+ throw new Error(" can only have *one* ,
+ *
+ *
+ *
+ */
+function mdSelectOnFocusDirective($timeout) {
+
+ return {
+ restrict: 'A',
+ link: postLink
+ };
+
+ function postLink(scope, element, attr) {
+ if (element[0].nodeName !== 'INPUT' && element[0].nodeName !== "TEXTAREA") return;
+
+ var preventMouseUp = false;
+
+ element
+ .on('focus', onFocus)
+ .on('mouseup', onMouseUp);
+
+ scope.$on('$destroy', function() {
+ element
+ .off('focus', onFocus)
+ .off('mouseup', onMouseUp);
+ });
+
+ function onFocus() {
+ preventMouseUp = true;
+
+ $timeout(function() {
+ // Use HTMLInputElement#select to fix firefox select issues.
+ // The debounce is here for Edge's sake, otherwise the selection doesn't work.
+ element[0].select();
+
+ // This should be reset from inside the `focus`, because the event might
+ // have originated from something different than a click, e.g. a keyboard event.
+ preventMouseUp = false;
+ }, 1, false);
+ }
+
+ // Prevents the default action of the first `mouseup` after a focus.
+ // This is necessary, because browsers fire a `mouseup` right after the element
+ // has been focused. In some browsers (Firefox in particular) this can clear the
+ // selection. There are examples of the problem in issue #7487.
+ function onMouseUp(event) {
+ if (preventMouseUp) {
+ event.preventDefault();
+ }
+ }
+ }
+}
+
+var visibilityDirectives = ['ngIf', 'ngShow', 'ngHide', 'ngSwitchWhen', 'ngSwitchDefault'];
+function ngMessagesDirective() {
+ return {
+ restrict: 'EA',
+ link: postLink,
+
+ // This is optional because we don't want target *all* ngMessage instances, just those inside of
+ // mdInputContainer.
+ require: '^^?mdInputContainer'
+ };
+
+ function postLink(scope, element, attrs, inputContainer) {
+ // If we are not a child of an input container, don't do anything
+ if (!inputContainer) return;
+
+ // Add our animation class
+ element.toggleClass('md-input-messages-animation', true);
+
+ // Add our md-auto-hide class to automatically hide/show messages when container is invalid
+ element.toggleClass('md-auto-hide', true);
+
+ // If we see some known visibility directives, remove the md-auto-hide class
+ if (attrs.mdAutoHide == 'false' || hasVisibiltyDirective(attrs)) {
+ element.toggleClass('md-auto-hide', false);
+ }
+ }
+
+ function hasVisibiltyDirective(attrs) {
+ return visibilityDirectives.some(function(attr) {
+ return attrs[attr];
+ });
+ }
+}
+
+function ngMessageDirective($mdUtil) {
+ return {
+ restrict: 'EA',
+ compile: compile,
+ priority: 100
+ };
+
+ function compile(tElement) {
+ if (!isInsideInputContainer(tElement)) {
+
+ // When the current element is inside of a document fragment, then we need to check for an input-container
+ // in the postLink, because the element will be later added to the DOM and is currently just in a temporary
+ // fragment, which causes the input-container check to fail.
+ if (isInsideFragment()) {
+ return function (scope, element) {
+ if (isInsideInputContainer(element)) {
+ // Inside of the postLink function, a ngMessage directive will be a comment element, because it's
+ // currently hidden. To access the shown element, we need to use the element from the compile function.
+ initMessageElement(tElement);
+ }
+ };
+ }
+ } else {
+ initMessageElement(tElement);
+ }
+
+ function isInsideFragment() {
+ var nextNode = tElement[0];
+ while (nextNode = nextNode.parentNode) {
+ if (nextNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ function isInsideInputContainer(element) {
+ return !!$mdUtil.getClosest(element, "md-input-container");
+ }
+
+ function initMessageElement(element) {
+ // Add our animation class
+ element.toggleClass('md-input-message-animation', true);
+ }
+ }
+}
+
+var $$AnimateRunner, $animateCss, $mdUtil, $log;
+
+function mdInputInvalidMessagesAnimation($$AnimateRunner, $animateCss, $mdUtil, $log) {
+ saveSharedServices($$AnimateRunner, $animateCss, $mdUtil, $log);
+
+ return {
+ addClass: function(element, className, done) {
+ showInputMessages(element, done);
+ }
+
+ // NOTE: We do not need the removeClass method, because the message ng-leave animation will fire
+ };
+}
+
+function ngMessagesAnimation($$AnimateRunner, $animateCss, $mdUtil, $log) {
+ saveSharedServices($$AnimateRunner, $animateCss, $mdUtil, $log);
+
+ return {
+ enter: function(element, done) {
+ showInputMessages(element, done);
+ },
+
+ leave: function(element, done) {
+ hideInputMessages(element, done);
+ },
+
+ addClass: function(element, className, done) {
+ if (className == "ng-hide") {
+ hideInputMessages(element, done);
+ } else {
+ done();
+ }
+ },
+
+ removeClass: function(element, className, done) {
+ if (className == "ng-hide") {
+ showInputMessages(element, done);
+ } else {
+ done();
+ }
+ }
+ };
+}
+
+function ngMessageAnimation($$AnimateRunner, $animateCss, $mdUtil, $log) {
+ saveSharedServices($$AnimateRunner, $animateCss, $mdUtil, $log);
+
+ return {
+ enter: function(element, done) {
+ var animator = showMessage(element);
+
+ animator.start().done(done);
+ },
+
+ leave: function(element, done) {
+ var animator = hideMessage(element);
+
+ animator.start().done(done);
+ }
+ };
+}
+
+function showInputMessages(element, done) {
+ var animators = [], animator;
+ var messages = getMessagesElement(element);
+ var children = messages.children();
+
+ if (messages.length == 0 || children.length == 0) {
+ $log.warn('mdInput messages show animation called on invalid messages element: ', element);
+ done();
+ return;
+ }
+
+ angular.forEach(children, function(child) {
+ animator = showMessage(angular.element(child));
+
+ animators.push(animator.start());
+ });
+
+ $$AnimateRunner.all(animators, done);
+}
+
+function hideInputMessages(element, done) {
+ var animators = [], animator;
+ var messages = getMessagesElement(element);
+ var children = messages.children();
+
+ if (messages.length == 0 || children.length == 0) {
+ $log.warn('mdInput messages hide animation called on invalid messages element: ', element);
+ done();
+ return;
+ }
+
+ angular.forEach(children, function(child) {
+ animator = hideMessage(angular.element(child));
+
+ animators.push(animator.start());
+ });
+
+ $$AnimateRunner.all(animators, done);
+}
+
+function showMessage(element) {
+ var height = parseInt(window.getComputedStyle(element[0]).height);
+ var topMargin = parseInt(window.getComputedStyle(element[0]).marginTop);
+
+ var messages = getMessagesElement(element);
+ var container = getInputElement(element);
+
+ // Check to see if the message is already visible so we can skip
+ var alreadyVisible = (topMargin > -height);
+
+ // If we have the md-auto-hide class, the md-input-invalid animation will fire, so we can skip
+ if (alreadyVisible || (messages.hasClass('md-auto-hide') && !container.hasClass('md-input-invalid'))) {
+ return $animateCss(element, {});
+ }
+
+ return $animateCss(element, {
+ event: 'enter',
+ structural: true,
+ from: {"opacity": 0, "margin-top": -height + "px"},
+ to: {"opacity": 1, "margin-top": "0"},
+ duration: 0.3
+ });
+}
+
+function hideMessage(element) {
+ var height = element[0].offsetHeight;
+ var styles = window.getComputedStyle(element[0]);
+
+ // If we are already hidden, just return an empty animation
+ if (parseInt(styles.opacity) === 0) {
+ return $animateCss(element, {});
+ }
+
+ // Otherwise, animate
+ return $animateCss(element, {
+ event: 'leave',
+ structural: true,
+ from: {"opacity": 1, "margin-top": 0},
+ to: {"opacity": 0, "margin-top": -height + "px"},
+ duration: 0.3
+ });
+}
+
+function getInputElement(element) {
+ var inputContainer = element.controller('mdInputContainer');
+
+ return inputContainer.element;
+}
+
+function getMessagesElement(element) {
+ // If we ARE the messages element, just return ourself
+ if (element.hasClass('md-input-messages-animation')) {
+ return element;
+ }
+
+ // If we are a ng-message element, we need to traverse up the DOM tree
+ if (element.hasClass('md-input-message-animation')) {
+ return angular.element($mdUtil.getClosest(element, function(node) {
+ return node.classList.contains('md-input-messages-animation');
+ }));
+ }
+
+ // Otherwise, we can traverse down
+ return angular.element(element[0].querySelector('.md-input-messages-animation'));
+}
+
+function saveSharedServices(_$$AnimateRunner_, _$animateCss_, _$mdUtil_, _$log_) {
+ $$AnimateRunner = _$$AnimateRunner_;
+ $animateCss = _$animateCss_;
+ $mdUtil = _$mdUtil_;
+ $log = _$log_;
+}
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.list
+ * @description
+ * List module
+ */
+MdListController.$inject = ["$scope", "$element", "$mdListInkRipple"];
+mdListDirective.$inject = ["$mdTheming"];
+mdListItemDirective.$inject = ["$mdAria", "$mdConstant", "$mdUtil", "$timeout"];
+angular.module('material.components.list', [
+ 'material.core'
+])
+ .controller('MdListController', MdListController)
+ .directive('mdList', mdListDirective)
+ .directive('mdListItem', mdListItemDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdList
+ * @module material.components.list
+ *
+ * @restrict E
+ *
+ * @description
+ * The `` directive is a list container for 1..n `` tags.
+ *
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ *
{{item.title}}
+ *
{{item.description}}
+ *
+ *
+ *
+ *
+ */
+
+function mdListDirective($mdTheming) {
+ return {
+ restrict: 'E',
+ compile: function(tEl) {
+ tEl[0].setAttribute('role', 'list');
+ return $mdTheming;
+ }
+ };
+}
+/**
+ * @ngdoc directive
+ * @name mdListItem
+ * @module material.components.list
+ *
+ * @restrict E
+ *
+ * @description
+ * A `md-list-item` element can be used to represent some information in a row.
+ *
+ * @usage
+ * ### Single Row Item
+ *
+ *
+ * Single Row Item
+ *
+ *
+ *
+ * ### Multiple Lines
+ * By using the following markup, you will be able to have two lines inside of one `md-list-item`.
+ *
+ *
+ *
+ *
+ *
First Line
+ *
Second Line
+ *
+ *
+ *
+ *
+ * It is also possible to have three lines inside of one list item.
+ *
+ *
+ *
+ *
+ *
First Line
+ *
Second Line
+ *
Third Line
+ *
+ *
+ *
+ *
+ * ### Secondary Items
+ * Secondary items are elements which will be aligned at the end of the `md-list-item`.
+ *
+ *
+ *
+ * Single Row Item
+ *
+ * Secondary Button
+ *
+ *
+ *
+ *
+ * It also possible to have multiple secondary items inside of one `md-list-item`.
+ *
+ *
+ *
+ * Single Row Item
+ * First Button
+ * Second Button
+ *
+ *
+ *
+ * ### Proxy Item
+ * Proxies are elements, which will execute their specific action on click
+ * Currently supported proxy items are
+ * - `md-checkbox` (Toggle)
+ * - `md-switch` (Toggle)
+ * - `md-menu` (Open)
+ *
+ * This means, when using a supported proxy item inside of `md-list-item`, the list item will
+ * automatically become clickable and executes the associated action of the proxy element on click.
+ *
+ * It is possible to disable this behavior by applying the `md-no-proxy` class to the list item.
+ *
+ *
+ *
+ * No Proxy List
+ *
+ *
+ *
+ *
+ * Here are a few examples of proxy elements inside of a list item.
+ *
+ *
+ *
+ * First Line
+ *
+ *
+ *
+ *
+ * The `md-checkbox` element will be automatically detected as a proxy element and will toggle on click.
+ *
+ *
+ *
+ * First Line
+ *
+ *
+ *
+ *
+ * The recognized `md-switch` will toggle its state, when the user clicks on the `md-list-item`.
+ *
+ * It is also possible to have a `md-menu` inside of a `md-list-item`.
+ *
+ *
+ *
Click anywhere to fire the secondary action
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * Redial
+ *
+ *
+ *
+ *
+ * Check voicemail
+ *
+ *
+ *
+ *
+ *
+ * Notifications
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * The menu will automatically open, when the users clicks on the `md-list-item`.
+ *
+ * If the developer didn't specify any position mode on the menu, the `md-list-item` will automatically detect the
+ * position mode and applies it to the `md-menu`.
+ *
+ * ### Avatars
+ * Sometimes you may want to have some avatars inside of the `md-list-item `.
+ * You are able to create a optimized icon for the list item, by applying the `.md-avatar` class on the `` element.
+ *
+ *
+ *
+ *
+ * Alan Turing
+ *
+ *
+ * When using `` for an avatar, you have to use the `.md-avatar-icon` class.
+ *
+ *
+ *
+ * Timothy Kopra
+ *
+ *
+ *
+ * In cases, you have a `md-list-item`, which doesn't have any avatar,
+ * but you want to align it with the other avatar items, you have to use the `.md-offset` class.
+ *
+ *
+ *
+ * Jon Doe
+ *
+ *
+ *
+ * ### DOM modification
+ * The `md-list-item` component automatically detects if the list item should be clickable.
+ *
+ * ---
+ * If the `md-list-item` is clickable, we wrap all content inside of a `
` and create
+ * an overlaying button, which will will execute the given actions (like `ng-href`, `ng-click`)
+ *
+ * We create an overlaying button, instead of wrapping all content inside of the button,
+ * because otherwise some elements may not be clickable inside of the button.
+ *
+ * ---
+ * When using a secondary item inside of your list item, the `md-list-item` component will automatically create
+ * a secondary container at the end of the `md-list-item`, which contains all secondary items.
+ *
+ * The secondary item container is not static, because otherwise the overflow will not work properly on the
+ * list item.
+ *
+ */
+function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
+ var proxiedTypes = ['md-checkbox', 'md-switch', 'md-menu'];
+ return {
+ restrict: 'E',
+ controller: 'MdListController',
+ compile: function(tEl, tAttrs) {
+
+ // Check for proxy controls (no ng-click on parent, and a control inside)
+ var secondaryItems = tEl[0].querySelectorAll('.md-secondary');
+ var hasProxiedElement;
+ var proxyElement;
+ var itemContainer = tEl;
+
+ tEl[0].setAttribute('role', 'listitem');
+
+ if (tAttrs.ngClick || tAttrs.ngDblclick || tAttrs.ngHref || tAttrs.href || tAttrs.uiSref || tAttrs.ngAttrUiSref) {
+ wrapIn('button');
+ } else if (!tEl.hasClass('md-no-proxy')) {
+
+ for (var i = 0, type; type = proxiedTypes[i]; ++i) {
+ if (proxyElement = tEl[0].querySelector(type)) {
+ hasProxiedElement = true;
+ break;
+ }
+ }
+
+ if (hasProxiedElement) {
+ wrapIn('div');
+ } else {
+ tEl.addClass('md-no-proxy');
+ }
+
+ }
+
+ wrapSecondaryItems();
+ setupToggleAria();
+
+ if (hasProxiedElement && proxyElement.nodeName === "MD-MENU") {
+ setupProxiedMenu();
+ }
+
+ function setupToggleAria() {
+ var toggleTypes = ['md-switch', 'md-checkbox'];
+ var toggle;
+
+ for (var i = 0, toggleType; toggleType = toggleTypes[i]; ++i) {
+ if (toggle = tEl.find(toggleType)[0]) {
+ if (!toggle.hasAttribute('aria-label')) {
+ var p = tEl.find('p')[0];
+ if (!p) return;
+ toggle.setAttribute('aria-label', 'Toggle ' + p.textContent);
+ }
+ }
+ }
+ }
+
+ 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', '$mdMenu.open($event)');
+ }
+
+ if (!menuOpenButton.attr('aria-label')) {
+ menuOpenButton.attr('aria-label', 'Open List Menu');
+ }
+ }
+
+ function wrapIn(type) {
+ if (type == 'div') {
+ itemContainer = angular.element('
');
+ itemContainer.append(tEl.contents());
+ tEl.addClass('md-proxy-focus');
+ } else {
+ // Element which holds the default list-item content.
+ itemContainer = angular.element(
+ '
'+
+ ' '+
+ '
'
+ );
+
+ // Button which shows ripple and executes primary action.
+ var buttonWrap = angular.element(
+ ''
+ );
+
+ copyAttributes(tEl[0], buttonWrap[0]);
+
+ // If there is no aria-label set on the button (previously copied over if present)
+ // we determine the label from the content and copy it to the button.
+ if (!buttonWrap.attr('aria-label')) {
+ buttonWrap.attr('aria-label', $mdAria.getText(tEl));
+ }
+
+ // We allow developers to specify the `md-no-focus` class, to disable the focus style
+ // on the button executor. Once more classes should be forwarded, we should probably make the
+ // class forward more generic.
+ if (tEl.hasClass('md-no-focus')) {
+ buttonWrap.addClass('md-no-focus');
+ }
+
+ // Append the button wrap before our list-item content, because it will overlay in relative.
+ itemContainer.prepend(buttonWrap);
+ itemContainer.children().eq(1).append(tEl.contents());
+
+ tEl.addClass('_md-button-wrap');
+ }
+
+ tEl[0].setAttribute('tabindex', '-1');
+ tEl.append(itemContainer);
+ }
+
+ function wrapSecondaryItems() {
+ var secondaryItemsWrapper = angular.element('
');
+
+ angular.forEach(secondaryItems, function(secondaryItem) {
+ wrapSecondaryItem(secondaryItem, secondaryItemsWrapper);
+ });
+
+ itemContainer.append(secondaryItemsWrapper);
+ }
+
+ function wrapSecondaryItem(secondaryItem, container) {
+ // If the current secondary item is not a button, but contains a ng-click attribute,
+ // the secondary item will be automatically wrapped inside of a button.
+ if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
+
+ $mdAria.expect(secondaryItem, 'aria-label');
+ var buttonWrapper = angular.element('');
+
+ // Copy the attributes from the secondary item to the generated button.
+ // We also support some additional attributes from the secondary item,
+ // because some developers may use a ngIf, ngHide, ngShow on their item.
+ copyAttributes(secondaryItem, buttonWrapper[0], ['ng-if', 'ng-hide', 'ng-show']);
+
+ secondaryItem.setAttribute('tabindex', '-1');
+ buttonWrapper.append(secondaryItem);
+
+ secondaryItem = buttonWrapper[0];
+ }
+
+ if (secondaryItem && (!hasClickEvent(secondaryItem) || (!tAttrs.ngClick && isProxiedElement(secondaryItem)))) {
+ // In this case we remove the secondary class, so we can identify it later, when we searching for the
+ // proxy items.
+ angular.element(secondaryItem).removeClass('md-secondary');
+ }
+
+ tEl.addClass('md-with-secondary');
+ container.append(secondaryItem);
+ }
+
+ /**
+ * Copies attributes from a source element to the destination element
+ * By default the function will copy the most necessary attributes, supported
+ * by the button executor for clickable list items.
+ * @param source Element with the specified attributes
+ * @param destination Element which will retrieve the attributes
+ * @param extraAttrs Additional attributes, which will be copied over.
+ */
+ function copyAttributes(source, destination, extraAttrs) {
+ var copiedAttrs = $mdUtil.prefixer([
+ 'ng-if', 'ng-click', 'ng-dblclick', 'aria-label', 'ng-disabled', 'ui-sref',
+ 'href', 'ng-href', 'target', 'ng-attr-ui-sref', 'ui-sref-opts'
+ ]);
+
+ if (extraAttrs) {
+ copiedAttrs = copiedAttrs.concat($mdUtil.prefixer(extraAttrs));
+ }
+
+ angular.forEach(copiedAttrs, function(attr) {
+ if (source.hasAttribute(attr)) {
+ destination.setAttribute(attr, source.getAttribute(attr));
+ source.removeAttribute(attr);
+ }
+ });
+ }
+
+ function isProxiedElement(el) {
+ return proxiedTypes.indexOf(el.nodeName.toLowerCase()) != -1;
+ }
+
+ function isButton(el) {
+ var nodeName = el.nodeName.toUpperCase();
+
+ return nodeName == "MD-BUTTON" || nodeName == "BUTTON";
+ }
+
+ function hasClickEvent (element) {
+ var attr = element.attributes;
+ for (var i = 0; i < attr.length; i++) {
+ if (tAttrs.$normalize(attr[i].name) === 'ngClick') return true;
+ }
+ return false;
+ }
+
+ return postLink;
+
+ function postLink($scope, $element, $attr, ctrl) {
+ $element.addClass('_md'); // private md component indicator for styling
+
+ var proxies = [],
+ firstElement = $element[0].firstElementChild,
+ isButtonWrap = $element.hasClass('_md-button-wrap'),
+ clickChild = isButtonWrap ? firstElement.firstElementChild : firstElement,
+ hasClick = clickChild && hasClickEvent(clickChild),
+ noProxies = $element.hasClass('md-no-proxy');
+
+ computeProxies();
+ computeClickable();
+
+ if (proxies.length) {
+ angular.forEach(proxies, function(proxy) {
+ proxy = angular.element(proxy);
+
+ $scope.mouseActive = false;
+ proxy.on('mousedown', function() {
+ $scope.mouseActive = true;
+ $timeout(function(){
+ $scope.mouseActive = false;
+ }, 100);
+ })
+ .on('focus', function() {
+ if ($scope.mouseActive === false) { $element.addClass('md-focused'); }
+ proxy.on('blur', function proxyOnBlur() {
+ $element.removeClass('md-focused');
+ proxy.off('blur', proxyOnBlur);
+ });
+ });
+ });
+ }
+
+
+ function computeProxies() {
+
+ if (firstElement && firstElement.children && !hasClick && !noProxies) {
+
+ angular.forEach(proxiedTypes, function(type) {
+
+ // All elements which are not capable for being used a proxy have the .md-secondary class
+ // applied. These items had been sorted out in the secondary wrap function.
+ angular.forEach(firstElement.querySelectorAll(type + ':not(.md-secondary)'), function(child) {
+ proxies.push(child);
+ });
+ });
+
+ }
+ }
+
+ function computeClickable() {
+ if (proxies.length == 1 || hasClick) {
+ $element.addClass('md-clickable');
+
+ if (!hasClick) {
+ ctrl.attachRipple($scope, angular.element($element[0].querySelector('.md-no-style')));
+ }
+ }
+ }
+
+ function isEventFromControl(event) {
+ var forbiddenControls = ['md-slider'];
+
+ // If there is no path property in the event, then we can assume that the event was not bubbled.
+ if (!event.path) {
+ return forbiddenControls.indexOf(event.target.tagName.toLowerCase()) !== -1;
+ }
+
+ // We iterate the event path up and check for a possible component.
+ // Our maximum index to search, is the list item root.
+ var maxPath = event.path.indexOf($element.children()[0]);
+
+ for (var i = 0; i < maxPath; i++) {
+ if (forbiddenControls.indexOf(event.path[i].tagName.toLowerCase()) !== -1) {
+ return true;
+ }
+ }
+ }
+
+ var clickChildKeypressListener = function(e) {
+ if (e.target.nodeName != 'INPUT' && e.target.nodeName != 'TEXTAREA' && !e.target.isContentEditable) {
+ var keyCode = e.which || e.keyCode;
+ if (keyCode == $mdConstant.KEY_CODE.SPACE) {
+ if (clickChild) {
+ clickChild.click();
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }
+ }
+ };
+
+ if (!hasClick && !proxies.length) {
+ clickChild && clickChild.addEventListener('keypress', clickChildKeypressListener);
+ }
+
+ $element.off('click');
+ $element.off('keypress');
+
+ if (proxies.length == 1 && clickChild) {
+ $element.children().eq(0).on('click', function(e) {
+ // When the event is coming from an control and it should not trigger the proxied element
+ // then we are skipping.
+ if (isEventFromControl(e)) return;
+
+ var parentButton = $mdUtil.getClosest(e.target, 'BUTTON');
+ 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');
+ }
+ });
+ }
+ });
+ }
+
+ $scope.$on('$destroy', function () {
+ clickChild && clickChild.removeEventListener('keypress', clickChildKeypressListener);
+ });
+ }
+ }
+ };
+}
+
+/*
+ * @private
+ * @ngdoc controller
+ * @name MdListController
+ * @module material.components.list
+ *
+ */
+function MdListController($scope, $element, $mdListInkRipple) {
+ var ctrl = this;
+ ctrl.attachRipple = attachRipple;
+
+ function attachRipple (scope, element) {
+ var options = {};
+ $mdListInkRipple.attach(scope, element, options);
+ }
+}
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.menu
+ */
+
+angular.module('material.components.menu', [
+ 'material.core',
+ 'material.components.backdrop'
+]);
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.menuBar
+ */
+
+angular.module('material.components.menuBar', [
+ 'material.core',
+ 'material.components.icon',
+ 'material.components.menu'
+]);
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.panel
+ */
+MdPanelService.$inject = ["presets", "$rootElement", "$rootScope", "$injector", "$window"];
+angular
+ .module('material.components.panel', [
+ 'material.core',
+ 'material.components.backdrop'
+ ])
+ .provider('$mdPanel', MdPanelProvider);
+
+
+/*****************************************************************************
+ * PUBLIC DOCUMENTATION *
+ *****************************************************************************/
+
+
+/**
+ * @ngdoc service
+ * @name $mdPanelProvider
+ * @module material.components.panel
+ *
+ * @description
+ * `$mdPanelProvider` allows users to create configuration presets that will be
+ * stored within a cached presets object. When the configuration is needed, the
+ * user can request the preset by passing it as the first parameter in the
+ * `$mdPanel.create` or `$mdPanel.open` methods.
+ *
+ * @usage
+ *
+ * (function(angular, undefined) {
+ * 'use strict';
+ *
+ * angular
+ * .module('demoApp', ['ngMaterial'])
+ * .config(DemoConfig)
+ * .controller('DemoCtrl', DemoCtrl)
+ * .controller('DemoMenuCtrl', DemoMenuCtrl);
+ *
+ * function DemoConfig($mdPanelProvider) {
+ * $mdPanelProvider.definePreset('demoPreset', {
+ * attachTo: angular.element(document.body),
+ * controller: DemoMenuCtrl,
+ * controllerAs: 'ctrl',
+ * template: '' +
+ * '
' +
+ * '
' +
+ * '
' +
+ * ' ' +
+ * '
' +
+ * ' ' +
+ * '
' +
+ * ' ' +
+ * '
' +
+ * '
' +
+ * '
',
+ * 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) {
+ * $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();
+ * };
+ * }
+ * })(angular);
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanelProvider#definePreset
+ * @description
+ * Takes the passed in preset name and preset configuration object and adds it
+ * to the `_presets` object of the provider. This `_presets` object is then
+ * passed along to the `$mdPanel` service.
+ *
+ * @param {string} name Preset name.
+ * @param {!Object} preset Specific configuration object that can contain any
+ * and all of the parameters avaialble within the `$mdPanel.create` method.
+ * However, parameters that pertain to id, position, animation, and user
+ * interaction are not allowed and will be removed from the preset
+ * configuration.
+ */
+
+
+/*****************************************************************************
+ * MdPanel Service *
+ *****************************************************************************/
+
+
+/**
+ * @ngdoc service
+ * @name $mdPanel
+ * @module material.components.panel
+ *
+ * @description
+ * `$mdPanel` is a robust, low-level service for creating floating panels on
+ * the screen. It can be used to implement tooltips, dialogs, pop-ups, etc.
+ *
+ * @usage
+ *
+ * (function(angular, undefined) {
+ * 'use strict';
+ *
+ * angular
+ * .module('demoApp', ['ngMaterial'])
+ * .controller('DemoDialogController', DialogController);
+ *
+ * var panelRef;
+ *
+ * function showPanel($event) {
+ * var panelPosition = $mdPanel.newPanelPosition()
+ * .absolute()
+ * .top('50%')
+ * .left('50%');
+ *
+ * var panelAnimation = $mdPanel.newPanelAnimation()
+ * .targetEvent($event)
+ * .defaultAnimation('md-panel-animate-fly')
+ * .closeTo('.show-button');
+ *
+ * var config = {
+ * attachTo: angular.element(document.body),
+ * controller: DialogController,
+ * controllerAs: 'ctrl',
+ * position: panelPosition,
+ * animation: panelAnimation,
+ * targetEvent: $event,
+ * templateUrl: 'dialog-template.html',
+ * clickOutsideToClose: true,
+ * escapeToClose: true,
+ * focusOnOpen: true
+ * }
+ *
+ * $mdPanel.open(config)
+ * .then(function(result) {
+ * panelRef = result;
+ * });
+ * }
+ *
+ * function DialogController(MdPanelRef) {
+ * function closeDialog() {
+ * if (MdPanelRef) MdPanelRef.close();
+ * }
+ * }
+ * })(angular);
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanel#create
+ * @description
+ * Creates a panel with the specified options.
+ *
+ * @param config {!Object=} Specific configuration object that may contain the
+ * following properties:
+ *
+ * - `id` - `{string=}`: An ID to track the panel by. When an ID is provided,
+ * the created panel is added to a tracked panels object. Any subsequent
+ * requests made to create a panel with that ID are ignored. This is useful
+ * in having the panel service not open multiple panels from the same user
+ * interaction when there is no backdrop and events are propagated. Defaults
+ * to an arbitrary string that is not tracked.
+ * - `template` - `{string=}`: HTML template to show in the panel. This
+ * **must** be trusted HTML with respect to Angular’s
+ * [$sce service](https://docs.angularjs.org/api/ng/service/$sce).
+ * - `templateUrl` - `{string=}`: The URL that will be used as the content of
+ * the panel.
+ * - `contentElement` - `{(string|!angular.JQLite|!Element)=}`: Pre-compiled
+ * element to be used as the panel's content.
+ * - `controller` - `{(function|string)=}`: The controller to associate with
+ * the panel. The controller can inject a reference to the returned
+ * panelRef, which allows the panel to be closed, hidden, and shown. Any
+ * fields passed in through locals or resolve will be bound to the
+ * controller.
+ * - `controllerAs` - `{string=}`: An alias to assign the controller to on
+ * the scope.
+ * - `bindToController` - `{boolean=}`: Binds locals to the controller
+ * instead of passing them in. Defaults to true, as this is a best
+ * practice.
+ * - `locals` - `{Object=}`: An object containing key/value pairs. The keys
+ * will be used as names of values to inject into the controller. For
+ * example, `locals: {three: 3}` would inject `three` into the controller,
+ * with the value 3.
+ * - `resolve` - `{Object=}`: Similar to locals, except it takes promises as
+ * values. The panel will not open until all of the promises resolve.
+ * - `attachTo` - `{(string|!angular.JQLite|!Element)=}`: The element to
+ * attach the panel to. Defaults to appending to the root element of the
+ * application.
+ * - `propagateContainerEvents` - `{boolean=}`: Whether pointer or touch
+ * events should be allowed to propagate 'go through' the container, aka the
+ * wrapper, of the panel. Defaults to false.
+ * - `panelClass` - `{string=}`: A css class to apply to the panel element.
+ * This class should define any borders, box-shadow, etc. for the panel.
+ * - `zIndex` - `{number=}`: The z-index to place the panel at.
+ * Defaults to 80.
+ * - `position` - `{MdPanelPosition=}`: An MdPanelPosition object that
+ * specifies the alignment of the panel. For more information, see
+ * `MdPanelPosition`.
+ * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click
+ * outside the panel to close it. Defaults to false.
+ * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to
+ * close the panel. Defaults to false.
+ * - `onCloseSuccess` - `{function(!panelRef, string)=}`: Function that is
+ * called after the close successfully finishes. The first parameter passed
+ * into this function is the current panelRef and the 2nd is an optional
+ * string explaining the close reason. The currently supported closeReasons
+ * can be found in the MdPanelRef.closeReasons enum. These are by default
+ * passed along by the panel.
+ * - `trapFocus` - `{boolean=}`: Whether focus should be trapped within the
+ * panel. If `trapFocus` is true, the user will not be able to interact
+ * with the rest of the page until the panel is dismissed. Defaults to
+ * false.
+ * - `focusOnOpen` - `{boolean=}`: An option to override focus behavior on
+ * open. Only disable if focusing some other way, as focus management is
+ * required for panels to be accessible. Defaults to true.
+ * - `fullscreen` - `{boolean=}`: Whether the panel should be full screen.
+ * Applies the class `._md-panel-fullscreen` to the panel on open. Defaults
+ * to false.
+ * - `animation` - `{MdPanelAnimation=}`: An MdPanelAnimation object that
+ * specifies the animation of the panel. For more information, see
+ * `MdPanelAnimation`.
+ * - `hasBackdrop` - `{boolean=}`: Whether there should be an opaque backdrop
+ * behind the panel. Defaults to false.
+ * - `disableParentScroll` - `{boolean=}`: Whether the user can scroll the
+ * page behind the panel. Defaults to false.
+ * - `onDomAdded` - `{function=}`: Callback function used to announce when
+ * the panel is added to the DOM.
+ * - `onOpenComplete` - `{function=}`: Callback function used to announce
+ * when the open() action is finished.
+ * - `onRemoving` - `{function=}`: Callback function used to announce the
+ * close/hide() action is starting.
+ * - `onDomRemoved` - `{function=}`: Callback function used to announce when
+ * the panel is removed from the DOM.
+ * - `origin` - `{(string|!angular.JQLite|!Element)=}`: The element to focus
+ * on when the panel closes. This is commonly the element which triggered
+ * the opening of the panel. If you do not use `origin`, you need to control
+ * the focus manually.
+ * - `groupName` - `{(string|!Array)=}`: A group name or an array of
+ * group names. The group name is used for creating a group of panels. The
+ * group is used for configuring the number of open panels and identifying
+ * specific behaviors for groups. For instance, all tooltips could be
+ * identified using the same groupName.
+ *
+ * @returns {!MdPanelRef} panelRef
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanel#open
+ * @description
+ * Calls the create method above, then opens the panel. This is a shortcut for
+ * creating and then calling open manually. If custom methods need to be
+ * called when the panel is added to the DOM or opened, do not use this method.
+ * Instead create the panel, chain promises on the domAdded and openComplete
+ * methods, and call open from the returned panelRef.
+ *
+ * @param {!Object=} config Specific configuration object that may contain
+ * the properties defined in `$mdPanel.create`.
+ * @returns {!angular.$q.Promise} panelRef A promise that resolves
+ * to an instance of the panel.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanel#newPanelPosition
+ * @description
+ * Returns a new instance of the MdPanelPosition object. Use this to create
+ * the position config object.
+ *
+ * @returns {!MdPanelPosition} panelPosition
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanel#newPanelAnimation
+ * @description
+ * Returns a new instance of the MdPanelAnimation object. Use this to create
+ * the animation config object.
+ *
+ * @returns {!MdPanelAnimation} panelAnimation
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanel#newPanelGroup
+ * @description
+ * Creates a panel group and adds it to a tracked list of panel groups.
+ *
+ * @param {string} groupName Name of the group to create.
+ * @param {!Object=} config Specific configuration object that may contain the
+ * following properties:
+ *
+ * - `maxOpen` - `{number=}`: The maximum number of panels that are allowed to
+ * be open within a defined panel group.
+ *
+ * @returns {!Object,
+ * openPanels: !Array,
+ * maxOpen: number}>} panelGroup
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdPanel#setGroupMaxOpen
+ * @description
+ * Sets the maximum number of panels in a group that can be opened at a given
+ * time.
+ *
+ * @param {string} groupName The name of the group to configure.
+ * @param {number} maxOpen The maximum number of panels that can be
+ * opened. Infinity can be passed in to remove the maxOpen limit.
+ */
+
+
+/*****************************************************************************
+ * MdPanelRef *
+ *****************************************************************************/
+
+
+/**
+ * @ngdoc type
+ * @name MdPanelRef
+ * @module material.components.panel
+ * @description
+ * A reference to a created panel. This reference contains a unique id for the
+ * panel, along with the following properties:
+ *
+ * - `id` - `{string}`: The unique id for the panel. This id is used to track
+ * when a panel was interacted with.
+ * - `config` - `{!Object=}`: The entire config object that was used in
+ * create.
+ * - `isAttached` - `{boolean}`: Whether the panel is attached to the DOM.
+ * Visibility to the user does not factor into isAttached.
+ * - `panelContainer` - `{angular.JQLite}`: The wrapper element containing the
+ * panel. This property is added in order to have access to the `addClass`,
+ * `removeClass`, `toggleClass`, etc methods.
+ * - `panelEl` - `{angular.JQLite}`: The panel element. This property is added
+ * in order to have access to the `addClass`, `removeClass`, `toggleClass`,
+ * etc methods.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#open
+ * @description
+ * Attaches and shows the panel.
+ *
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel is
+ * opened.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#close
+ * @description
+ * Hides and detaches the panel. Note that this will **not** destroy the panel.
+ * If you don't intend on using the panel again, call the {@link #destroy
+ * destroy} method afterwards.
+ *
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel is
+ * closed.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#attach
+ * @description
+ * Create the panel elements and attach them to the DOM. The panel will be
+ * hidden by default.
+ *
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel is
+ * attached.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#detach
+ * @description
+ * Removes the panel from the DOM. This will NOT hide the panel before removing
+ * it.
+ *
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel is
+ * detached.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#show
+ * @description
+ * Shows the panel.
+ *
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel has
+ * shown and animations are completed.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#hide
+ * @description
+ * Hides the panel.
+ *
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel has
+ * hidden and animations are completed.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#destroy
+ * @description
+ * Destroys the panel. The panel cannot be opened again after this is called.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#addClass
+ * @deprecated
+ * This method is in the process of being deprecated in favor of using the panel
+ * and container JQLite elements that are referenced in the MdPanelRef object.
+ * Full deprecation is scheduled for material 1.2.
+ * @description
+ * Adds a class to the panel. DO NOT use this hide/show the panel.
+ *
+ * @param {string} newClass class to be added.
+ * @param {boolean} toElement Whether or not to add the class to the panel
+ * element instead of the container.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#removeClass
+ * @deprecated
+ * This method is in the process of being deprecated in favor of using the panel
+ * and container JQLite elements that are referenced in the MdPanelRef object.
+ * Full deprecation is scheduled for material 1.2.
+ * @description
+ * Removes a class from the panel. DO NOT use this to hide/show the panel.
+ *
+ * @param {string} oldClass Class to be removed.
+ * @param {boolean} fromElement Whether or not to remove the class from the
+ * panel element instead of the container.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#toggleClass
+ * @deprecated
+ * This method is in the process of being deprecated in favor of using the panel
+ * and container JQLite elements that are referenced in the MdPanelRef object.
+ * Full deprecation is scheduled for material 1.2.
+ * @description
+ * Toggles a class on the panel. DO NOT use this to hide/show the panel.
+ *
+ * @param {string} toggleClass Class to be toggled.
+ * @param {boolean} onElement Whether or not to remove the class from the panel
+ * element instead of the container.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#updatePosition
+ * @description
+ * Updates the position configuration of a panel. Use this to update the
+ * position of a panel that is open, without having to close and re-open the
+ * panel.
+ *
+ * @param {!MdPanelPosition} position
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#addToGroup
+ * @description
+ * Adds a panel to a group if the panel does not exist within the group already.
+ * A panel can only exist within a single group.
+ *
+ * @param {string} groupName The name of the group to add the panel to.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#removeFromGroup
+ * @description
+ * Removes a panel from a group if the panel exists within that group. The group
+ * must be created ahead of time.
+ *
+ * @param {string} groupName The name of the group.
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#registerInterceptor
+ * @description
+ * Registers an interceptor with the panel. The callback should return a promise,
+ * which will allow the action to continue when it gets resolved, or will
+ * prevent an action if it is rejected. The interceptors are called sequentially
+ * and it reverse order. `type` must be one of the following
+ * values available on `$mdPanel.interceptorTypes`:
+ * * `CLOSE` - Gets called before the panel begins closing.
+ *
+ * @param {string} type Type of interceptor.
+ * @param {!angular.$q.Promise} callback Callback to be registered.
+ * @returns {!MdPanelRef}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#removeInterceptor
+ * @description
+ * Removes a registered interceptor.
+ *
+ * @param {string} type Type of interceptor to be removed.
+ * @param {function(): !angular.$q.Promise} callback Interceptor to be removed.
+ * @returns {!MdPanelRef}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#removeAllInterceptors
+ * @description
+ * Removes all interceptors. If a type is supplied, only the
+ * interceptors of that type will be cleared.
+ *
+ * @param {string=} type Type of interceptors to be removed.
+ * @returns {!MdPanelRef}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelRef#updateAnimation
+ * @description
+ * Updates the animation configuration for a panel. You can use this to change
+ * the panel's animation without having to re-create it.
+ *
+ * @param {!MdPanelAnimation} animation
+ */
+
+
+/*****************************************************************************
+ * MdPanelPosition *
+ *****************************************************************************/
+
+
+/**
+ * @ngdoc type
+ * @name MdPanelPosition
+ * @module material.components.panel
+ * @description
+ *
+ * Object for configuring the position of the panel.
+ *
+ * @usage
+ *
+ * #### Centering the panel
+ *
+ *
+ * new MdPanelPosition().absolute().center();
+ *
+ *
+ * #### Overlapping the panel with an element
+ *
+ *
+ * new MdPanelPosition()
+ * .relativeTo(someElement)
+ * .addPanelPosition(
+ * $mdPanel.xPosition.ALIGN_START,
+ * $mdPanel.yPosition.ALIGN_TOPS
+ * );
+ *
+ *
+ * #### Aligning the panel with the bottom of an element
+ *
+ *
+ * new MdPanelPosition()
+ * .relativeTo(someElement)
+ * .addPanelPosition($mdPanel.xPosition.CENTER, $mdPanel.yPosition.BELOW);
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#absolute
+ * @description
+ * Positions the panel absolutely relative to the parent element. If the parent
+ * is document.body, this is equivalent to positioning the panel absolutely
+ * within the viewport.
+ *
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#relativeTo
+ * @description
+ * Positions the panel relative to a specific element.
+ *
+ * @param {string|!Element|!angular.JQLite} element Query selector, DOM element,
+ * or angular element to position the panel with respect to.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#top
+ * @description
+ * Sets the value of `top` for the panel. Clears any previously set vertical
+ * position.
+ *
+ * @param {string=} top Value of `top`. Defaults to '0'.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#bottom
+ * @description
+ * Sets the value of `bottom` for the panel. Clears any previously set vertical
+ * position.
+ *
+ * @param {string=} bottom Value of `bottom`. Defaults to '0'.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#start
+ * @description
+ * Sets the panel to the start of the page - `left` if `ltr` or `right` for
+ * `rtl`. Clears any previously set horizontal position.
+ *
+ * @param {string=} start Value of position. Defaults to '0'.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#end
+ * @description
+ * Sets the panel to the end of the page - `right` if `ltr` or `left` for `rtl`.
+ * Clears any previously set horizontal position.
+ *
+ * @param {string=} end Value of position. Defaults to '0'.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#left
+ * @description
+ * Sets the value of `left` for the panel. Clears any previously set
+ * horizontal position.
+ *
+ * @param {string=} left Value of `left`. Defaults to '0'.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#right
+ * @description
+ * Sets the value of `right` for the panel. Clears any previously set
+ * horizontal position.
+ *
+ * @param {string=} right Value of `right`. Defaults to '0'.
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#centerHorizontally
+ * @description
+ * Centers the panel horizontally in the viewport. Clears any previously set
+ * horizontal position.
+ *
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#centerVertically
+ * @description
+ * Centers the panel vertically in the viewport. Clears any previously set
+ * vertical position.
+ *
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#center
+ * @description
+ * Centers the panel horizontally and vertically in the viewport. This is
+ * equivalent to calling both `centerHorizontally` and `centerVertically`.
+ * Clears any previously set horizontal and vertical positions.
+ *
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#addPanelPosition
+ * @description
+ * Sets the x and y position for the panel relative to another element. Can be
+ * called multiple times to specify an ordered list of panel positions. The
+ * first position which allows the panel to be completely on-screen will be
+ * chosen; the last position will be chose whether it is on-screen or not.
+ *
+ * xPosition must be one of the following values available on
+ * $mdPanel.xPosition:
+ *
+ *
+ * CENTER | ALIGN_START | ALIGN_END | OFFSET_START | OFFSET_END
+ *
+ *
+ *
+ * yPosition must be one of the following values available on
+ * $mdPanel.yPosition:
+ *
+ * CENTER | ALIGN_TOPS | ALIGN_BOTTOMS | ABOVE | BELOW
+ *
+ *
+ *
+ * @param {string} xPosition
+ * @param {string} yPosition
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#withOffsetX
+ * @description
+ * Sets the value of the offset in the x-direction.
+ *
+ * @param {string} offsetX
+ * @returns {!MdPanelPosition}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelPosition#withOffsetY
+ * @description
+ * Sets the value of the offset in the y-direction.
+ *
+ * @param {string} offsetY
+ * @returns {!MdPanelPosition}
+ */
+
+
+/*****************************************************************************
+ * MdPanelAnimation *
+ *****************************************************************************/
+
+
+/**
+ * @ngdoc type
+ * @name MdPanelAnimation
+ * @module material.components.panel
+ * @description
+ * Animation configuration object. To use, create an MdPanelAnimation with the
+ * desired properties, then pass the object as part of $mdPanel creation.
+ *
+ * @usage
+ *
+ *
+ * var panelAnimation = new MdPanelAnimation()
+ * .openFrom(myButtonEl)
+ * .duration(1337)
+ * .closeTo('.my-button')
+ * .withAnimation($mdPanel.animation.SCALE);
+ *
+ * $mdPanel.create({
+ * animation: panelAnimation
+ * });
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelAnimation#openFrom
+ * @description
+ * Specifies where to start the open animation. `openFrom` accepts a
+ * click event object, query selector, DOM element, or a Rect object that
+ * is used to determine the bounds. When passed a click event, the location
+ * of the click will be used as the position to start the animation.
+ *
+ * @param {string|!Element|!Event|{top: number, left: number}}
+ * @returns {!MdPanelAnimation}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelAnimation#closeTo
+ * @description
+ * Specifies where to animate the panel close. `closeTo` accepts a
+ * query selector, DOM element, or a Rect object that is used to determine
+ * the bounds.
+ *
+ * @param {string|!Element|{top: number, left: number}}
+ * @returns {!MdPanelAnimation}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelAnimation#withAnimation
+ * @description
+ * Specifies the animation class.
+ *
+ * There are several default animations that can be used:
+ * ($mdPanel.animation)
+ * SLIDE: The panel slides in and out from the specified
+ * elements. It will not fade in or out.
+ * SCALE: The panel scales in and out. Slide and fade are
+ * included in this animation.
+ * FADE: The panel fades in and out.
+ *
+ * Custom classes will by default fade in and out unless
+ * "transition: opacity 1ms" is added to the to custom class.
+ *
+ * @param {string|{open: string, close: string}} cssClass
+ * @returns {!MdPanelAnimation}
+ */
+
+/**
+ * @ngdoc method
+ * @name MdPanelAnimation#duration
+ * @description
+ * Specifies the duration of the animation in milliseconds. The `duration`
+ * method accepts either a number or an object with separate open and close
+ * durations.
+ *
+ * @param {number|{open: number, close: number}} duration
+ * @returns {!MdPanelAnimation}
+ */
+
+
+/*****************************************************************************
+ * PUBLIC DOCUMENTATION *
+ *****************************************************************************/
+
+
+var MD_PANEL_Z_INDEX = 80;
+var MD_PANEL_HIDDEN = '_md-panel-hidden';
+var FOCUS_TRAP_TEMPLATE = angular.element(
+ '');
+
+var _presets = {};
+
+
+/**
+ * A provider that is used for creating presets for the panel API.
+ * @final @constructor @ngInject
+ */
+function MdPanelProvider() {
+ return {
+ 'definePreset': definePreset,
+ 'getAllPresets': getAllPresets,
+ 'clearPresets': clearPresets,
+ '$get': $getProvider()
+ };
+}
+
+
+/**
+ * Takes the passed in panel configuration object and adds it to the `_presets`
+ * object at the specified name.
+ * @param {string} name Name of the preset to set.
+ * @param {!Object} preset Specific configuration object that can contain any
+ * and all of the parameters avaialble within the `$mdPanel.create` method.
+ * However, parameters that pertain to id, position, animation, and user
+ * interaction are not allowed and will be removed from the preset
+ * configuration.
+ */
+function definePreset(name, preset) {
+ if (!name || !preset) {
+ throw new Error('mdPanelProvider: The panel preset definition is ' +
+ 'malformed. The name and preset object are required.');
+ } else if (_presets.hasOwnProperty(name)) {
+ throw new Error('mdPanelProvider: The panel preset you have requested ' +
+ 'has already been defined.');
+ }
+
+ // Delete any property on the preset that is not allowed.
+ delete preset.id;
+ delete preset.position;
+ delete preset.animation;
+
+ _presets[name] = preset;
+}
+
+
+/**
+ * Gets a clone of the `_presets`.
+ * @return {!Object}
+ */
+function getAllPresets() {
+ return angular.copy(_presets);
+}
+
+
+/**
+ * Clears all of the stored presets.
+ */
+function clearPresets() {
+ _presets = {};
+}
+
+
+/**
+ * Represents the `$get` method of the Angular provider. From here, a new
+ * reference to the MdPanelService is returned where the needed arguments are
+ * passed in including the MdPanelProvider `_presets`.
+ * @param {!Object} _presets
+ * @param {!angular.JQLite} $rootElement
+ * @param {!angular.Scope} $rootScope
+ * @param {!angular.$injector} $injector
+ * @param {!angular.$window} $window
+ */
+function $getProvider() {
+ return [
+ '$rootElement', '$rootScope', '$injector', '$window',
+ function($rootElement, $rootScope, $injector, $window) {
+ return new MdPanelService(_presets, $rootElement, $rootScope,
+ $injector, $window);
+ }
+ ];
+}
+
+
+/*****************************************************************************
+ * MdPanel Service *
+ *****************************************************************************/
+
+
+/**
+ * A service that is used for controlling/displaying panels on the screen.
+ * @param {!Object} presets
+ * @param {!angular.JQLite} $rootElement
+ * @param {!angular.Scope} $rootScope
+ * @param {!angular.$injector} $injector
+ * @param {!angular.$window} $window
+ * @final @constructor @ngInject
+ */
+function MdPanelService(presets, $rootElement, $rootScope, $injector, $window) {
+ /**
+ * Default config options for the panel.
+ * Anything angular related needs to be done later. Therefore
+ * scope: $rootScope.$new(true),
+ * attachTo: $rootElement,
+ * are added later.
+ * @private {!Object}
*/
- CalendarMonthCtrl.prototype.buildDateCell = function(opt_date) {
- var calendarCtrl = this.calendarCtrl;
+ this._defaultConfigOptions = {
+ bindToController: true,
+ clickOutsideToClose: false,
+ disableParentScroll: false,
+ escapeToClose: false,
+ focusOnOpen: true,
+ fullscreen: false,
+ hasBackdrop: false,
+ propagateContainerEvents: false,
+ transformTemplate: angular.bind(this, this._wrapTemplate),
+ trapFocus: false,
+ zIndex: MD_PANEL_Z_INDEX
+ };
+
+ /** @private {!Object} */
+ this._config = {};
+
+ /** @private {!Object} */
+ this._presets = presets;
+
+ /** @private @const */
+ this._$rootElement = $rootElement;
+
+ /** @private @const */
+ this._$rootScope = $rootScope;
+
+ /** @private @const */
+ this._$injector = $injector;
+
+ /** @private @const */
+ this._$window = $window;
+
+ /** @private @const */
+ this._$mdUtil = this._$injector.get('$mdUtil');
+
+ /** @private {!Object} */
+ this._trackedPanels = {};
+
+ /**
+ * @private {!Object,
+ * openPanels: !Array,
+ * maxOpen: number}>}
+ */
+ this._groups = Object.create(null);
+
+ /**
+ * Default animations that can be used within the panel.
+ * @type {enum}
+ */
+ this.animation = MdPanelAnimation.animation;
+
+ /**
+ * Possible values of xPosition for positioning the panel relative to
+ * another element.
+ * @type {enum}
+ */
+ this.xPosition = MdPanelPosition.xPosition;
+
+ /**
+ * Possible values of yPosition for positioning the panel relative to
+ * another element.
+ * @type {enum}
+ */
+ this.yPosition = MdPanelPosition.yPosition;
+
+ /**
+ * Possible values for the interceptors that can be registered on a panel.
+ * @type {enum}
+ */
+ this.interceptorTypes = MdPanelRef.interceptorTypes;
+
+ /**
+ * Possible values for closing of a panel.
+ * @type {enum}
+ */
+ this.closeReasons = MdPanelRef.closeReasons;
+
+ /**
+ * Possible values of absolute position.
+ * @type {enum}
+ */
+ this.absPosition = MdPanelPosition.absPosition;
+}
+
+
+/**
+ * Creates a panel with the specified options.
+ * @param {string=} preset Name of a preset configuration that can be used to
+ * extend the panel configuration.
+ * @param {!Object=} config Configuration object for the panel.
+ * @returns {!MdPanelRef}
+ */
+MdPanelService.prototype.create = function(preset, config) {
+ if (typeof preset === 'string') {
+ preset = this._getPresetByName(preset);
+ } else if (typeof preset === 'object' &&
+ (angular.isUndefined(config) || !config)) {
+ config = preset;
+ preset = {};
+ }
+
+ preset = preset || {};
+ config = config || {};
+
+ // If the passed-in config contains an ID and the ID is within _trackedPanels,
+ // return the tracked panel after updating its config with the passed-in
+ // config.
+ if (angular.isDefined(config.id) && this._trackedPanels[config.id]) {
+ var trackedPanel = this._trackedPanels[config.id];
+ angular.extend(trackedPanel.config, config);
+ return trackedPanel;
+ }
+
+ // Combine the passed-in config, the _defaultConfigOptions, and the preset
+ // configuration into the `_config`.
+ this._config = angular.extend({
+ // If no ID is set within the passed-in config, then create an arbitrary ID.
+ id: config.id || 'panel_' + this._$mdUtil.nextUid(),
+ scope: this._$rootScope.$new(true),
+ attachTo: this._$rootElement
+ }, this._defaultConfigOptions, config, preset);
+
+ // Create the panelRef and add it to the `_trackedPanels` object.
+ var panelRef = new MdPanelRef(this._config, this._$injector);
+ this._trackedPanels[config.id] = panelRef;
+
+ // Add the panel to each of its requested groups.
+ if (this._config.groupName) {
+ if (angular.isString(this._config.groupName)) {
+ this._config.groupName = [this._config.groupName];
+ }
+ angular.forEach(this._config.groupName, function(group) {
+ panelRef.addToGroup(group);
+ });
+ }
+
+ this._config.scope.$on('$destroy', angular.bind(panelRef, panelRef.detach));
+
+ return panelRef;
+};
+
+
+/**
+ * Creates and opens a panel with the specified options.
+ * @param {string=} preset Name of a preset configuration that can be used to
+ * extend the panel configuration.
+ * @param {!Object=} config Configuration object for the panel.
+ * @returns {!angular.$q.Promise} The panel created from create.
+ */
+MdPanelService.prototype.open = function(preset, config) {
+ var panelRef = this.create(preset, config);
+ return panelRef.open().then(function() {
+ return panelRef;
+ });
+};
+
+
+/**
+ * Gets a specific preset configuration object saved within `_presets`.
+ * @param {string} preset Name of the preset to search for.
+ * @returns {!Object} The preset configuration object.
+ */
+MdPanelService.prototype._getPresetByName = function(preset) {
+ if (!this._presets[preset]) {
+ throw new Error('mdPanel: The panel preset configuration that you ' +
+ 'requested does not exist. Use the $mdPanelProvider to create a ' +
+ 'preset before requesting one.');
+ }
+ return this._presets[preset];
+};
+
+
+/**
+ * Returns a new instance of the MdPanelPosition. Use this to create the
+ * positioning object.
+ * @returns {!MdPanelPosition}
+ */
+MdPanelService.prototype.newPanelPosition = function() {
+ return new MdPanelPosition(this._$injector);
+};
+
+
+/**
+ * Returns a new instance of the MdPanelAnimation. Use this to create the
+ * animation object.
+ * @returns {!MdPanelAnimation}
+ */
+MdPanelService.prototype.newPanelAnimation = function() {
+ return new MdPanelAnimation(this._$injector);
+};
+
+
+/**
+ * Creates a panel group and adds it to a tracked list of panel groups.
+ * @param groupName {string} Name of the group to create.
+ * @param config {!Object=} Specific configuration object that may contain the
+ * following properties:
+ *
+ * - `maxOpen` - `{number=}`: The maximum number of panels that are allowed
+ * open within a defined panel group.
+ *
+ * @returns {!Object,
+ * openPanels: !Array,
+ * maxOpen: number}>} panelGroup
+ */
+MdPanelService.prototype.newPanelGroup = function(groupName, config) {
+ if (!this._groups[groupName]) {
+ config = config || {};
+ var group = {
+ panels: [],
+ openPanels: [],
+ maxOpen: config.maxOpen > 0 ? config.maxOpen : Infinity
+ };
+ this._groups[groupName] = group;
+ }
+ return this._groups[groupName];
+};
+
+
+/**
+ * Sets the maximum number of panels in a group that can be opened at a given
+ * time.
+ * @param {string} groupName The name of the group to configure.
+ * @param {number} maxOpen The maximum number of panels that can be
+ * opened. Infinity can be passed in to remove the maxOpen limit.
+ */
+MdPanelService.prototype.setGroupMaxOpen = function(groupName, maxOpen) {
+ if (this._groups[groupName]) {
+ this._groups[groupName].maxOpen = maxOpen;
+ } else {
+ throw new Error('mdPanel: Group does not exist yet. Call newPanelGroup().');
+ }
+};
- // TODO(jelbourn): cloneNode is likely a faster way of doing this.
- var cell = document.createElement('td');
- cell.tabIndex = -1;
- cell.classList.add('md-calendar-date');
- cell.setAttribute('role', 'gridcell');
- if (opt_date) {
- cell.setAttribute('tabindex', '-1');
- cell.setAttribute('aria-label', this.dateLocale.longDateFormatter(opt_date));
- cell.id = calendarCtrl.getDateId(opt_date);
+/**
+ * Determines if the current number of open panels within a group exceeds the
+ * limit of allowed open panels.
+ * @param {string} groupName The name of the group to check.
+ * @returns {boolean} true if open count does exceed maxOpen and false if not.
+ * @private
+ */
+MdPanelService.prototype._openCountExceedsMaxOpen = function(groupName) {
+ if (this._groups[groupName]) {
+ var group = this._groups[groupName];
+ return group.maxOpen > 0 && group.openPanels.length > group.maxOpen;
+ }
+ return false;
+};
- // Use `data-timestamp` attribute because IE10 does not support the `dataset` property.
- cell.setAttribute('data-timestamp', opt_date.getTime());
- // TODO(jelourn): Doing these comparisons for class addition during generation might be slow.
- // It may be better to finish the construction and then query the node and add the class.
- if (this.dateUtil.isSameDay(opt_date, calendarCtrl.today)) {
- cell.classList.add(TODAY_CLASS);
- }
+/**
+ * Closes the first open panel within a specific group.
+ * @param {string} groupName The name of the group.
+ * @private
+ */
+MdPanelService.prototype._closeFirstOpenedPanel = function(groupName) {
+ this._groups[groupName].openPanels[0].close();
+};
- if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) &&
- this.dateUtil.isSameDay(opt_date, calendarCtrl.selectedDate)) {
- cell.classList.add(SELECTED_DATE_CLASS);
- cell.setAttribute('aria-selected', 'true');
- }
- var cellText = this.dateLocale.dates[opt_date.getDate()];
+/**
+ * Wraps the users template in two elements, md-panel-outer-wrapper, which
+ * covers the entire attachTo element, and md-panel, which contains only the
+ * template. This allows the panel control over positioning, animations,
+ * and similar properties.
+ * @param {string} origTemplate The original template.
+ * @returns {string} The wrapped template.
+ * @private
+ */
+MdPanelService.prototype._wrapTemplate = function(origTemplate) {
+ var template = origTemplate || '';
+
+ // The panel should be initially rendered offscreen so we can calculate
+ // height and width for positioning.
+ return '' +
+ '
' +
+ '
' + template + '
' +
+ '
';
+};
- if (this.isDateEnabled(opt_date)) {
- // Add a indicator for select, hover, and focus states.
- var selectionIndicator = document.createElement('span');
- cell.appendChild(selectionIndicator);
- selectionIndicator.classList.add('md-calendar-date-selection-indicator');
- selectionIndicator.textContent = cellText;
- cell.addEventListener('click', calendarCtrl.cellClickHandler);
+/**
+ * Wraps a content element in a md-panel-outer wrapper and
+ * positions it off-screen. Allows for proper control over positoning
+ * and animations.
+ * @param {!angular.JQLite} contentElement Element to be wrapped.
+ * @return {!angular.JQLite} Wrapper element.
+ * @private
+ */
+MdPanelService.prototype._wrapContentElement = function(contentElement) {
+ var wrapper = angular.element('
');
- if (calendarCtrl.focusDate && this.dateUtil.isSameDay(opt_date, calendarCtrl.focusDate)) {
- this.focusAfterAppend = cell;
- }
- } else {
- cell.classList.add('md-calendar-date-disabled');
- cell.textContent = cellText;
- }
- }
+ contentElement.addClass('md-panel').css('left', '-9999px');
+ wrapper.append(contentElement);
- return cell;
- };
-
+ return wrapper;
+};
+
+
+/*****************************************************************************
+ * MdPanelRef *
+ *****************************************************************************/
+
+
+/**
+ * A reference to a created panel. This reference contains a unique id for the
+ * panel, along with properties/functions used to control the panel.
+ * @param {!Object} config
+ * @param {!angular.$injector} $injector
+ * @final @constructor
+ */
+function MdPanelRef(config, $injector) {
+ // Injected variables.
+ /** @private @const {!angular.$q} */
+ this._$q = $injector.get('$q');
+
+ /** @private @const {!angular.$mdCompiler} */
+ this._$mdCompiler = $injector.get('$mdCompiler');
+
+ /** @private @const {!angular.$mdConstant} */
+ this._$mdConstant = $injector.get('$mdConstant');
+
+ /** @private @const {!angular.$mdUtil} */
+ this._$mdUtil = $injector.get('$mdUtil');
+
+ /** @private @const {!angular.$mdTheming} */
+ this._$mdTheming = $injector.get('$mdTheming');
+
+ /** @private @const {!angular.Scope} */
+ this._$rootScope = $injector.get('$rootScope');
+
+ /** @private @const {!angular.$animate} */
+ this._$animate = $injector.get('$animate');
+
+ /** @private @const {!MdPanelRef} */
+ this._$mdPanel = $injector.get('$mdPanel');
+
+ /** @private @const {!angular.$log} */
+ this._$log = $injector.get('$log');
+
+ /** @private @const {!angular.$window} */
+ this._$window = $injector.get('$window');
+
+ /** @private @const {!Function} */
+ this._$$rAF = $injector.get('$$rAF');
+
+ // Public variables.
/**
- * Check whether date is in range and enabled
- * @param {Date=} opt_date
- * @return {boolean} Whether the date is enabled.
+ * Unique id for the panelRef.
+ * @type {string}
*/
- CalendarMonthCtrl.prototype.isDateEnabled = function(opt_date) {
- return this.dateUtil.isDateWithinRange(opt_date,
- this.calendarCtrl.minDate, this.calendarCtrl.maxDate) &&
- (!angular.isFunction(this.calendarCtrl.dateFilter)
- || this.calendarCtrl.dateFilter(opt_date));
- }
-
+ this.id = config.id;
+
+ /** @type {!Object} */
+ this.config = config;
+
+ /** @type {!angular.JQLite|undefined} */
+ this.panelContainer;
+
+ /** @type {!angular.JQLite|undefined} */
+ this.panelEl;
+
/**
- * Builds a `tr` element for the calendar grid.
- * @param rowNumber The week number within the month.
- * @returns {HTMLElement}
+ * Whether the panel is attached. This is synchronous. When attach is called,
+ * isAttached is set to true. When detach is called, isAttached is set to
+ * false.
+ * @type {boolean}
*/
- CalendarMonthCtrl.prototype.buildDateRow = function(rowNumber) {
- var row = document.createElement('tr');
- row.setAttribute('role', 'row');
+ this.isAttached = false;
- // Because of an NVDA bug (with Firefox), the row needs an aria-label in order
- // to prevent the entire row being read aloud when the user moves between rows.
- // See http://community.nvda-project.org/ticket/4643.
- row.setAttribute('aria-label', this.dateLocale.weekNumberFormatter(rowNumber));
+ // Private variables.
+ /** @private {Array} */
+ this._removeListeners = [];
- return row;
- };
+ /** @private {!angular.JQLite|undefined} */
+ this._topFocusTrap;
+
+ /** @private {!angular.JQLite|undefined} */
+ this._bottomFocusTrap;
+
+ /** @private {!$mdPanel|undefined} */
+ this._backdropRef;
+
+ /** @private {Function?} */
+ this._restoreScroll = null;
/**
- * Builds the content for the given date's month.
- * @param {Date=} opt_dateInMonth
- * @returns {DocumentFragment} A document fragment containing the
elements.
+ * Keeps track of all the panel interceptors.
+ * @private {!Object}
*/
- CalendarMonthCtrl.prototype.buildCalendarForMonth = function(opt_dateInMonth) {
- var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date();
+ this._interceptors = Object.create(null);
- var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date);
- var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth);
- var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date);
+ /**
+ * Cleanup function, provided by `$mdCompiler` and assigned after the element
+ * has been compiled. When `contentElement` is used, the function is used to
+ * restore the element to it's proper place in the DOM.
+ * @private {!Function}
+ */
+ this._compilerCleanup = null;
+
+ /**
+ * Cache for saving and restoring element inline styles, CSS classes etc.
+ * @type {{styles: string, classes: string}}
+ */
+ this._restoreCache = {
+ styles: '',
+ classes: ''
+ };
+}
+
+
+MdPanelRef.interceptorTypes = {
+ CLOSE: 'onClose'
+};
+
+
+/**
+ * Opens an already created and configured panel. If the panel is already
+ * visible, does nothing.
+ * @returns {!angular.$q.Promise} A promise that is resolved when
+ * the panel is opened and animations finish.
+ */
+MdPanelRef.prototype.open = function() {
+ var self = this;
+ return this._$q(function(resolve, reject) {
+ var done = self._done(resolve, self);
+ var show = self._simpleBind(self.show, self);
+ var checkGroupMaxOpen = function() {
+ if (self.config.groupName) {
+ angular.forEach(self.config.groupName, function(group) {
+ if (self._$mdPanel._openCountExceedsMaxOpen(group)) {
+ self._$mdPanel._closeFirstOpenedPanel(group);
+ }
+ });
+ }
+ };
+
+ self.attach()
+ .then(show)
+ .then(checkGroupMaxOpen)
+ .then(done)
+ .catch(reject);
+ });
+};
+
+
+/**
+ * Closes the panel.
+ * @param {string} closeReason The event type that triggered the close.
+ * @returns {!angular.$q.Promise} A promise that is resolved when
+ * the panel is closed and animations finish.
+ */
+MdPanelRef.prototype.close = function(closeReason) {
+ var self = this;
+
+ return this._$q(function(resolve, reject) {
+ self._callInterceptors(MdPanelRef.interceptorTypes.CLOSE).then(function() {
+ var done = self._done(resolve, self);
+ var detach = self._simpleBind(self.detach, self);
+ var onCloseSuccess = self.config['onCloseSuccess'] || angular.noop;
+ onCloseSuccess = angular.bind(self, onCloseSuccess, self, closeReason);
+
+ self.hide()
+ .then(detach)
+ .then(done)
+ .then(onCloseSuccess)
+ .catch(reject);
+ }, reject);
+ });
+};
+
+
+/**
+ * Attaches the panel. The panel will be hidden afterwards.
+ * @returns {!angular.$q.Promise} A promise that is resolved when
+ * the panel is attached.
+ */
+MdPanelRef.prototype.attach = function() {
+ if (this.isAttached && this.panelEl) {
+ return this._$q.when(this);
+ }
+
+ var self = this;
+ return this._$q(function(resolve, reject) {
+ var done = self._done(resolve, self);
+ var onDomAdded = self.config['onDomAdded'] || angular.noop;
+ var addListeners = function(response) {
+ self.isAttached = true;
+ self._addEventListeners();
+ return response;
+ };
+
+ self._$q.all([
+ self._createBackdrop(),
+ self._createPanel()
+ .then(addListeners)
+ .catch(reject)
+ ]).then(onDomAdded)
+ .then(done)
+ .catch(reject);
+ });
+};
+
+
+/**
+ * Only detaches the panel. Will NOT hide the panel first.
+ * @returns {!angular.$q.Promise} A promise that is resolved when
+ * the panel is detached.
+ */
+MdPanelRef.prototype.detach = function() {
+ if (!this.isAttached) {
+ return this._$q.when(this);
+ }
+
+ var self = this;
+ var onDomRemoved = self.config['onDomRemoved'] || angular.noop;
+
+ var detachFn = function() {
+ self._removeEventListeners();
+
+ // Remove the focus traps that we added earlier for keeping focus within
+ // the panel.
+ if (self._topFocusTrap && self._topFocusTrap.parentNode) {
+ self._topFocusTrap.parentNode.removeChild(self._topFocusTrap);
+ }
+
+ if (self._bottomFocusTrap && self._bottomFocusTrap.parentNode) {
+ self._bottomFocusTrap.parentNode.removeChild(self._bottomFocusTrap);
+ }
+
+ if (self._restoreCache.classes) {
+ self.panelEl[0].className = self._restoreCache.classes;
+ }
+
+ // Either restore the saved styles or clear the ones set by mdPanel.
+ self.panelEl[0].style.cssText = self._restoreCache.styles || '';
+
+ self._compilerCleanup();
+ self.panelContainer.remove();
+ self.isAttached = false;
+ return self._$q.when(self);
+ };
+
+ if (this._restoreScroll) {
+ this._restoreScroll();
+ this._restoreScroll = null;
+ }
+
+ return this._$q(function(resolve, reject) {
+ var done = self._done(resolve, self);
+
+ self._$q.all([
+ detachFn(),
+ self._backdropRef ? self._backdropRef.detach() : true
+ ]).then(onDomRemoved)
+ .then(done)
+ .catch(reject);
+ });
+};
+
+
+/**
+ * Destroys the panel. The Panel cannot be opened again after this.
+ */
+MdPanelRef.prototype.destroy = function() {
+ var self = this;
+ if (this.config.groupName) {
+ angular.forEach(this.config.groupName, function(group) {
+ self.removeFromGroup(group);
+ });
+ }
+ this.config.scope.$destroy();
+ this.config.locals = null;
+ this._interceptors = null;
+};
+
+
+/**
+ * Shows the panel.
+ * @returns {!angular.$q.Promise} A promise that is resolved when
+ * the panel has shown and animations finish.
+ */
+MdPanelRef.prototype.show = function() {
+ if (!this.panelContainer) {
+ return this._$q(function(resolve, reject) {
+ reject('mdPanel: Panel does not exist yet. Call open() or attach().');
+ });
+ }
+
+ if (!this.panelContainer.hasClass(MD_PANEL_HIDDEN)) {
+ return this._$q.when(this);
+ }
+
+ var self = this;
+ var animatePromise = function() {
+ self.panelContainer.removeClass(MD_PANEL_HIDDEN);
+ return self._animateOpen();
+ };
+
+ return this._$q(function(resolve, reject) {
+ var done = self._done(resolve, self);
+ var onOpenComplete = self.config['onOpenComplete'] || angular.noop;
+ var addToGroupOpen = function() {
+ if (self.config.groupName) {
+ angular.forEach(self.config.groupName, function(group) {
+ self._$mdPanel._groups[group].openPanels.push(self);
+ });
+ }
+ };
+
+ self._$q.all([
+ self._backdropRef ? self._backdropRef.show() : self,
+ animatePromise().then(function() { self._focusOnOpen(); }, reject)
+ ]).then(onOpenComplete)
+ .then(addToGroupOpen)
+ .then(done)
+ .catch(reject);
+ });
+};
+
+
+/**
+ * Hides the panel.
+ * @returns {!angular.$q.Promise} A promise that is resolved when
+ * the panel has hidden and animations finish.
+ */
+MdPanelRef.prototype.hide = function() {
+ if (!this.panelContainer) {
+ return this._$q(function(resolve, reject) {
+ reject('mdPanel: Panel does not exist yet. Call open() or attach().');
+ });
+ }
+
+ if (this.panelContainer.hasClass(MD_PANEL_HIDDEN)) {
+ return this._$q.when(this);
+ }
+
+ var self = this;
+
+ return this._$q(function(resolve, reject) {
+ var done = self._done(resolve, self);
+ var onRemoving = self.config['onRemoving'] || angular.noop;
+ var hidePanel = function() {
+ self.panelContainer.addClass(MD_PANEL_HIDDEN);
+ };
+ var removeFromGroupOpen = function() {
+ if (self.config.groupName) {
+ var group, index;
+ angular.forEach(self.config.groupName, function(group) {
+ group = self._$mdPanel._groups[group];
+ index = group.openPanels.indexOf(self);
+ if (index > -1) {
+ group.openPanels.splice(index, 1);
+ }
+ });
+ }
+ };
+ var focusOnOrigin = function() {
+ var origin = self.config['origin'];
+ if (origin) {
+ getElement(origin).focus();
+ }
+ };
+
+ self._$q.all([
+ self._backdropRef ? self._backdropRef.hide() : self,
+ self._animateClose()
+ .then(onRemoving)
+ .then(hidePanel)
+ .then(removeFromGroupOpen)
+ .then(focusOnOrigin)
+ .catch(reject)
+ ]).then(done, reject);
+ });
+};
+
+
+/**
+ * Add a class to the panel. DO NOT use this to hide/show the panel.
+ * @deprecated
+ * This method is in the process of being deprecated in favor of using the panel
+ * and container JQLite elements that are referenced in the MdPanelRef object.
+ * Full deprecation is scheduled for material 1.2.
+ *
+ * @param {string} newClass Class to be added.
+ * @param {boolean} toElement Whether or not to add the class to the panel
+ * element instead of the container.
+ */
+MdPanelRef.prototype.addClass = function(newClass, toElement) {
+ this._$log.warn(
+ 'mdPanel: The addClass method is in the process of being deprecated. ' +
+ 'Full deprecation is scheduled for the Angular Material 1.2 release. ' +
+ 'To achieve the same results, use the panelContainer or panelEl ' +
+ 'JQLite elements that are referenced in MdPanelRef.');
+
+ if (!this.panelContainer) {
+ throw new Error(
+ 'mdPanel: Panel does not exist yet. Call open() or attach().');
+ }
+
+ if (!toElement && !this.panelContainer.hasClass(newClass)) {
+ this.panelContainer.addClass(newClass);
+ } else if (toElement && !this.panelEl.hasClass(newClass)) {
+ this.panelEl.addClass(newClass);
+ }
+};
+
+
+/**
+ * Remove a class from the panel. DO NOT use this to hide/show the panel.
+ * @deprecated
+ * This method is in the process of being deprecated in favor of using the panel
+ * and container JQLite elements that are referenced in the MdPanelRef object.
+ * Full deprecation is scheduled for material 1.2.
+ *
+ * @param {string} oldClass Class to be removed.
+ * @param {boolean} fromElement Whether or not to remove the class from the
+ * panel element instead of the container.
+ */
+MdPanelRef.prototype.removeClass = function(oldClass, fromElement) {
+ this._$log.warn(
+ 'mdPanel: The removeClass method is in the process of being deprecated. ' +
+ 'Full deprecation is scheduled for the Angular Material 1.2 release. ' +
+ 'To achieve the same results, use the panelContainer or panelEl ' +
+ 'JQLite elements that are referenced in MdPanelRef.');
+
+ if (!this.panelContainer) {
+ throw new Error(
+ 'mdPanel: Panel does not exist yet. Call open() or attach().');
+ }
+
+ if (!fromElement && this.panelContainer.hasClass(oldClass)) {
+ this.panelContainer.removeClass(oldClass);
+ } else if (fromElement && this.panelEl.hasClass(oldClass)) {
+ this.panelEl.removeClass(oldClass);
+ }
+};
+
+
+/**
+ * Toggle a class on the panel. DO NOT use this to hide/show the panel.
+ * @deprecated
+ * This method is in the process of being deprecated in favor of using the panel
+ * and container JQLite elements that are referenced in the MdPanelRef object.
+ * Full deprecation is scheduled for material 1.2.
+ *
+ * @param {string} toggleClass The class to toggle.
+ * @param {boolean} onElement Whether or not to toggle the class on the panel
+ * element instead of the container.
+ */
+MdPanelRef.prototype.toggleClass = function(toggleClass, onElement) {
+ this._$log.warn(
+ 'mdPanel: The toggleClass method is in the process of being deprecated. ' +
+ 'Full deprecation is scheduled for the Angular Material 1.2 release. ' +
+ 'To achieve the same results, use the panelContainer or panelEl ' +
+ 'JQLite elements that are referenced in MdPanelRef.');
+
+ if (!this.panelContainer) {
+ throw new Error(
+ 'mdPanel: Panel does not exist yet. Call open() or attach().');
+ }
+
+ if (!onElement) {
+ this.panelContainer.toggleClass(toggleClass);
+ } else {
+ this.panelEl.toggleClass(toggleClass);
+ }
+};
- // Store rows for the month in a document fragment so that we can append them all at once.
- var monthBody = document.createDocumentFragment();
- var rowNumber = 1;
- var row = this.buildDateRow(rowNumber);
- monthBody.appendChild(row);
+/**
+ * Compiles the panel, according to the passed in config and appends it to
+ * the DOM. Helps normalize differences in the compilation process between
+ * using a string template and a content element.
+ * @returns {!angular.$q.Promise} Promise that is resolved when
+ * the element has been compiled and added to the DOM.
+ * @private
+ */
+MdPanelRef.prototype._compile = function() {
+ var self = this;
- // If this is the final month in the list of items, only the first week should render,
- // so we should return immediately after the first row is complete and has been
- // attached to the body.
- var isFinalMonth = this.offset === this.calendarCtrl.items.length - 1;
+ // Compile the element via $mdCompiler. Note that when using a
+ // contentElement, the element isn't actually being compiled, rather the
+ // compiler saves it's place in the DOM and provides a way of restoring it.
+ return self._$mdCompiler.compile(self.config).then(function(compileData) {
+ var config = self.config;
- // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label
- // goes on a row above the first of the month. Otherwise, the month label takes up the first
- // two cells of the first row.
- var blankCellOffset = 0;
- var monthLabelCell = document.createElement('td');
- monthLabelCell.classList.add('md-calendar-month-label');
- // If the entire month is after the max date, render the label as a disabled state.
- if (this.calendarCtrl.maxDate && firstDayOfMonth > this.calendarCtrl.maxDate) {
- monthLabelCell.classList.add('md-calendar-month-label-disabled');
- }
- monthLabelCell.textContent = this.dateLocale.monthHeaderFormatter(date);
- if (firstDayOfTheWeek <= 2) {
- monthLabelCell.setAttribute('colspan', '7');
+ if (config.contentElement) {
+ var panelEl = compileData.element;
- var monthLabelRow = this.buildDateRow();
- monthLabelRow.appendChild(monthLabelCell);
- monthBody.insertBefore(monthLabelRow, row);
+ // Since mdPanel modifies the inline styles and CSS classes, we need
+ // to save them in order to be able to restore on close.
+ self._restoreCache.styles = panelEl[0].style.cssText;
+ self._restoreCache.classes = panelEl[0].className;
- if (isFinalMonth) {
- return monthBody;
- }
+ self.panelContainer = self._$mdPanel._wrapContentElement(panelEl);
+ self.panelEl = panelEl;
} else {
- blankCellOffset = 2;
- monthLabelCell.setAttribute('colspan', '2');
- row.appendChild(monthLabelCell);
+ self.panelContainer = compileData.link(config['scope']);
+ self.panelEl = angular.element(
+ self.panelContainer[0].querySelector('.md-panel')
+ );
}
- // Add a blank cell for each day of the week that occurs before the first of the month.
- // For example, if the first day of the month is a Tuesday, add blank cells for Sun and Mon.
- // The blankCellOffset is needed in cases where the first N cells are used by the month label.
- for (var i = blankCellOffset; i < firstDayOfTheWeek; i++) {
- row.appendChild(this.buildDateCell());
- }
+ // Save a reference to the cleanup function from the compiler.
+ self._compilerCleanup = compileData.cleanup;
- // Add a cell for each day of the month, keeping track of the day of the week so that
- // we know when to start a new row.
- var dayOfWeek = firstDayOfTheWeek;
- var iterationDate = firstDayOfMonth;
- for (var d = 1; d <= numberOfDaysInMonth; d++) {
- // If we've reached the end of the week, start a new row.
- if (dayOfWeek === 7) {
- // We've finished the first row, so we're done if this is the final month.
- if (isFinalMonth) {
- return monthBody;
- }
- dayOfWeek = 0;
- rowNumber++;
- row = this.buildDateRow(rowNumber);
- monthBody.appendChild(row);
- }
+ // Attach the panel to the proper place in the DOM.
+ getElement(self.config['attachTo']).append(self.panelContainer);
- iterationDate.setDate(d);
- var cell = this.buildDateCell(iterationDate);
- row.appendChild(cell);
+ return self;
+ });
+};
- dayOfWeek++;
- }
- // Ensure that the last row of the month has 7 cells.
- while (row.childNodes.length < 7) {
- row.appendChild(this.buildDateCell());
+/**
+ * Creates a panel and adds it to the dom.
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel is
+ * created.
+ * @private
+ */
+MdPanelRef.prototype._createPanel = function() {
+ var self = this;
+
+ return this._$q(function(resolve, reject) {
+ if (!self.config.locals) {
+ self.config.locals = {};
}
- // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat
- // requires that all items have exactly the same height.
- while (monthBody.childNodes.length < 6) {
- var whitespaceRow = this.buildDateRow();
- for (var i = 0; i < 7; i++) {
- whitespaceRow.appendChild(this.buildDateCell());
+ self.config.locals.mdPanelRef = self;
+
+ self._compile().then(function() {
+ if (self.config['disableParentScroll']) {
+ self._restoreScroll = self._$mdUtil.disableScrollAround(
+ null,
+ self.panelContainer,
+ { disableScrollMask: true }
+ );
}
- monthBody.appendChild(whitespaceRow);
- }
- return monthBody;
- };
+ // Add a custom CSS class to the panel element.
+ if (self.config['panelClass']) {
+ self.panelEl.addClass(self.config['panelClass']);
+ }
- /**
- * Gets the day-of-the-week index for a date for the current locale.
- * @private
- * @param {Date} date
- * @returns {number} The column index of the date in the calendar.
- */
- CalendarMonthCtrl.prototype.getLocaleDay_ = function(date) {
- return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7
- };
-})();
+ // Handle click and touch events for the panel container.
+ if (self.config['propagateContainerEvents']) {
+ self.panelContainer.css('pointer-events', 'none');
+ }
-})();
-(function(){
-"use strict";
+ // Panel may be outside the $rootElement, tell ngAnimate to animate
+ // regardless.
+ if (self._$animate.pin) {
+ self._$animate.pin(
+ self.panelContainer,
+ getElement(self.config['attachTo'])
+ );
+ }
-(function() {
- 'use strict';
+ self._configureTrapFocus();
+ self._addStyles().then(function() {
+ resolve(self);
+ }, reject);
+ }, reject);
- /**
- * @ngdoc service
- * @name $mdDateLocaleProvider
- * @module material.components.datepicker
- *
- * @description
- * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service.
- * This provider that allows the user to specify messages, formatters, and parsers for date
- * internationalization. The `$mdDateLocale` service itself is consumed by Angular Material
- * components that deal with dates.
- *
- * @property {(Array)=} months Array of month names (in order).
- * @property {(Array)=} shortMonths Array of abbreviated month names.
- * @property {(Array)=} days Array of the days of the week (in order).
- * @property {(Array)=} shortDays Array of abbreviated dayes of the week.
- * @property {(Array)=} dates Array of dates of the month. Only necessary for locales
- * using a numeral system other than [1, 2, 3...].
- * @property {(Array)=} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1,
- * etc.
- * @property {(function(string): Date)=} parseDate Function to parse a date object from a string.
- * @property {(function(Date): string)=} formatDate Function to format a date object to a string.
- * @property {(function(Date): string)=} monthHeaderFormatter Function that returns the label for
- * a month given a date.
- * @property {(function(number): string)=} weekNumberFormatter Function that returns a label for
- * a week given the week number.
- * @property {(string)=} msgCalendar Translation of the label "Calendar" for the current locale.
- * @property {(string)=} msgOpenCalendar Translation of the button label "Open calendar" for the
- * current locale.
- *
- * @usage
- *
- * myAppModule.config(function($mdDateLocaleProvider) {
- *
- * // Example of a French localization.
- * $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...];
- * $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars', ...];
- * $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...];
- * $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...];
- *
- * // Can change week display to start on Monday.
- * $mdDateLocaleProvider.firstDayOfWeek = 1;
- *
- * // Optional.
- * $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...];
- *
- * // Example uses moment.js to parse and format dates.
- * $mdDateLocaleProvider.parseDate = function(dateString) {
- * var m = moment(dateString, 'L', true);
- * return m.isValid() ? m.toDate() : new Date(NaN);
- * };
- *
- * $mdDateLocaleProvider.formatDate = function(date) {
- * return moment(date).format('L');
- * };
- *
- * $mdDateLocaleProvider.monthHeaderFormatter = function(date) {
- * return myShortMonths[date.getMonth()] + ' ' + date.getFullYear();
- * };
- *
- * // In addition to date display, date components also need localized messages
- * // for aria-labels for screen-reader users.
- *
- * $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {
- * return 'Semaine ' + weekNumber;
- * };
- *
- * $mdDateLocaleProvider.msgCalendar = 'Calendrier';
- * $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier';
- *
- * });
- *
- *
- */
+ });
+};
- angular.module('material.components.datepicker').config(["$provide", function($provide) {
- // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions.
- /** @constructor */
- function DateLocaleProvider() {
- /** Array of full month names. E.g., ['January', 'Febuary', ...] */
- this.months = null;
+/**
+ * Adds the styles for the panel, such as positioning and z-index. Also,
+ * themes the panel element and panel container using `$mdTheming`.
+ * @returns {!angular.$q.Promise}
+ * @private
+ */
+MdPanelRef.prototype._addStyles = function() {
+ var self = this;
+ return this._$q(function(resolve) {
+ self.panelContainer.css('z-index', self.config['zIndex']);
+ self.panelEl.css('z-index', self.config['zIndex'] + 1);
- /** Array of abbreviated month names. E.g., ['Jan', 'Feb', ...] */
- this.shortMonths = null;
+ var hideAndResolve = function() {
+ // Theme the element and container.
+ self._setTheming();
- /** Array of full day of the week names. E.g., ['Monday', 'Tuesday', ...] */
- this.days = null;
+ // Remove left: -9999px and add hidden class.
+ self.panelEl.css('left', '');
+ self.panelContainer.addClass(MD_PANEL_HIDDEN);
- /** Array of abbreviated dat of the week names. E.g., ['M', 'T', ...] */
- this.shortDays = null;
+ resolve(self);
+ };
- /** Array of dates of a month (1 - 31). Characters might be different in some locales. */
- this.dates = null;
+ if (self.config['fullscreen']) {
+ self.panelEl.addClass('_md-panel-fullscreen');
+ hideAndResolve();
+ return; // Don't setup positioning.
+ }
- /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */
- this.firstDayOfWeek = 0;
+ var positionConfig = self.config['position'];
+ if (!positionConfig) {
+ hideAndResolve();
+ return; // Don't setup positioning.
+ }
- /**
- * Function that converts the date portion of a Date to a string.
- * @type {(function(Date): string)}
- */
- this.formatDate = null;
+ // Wait for angular to finish processing the template
+ self._$rootScope['$$postDigest'](function() {
+ // Position it correctly. This is necessary so that the panel will have a
+ // defined height and width.
+ self._updatePosition(true);
- /**
- * Function that converts a date string to a Date object (the date portion)
- * @type {function(string): Date}
- */
- this.parseDate = null;
+ // Theme the element and container.
+ self._setTheming();
- /**
- * Function that formats a Date into a month header string.
- * @type {function(Date): string}
- */
- this.monthHeaderFormatter = null;
+ resolve(self);
+ });
+ });
+};
- /**
- * Function that formats a week number into a label for the week.
- * @type {function(number): string}
- */
- this.weekNumberFormatter = null;
- /**
- * Function that formats a date into a long aria-label that is read
- * when the focused date changes.
- * @type {function(Date): string}
- */
- this.longDateFormatter = null;
+/**
+ * Sets the `$mdTheming` classes on the `panelContainer` and `panelEl`.
+ * @private
+ */
+MdPanelRef.prototype._setTheming = function() {
+ this._$mdTheming(this.panelEl);
+ this._$mdTheming(this.panelContainer);
+};
- /**
- * ARIA label for the calendar "dialog" used in the datepicker.
- * @type {string}
- */
- this.msgCalendar = '';
- /**
- * ARIA label for the datepicker's "Open calendar" buttons.
- * @type {string}
- */
- this.msgOpenCalendar = '';
- }
+/**
+ * Updates the position configuration of a panel
+ * @param {!MdPanelPosition} position
+ */
+MdPanelRef.prototype.updatePosition = function(position) {
+ if (!this.panelContainer) {
+ throw new Error(
+ 'mdPanel: Panel does not exist yet. Call open() or attach().');
+ }
- /**
- * Factory function that returns an instance of the dateLocale service.
- * @ngInject
- * @param $locale
- * @returns {DateLocale}
- */
- DateLocaleProvider.prototype.$get = function($locale) {
- /**
- * Default date-to-string formatting function.
- * @param {!Date} date
- * @returns {string}
- */
- function defaultFormatDate(date) {
- if (!date) {
- return '';
- }
+ this.config['position'] = position;
+ this._updatePosition();
+};
+
+
+/**
+ * Calculates and updates the position of the panel.
+ * @param {boolean=} init
+ * @private
+ */
+MdPanelRef.prototype._updatePosition = function(init) {
+ var positionConfig = this.config['position'];
- // All of the dates created through ng-material *should* be set to midnight.
- // If we encounter a date where the localeTime shows at 11pm instead of midnight,
- // we have run into an issue with DST where we need to increment the hour by one:
- // var d = new Date(1992, 9, 8, 0, 0, 0);
- // d.toLocaleString(); // == "10/7/1992, 11:00:00 PM"
- var localeTime = date.toLocaleTimeString();
- var formatDate = date;
- if (date.getHours() == 0 &&
- (localeTime.indexOf('11:') !== -1 || localeTime.indexOf('23:') !== -1)) {
- formatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0);
- }
+ if (positionConfig) {
+ positionConfig._setPanelPosition(this.panelEl);
- return formatDate.toLocaleDateString();
- }
+ // Hide the panel now that position is known.
+ if (init) {
+ this.panelContainer.addClass(MD_PANEL_HIDDEN);
+ }
- /**
- * Default string-to-date parsing function.
- * @param {string} dateString
- * @returns {!Date}
- */
- function defaultParseDate(dateString) {
- return new Date(dateString);
- }
+ this.panelEl.css(
+ MdPanelPosition.absPosition.TOP,
+ positionConfig.getTop()
+ );
+ this.panelEl.css(
+ MdPanelPosition.absPosition.BOTTOM,
+ positionConfig.getBottom()
+ );
+ this.panelEl.css(
+ MdPanelPosition.absPosition.LEFT,
+ positionConfig.getLeft()
+ );
+ this.panelEl.css(
+ MdPanelPosition.absPosition.RIGHT,
+ positionConfig.getRight()
+ );
+ }
+};
- /**
- * Default function to determine whether a string makes sense to be
- * parsed to a Date object.
- *
- * This is very permissive and is just a basic sanity check to ensure that
- * things like single integers aren't able to be parsed into dates.
- * @param {string} dateString
- * @returns {boolean}
- */
- function defaultIsDateComplete(dateString) {
- dateString = dateString.trim();
- // Looks for three chunks of content (either numbers or text) separated
- // by delimiters.
- var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ \.,]+|[\/\-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/;
- return re.test(dateString);
- }
+/**
+ * Focuses on the panel or the first focus target.
+ * @private
+ */
+MdPanelRef.prototype._focusOnOpen = function() {
+ if (this.config['focusOnOpen']) {
+ // Wait for the template to finish rendering to guarantee md-autofocus has
+ // finished adding the class md-autofocus, otherwise the focusable element
+ // isn't available to focus.
+ var self = this;
+ this._$rootScope['$$postDigest'](function() {
+ var target = self._$mdUtil.findFocusTarget(self.panelEl) ||
+ self.panelEl;
+ target.focus();
+ });
+ }
+};
- /**
- * Default date-to-string formatter to get a month header.
- * @param {!Date} date
- * @returns {string}
- */
- function defaultMonthHeaderFormatter(date) {
- return service.shortMonths[date.getMonth()] + ' ' + date.getFullYear();
- }
- /**
- * Default week number formatter.
- * @param number
- * @returns {string}
- */
- function defaultWeekNumberFormatter(number) {
- return 'Week ' + number;
- }
+/**
+ * Shows the backdrop.
+ * @returns {!angular.$q.Promise} A promise that is resolved when the backdrop
+ * is created and attached.
+ * @private
+ */
+MdPanelRef.prototype._createBackdrop = function() {
+ if (this.config.hasBackdrop) {
+ if (!this._backdropRef) {
+ var backdropAnimation = this._$mdPanel.newPanelAnimation()
+ .openFrom(this.config.attachTo)
+ .withAnimation({
+ open: '_md-opaque-enter',
+ close: '_md-opaque-leave'
+ });
- /**
- * Default formatter for date cell aria-labels.
- * @param {!Date} date
- * @returns {string}
- */
- function defaultLongDateFormatter(date) {
- // Example: 'Thursday June 18 2015'
- return [
- service.days[date.getDay()],
- service.months[date.getMonth()],
- service.dates[date.getDate()],
- date.getFullYear()
- ].join(' ');
+ if (this.config.animation) {
+ backdropAnimation.duration(this.config.animation._rawDuration);
}
- // The default "short" day strings are the first character of each day,
- // e.g., "Monday" => "M".
- var defaultShortDays = $locale.DATETIME_FORMATS.DAY.map(function(day) {
- return day[0];
- });
+ var backdropConfig = {
+ animation: backdropAnimation,
+ attachTo: this.config.attachTo,
+ focusOnOpen: false,
+ panelClass: '_md-panel-backdrop',
+ zIndex: this.config.zIndex - 1
+ };
- // The default dates are simply the numbers 1 through 31.
- var defaultDates = Array(32);
- for (var i = 1; i <= 31; i++) {
- defaultDates[i] = i;
- }
+ this._backdropRef = this._$mdPanel.create(backdropConfig);
+ }
+ if (!this._backdropRef.isAttached) {
+ return this._backdropRef.attach();
+ }
+ }
+};
- // Default ARIA messages are in English (US).
- var defaultMsgCalendar = 'Calendar';
- var defaultMsgOpenCalendar = 'Open calendar';
- var service = {
- months: this.months || $locale.DATETIME_FORMATS.MONTH,
- shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,
- days: this.days || $locale.DATETIME_FORMATS.DAY,
- shortDays: this.shortDays || defaultShortDays,
- dates: this.dates || defaultDates,
- firstDayOfWeek: this.firstDayOfWeek || 0,
- formatDate: this.formatDate || defaultFormatDate,
- parseDate: this.parseDate || defaultParseDate,
- isDateComplete: this.isDateComplete || defaultIsDateComplete,
- monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter,
- weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter,
- longDateFormatter: this.longDateFormatter || defaultLongDateFormatter,
- msgCalendar: this.msgCalendar || defaultMsgCalendar,
- msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar
- };
+/**
+ * Listen for escape keys and outside clicks to auto close.
+ * @private
+ */
+MdPanelRef.prototype._addEventListeners = function() {
+ this._configureEscapeToClose();
+ this._configureClickOutsideToClose();
+ this._configureScrollListener();
+};
- return service;
- };
- DateLocaleProvider.prototype.$get.$inject = ["$locale"];
- $provide.provider('$mdDateLocale', new DateLocaleProvider());
- }]);
-})();
+/**
+ * Remove event listeners added in _addEventListeners.
+ * @private
+ */
+MdPanelRef.prototype._removeEventListeners = function() {
+ this._removeListeners && this._removeListeners.forEach(function(removeFn) {
+ removeFn();
+ });
+ this._removeListeners = [];
+};
-})();
-(function(){
-"use strict";
-(function() {
- 'use strict';
+/**
+ * Setup the escapeToClose event listeners.
+ * @private
+ */
+MdPanelRef.prototype._configureEscapeToClose = function() {
+ if (this.config['escapeToClose']) {
+ var parentTarget = getElement(this.config['attachTo']);
+ var self = this;
- // POST RELEASE
- // TODO(jelbourn): Demo that uses moment.js
- // TODO(jelbourn): make sure this plays well with validation and ngMessages.
- // TODO(jelbourn): calendar pane doesn't open up outside of visible viewport.
- // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)
- // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?)
- // TODO(jelbourn): input behavior (masking? auto-complete?)
- // TODO(jelbourn): UTC mode
- // TODO(jelbourn): RTL
+ var keyHandlerFn = function(ev) {
+ if (ev.keyCode === self._$mdConstant.KEY_CODE.ESCAPE) {
+ ev.stopPropagation();
+ ev.preventDefault();
+ self.close(MdPanelRef.closeReasons.ESCAPE);
+ }
+ };
- angular.module('material.components.datepicker')
- .directive('mdDatepicker', datePickerDirective);
+ // Add keydown listeners
+ this.panelContainer.on('keydown', keyHandlerFn);
+ parentTarget.on('keydown', keyHandlerFn);
- /**
- * @ngdoc directive
- * @name mdDatepicker
- * @module material.components.datepicker
- *
- * @param {Date} ng-model The component's model. Expects a JavaScript Date object.
- * @param {expression=} ng-change Expression evaluated when the model value changes.
- * @param {Date=} md-min-date Expression representing a min date (inclusive).
- * @param {Date=} md-max-date Expression representing a max date (inclusive).
- * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a boolean whether it can be selected or not.
- * @param {String=} md-placeholder The date input placeholder value.
- * @param {boolean=} ng-disabled Whether the datepicker is disabled.
- * @param {boolean=} ng-required Whether a value is required for the datepicker.
- *
- * @description
- * `` is a component used to select a single date.
- * For information on how to configure internationalization for the date picker,
- * see `$mdDateLocaleProvider`.
- *
- * This component supports [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages).
- * Supported attributes are:
- * * `required`: whether a required date is not set.
- * * `mindate`: whether the selected date is before the minimum allowed date.
- * * `maxdate`: whether the selected date is after the maximum allowed date.
- *
- * @usage
- *
- *
- *
- *
- */
- function datePickerDirective() {
- return {
- template:
- // Buttons are not in the tab order because users can open the calendar via keyboard
- // interaction on the text input, and multiple tab stops for one component (picker)
- // may be confusing.
- '' +
- '' +
- '' +
- '
' +
- '' +
- '' +
- '' +
- '' +
- '
' +
+ // Queue remove listeners function
+ this._removeListeners.push(function() {
+ self.panelContainer.off('keydown', keyHandlerFn);
+ parentTarget.off('keydown', keyHandlerFn);
+ });
+ }
+};
- // This pane will be detached from here and re-attached to the document body.
- '
' +
- '
' +
- '' +
- '
' +
- '
' +
- '' +
- '' +
- '
' +
- '
',
- require: ['ngModel', 'mdDatepicker', '?^mdInputContainer'],
- scope: {
- minDate: '=mdMinDate',
- maxDate: '=mdMaxDate',
- placeholder: '@mdPlaceholder',
- dateFilter: '=mdDateFilter'
- },
- controller: DatePickerCtrl,
- controllerAs: 'ctrl',
- bindToController: true,
- link: function(scope, element, attr, controllers) {
- var ngModelCtrl = controllers[0];
- var mdDatePickerCtrl = controllers[1];
- var mdInputContainer = controllers[2];
- if (mdInputContainer) {
- throw Error('md-datepicker should not be placed inside md-input-container.');
+/**
+ * Setup the clickOutsideToClose event listeners.
+ * @private
+ */
+MdPanelRef.prototype._configureClickOutsideToClose = function() {
+ if (this.config['clickOutsideToClose']) {
+ var target = this.config['propagateContainerEvents'] ?
+ angular.element(document.body) :
+ this.panelContainer;
+ var sourceEl;
+
+ // Keep track of the element on which the mouse originally went down
+ // so that we can only close the backdrop when the 'click' started on it.
+ // A simple 'click' handler does not work, it sets the target object as the
+ // element the mouse went down on.
+ var mousedownHandler = function(ev) {
+ sourceEl = ev.target;
+ };
+
+ // We check if our original element and the target is the backdrop
+ // because if the original was the backdrop and the target was inside the
+ // panel we don't want to panel to close.
+ var self = this;
+ var mouseupHandler = function(ev) {
+ if (self.config['propagateContainerEvents']) {
+
+ // We check if the sourceEl of the event is the panel element or one
+ // of it's children. If it is not, then close the panel.
+ if (sourceEl !== self.panelEl[0] && !self.panelEl[0].contains(sourceEl)) {
+ self.close();
}
- mdDatePickerCtrl.configureNgModel(ngModelCtrl);
+ } else if (sourceEl === target[0] && ev.target === target[0]) {
+ ev.stopPropagation();
+ ev.preventDefault();
+
+ self.close(MdPanelRef.closeReasons.CLICK_OUTSIDE);
}
};
- }
-
- /** Additional offset for the input's `size` attribute, which is updated based on its content. */
- var EXTRA_INPUT_SIZE = 3;
- /** Class applied to the container if the date is invalid. */
- var INVALID_CLASS = 'md-datepicker-invalid';
+ // Add listeners
+ target.on('mousedown', mousedownHandler);
+ target.on('mouseup', mouseupHandler);
- /** Default time in ms to debounce input event by. */
- var DEFAULT_DEBOUNCE_INTERVAL = 500;
+ // Queue remove listeners function
+ this._removeListeners.push(function() {
+ target.off('mousedown', mousedownHandler);
+ target.off('mouseup', mouseupHandler);
+ });
+ }
+};
- /**
- * Height of the calendar pane used to check if the pane is going outside the boundary of
- * the viewport. See calendar.scss for how $md-calendar-height is computed; an extra 20px is
- * also added to space the pane away from the exact edge of the screen.
- *
- * This is computed statically now, but can be changed to be measured if the circumstances
- * of calendar sizing are changed.
- */
- var CALENDAR_PANE_HEIGHT = 368;
- /**
- * Width of the calendar pane used to check if the pane is going outside the boundary of
- * the viewport. See calendar.scss for how $md-calendar-width is computed; an extra 20px is
- * also added to space the pane away from the exact edge of the screen.
- *
- * This is computed statically now, but can be changed to be measured if the circumstances
- * of calendar sizing are changed.
- */
- var CALENDAR_PANE_WIDTH = 360;
+/**
+ * Configures the listeners for updating the panel position on scroll.
+ * @private
+*/
+MdPanelRef.prototype._configureScrollListener = function() {
+ // No need to bind the event if scrolling is disabled.
+ if (!this.config['disableParentScroll']) {
+ var updatePosition = angular.bind(this, this._updatePosition);
+ var debouncedUpdatePosition = this._$$rAF.throttle(updatePosition);
+ var self = this;
- /**
- * Controller for md-datepicker.
- *
- * @ngInject @constructor
- */
- function DatePickerCtrl($scope, $element, $attrs, $compile, $timeout, $window,
- $mdConstant, $mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF) {
- /** @final */
- this.$compile = $compile;
+ var onScroll = function() {
+ debouncedUpdatePosition();
+ };
- /** @final */
- this.$timeout = $timeout;
+ // Add listeners.
+ this._$window.addEventListener('scroll', onScroll, true);
- /** @final */
- this.$window = $window;
+ // Queue remove listeners function.
+ this._removeListeners.push(function() {
+ self._$window.removeEventListener('scroll', onScroll, true);
+ });
+ }
+};
- /** @final */
- this.dateLocale = $mdDateLocale;
- /** @final */
- this.dateUtil = $$mdDateUtil;
+/**
+ * Setup the focus traps. These traps will wrap focus when tabbing past the
+ * panel. When shift-tabbing, the focus will stick in place.
+ * @private
+ */
+MdPanelRef.prototype._configureTrapFocus = function() {
+ // Focus doesn't remain inside of the panel without this.
+ this.panelEl.attr('tabIndex', '-1');
+ if (this.config['trapFocus']) {
+ var element = this.panelEl;
+ // Set up elements before and after the panel to capture focus and
+ // redirect back into the panel.
+ this._topFocusTrap = FOCUS_TRAP_TEMPLATE.clone()[0];
+ this._bottomFocusTrap = FOCUS_TRAP_TEMPLATE.clone()[0];
+
+ // When focus is about to move out of the panel, we want to intercept it
+ // and redirect it back to the panel element.
+ var focusHandler = function() {
+ element.focus();
+ };
+ this._topFocusTrap.addEventListener('focus', focusHandler);
+ this._bottomFocusTrap.addEventListener('focus', focusHandler);
- /** @final */
- this.$mdConstant = $mdConstant;
+ // Queue remove listeners function
+ this._removeListeners.push(this._simpleBind(function() {
+ this._topFocusTrap.removeEventListener('focus', focusHandler);
+ this._bottomFocusTrap.removeEventListener('focus', focusHandler);
+ }, this));
- /* @final */
- this.$mdUtil = $mdUtil;
+ // The top focus trap inserted immediately before the md-panel element (as
+ // a sibling). The bottom focus trap inserted immediately after the
+ // md-panel element (as a sibling).
+ element[0].parentNode.insertBefore(this._topFocusTrap, element[0]);
+ element.after(this._bottomFocusTrap);
+ }
+};
- /** @final */
- this.$$rAF = $$rAF;
- /**
- * The root document element. This is used for attaching a top-level click handler to
- * close the calendar panel when a click outside said panel occurs. We use `documentElement`
- * instead of body because, when scrolling is disabled, some browsers consider the body element
- * to be completely off the screen and propagate events directly to the html element.
- * @type {!angular.JQLite}
- */
- this.documentElement = angular.element(document.documentElement);
+/**
+ * Updates the animation of a panel.
+ * @param {!MdPanelAnimation} animation
+ */
+MdPanelRef.prototype.updateAnimation = function(animation) {
+ this.config['animation'] = animation;
- /** @type {!angular.NgModelController} */
- this.ngModelCtrl = null;
+ if (this._backdropRef) {
+ this._backdropRef.config.animation.duration(animation._rawDuration);
+ }
+};
- /** @type {HTMLInputElement} */
- this.inputElement = $element[0].querySelector('input');
- /** @final {!angular.JQLite} */
- this.ngInputElement = angular.element(this.inputElement);
+/**
+ * Animate the panel opening.
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel has
+ * animated open.
+ * @private
+ */
+MdPanelRef.prototype._animateOpen = function() {
+ this.panelContainer.addClass('md-panel-is-showing');
+ var animationConfig = this.config['animation'];
+ if (!animationConfig) {
+ // Promise is in progress, return it.
+ this.panelContainer.addClass('_md-panel-shown');
+ return this._$q.when(this);
+ }
- /** @type {HTMLElement} */
- this.inputContainer = $element[0].querySelector('.md-datepicker-input-container');
+ var self = this;
+ return this._$q(function(resolve) {
+ var done = self._done(resolve, self);
+ var warnAndOpen = function() {
+ self._$log.warn(
+ 'mdPanel: MdPanel Animations failed. ' +
+ 'Showing panel without animating.');
+ done();
+ };
- /** @type {HTMLElement} Floating calendar pane. */
- this.calendarPane = $element[0].querySelector('.md-datepicker-calendar-pane');
+ animationConfig.animateOpen(self.panelEl)
+ .then(done, warnAndOpen);
+ });
+};
- /** @type {HTMLElement} Calendar icon button. */
- this.calendarButton = $element[0].querySelector('.md-datepicker-button');
- /**
- * Element covering everything but the input in the top of the floating calendar pane.
- * @type {HTMLElement}
- */
- this.inputMask = $element[0].querySelector('.md-datepicker-input-mask-opaque');
+/**
+ * Animate the panel closing.
+ * @returns {!angular.$q.Promise} A promise that is resolved when the panel has
+ * animated closed.
+ * @private
+ */
+MdPanelRef.prototype._animateClose = function() {
+ var animationConfig = this.config['animation'];
+ if (!animationConfig) {
+ this.panelContainer.removeClass('md-panel-is-showing');
+ this.panelContainer.removeClass('_md-panel-shown');
+ return this._$q.when(this);
+ }
- /** @final {!angular.JQLite} */
- this.$element = $element;
+ var self = this;
+ return this._$q(function(resolve) {
+ var done = function() {
+ self.panelContainer.removeClass('md-panel-is-showing');
+ resolve(self);
+ };
+ var warnAndClose = function() {
+ self._$log.warn(
+ 'mdPanel: MdPanel Animations failed. ' +
+ 'Hiding panel without animating.');
+ done();
+ };
- /** @final {!angular.Attributes} */
- this.$attrs = $attrs;
+ animationConfig.animateClose(self.panelEl)
+ .then(done, warnAndClose);
+ });
+};
- /** @final {!angular.Scope} */
- this.$scope = $scope;
- /** @type {Date} */
- this.date = null;
+/**
+ * Registers a interceptor with the panel. The callback should return a promise,
+ * which will allow the action to continue when it gets resolved, or will
+ * prevent an action if it is rejected.
+ * @param {string} type Type of interceptor.
+ * @param {!angular.$q.Promise} callback Callback to be registered.
+ * @returns {!MdPanelRef}
+ */
+MdPanelRef.prototype.registerInterceptor = function(type, callback) {
+ var error = null;
- /** @type {boolean} */
- this.isFocused = false;
+ if (!angular.isString(type)) {
+ error = 'Interceptor type must be a string, instead got ' + typeof type;
+ } else if (!angular.isFunction(callback)) {
+ error = 'Interceptor callback must be a function, instead got ' + typeof callback;
+ }
- /** @type {boolean} */
- this.isDisabled;
- this.setDisabled($element[0].disabled || angular.isString($attrs['disabled']));
+ if (error) {
+ throw new Error('MdPanel: ' + error);
+ }
- /** @type {boolean} Whether the date-picker's calendar pane is open. */
- this.isCalendarOpen = false;
+ var interceptors = this._interceptors[type] = this._interceptors[type] || [];
- /**
- * Element from which the calendar pane was opened. Keep track of this so that we can return
- * focus to it when the pane is closed.
- * @type {HTMLElement}
- */
- this.calendarPaneOpenedFrom = null;
+ if (interceptors.indexOf(callback) === -1) {
+ interceptors.push(callback);
+ }
- this.calendarPane.id = 'md-date-pane' + $mdUtil.nextUid();
+ return this;
+};
- $mdTheming($element);
- /** Pre-bound click handler is saved so that the event listener can be removed. */
- this.bodyClickHandler = angular.bind(this, this.handleBodyClick);
+/**
+ * Removes a registered interceptor.
+ * @param {string} type Type of interceptor to be removed.
+ * @param {Function} callback Interceptor to be removed.
+ * @returns {!MdPanelRef}
+ */
+MdPanelRef.prototype.removeInterceptor = function(type, callback) {
+ var index = this._interceptors[type] ?
+ this._interceptors[type].indexOf(callback) : -1;
- /** Pre-bound resize handler so that the event listener can be removed. */
- this.windowResizeHandler = $mdUtil.debounce(angular.bind(this, this.closeCalendarPane), 100);
+ if (index > -1) {
+ this._interceptors[type].splice(index, 1);
+ }
- // Unless the user specifies so, the datepicker should not be a tab stop.
- // This is necessary because ngAria might add a tabindex to anything with an ng-model
- // (based on whether or not the user has turned that particular feature on/off).
- if (!$attrs['tabindex']) {
- $element.attr('tabindex', '-1');
- }
+ return this;
+};
- this.installPropertyInterceptors();
- this.attachChangeListeners();
- this.attachInteractionListeners();
- var self = this;
- $scope.$on('$destroy', function() {
- self.detachCalendarPane();
- });
+/**
+ * Removes all interceptors.
+ * @param {string=} type Type of interceptors to be removed.
+ * If ommited, all interceptors types will be removed.
+ * @returns {!MdPanelRef}
+ */
+MdPanelRef.prototype.removeAllInterceptors = function(type) {
+ if (type) {
+ this._interceptors[type] = [];
+ } else {
+ this._interceptors = Object.create(null);
}
- DatePickerCtrl.$inject = ["$scope", "$element", "$attrs", "$compile", "$timeout", "$window", "$mdConstant", "$mdTheming", "$mdUtil", "$mdDateLocale", "$$mdDateUtil", "$$rAF"];
- /**
- * Sets up the controller's reference to ngModelController.
- * @param {!angular.NgModelController} ngModelCtrl
- */
- DatePickerCtrl.prototype.configureNgModel = function(ngModelCtrl) {
- this.ngModelCtrl = ngModelCtrl;
+ return this;
+};
- var self = this;
- ngModelCtrl.$render = function() {
- var value = self.ngModelCtrl.$viewValue;
- if (value && !(value instanceof Date)) {
- throw Error('The ng-model for md-datepicker must be a Date instance. ' +
- 'Currently the model is a: ' + (typeof value));
- }
+/**
+ * Invokes all the interceptors of a certain type sequantially in
+ * reverse order. Works in a similar way to `$q.all`, except it
+ * respects the order of the functions.
+ * @param {string} type Type of interceptors to be invoked.
+ * @returns {!angular.$q.Promise}
+ * @private
+ */
+MdPanelRef.prototype._callInterceptors = function(type) {
+ var self = this;
+ var $q = self._$q;
+ var interceptors = self._interceptors && self._interceptors[type] || [];
- self.date = value;
- self.inputElement.value = self.dateLocale.formatDate(value);
- self.resizeInputElement();
- self.updateErrorState();
- };
- };
+ return interceptors.reduceRight(function(promise, interceptor) {
+ var isPromiseLike = interceptor && angular.isFunction(interceptor.then);
+ var response = isPromiseLike ? interceptor : null;
- /**
- * Attach event listeners for both the text input and the md-calendar.
- * Events are used instead of ng-model so that updates don't infinitely update the other
- * on a change. This should also be more performant than using a $watch.
- */
- DatePickerCtrl.prototype.attachChangeListeners = function() {
- var self = this;
+ /**
+ * For interceptors to reject/cancel subsequent portions of the chain, simply
+ * return a `$q.reject()`
+ */
+ return promise.then(function() {
+ if (!response) {
+ try {
+ response = interceptor(self);
+ } catch(e) {
+ response = $q.reject(e);
+ }
+ }
- self.$scope.$on('md-calendar-change', function(event, date) {
- self.ngModelCtrl.$setViewValue(date);
- self.date = date;
- self.inputElement.value = self.dateLocale.formatDate(date);
- self.closeCalendarPane();
- self.resizeInputElement();
- self.updateErrorState();
+ return response;
});
+ }, $q.resolve(self));
+};
- self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement));
- // TODO(chenmike): Add ability for users to specify this interval.
- self.ngInputElement.on('input', self.$mdUtil.debounce(self.handleInputEvent,
- DEFAULT_DEBOUNCE_INTERVAL, self));
- };
- /** Attach event listeners for user interaction. */
- DatePickerCtrl.prototype.attachInteractionListeners = function() {
- var self = this;
- var $scope = this.$scope;
- var keyCodes = this.$mdConstant.KEY_CODE;
+/**
+ * Faster, more basic than angular.bind
+ * http://jsperf.com/angular-bind-vs-custom-vs-native
+ * @param {function} callback
+ * @param {!Object} self
+ * @return {function} Callback function with a bound self.
+ */
+MdPanelRef.prototype._simpleBind = function(callback, self) {
+ return function(value) {
+ return callback.apply(self, value);
+ };
+};
- // Add event listener through angular so that we can triggerHandler in unit tests.
- self.ngInputElement.on('keydown', function(event) {
- if (event.altKey && event.keyCode == keyCodes.DOWN_ARROW) {
- self.openCalendarPane(event);
- $scope.$digest();
- }
- });
- $scope.$on('md-calendar-close', function() {
- self.closeCalendarPane();
- });
+/**
+ * @param {function} callback
+ * @param {!Object} self
+ * @return {function} Callback function with a self param.
+ */
+MdPanelRef.prototype._done = function(callback, self) {
+ return function() {
+ callback(self);
};
+};
- /**
- * Capture properties set to the date-picker and imperitively handle internal changes.
- * This is done to avoid setting up additional $watches.
- */
- DatePickerCtrl.prototype.installPropertyInterceptors = function() {
- var self = this;
- if (this.$attrs['ngDisabled']) {
- // The expression is to be evaluated against the directive element's scope and not
- // the directive's isolate scope.
- var scope = this.$scope.$parent;
+/**
+ * Adds a panel to a group if the panel does not exist within the group already.
+ * A panel can only exist within a single group.
+ * @param {string} groupName The name of the group.
+ */
+MdPanelRef.prototype.addToGroup = function(groupName) {
+ if (!this._$mdPanel._groups[groupName]) {
+ this._$mdPanel.newPanelGroup(groupName);
+ }
- if (scope) {
- scope.$watch(this.$attrs['ngDisabled'], function(isDisabled) {
- self.setDisabled(isDisabled);
- });
- }
- }
+ var group = this._$mdPanel._groups[groupName];
+ var index = group.panels.indexOf(this);
- Object.defineProperty(this, 'placeholder', {
- get: function() { return self.inputElement.placeholder; },
- set: function(value) { self.inputElement.placeholder = value || ''; }
- });
- };
+ if (index < 0) {
+ group.panels.push(this);
+ }
+};
- /**
- * Sets whether the date-picker is disabled.
- * @param {boolean} isDisabled
- */
- DatePickerCtrl.prototype.setDisabled = function(isDisabled) {
- this.isDisabled = isDisabled;
- this.inputElement.disabled = isDisabled;
- this.calendarButton.disabled = isDisabled;
- };
- /**
- * Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are:
- * - mindate: whether the selected date is before the minimum date.
- * - maxdate: whether the selected flag is after the maximum date.
- * - filtered: whether the selected date is allowed by the custom filtering function.
- * - valid: whether the entered text input is a valid date
- *
- * The 'required' flag is handled automatically by ngModel.
- *
- * @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value.
- */
- DatePickerCtrl.prototype.updateErrorState = function(opt_date) {
- var date = opt_date || this.date;
+/**
+ * Removes a panel from a group if the panel exists within that group. The group
+ * must be created ahead of time.
+ * @param {string} groupName The name of the group.
+ */
+MdPanelRef.prototype.removeFromGroup = function(groupName) {
+ if (!this._$mdPanel._groups[groupName]) {
+ throw new Error('mdPanel: The group ' + groupName + ' does not exist.');
+ }
- // Clear any existing errors to get rid of anything that's no longer relevant.
- this.clearErrorState();
+ var group = this._$mdPanel._groups[groupName];
+ var index = group.panels.indexOf(this);
- if (this.dateUtil.isValidDate(date)) {
- // Force all dates to midnight in order to ignore the time portion.
- date = this.dateUtil.createDateAtMidnight(date);
+ if (index > -1) {
+ group.panels.splice(index, 1);
+ }
+};
- if (this.dateUtil.isValidDate(this.minDate)) {
- var minDate = this.dateUtil.createDateAtMidnight(this.minDate);
- this.ngModelCtrl.$setValidity('mindate', date >= minDate);
- }
- if (this.dateUtil.isValidDate(this.maxDate)) {
- var maxDate = this.dateUtil.createDateAtMidnight(this.maxDate);
- this.ngModelCtrl.$setValidity('maxdate', date <= maxDate);
- }
-
- if (angular.isFunction(this.dateFilter)) {
- this.ngModelCtrl.$setValidity('filtered', this.dateFilter(date));
- }
- } else {
- // The date is seen as "not a valid date" if there is *something* set
- // (i.e.., not null or undefined), but that something isn't a valid date.
- this.ngModelCtrl.$setValidity('valid', date == null);
- }
+/**
+ * Possible default closeReasons for the close function.
+ * @enum {string}
+ */
+MdPanelRef.closeReasons = {
+ CLICK_OUTSIDE: 'clickOutsideToClose',
+ ESCAPE: 'escapeToClose',
+};
+
+
+/*****************************************************************************
+ * MdPanelPosition *
+ *****************************************************************************/
+
+
+/**
+ * Position configuration object. To use, create an MdPanelPosition with the
+ * desired properties, then pass the object as part of $mdPanel creation.
+ *
+ * Example:
+ *
+ * var panelPosition = new MdPanelPosition()
+ * .relativeTo(myButtonEl)
+ * .addPanelPosition(
+ * $mdPanel.xPosition.CENTER,
+ * $mdPanel.yPosition.ALIGN_TOPS
+ * );
+ *
+ * $mdPanel.create({
+ * position: panelPosition
+ * });
+ *
+ * @param {!angular.$injector} $injector
+ * @final @constructor
+ */
+function MdPanelPosition($injector) {
+ /** @private @const {!angular.$window} */
+ this._$window = $injector.get('$window');
- // TODO(jelbourn): Change this to classList.toggle when we stop using PhantomJS in unit tests
- // because it doesn't conform to the DOMTokenList spec.
- // See https://github.com/ariya/phantomjs/issues/12782.
- if (!this.ngModelCtrl.$valid) {
- this.inputContainer.classList.add(INVALID_CLASS);
- }
- };
+ /** @private {boolean} */
+ this._isRTL = $injector.get('$mdUtil').bidi() === 'rtl';
- /** Clears any error flags set by `updateErrorState`. */
- DatePickerCtrl.prototype.clearErrorState = function() {
- this.inputContainer.classList.remove(INVALID_CLASS);
- ['mindate', 'maxdate', 'filtered', 'valid'].forEach(function(field) {
- this.ngModelCtrl.$setValidity(field, true);
- }, this);
- };
+ /** @private @const {!angular.$mdConstant} */
+ this._$mdConstant = $injector.get('$mdConstant');
- /** Resizes the input element based on the size of its content. */
- DatePickerCtrl.prototype.resizeInputElement = function() {
- this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE;
- };
+ /** @private {boolean} */
+ this._absolute = false;
- /**
- * Sets the model value if the user input is a valid date.
- * Adds an invalid class to the input element if not.
- */
- DatePickerCtrl.prototype.handleInputEvent = function() {
- var inputString = this.inputElement.value;
- var parsedDate = inputString ? this.dateLocale.parseDate(inputString) : null;
- this.dateUtil.setDateTimeToMidnight(parsedDate);
+ /** @private {!angular.JQLite} */
+ this._relativeToEl;
- // An input string is valid if it is either empty (representing no date)
- // or if it parses to a valid date that the user is allowed to select.
- var isValidInput = inputString == '' || (
- this.dateUtil.isValidDate(parsedDate) &&
- this.dateLocale.isDateComplete(inputString) &&
- this.isDateEnabled(parsedDate)
- );
+ /** @private {string} */
+ this._top = '';
- // The datepicker's model is only updated when there is a valid input.
- if (isValidInput) {
- this.ngModelCtrl.$setViewValue(parsedDate);
- this.date = parsedDate;
- }
+ /** @private {string} */
+ this._bottom = '';
- this.updateErrorState(parsedDate);
- };
-
- /**
- * Check whether date is in range and enabled
- * @param {Date=} opt_date
- * @return {boolean} Whether the date is enabled.
- */
- DatePickerCtrl.prototype.isDateEnabled = function(opt_date) {
- return this.dateUtil.isDateWithinRange(opt_date, this.minDate, this.maxDate) &&
- (!angular.isFunction(this.dateFilter) || this.dateFilter(opt_date));
- };
-
- /** Position and attach the floating calendar to the document. */
- DatePickerCtrl.prototype.attachCalendarPane = function() {
- var calendarPane = this.calendarPane;
- calendarPane.style.transform = '';
- this.$element.addClass('md-datepicker-open');
+ /** @private {string} */
+ this._left = '';
- var elementRect = this.inputContainer.getBoundingClientRect();
- var bodyRect = document.body.getBoundingClientRect();
+ /** @private {string} */
+ this._right = '';
- // Check to see if the calendar pane would go off the screen. If so, adjust position
- // accordingly to keep it within the viewport.
- var paneTop = elementRect.top - bodyRect.top;
- var paneLeft = elementRect.left - bodyRect.left;
+ /** @private {!Array} */
+ this._translateX = [];
- // If ng-material has disabled body scrolling (for example, if a dialog is open),
- // then it's possible that the already-scrolled body has a negative top/left. In this case,
- // we want to treat the "real" top as (0 - bodyRect.top). In a normal scrolling situation,
- // though, the top of the viewport should just be the body's scroll position.
- var viewportTop = (bodyRect.top < 0 && document.body.scrollTop == 0) ?
- -bodyRect.top :
- document.body.scrollTop;
+ /** @private {!Array} */
+ this._translateY = [];
- var viewportLeft = (bodyRect.left < 0 && document.body.scrollLeft == 0) ?
- -bodyRect.left :
- document.body.scrollLeft;
+ /** @private {!Array<{x:string, y:string}>} */
+ this._positions = [];
- var viewportBottom = viewportTop + this.$window.innerHeight;
- var viewportRight = viewportLeft + this.$window.innerWidth;
+ /** @private {?{x:string, y:string}} */
+ this._actualPosition;
+}
- // If the right edge of the pane would be off the screen and shifting it left by the
- // difference would not go past the left edge of the screen. If the calendar pane is too
- // big to fit on the screen at all, move it to the left of the screen and scale the entire
- // element down to fit.
- if (paneLeft + CALENDAR_PANE_WIDTH > viewportRight) {
- if (viewportRight - CALENDAR_PANE_WIDTH > 0) {
- paneLeft = viewportRight - CALENDAR_PANE_WIDTH;
- } else {
- paneLeft = viewportLeft;
- var scale = this.$window.innerWidth / CALENDAR_PANE_WIDTH;
- calendarPane.style.transform = 'scale(' + scale + ')';
- }
- calendarPane.classList.add('md-datepicker-pos-adjusted');
- }
+/**
+ * Possible values of xPosition.
+ * @enum {string}
+ */
+MdPanelPosition.xPosition = {
+ CENTER: 'center',
+ ALIGN_START: 'align-start',
+ ALIGN_END: 'align-end',
+ OFFSET_START: 'offset-start',
+ OFFSET_END: 'offset-end'
+};
- // If the bottom edge of the pane would be off the screen and shifting it up by the
- // difference would not go past the top edge of the screen.
- if (paneTop + CALENDAR_PANE_HEIGHT > viewportBottom &&
- viewportBottom - CALENDAR_PANE_HEIGHT > viewportTop) {
- paneTop = viewportBottom - CALENDAR_PANE_HEIGHT;
- calendarPane.classList.add('md-datepicker-pos-adjusted');
- }
- calendarPane.style.left = paneLeft + 'px';
- calendarPane.style.top = paneTop + 'px';
- document.body.appendChild(calendarPane);
+/**
+ * Possible values of yPosition.
+ * @enum {string}
+ */
+MdPanelPosition.yPosition = {
+ CENTER: 'center',
+ ALIGN_TOPS: 'align-tops',
+ ALIGN_BOTTOMS: 'align-bottoms',
+ ABOVE: 'above',
+ BELOW: 'below'
+};
- // The top of the calendar pane is a transparent box that shows the text input underneath.
- // Since the pane is floating, though, the page underneath the pane *adjacent* to the input is
- // also shown unless we cover it up. The inputMask does this by filling up the remaining space
- // based on the width of the input.
- this.inputMask.style.left = elementRect.width + 'px';
- // Add CSS class after one frame to trigger open animation.
- this.$$rAF(function() {
- calendarPane.classList.add('md-pane-open');
- });
- };
+/**
+ * Possible values of absolute position.
+ * @enum {string}
+ */
+MdPanelPosition.absPosition = {
+ TOP: 'top',
+ RIGHT: 'right',
+ BOTTOM: 'bottom',
+ LEFT: 'left'
+};
- /** Detach the floating calendar pane from the document. */
- DatePickerCtrl.prototype.detachCalendarPane = function() {
- this.$element.removeClass('md-datepicker-open');
- this.calendarPane.classList.remove('md-pane-open');
- this.calendarPane.classList.remove('md-datepicker-pos-adjusted');
+/**
+ * Margin between the edges of a panel and the viewport.
+ * @const {number}
+ */
+MdPanelPosition.viewportMargin = 8;
- if (this.calendarPane.parentNode) {
- // Use native DOM removal because we do not want any of the angular state of this element
- // to be disposed.
- this.calendarPane.parentNode.removeChild(this.calendarPane);
- }
- };
- /**
- * Open the floating calendar pane.
- * @param {Event} event
- */
- DatePickerCtrl.prototype.openCalendarPane = function(event) {
- if (!this.isCalendarOpen && !this.isDisabled) {
- this.isCalendarOpen = true;
- this.calendarPaneOpenedFrom = event.target;
+/**
+ * Sets absolute positioning for the panel.
+ * @return {!MdPanelPosition}
+ */
+MdPanelPosition.prototype.absolute = function() {
+ this._absolute = true;
+ return this;
+};
- // Because the calendar pane is attached directly to the body, it is possible that the
- // rest of the component (input, etc) is in a different scrolling container, such as
- // an md-content. This means that, if the container is scrolled, the pane would remain
- // stationary. To remedy this, we disable scrolling while the calendar pane is open, which
- // also matches the native behavior for things like `
@@ -616,6 +820,7 @@ angular.module('material.core')
*
*/
+/* @ngInject */
function mdMediaFactory($mdConstant, $rootScope, $window) {
var queries = {};
var mqls = {};
@@ -703,7 +908,7 @@ function mdMediaFactory($mdConstant, $rootScope, $window) {
});
return function unwatch() {
- unwatchFns.forEach(function(fn) { fn(); })
+ unwatchFns.forEach(function(fn) { fn(); });
};
}
@@ -713,7 +918,107 @@ function mdMediaFactory($mdConstant, $rootScope, $window) {
(normalizeCache[attrName] = attrs.$normalize(attrName));
}
}
-mdMediaFactory.$inject = ["$mdConstant", "$rootScope", "$window"];
+
+})();
+(function(){
+"use strict";
+
+angular
+ .module('material.core')
+ .config( ["$provide", function($provide) {
+ $provide.decorator('$mdUtil', ['$delegate', function ($delegate) {
+
+ // Inject the prefixer into our original $mdUtil service.
+ $delegate.prefixer = MdPrefixer;
+
+ return $delegate;
+ }]);
+ }]);
+
+function MdPrefixer(initialAttributes, buildSelector) {
+ var PREFIXES = ['data', 'x'];
+
+ if (initialAttributes) {
+ // The prefixer also accepts attributes as a parameter, and immediately builds a list or selector for
+ // the specified attributes.
+ return buildSelector ? _buildSelector(initialAttributes) : _buildList(initialAttributes);
+ }
+
+ return {
+ buildList: _buildList,
+ buildSelector: _buildSelector,
+ hasAttribute: _hasAttribute,
+ removeAttribute: _removeAttribute
+ };
+
+ function _buildList(attributes) {
+ attributes = angular.isArray(attributes) ? attributes : [attributes];
+
+ attributes.forEach(function(item) {
+ PREFIXES.forEach(function(prefix) {
+ attributes.push(prefix + '-' + item);
+ });
+ });
+
+ return attributes;
+ }
+
+ function _buildSelector(attributes) {
+ attributes = angular.isArray(attributes) ? attributes : [attributes];
+
+ return _buildList(attributes)
+ .map(function(item) {
+ return '[' + item + ']';
+ })
+ .join(',');
+ }
+
+ function _hasAttribute(element, attribute) {
+ element = _getNativeElement(element);
+
+ if (!element) {
+ return false;
+ }
+
+ var prefixedAttrs = _buildList(attribute);
+
+ for (var i = 0; i < prefixedAttrs.length; i++) {
+ if (element.hasAttribute(prefixedAttrs[i])) {
+ return true;
+ }
+ }
+
+ return false;
+ }
+
+ function _removeAttribute(element, attribute) {
+ element = _getNativeElement(element);
+
+ if (!element) {
+ return;
+ }
+
+ _buildList(attribute).forEach(function(prefixedAttribute) {
+ element.removeAttribute(prefixedAttribute);
+ });
+ }
+
+ /**
+ * Transforms a jqLite or DOM element into a HTML element.
+ * This is useful when supporting jqLite elements and DOM elements at
+ * same time.
+ * @param element {JQLite|Element} Element to be parsed
+ * @returns {HTMLElement} Parsed HTMLElement
+ */
+ function _getNativeElement(element) {
+ element = element[0] || element;
+
+ if (element.nodeType) {
+ return element;
+ }
+ }
+
+}
})();
(function(){
@@ -725,6 +1030,7 @@ mdMediaFactory.$inject = ["$mdConstant", "$rootScope", "$window"];
* will create its own instance of this array and the app's IDs
* will not be unique.
*/
+UtilFactory.$inject = ["$document", "$timeout", "$compile", "$rootScope", "$$mdAnimate", "$interpolate", "$log", "$rootElement", "$window", "$$rAF"];
var nextUniqueId = 0;
/**
@@ -737,7 +1043,10 @@ angular
.module('material.core')
.factory('$mdUtil', UtilFactory);
-function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $interpolate, $log, $rootElement, $window) {
+/**
+ * @ngInject
+ */
+function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $interpolate, $log, $rootElement, $window, $$rAF) {
// Setup some core variables for the processTemplate method
var startSymbol = $interpolate.startSymbol(),
endSymbol = $interpolate.endSymbol(),
@@ -761,13 +1070,46 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
return hasValue;
};
+ function validateCssValue(value) {
+ return !value ? '0' :
+ hasPx(value) || hasPercent(value) ? value : value + 'px';
+ }
+
+ function hasPx(value) {
+ return String(value).indexOf('px') > -1;
+ }
+
+ function hasPercent(value) {
+ return String(value).indexOf('%') > -1;
+
+ }
+
var $mdUtil = {
dom: {},
- now: window.performance ?
+ now: window.performance && window.performance.now ?
angular.bind(window.performance, window.performance.now) : Date.now || function() {
return new Date().getTime();
},
+ /**
+ * Cross-version compatibility method to retrieve an option of a ngModel controller,
+ * which supports the breaking changes in the AngularJS snapshot (SHA 87a2ff76af5d0a9268d8eb84db5755077d27c84c).
+ * @param {!angular.ngModelCtrl} ngModelCtrl
+ * @param {!string} optionName
+ * @returns {Object|undefined}
+ */
+ getModelOption: function (ngModelCtrl, optionName) {
+ if (!ngModelCtrl.$options) {
+ return;
+ }
+
+ var $options = ngModelCtrl.$options;
+
+ // The newer versions of Angular introduced a `getOption function and made the option values no longer
+ // visible on the $options object.
+ return $options.getOption ? $options.getOption(optionName) : $options[optionName]
+ },
+
/**
* Bi-directional accessor/mutator used to easily update an element's
* property based on the current 'dir'ectional value.
@@ -779,22 +1121,29 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
if ( arguments.length == 0 ) return ltr ? 'ltr' : 'rtl';
// If mutator
+ var elem = angular.element(element);
+
if ( ltr && angular.isDefined(lValue)) {
- angular.element(element).css(property, validate(lValue));
+ elem.css(property, validateCssValue(lValue));
}
else if ( !ltr && angular.isDefined(rValue)) {
- angular.element(element).css(property, validate(rValue) );
+ elem.css(property, validateCssValue(rValue) );
}
+ },
- // Internal utils
+ bidiProperty: function (element, lProperty, rProperty, value) {
+ var ltr = !($document[0].dir == 'rtl' || $document[0].body.dir == 'rtl');
- function validate(value) {
- return !value ? '0' :
- hasPx(value) ? value : value + 'px';
- }
- function hasPx(value) {
- return String(value).indexOf('px') > -1;
- }
+ var elem = angular.element(element);
+
+ if ( ltr && angular.isDefined(lProperty)) {
+ elem.css(lProperty, validateCssValue(value));
+ elem.css(rProperty, '');
+ }
+ else if ( !ltr && angular.isDefined(rProperty)) {
+ elem.css(rProperty, validateCssValue(value) );
+ elem.css(lProperty, '');
+ }
},
clientRect: function(element, offsetParent, isOffsetRect) {
@@ -830,18 +1179,12 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
},
/**
- * Calculate the positive scroll offset
- * TODO: Check with pinch-zoom in IE/Chrome;
- * https://code.google.com/p/chromium/issues/detail?id=496285
+ * Determines the absolute position of the viewport.
+ * Useful when making client rectangles absolute.
+ * @returns {number}
*/
- scrollTop: function(element) {
- element = angular.element(element || $document[0].body);
-
- var body = (element[0] == $document[0].body) ? $document[0].body : undefined;
- var scrollTop = body ? body.scrollTop + body.parentElement.scrollTop : 0;
-
- // Calculate the positive scroll offset
- return scrollTop || Math.abs(element[0].getBoundingClientRect().top);
+ getViewportTop: function() {
+ return window.scrollY || window.pageYOffset || 0;
},
/**
@@ -852,14 +1195,14 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
* @returns {*}
*/
findFocusTarget: function(containerEl, attributeVal) {
- var AUTO_FOCUS = '[md-autofocus]';
+ var AUTO_FOCUS = this.prefixer('md-autofocus', true);
var elToFocus;
elToFocus = scanForFocusable(containerEl, attributeVal || AUTO_FOCUS);
if ( !elToFocus && attributeVal != AUTO_FOCUS) {
// Scan for deprecated attribute
- elToFocus = scanForFocusable(containerEl, '[md-auto-focus]');
+ elToFocus = scanForFocusable(containerEl, this.prefixer('md-auto-focus', true));
if ( !elToFocus ) {
// Scan for fallback to 'universal' API
@@ -881,9 +1224,9 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
items.length && angular.forEach(items, function(it) {
it = angular.element(it);
- // Check the element for the _md-autofocus class to ensure any associated expression
+ // Check the element for the md-autofocus class to ensure any associated expression
// evaluated to true.
- var isFocusable = it.hasClass('_md-autofocus');
+ var isFocusable = it.hasClass('md-autofocus');
if (isFocusable) elFound = it;
});
}
@@ -891,103 +1234,120 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
}
},
- // Disables scroll around the passed element.
- disableScrollAround: function(element, parent) {
- $mdUtil.disableScrollAround._count = $mdUtil.disableScrollAround._count || 0;
- ++$mdUtil.disableScrollAround._count;
- if ($mdUtil.disableScrollAround._enableScrolling) return $mdUtil.disableScrollAround._enableScrolling;
- element = angular.element(element);
- var body = $document[0].body,
- restoreBody = disableBodyScroll(),
- restoreElement = disableElementScroll(parent);
-
- return $mdUtil.disableScrollAround._enableScrolling = function() {
- if (!--$mdUtil.disableScrollAround._count) {
+ /**
+ * Disables scroll around the passed parent element.
+ * @param element Unused
+ * @param {!Element|!angular.JQLite} parent Element to disable scrolling within.
+ * Defaults to body if none supplied.
+ * @param options Object of options to modify functionality
+ * - disableScrollMask Boolean of whether or not to create a scroll mask element or
+ * use the passed parent element.
+ */
+ disableScrollAround: function(element, parent, options) {
+ options = options || {};
+
+ $mdUtil.disableScrollAround._count = Math.max(0, $mdUtil.disableScrollAround._count || 0);
+ $mdUtil.disableScrollAround._count++;
+
+ if ($mdUtil.disableScrollAround._restoreScroll) {
+ return $mdUtil.disableScrollAround._restoreScroll;
+ }
+
+ var body = $document[0].body;
+ var restoreBody = disableBodyScroll();
+ var restoreElement = disableElementScroll(parent);
+
+ return $mdUtil.disableScrollAround._restoreScroll = function() {
+ if (--$mdUtil.disableScrollAround._count <= 0) {
restoreBody();
restoreElement();
- delete $mdUtil.disableScrollAround._enableScrolling;
+ delete $mdUtil.disableScrollAround._restoreScroll;
}
};
- // Creates a virtual scrolling mask to absorb touchmove, keyboard, scrollbar clicking, and wheel events
+ /**
+ * Creates a virtual scrolling mask to prevent touchmove, keyboard, scrollbar clicking,
+ * and wheel events
+ */
function disableElementScroll(element) {
- element = angular.element(element || body)[0];
- var zIndex = 50;
- var scrollMask = angular.element(
- '
+ * 
+ *
+ * Cells are arrayed vertically and horizontally within the grid.
+ *
+ * Tiles hold content and can span one or more cells vertically or horizontally.
+ *
+ * ### Responsive Attributes
+ *
+ * The `md-grid-list` directive supports "responsive" attributes, which allow
+ * different `md-cols`, `md-gutter` and `md-row-height` values depending on the
+ * currently matching media query.
+ *
+ * In order to set a responsive attribute, first define the fallback value with
+ * the standard attribute name, then add additional attributes with the
+ * following convention: `{base-attribute-name}-{media-query-name}="{value}"`
+ * (ie. `md-cols-lg="8"`)
+ *
+ * @param {number} md-cols Number of columns in the grid.
+ * @param {string} md-row-height One of
+ * 
+ * Alan Turing
+ * 
+ * 
+ *
+ * Cells are arrayed vertically and horizontally within the grid.
+ *
+ * Tiles hold content and can span one or more cells vertically or horizontally.
+ *
+ * ### Responsive Attributes
+ *
+ * The `md-grid-list` directive supports "responsive" attributes, which allow
+ * different `md-cols`, `md-gutter` and `md-row-height` values depending on the
+ * currently matching media query.
+ *
+ * In order to set a responsive attribute, first define the fallback value with
+ * the standard attribute name, then add additional attributes with the
+ * following convention: `{base-attribute-name}-{media-query-name}="{value}"`
+ * (ie. `md-cols-lg="8"`)
+ *
+ * @param {number} md-cols Number of columns in the grid.
+ * @param {string} md-row-height One of
+ *