How to use md method in Playwright Internal

Best JavaScript code snippet using playwright-internal

core.js

Source:core.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7goog.provide('ngmaterial.core');8/**9 * Initialization function that validates environment10 * requirements.11 */12DetectNgTouch.$inject = ["$log", "$injector"];13MdCoreConfigure.$inject = ["$provide", "$mdThemingProvider"];14rAFDecorator.$inject = ["$delegate"];15angular16  .module('material.core', [17    'ngAnimate',18    'material.core.animate',19    'material.core.layout',20    'material.core.gestures',21    'material.core.theming'22  ])23  .config(MdCoreConfigure)24  .run(DetectNgTouch);25/**26 * Detect if the ng-Touch module is also being used.27 * Warn if detected.28 * ngInject29 */30function DetectNgTouch($log, $injector) {31  if ( $injector.has('$swipe') ) {32    var msg = "" +33      "You are using the ngTouch module. \n" +34      "Angular Material already has mobile click, tap, and swipe support... \n" +35      "ngTouch is not supported with Angular Material!";36    $log.warn(msg);37  }38}39/**40 * ngInject41 */42function MdCoreConfigure($provide, $mdThemingProvider) {43  $provide.decorator('$$rAF', ["$delegate", rAFDecorator]);44  $mdThemingProvider.theme('default')45    .primaryPalette('indigo')46    .accentPalette('pink')47    .warnPalette('deep-orange')48    .backgroundPalette('grey');49}50/**51 * ngInject52 */53function rAFDecorator($delegate) {54  /**55   * Use this to throttle events that come in often.56   * The throttled function will always use the *last* invocation before the57   * coming frame.58   *59   * For example, window resize events that fire many times a second:60   * If we set to use an raf-throttled callback on window resize, then61   * our callback will only be fired once per frame, with the last resize62   * event that happened before that frame.63   *64   * @param {function} callback function to debounce65   */66  $delegate.throttle = function(cb) {67    var queuedArgs, alreadyQueued, queueCb, context;68    return function debounced() {69      queuedArgs = arguments;70      context = this;71      queueCb = cb;72      if (!alreadyQueued) {73        alreadyQueued = true;74        $delegate(function() {75          queueCb.apply(context, Array.prototype.slice.call(queuedArgs));76          alreadyQueued = false;77        });78      }79    };80  };81  return $delegate;82}83angular.module('material.core')84  .directive('mdAutofocus', MdAutofocusDirective)85  // Support the deprecated md-auto-focus and md-sidenav-focus as well86  .directive('mdAutoFocus', MdAutofocusDirective)87  .directive('mdSidenavFocus', MdAutofocusDirective);88/**89 * @ngdoc directive90 * @name mdAutofocus91 * @module material.core.util92 *93 * @description94 *95 * `[md-autofocus]` provides an optional way to identify the focused element when a `$mdDialog`,96 * `$mdBottomSheet`, `$mdMenu` or `$mdSidenav` opens or upon page load for input-like elements.97 *98 * When one of these opens, it will find the first nested element with the `[md-autofocus]`99 * attribute directive and optional expression. An expression may be specified as the directive100 * value to enable conditional activation of the autofocus.101 *102 * @usage103 *104 * ### Dialog105 * <hljs lang="html">106 * <md-dialog>107 *   <form>108 *     <md-input-container>109 *       <label for="testInput">Label</label>110 *       <input id="testInput" type="text" md-autofocus>111 *     </md-input-container>112 *   </form>113 * </md-dialog>114 * </hljs>115 *116 * ### Bottomsheet117 * <hljs lang="html">118 * <md-bottom-sheet class="md-list md-has-header">119 *  <md-subheader>Comment Actions</md-subheader>120 *  <md-list>121 *    <md-list-item ng-repeat="item in items">122 *123 *      <md-button md-autofocus="$index == 2">124 *        <md-icon md-svg-src="{{item.icon}}"></md-icon>125 *        <span class="md-inline-list-icon-label">{{ item.name }}</span>126 *      </md-button>127 *128 *    </md-list-item>129 *  </md-list>130 * </md-bottom-sheet>131 * </hljs>132 *133 * ### Autocomplete134 * <hljs lang="html">135 *   <md-autocomplete136 *       md-autofocus137 *       md-selected-item="selectedItem"138 *       md-search-text="searchText"139 *       md-items="item in getMatches(searchText)"140 *       md-item-text="item.display">141 *     <span md-highlight-text="searchText">{{item.display}}</span>142 *   </md-autocomplete>143 * </hljs>144 *145 * ### Sidenav146 * <hljs lang="html">147 * <div layout="row" ng-controller="MyController">148 *   <md-sidenav md-component-id="left" class="md-sidenav-left">149 *     Left Nav!150 *   </md-sidenav>151 *152 *   <md-content>153 *     Center Content154 *     <md-button ng-click="openLeftMenu()">155 *       Open Left Menu156 *     </md-button>157 *   </md-content>158 *159 *   <md-sidenav md-component-id="right"160 *     md-is-locked-open="$mdMedia('min-width: 333px')"161 *     class="md-sidenav-right">162 *     <form>163 *       <md-input-container>164 *         <label for="testInput">Test input</label>165 *         <input id="testInput" type="text"166 *                ng-model="data" md-autofocus>167 *       </md-input-container>168 *     </form>169 *   </md-sidenav>170 * </div>171 * </hljs>172 **/173function MdAutofocusDirective() {174  return {175    restrict: 'A',176    link: postLink177  }178}179function postLink(scope, element, attrs) {180  var attr = attrs.mdAutoFocus || attrs.mdAutofocus || attrs.mdSidenavFocus;181  // Setup a watcher on the proper attribute to update a class we can check for in $mdUtil182  scope.$watch(attr, function(canAutofocus) {183    element.toggleClass('md-autofocus', canAutofocus);184  });185}186/**187 * @ngdoc module188 * @name material.core.colorUtil189 * @description190 * Color Util191 */192angular193  .module('material.core')194  .factory('$mdColorUtil', ColorUtilFactory);195function ColorUtilFactory() {196  /**197   * Converts hex value to RGBA string198   * @param color {string}199   * @returns {string}200   */201  function hexToRgba (color) {202    var hex   = color[ 0 ] === '#' ? color.substr(1) : color,203      dig   = hex.length / 3,204      red   = hex.substr(0, dig),205      green = hex.substr(dig, dig),206      blue  = hex.substr(dig * 2);207    if (dig === 1) {208      red += red;209      green += green;210      blue += blue;211    }212    return 'rgba(' + parseInt(red, 16) + ',' + parseInt(green, 16) + ',' + parseInt(blue, 16) + ',0.1)';213  }214  /**215   * Converts rgba value to hex string216   * @param color {string}217   * @returns {string}218   */219  function rgbaToHex(color) {220    color = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);221    var hex = (color && color.length === 4) ? "#" +222    ("0" + parseInt(color[1],10).toString(16)).slice(-2) +223    ("0" + parseInt(color[2],10).toString(16)).slice(-2) +224    ("0" + parseInt(color[3],10).toString(16)).slice(-2) : '';225    return hex.toUpperCase();226  }227  /**228   * Converts an RGB color to RGBA229   * @param color {string}230   * @returns {string}231   */232  function rgbToRgba (color) {233    return color.replace(')', ', 0.1)').replace('(', 'a(');234  }235  /**236   * Converts an RGBA color to RGB237   * @param color {string}238   * @returns {string}239   */240  function rgbaToRgb (color) {241    return color242      ? color.replace('rgba', 'rgb').replace(/,[^\),]+\)/, ')')243      : 'rgb(0,0,0)';244  }245  return {246    rgbaToHex: rgbaToHex,247    hexToRgba: hexToRgba,248    rgbToRgba: rgbToRgba,249    rgbaToRgb: rgbaToRgb250  }251}252MdConstantFactory.$inject = ["$sniffer", "$window", "$document"];angular.module('material.core')253.factory('$mdConstant', MdConstantFactory);254/**255 * Factory function that creates the grab-bag $mdConstant service.256 * ngInject257 */258function MdConstantFactory($sniffer, $window, $document) {259  var vendorPrefix = $sniffer.vendorPrefix;260  var isWebkit = /webkit/i.test(vendorPrefix);261  var SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;262  var prefixTestEl = document.createElement('div');263  function vendorProperty(name) {264    // Add a dash between the prefix and name, to be able to transform the string into camelcase.265    var prefixedName = vendorPrefix + '-' + name;266    var ucPrefix = camelCase(prefixedName);267    var lcPrefix = ucPrefix.charAt(0).toLowerCase() + ucPrefix.substring(1);268    return hasStyleProperty(name)     ? name     :       // The current browser supports the un-prefixed property269           hasStyleProperty(ucPrefix) ? ucPrefix :       // The current browser only supports the prefixed property.270           hasStyleProperty(lcPrefix) ? lcPrefix : name; // Some browsers are only supporting the prefix in lowercase.271  }272  function hasStyleProperty(property) {273    return angular.isDefined(prefixTestEl.style[property]);274  }275  function camelCase(input) {276    return input.replace(SPECIAL_CHARS_REGEXP, function(matches, separator, letter, offset) {277      return offset ? letter.toUpperCase() : letter;278    });279  }280  var self = {281    isInputKey : function(e) { return (e.keyCode >= 31 && e.keyCode <= 90); },282    isNumPadKey : function (e){ return (3 === e.location && e.keyCode >= 97 && e.keyCode <= 105); },283    isNavigationKey : function(e) {284      var kc = self.KEY_CODE, NAVIGATION_KEYS =  [kc.SPACE, kc.ENTER, kc.UP_ARROW, kc.DOWN_ARROW];285      return (NAVIGATION_KEYS.indexOf(e.keyCode) != -1);    286    },287    KEY_CODE: {288      COMMA: 188,289      SEMICOLON : 186,290      ENTER: 13,291      ESCAPE: 27,292      SPACE: 32,293      PAGE_UP: 33,294      PAGE_DOWN: 34,295      END: 35,296      HOME: 36,297      LEFT_ARROW : 37,298      UP_ARROW : 38,299      RIGHT_ARROW : 39,300      DOWN_ARROW : 40,301      TAB : 9,302      BACKSPACE: 8,303      DELETE: 46304    },305    CSS: {306      /* Constants */307      TRANSITIONEND: 'transitionend' + (isWebkit ? ' webkitTransitionEnd' : ''),308      ANIMATIONEND: 'animationend' + (isWebkit ? ' webkitAnimationEnd' : ''),309      TRANSFORM: vendorProperty('transform'),310      TRANSFORM_ORIGIN: vendorProperty('transformOrigin'),311      TRANSITION: vendorProperty('transition'),312      TRANSITION_DURATION: vendorProperty('transitionDuration'),313      ANIMATION_PLAY_STATE: vendorProperty('animationPlayState'),314      ANIMATION_DURATION: vendorProperty('animationDuration'),315      ANIMATION_NAME: vendorProperty('animationName'),316      ANIMATION_TIMING: vendorProperty('animationTimingFunction'),317      ANIMATION_DIRECTION: vendorProperty('animationDirection')318    },319    /**320     * As defined in core/style/variables.scss321     *322     * $layout-breakpoint-xs:     600px !default;323     * $layout-breakpoint-sm:     960px !default;324     * $layout-breakpoint-md:     1280px !default;325     * $layout-breakpoint-lg:     1920px !default;326     *327     */328    MEDIA: {329      'xs'        : '(max-width: 599px)'                         ,330      'gt-xs'     : '(min-width: 600px)'                         ,331      'sm'        : '(min-width: 600px) and (max-width: 959px)'  ,332      'gt-sm'     : '(min-width: 960px)'                         ,333      'md'        : '(min-width: 960px) and (max-width: 1279px)' ,334      'gt-md'     : '(min-width: 1280px)'                        ,335      'lg'        : '(min-width: 1280px) and (max-width: 1919px)',336      'gt-lg'     : '(min-width: 1920px)'                        ,337      'xl'        : '(min-width: 1920px)'                        ,338      'landscape' : '(orientation: landscape)'                   ,339      'portrait'  : '(orientation: portrait)'                    ,340      'print' : 'print'341    },342    MEDIA_PRIORITY: [343      'xl',344      'gt-lg',345      'lg',346      'gt-md',347      'md',348      'gt-sm',349      'sm',350      'gt-xs',351      'xs',352      'landscape',353      'portrait',354      'print'355    ]356  };357  return self;358}359  angular360    .module('material.core')361    .config( ["$provide", function($provide){362       $provide.decorator('$mdUtil', ['$delegate', function ($delegate){363           /**364            * Inject the iterator facade to easily support iteration and accessors365            * @see iterator below366            */367           $delegate.iterator = MdIterator;368           return $delegate;369         }370       ]);371     }]);372  /**373   * iterator is a list facade to easily support iteration and accessors374   *375   * @param items Array list which this iterator will enumerate376   * @param reloop Boolean enables iterator to consider the list as an endless reloop377   */378  function MdIterator(items, reloop) {379    var trueFn = function() { return true; };380    if (items && !angular.isArray(items)) {381      items = Array.prototype.slice.call(items);382    }383    reloop = !!reloop;384    var _items = items || [ ];385    // Published API386    return {387      items: getItems,388      count: count,389      inRange: inRange,390      contains: contains,391      indexOf: indexOf,392      itemAt: itemAt,393      findBy: findBy,394      add: add,395      remove: remove,396      first: first,397      last: last,398      next: angular.bind(null, findSubsequentItem, false),399      previous: angular.bind(null, findSubsequentItem, true),400      hasPrevious: hasPrevious,401      hasNext: hasNext402    };403    /**404     * Publish copy of the enumerable set405     * @returns {Array|*}406     */407    function getItems() {408      return [].concat(_items);409    }410    /**411     * Determine length of the list412     * @returns {Array.length|*|number}413     */414    function count() {415      return _items.length;416    }417    /**418     * Is the index specified valid419     * @param index420     * @returns {Array.length|*|number|boolean}421     */422    function inRange(index) {423      return _items.length && ( index > -1 ) && (index < _items.length );424    }425    /**426     * Can the iterator proceed to the next item in the list; relative to427     * the specified item.428     *429     * @param item430     * @returns {Array.length|*|number|boolean}431     */432    function hasNext(item) {433      return item ? inRange(indexOf(item) + 1) : false;434    }435    /**436     * Can the iterator proceed to the previous item in the list; relative to437     * the specified item.438     *439     * @param item440     * @returns {Array.length|*|number|boolean}441     */442    function hasPrevious(item) {443      return item ? inRange(indexOf(item) - 1) : false;444    }445    /**446     * Get item at specified index/position447     * @param index448     * @returns {*}449     */450    function itemAt(index) {451      return inRange(index) ? _items[index] : null;452    }453    /**454     * Find all elements matching the key/value pair455     * otherwise return null456     *457     * @param val458     * @param key459     *460     * @return array461     */462    function findBy(key, val) {463      return _items.filter(function(item) {464        return item[key] === val;465      });466    }467    /**468     * Add item to list469     * @param item470     * @param index471     * @returns {*}472     */473    function add(item, index) {474      if ( !item ) return -1;475      if (!angular.isNumber(index)) {476        index = _items.length;477      }478      _items.splice(index, 0, item);479      return indexOf(item);480    }481    /**482     * Remove item from list...483     * @param item484     */485    function remove(item) {486      if ( contains(item) ){487        _items.splice(indexOf(item), 1);488      }489    }490    /**491     * Get the zero-based index of the target item492     * @param item493     * @returns {*}494     */495    function indexOf(item) {496      return _items.indexOf(item);497    }498    /**499     * Boolean existence check500     * @param item501     * @returns {boolean}502     */503    function contains(item) {504      return item && (indexOf(item) > -1);505    }506    /**507     * Return first item in the list508     * @returns {*}509     */510    function first() {511      return _items.length ? _items[0] : null;512    }513    /**514     * Return last item in the list...515     * @returns {*}516     */517    function last() {518      return _items.length ? _items[_items.length - 1] : null;519    }520    /**521     * Find the next item. If reloop is true and at the end of the list, it will go back to the522     * first item. If given, the `validate` callback will be used to determine whether the next item523     * is valid. If not valid, it will try to find the next item again.524     *525     * @param {boolean} backwards Specifies the direction of searching (forwards/backwards)526     * @param {*} item The item whose subsequent item we are looking for527     * @param {Function=} validate The `validate` function528     * @param {integer=} limit The recursion limit529     *530     * @returns {*} The subsequent item or null531     */532    function findSubsequentItem(backwards, item, validate, limit) {533      validate = validate || trueFn;534      var curIndex = indexOf(item);535      while (true) {536        if (!inRange(curIndex)) return null;537        var nextIndex = curIndex + (backwards ? -1 : 1);538        var foundItem = null;539        if (inRange(nextIndex)) {540          foundItem = _items[nextIndex];541        } else if (reloop) {542          foundItem = backwards ? last() : first();543          nextIndex = indexOf(foundItem);544        }545        if ((foundItem === null) || (nextIndex === limit)) return null;546        if (validate(foundItem)) return foundItem;547        if (angular.isUndefined(limit)) limit = nextIndex;548        curIndex = nextIndex;549      }550    }551  }552mdMediaFactory.$inject = ["$mdConstant", "$rootScope", "$window"];angular.module('material.core')553.factory('$mdMedia', mdMediaFactory);554/**555 * @ngdoc service556 * @name $mdMedia557 * @module material.core558 *559 * @description560 * `$mdMedia` is used to evaluate whether a given media query is true or false given the561 * current device's screen / window size. The media query will be re-evaluated on resize, allowing562 * you to register a watch.563 *564 * `$mdMedia` also has pre-programmed support for media queries that match the layout breakpoints:565 *566 *  <table class="md-api-table">567 *    <thead>568 *    <tr>569 *      <th>Breakpoint</th>570 *      <th>mediaQuery</th>571 *    </tr>572 *    </thead>573 *    <tbody>574 *    <tr>575 *      <td>xs</td>576 *      <td>(max-width: 599px)</td>577 *    </tr>578 *    <tr>579 *      <td>gt-xs</td>580 *      <td>(min-width: 600px)</td>581 *    </tr>582 *    <tr>583 *      <td>sm</td>584 *      <td>(min-width: 600px) and (max-width: 959px)</td>585 *    </tr>586 *    <tr>587 *      <td>gt-sm</td>588 *      <td>(min-width: 960px)</td>589 *    </tr>590 *    <tr>591 *      <td>md</td>592 *      <td>(min-width: 960px) and (max-width: 1279px)</td>593 *    </tr>594 *    <tr>595 *      <td>gt-md</td>596 *      <td>(min-width: 1280px)</td>597 *    </tr>598 *    <tr>599 *      <td>lg</td>600 *      <td>(min-width: 1280px) and (max-width: 1919px)</td>601 *    </tr>602 *    <tr>603 *      <td>gt-lg</td>604 *      <td>(min-width: 1920px)</td>605 *    </tr>606 *    <tr>607 *      <td>xl</td>608 *      <td>(min-width: 1920px)</td>609 *    </tr>610 *    <tr>611 *      <td>landscape</td>612 *      <td>landscape</td>613 *    </tr>614 *    <tr>615 *      <td>portrait</td>616 *      <td>portrait</td>617 *    </tr>618 *    <tr>619 *      <td>print</td>620 *      <td>print</td>621 *    </tr>622 *    </tbody>623 *  </table>624 *625 *  See Material Design's <a href="https://material.google.com/layout/responsive-ui.html">Layout - Adaptive UI</a> for more details.626 *627 *  <a href="https://www.google.com/design/spec/layout/adaptive-ui.html">628 *  <img src="https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8olV15J7abPSGFxemFiQVRtb1k/layout_adaptive_breakpoints_01.png" width="100%" height="100%"></img>629 *  </a>630 *631 * @returns {boolean} a boolean representing whether or not the given media query is true or false.632 *633 * @usage634 * <hljs lang="js">635 * app.controller('MyController', function($mdMedia, $scope) {636 *   $scope.$watch(function() { return $mdMedia('lg'); }, function(big) {637 *     $scope.bigScreen = big;638 *   });639 *640 *   $scope.screenIsSmall = $mdMedia('sm');641 *   $scope.customQuery = $mdMedia('(min-width: 1234px)');642 *   $scope.anotherCustom = $mdMedia('max-width: 300px');643 * });644 * </hljs>645 */646/* ngInject */647function mdMediaFactory($mdConstant, $rootScope, $window) {648  var queries = {};649  var mqls = {};650  var results = {};651  var normalizeCache = {};652  $mdMedia.getResponsiveAttribute = getResponsiveAttribute;653  $mdMedia.getQuery = getQuery;654  $mdMedia.watchResponsiveAttributes = watchResponsiveAttributes;655  return $mdMedia;656  function $mdMedia(query) {657    var validated = queries[query];658    if (angular.isUndefined(validated)) {659      validated = queries[query] = validate(query);660    }661    var result = results[validated];662    if (angular.isUndefined(result)) {663      result = add(validated);664    }665    return result;666  }667  function validate(query) {668    return $mdConstant.MEDIA[query] ||669           ((query.charAt(0) !== '(') ? ('(' + query + ')') : query);670  }671  function add(query) {672    var result = mqls[query];673    if ( !result ) {674      result = mqls[query] = $window.matchMedia(query);675    }676    result.addListener(onQueryChange);677    return (results[result.media] = !!result.matches);678  }679  function onQueryChange(query) {680    $rootScope.$evalAsync(function() {681      results[query.media] = !!query.matches;682    });683  }684  function getQuery(name) {685    return mqls[name];686  }687  function getResponsiveAttribute(attrs, attrName) {688    for (var i = 0; i < $mdConstant.MEDIA_PRIORITY.length; i++) {689      var mediaName = $mdConstant.MEDIA_PRIORITY[i];690      if (!mqls[queries[mediaName]].matches) {691        continue;692      }693      var normalizedName = getNormalizedName(attrs, attrName + '-' + mediaName);694      if (attrs[normalizedName]) {695        return attrs[normalizedName];696      }697    }698    // fallback on unprefixed699    return attrs[getNormalizedName(attrs, attrName)];700  }701  function watchResponsiveAttributes(attrNames, attrs, watchFn) {702    var unwatchFns = [];703    attrNames.forEach(function(attrName) {704      var normalizedName = getNormalizedName(attrs, attrName);705      if (angular.isDefined(attrs[normalizedName])) {706        unwatchFns.push(707            attrs.$observe(normalizedName, angular.bind(void 0, watchFn, null)));708      }709      for (var mediaName in $mdConstant.MEDIA) {710        normalizedName = getNormalizedName(attrs, attrName + '-' + mediaName);711        if (angular.isDefined(attrs[normalizedName])) {712          unwatchFns.push(713              attrs.$observe(normalizedName, angular.bind(void 0, watchFn, mediaName)));714        }715      }716    });717    return function unwatch() {718      unwatchFns.forEach(function(fn) { fn(); })719    };720  }721  // Improves performance dramatically722  function getNormalizedName(attrs, attrName) {723    return normalizeCache[attrName] ||724        (normalizeCache[attrName] = attrs.$normalize(attrName));725  }726}727angular728  .module('material.core')729  .config( ["$provide", function($provide) {730    $provide.decorator('$mdUtil', ['$delegate', function ($delegate) {731      // Inject the prefixer into our original $mdUtil service.732      $delegate.prefixer = MdPrefixer;733      return $delegate;734    }]);735  }]);736function MdPrefixer(initialAttributes, buildSelector) {737  var PREFIXES = ['data', 'x'];738  if (initialAttributes) {739    // The prefixer also accepts attributes as a parameter, and immediately builds a list or selector for740    // the specified attributes.741    return buildSelector ? _buildSelector(initialAttributes) : _buildList(initialAttributes);742  }743  return {744    buildList: _buildList,745    buildSelector: _buildSelector,746    hasAttribute: _hasAttribute,747    removeAttribute: _removeAttribute748  };749  function _buildList(attributes) {750    attributes = angular.isArray(attributes) ? attributes : [attributes];751    attributes.forEach(function(item) {752      PREFIXES.forEach(function(prefix) {753        attributes.push(prefix + '-' + item);754      });755    });756    return attributes;757  }758  function _buildSelector(attributes) {759    attributes = angular.isArray(attributes) ? attributes : [attributes];760    return _buildList(attributes)761      .map(function(item) {762        return '[' + item + ']'763      })764      .join(',');765  }766  function _hasAttribute(element, attribute) {767    element = _getNativeElement(element);768    if (!element) {769      return false;770    }771    var prefixedAttrs = _buildList(attribute);772    for (var i = 0; i < prefixedAttrs.length; i++) {773      if (element.hasAttribute(prefixedAttrs[i])) {774        return true;775      }776    }777    return false;778  }779  function _removeAttribute(element, attribute) {780    element = _getNativeElement(element);781    if (!element) {782      return;783    }784    _buildList(attribute).forEach(function(prefixedAttribute) {785      element.removeAttribute(prefixedAttribute);786    });787  }788  /**789   * Transforms a jqLite or DOM element into a HTML element.790   * This is useful when supporting jqLite elements and DOM elements at791   * same time.792   * @param element {JQLite|Element} Element to be parsed793   * @returns {HTMLElement} Parsed HTMLElement794   */795  function _getNativeElement(element) {796    element =  element[0] || element;797    if (element.nodeType) {798      return element;799    }800  }801}802/*803 * This var has to be outside the angular factory, otherwise when804 * there are multiple material apps on the same page, each app805 * will create its own instance of this array and the app's IDs806 * will not be unique.807 */808UtilFactory.$inject = ["$document", "$timeout", "$compile", "$rootScope", "$$mdAnimate", "$interpolate", "$log", "$rootElement", "$window", "$$rAF"];809var nextUniqueId = 0;810/**811 * @ngdoc module812 * @name material.core.util813 * @description814 * Util815 */816angular817  .module('material.core')818  .factory('$mdUtil', UtilFactory);819/**820 * ngInject821 */822function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $interpolate, $log, $rootElement, $window, $$rAF) {823  // Setup some core variables for the processTemplate method824  var startSymbol = $interpolate.startSymbol(),825    endSymbol = $interpolate.endSymbol(),826    usesStandardSymbols = ((startSymbol === '{{') && (endSymbol === '}}'));827  /**828   * Checks if the target element has the requested style by key829   * @param {DOMElement|JQLite} target Target element830   * @param {string} key Style key831   * @param {string=} expectedVal Optional expected value832   * @returns {boolean} Whether the target element has the style or not833   */834  var hasComputedStyle = function (target, key, expectedVal) {835    var hasValue = false;836    if ( target && target.length  ) {837      var computedStyles = $window.getComputedStyle(target[0]);838      hasValue = angular.isDefined(computedStyles[key]) && (expectedVal ? computedStyles[key] == expectedVal : true);839    }840    return hasValue;841  };842  function validateCssValue(value) {843    return !value       ? '0'   :844      hasPx(value) || hasPercent(value) ? value : value + 'px';845  }846  function hasPx(value) {847    return String(value).indexOf('px') > -1;848  }849  function hasPercent(value) {850    return String(value).indexOf('%') > -1;851  }852  var $mdUtil = {853    dom: {},854    now: window.performance ?855      angular.bind(window.performance, window.performance.now) : Date.now || function() {856      return new Date().getTime();857    },858    /**859     * Bi-directional accessor/mutator used to easily update an element's860     * property based on the current 'dir'ectional value.861     */862    bidi : function(element, property, lValue, rValue) {863      var ltr = !($document[0].dir == 'rtl' || $document[0].body.dir == 'rtl');864      // If accessor865      if ( arguments.length == 0 ) return ltr ? 'ltr' : 'rtl';866      // If mutator867      var elem = angular.element(element);868      if ( ltr && angular.isDefined(lValue)) {869        elem.css(property, validateCssValue(lValue));870      }871      else if ( !ltr && angular.isDefined(rValue)) {872        elem.css(property, validateCssValue(rValue) );873      }874    },875    bidiProperty: function (element, lProperty, rProperty, value) {876      var ltr = !($document[0].dir == 'rtl' || $document[0].body.dir == 'rtl');877      var elem = angular.element(element);878      if ( ltr && angular.isDefined(lProperty)) {879        elem.css(lProperty, validateCssValue(value));880        elem.css(rProperty, '');881      }882      else if ( !ltr && angular.isDefined(rProperty)) {883        elem.css(rProperty, validateCssValue(value) );884        elem.css(lProperty, '');885      }886    },887    clientRect: function(element, offsetParent, isOffsetRect) {888      var node = getNode(element);889      offsetParent = getNode(offsetParent || node.offsetParent || document.body);890      var nodeRect = node.getBoundingClientRect();891      // The user can ask for an offsetRect: a rect relative to the offsetParent,892      // or a clientRect: a rect relative to the page893      var offsetRect = isOffsetRect ?894        offsetParent.getBoundingClientRect() :895      {left: 0, top: 0, width: 0, height: 0};896      return {897        left: nodeRect.left - offsetRect.left,898        top: nodeRect.top - offsetRect.top,899        width: nodeRect.width,900        height: nodeRect.height901      };902    },903    offsetRect: function(element, offsetParent) {904      return $mdUtil.clientRect(element, offsetParent, true);905    },906    // Annoying method to copy nodes to an array, thanks to IE907    nodesToArray: function(nodes) {908      nodes = nodes || [];909      var results = [];910      for (var i = 0; i < nodes.length; ++i) {911        results.push(nodes.item(i));912      }913      return results;914    },915    /**916     * Calculate the positive scroll offset917     * TODO: Check with pinch-zoom in IE/Chrome;918     *       https://code.google.com/p/chromium/issues/detail?id=496285919     */920    scrollTop: function(element) {921      element = angular.element(element || $document[0].body);922      var body = (element[0] == $document[0].body) ? $document[0].body : undefined;923      var scrollTop = body ? body.scrollTop + body.parentElement.scrollTop : 0;924      // Calculate the positive scroll offset925      return scrollTop || Math.abs(element[0].getBoundingClientRect().top);926    },927    /**928     * Finds the proper focus target by searching the DOM.929     *930     * @param containerEl931     * @param attributeVal932     * @returns {*}933     */934    findFocusTarget: function(containerEl, attributeVal) {935      var AUTO_FOCUS = this.prefixer('md-autofocus', true);936      var elToFocus;937      elToFocus = scanForFocusable(containerEl, attributeVal || AUTO_FOCUS);938      if ( !elToFocus && attributeVal != AUTO_FOCUS) {939        // Scan for deprecated attribute940        elToFocus = scanForFocusable(containerEl, this.prefixer('md-auto-focus', true));941        if ( !elToFocus ) {942          // Scan for fallback to 'universal' API943          elToFocus = scanForFocusable(containerEl, AUTO_FOCUS);944        }945      }946      return elToFocus;947      /**948       * Can target and nested children for specified Selector (attribute)949       * whose value may be an expression that evaluates to True/False.950       */951      function scanForFocusable(target, selector) {952        var elFound, items = target[0].querySelectorAll(selector);953        // Find the last child element with the focus attribute954        if ( items && items.length ){955          items.length && angular.forEach(items, function(it) {956            it = angular.element(it);957            // Check the element for the md-autofocus class to ensure any associated expression958            // evaluated to true.959            var isFocusable = it.hasClass('md-autofocus');960            if (isFocusable) elFound = it;961          });962        }963        return elFound;964      }965    },966    /**967     * Disables scroll around the passed parent element.968     * @param element Unused969     * @param {!Element|!angular.JQLite} parent Element to disable scrolling within.970     *   Defaults to body if none supplied.971     * @param options Object of options to modify functionality972     *   - disableScrollMask Boolean of whether or not to create a scroll mask element or973     *     use the passed parent element.974     */975    disableScrollAround: function(element, parent, options) {976      $mdUtil.disableScrollAround._count = $mdUtil.disableScrollAround._count || 0;977      ++$mdUtil.disableScrollAround._count;978      if ($mdUtil.disableScrollAround._enableScrolling) return $mdUtil.disableScrollAround._enableScrolling;979      var body = $document[0].body,980        restoreBody = disableBodyScroll(),981        restoreElement = disableElementScroll(parent);982      return $mdUtil.disableScrollAround._enableScrolling = function() {983        if (!--$mdUtil.disableScrollAround._count) {984          restoreBody();985          restoreElement();986          delete $mdUtil.disableScrollAround._enableScrolling;987        }988      };989      // Creates a virtual scrolling mask to absorb touchmove, keyboard, scrollbar clicking, and wheel events990      function disableElementScroll(element) {991        element = angular.element(element || body);992        var scrollMask;993        if (options && options.disableScrollMask) {994          scrollMask = element;995        } else {996          element = element[0];997          scrollMask = angular.element(998            '<div class="md-scroll-mask">' +999            '  <div class="md-scroll-mask-bar"></div>' +1000            '</div>');1001          element.appendChild(scrollMask[0]);1002        }1003        scrollMask.on('wheel', preventDefault);1004        scrollMask.on('touchmove', preventDefault);1005        return function restoreScroll() {1006          scrollMask.off('wheel');1007          scrollMask.off('touchmove');1008          scrollMask[0].parentNode.removeChild(scrollMask[0]);1009          delete $mdUtil.disableScrollAround._enableScrolling;1010        };1011        function preventDefault(e) {1012          e.preventDefault();1013        }1014      }1015      // Converts the body to a position fixed block and translate it to the proper scroll position1016      function disableBodyScroll() {1017        var htmlNode = body.parentNode;1018        var restoreHtmlStyle = htmlNode.style.cssText || '';1019        var restoreBodyStyle = body.style.cssText || '';1020        var scrollOffset = $mdUtil.scrollTop(body);1021        var clientWidth = body.clientWidth;1022        if (body.scrollHeight > body.clientHeight + 1) {1023          applyStyles(body, {1024            position: 'fixed',1025            width: '100%',1026            top: -scrollOffset + 'px'1027          });1028          htmlNode.style.overflowY = 'scroll';1029        }1030        if (body.clientWidth < clientWidth) applyStyles(body, {overflow: 'hidden'});1031        return function restoreScroll() {1032          body.style.cssText = restoreBodyStyle;1033          htmlNode.style.cssText = restoreHtmlStyle;1034          body.scrollTop = scrollOffset;1035          htmlNode.scrollTop = scrollOffset;1036        };1037      }1038      function applyStyles(el, styles) {1039        for (var key in styles) {1040          el.style[key] = styles[key];1041        }1042      }1043    },1044    enableScrolling: function() {1045      var method = this.disableScrollAround._enableScrolling;1046      method && method();1047    },1048    floatingScrollbars: function() {1049      if (this.floatingScrollbars.cached === undefined) {1050        var tempNode = angular.element('<div><div></div></div>').css({1051          width: '100%',1052          'z-index': -1,1053          position: 'absolute',1054          height: '35px',1055          'overflow-y': 'scroll'1056        });1057        tempNode.children().css('height', '60px');1058        $document[0].body.appendChild(tempNode[0]);1059        this.floatingScrollbars.cached = (tempNode[0].offsetWidth == tempNode[0].childNodes[0].offsetWidth);1060        tempNode.remove();1061      }1062      return this.floatingScrollbars.cached;1063    },1064    // Mobile safari only allows you to set focus in click event listeners...1065    forceFocus: function(element) {1066      var node = element[0] || element;1067      document.addEventListener('click', function focusOnClick(ev) {1068        if (ev.target === node && ev.$focus) {1069          node.focus();1070          ev.stopImmediatePropagation();1071          ev.preventDefault();1072          node.removeEventListener('click', focusOnClick);1073        }1074      }, true);1075      var newEvent = document.createEvent('MouseEvents');1076      newEvent.initMouseEvent('click', false, true, window, {}, 0, 0, 0, 0,1077        false, false, false, false, 0, null);1078      newEvent.$material = true;1079      newEvent.$focus = true;1080      node.dispatchEvent(newEvent);1081    },1082    /**1083     * facade to build md-backdrop element with desired styles1084     * NOTE: Use $compile to trigger backdrop postLink function1085     */1086    createBackdrop: function(scope, addClass) {1087      return $compile($mdUtil.supplant('<md-backdrop class="{0}">', [addClass]))(scope);1088    },1089    /**1090     * supplant() method from Crockford's `Remedial Javascript`1091     * Equivalent to use of $interpolate; without dependency on1092     * interpolation symbols and scope. Note: the '{<token>}' can1093     * be property names, property chains, or array indices.1094     */1095    supplant: function(template, values, pattern) {1096      pattern = pattern || /\{([^\{\}]*)\}/g;1097      return template.replace(pattern, function(a, b) {1098        var p = b.split('.'),1099          r = values;1100        try {1101          for (var s in p) {1102            if (p.hasOwnProperty(s) ) {1103              r = r[p[s]];1104            }1105          }1106        } catch (e) {1107          r = a;1108        }1109        return (typeof r === 'string' || typeof r === 'number') ? r : a;1110      });1111    },1112    fakeNgModel: function() {1113      return {1114        $fake: true,1115        $setTouched: angular.noop,1116        $setViewValue: function(value) {1117          this.$viewValue = value;1118          this.$render(value);1119          this.$viewChangeListeners.forEach(function(cb) {1120            cb();1121          });1122        },1123        $isEmpty: function(value) {1124          return ('' + value).length === 0;1125        },1126        $parsers: [],1127        $formatters: [],1128        $viewChangeListeners: [],1129        $render: angular.noop1130      };1131    },1132    // Returns a function, that, as long as it continues to be invoked, will not1133    // be triggered. The function will be called after it stops being called for1134    // N milliseconds.1135    // @param wait Integer value of msecs to delay (since last debounce reset); default value 10 msecs1136    // @param invokeApply should the $timeout trigger $digest() dirty checking1137    debounce: function(func, wait, scope, invokeApply) {1138      var timer;1139      return function debounced() {1140        var context = scope,1141          args = Array.prototype.slice.call(arguments);1142        $timeout.cancel(timer);1143        timer = $timeout(function() {1144          timer = undefined;1145          func.apply(context, args);1146        }, wait || 10, invokeApply);1147      };1148    },1149    // Returns a function that can only be triggered every `delay` milliseconds.1150    // In other words, the function will not be called unless it has been more1151    // than `delay` milliseconds since the last call.1152    throttle: function throttle(func, delay) {1153      var recent;1154      return function throttled() {1155        var context = this;1156        var args = arguments;1157        var now = $mdUtil.now();1158        if (!recent || (now - recent > delay)) {1159          func.apply(context, args);1160          recent = now;1161        }1162      };1163    },1164    /**1165     * Measures the number of milliseconds taken to run the provided callback1166     * function. Uses a high-precision timer if available.1167     */1168    time: function time(cb) {1169      var start = $mdUtil.now();1170      cb();1171      return $mdUtil.now() - start;1172    },1173    /**1174     * Create an implicit getter that caches its `getter()`1175     * lookup value1176     */1177    valueOnUse : function (scope, key, getter) {1178      var value = null, args = Array.prototype.slice.call(arguments);1179      var params = (args.length > 3) ? args.slice(3) : [ ];1180      Object.defineProperty(scope, key, {1181        get: function () {1182          if (value === null) value = getter.apply(scope, params);1183          return value;1184        }1185      });1186    },1187    /**1188     * Get a unique ID.1189     *1190     * @returns {string} an unique numeric string1191     */1192    nextUid: function() {1193      return '' + nextUniqueId++;1194    },1195    // Stop watchers and events from firing on a scope without destroying it,1196    // by disconnecting it from its parent and its siblings' linked lists.1197    disconnectScope: function disconnectScope(scope) {1198      if (!scope) return;1199      // we can't destroy the root scope or a scope that has been already destroyed1200      if (scope.$root === scope) return;1201      if (scope.$$destroyed) return;1202      var parent = scope.$parent;1203      scope.$$disconnected = true;1204      // See Scope.$destroy1205      if (parent.$$childHead === scope) parent.$$childHead = scope.$$nextSibling;1206      if (parent.$$childTail === scope) parent.$$childTail = scope.$$prevSibling;1207      if (scope.$$prevSibling) scope.$$prevSibling.$$nextSibling = scope.$$nextSibling;1208      if (scope.$$nextSibling) scope.$$nextSibling.$$prevSibling = scope.$$prevSibling;1209      scope.$$nextSibling = scope.$$prevSibling = null;1210    },1211    // Undo the effects of disconnectScope above.1212    reconnectScope: function reconnectScope(scope) {1213      if (!scope) return;1214      // we can't disconnect the root node or scope already disconnected1215      if (scope.$root === scope) return;1216      if (!scope.$$disconnected) return;1217      var child = scope;1218      var parent = child.$parent;1219      child.$$disconnected = false;1220      // See Scope.$new for this logic...1221      child.$$prevSibling = parent.$$childTail;1222      if (parent.$$childHead) {1223        parent.$$childTail.$$nextSibling = child;1224        parent.$$childTail = child;1225      } else {1226        parent.$$childHead = parent.$$childTail = child;1227      }1228    },1229    /*1230     * getClosest replicates jQuery.closest() to walk up the DOM tree until it finds a matching nodeName1231     *1232     * @param el Element to start walking the DOM from1233     * @param check Either a string or a function. If a string is passed, it will be evaluated against1234     * each of the parent nodes' tag name. If a function is passed, the loop will call it with each of1235     * the parents and will use the return value to determine whether the node is a match.1236     * @param onlyParent Only start checking from the parent element, not `el`.1237     */1238    getClosest: function getClosest(el, validateWith, onlyParent) {1239      if ( angular.isString(validateWith) ) {1240        var tagName = validateWith.toUpperCase();1241        validateWith = function(el) {1242          return el.nodeName === tagName;1243        };1244      }1245      if (el instanceof angular.element) el = el[0];1246      if (onlyParent) el = el.parentNode;1247      if (!el) return null;1248      do {1249        if (validateWith(el)) {1250          return el;1251        }1252      } while (el = el.parentNode);1253      return null;1254    },1255    /**1256     * Build polyfill for the Node.contains feature (if needed)1257     */1258    elementContains: function(node, child) {1259      var hasContains = (window.Node && window.Node.prototype && Node.prototype.contains);1260      var findFn = hasContains ? angular.bind(node, node.contains) : angular.bind(node, function(arg) {1261        // compares the positions of two nodes and returns a bitmask1262        return (node === child) || !!(this.compareDocumentPosition(arg) & 16)1263      });1264      return findFn(child);1265    },1266    /**1267     * Functional equivalent for $element.filter(âmd-bottom-sheetâ)1268     * useful with interimElements where the element and its container are important...1269     *1270     * @param {[]} elements to scan1271     * @param {string} name of node to find (e.g. 'md-dialog')1272     * @param {boolean=} optional flag to allow deep scans; defaults to 'false'.1273     * @param {boolean=} optional flag to enable log warnings; defaults to false1274     */1275    extractElementByName: function(element, nodeName, scanDeep, warnNotFound) {1276      var found = scanTree(element);1277      if (!found && !!warnNotFound) {1278        $log.warn( $mdUtil.supplant("Unable to find node '{0}' in element '{1}'.",[nodeName, element[0].outerHTML]) );1279      }1280      return angular.element(found || element);1281      /**1282       * Breadth-First tree scan for element with matching `nodeName`1283       */1284      function scanTree(element) {1285        return scanLevel(element) || (!!scanDeep ? scanChildren(element) : null);1286      }1287      /**1288       * Case-insensitive scan of current elements only (do not descend).1289       */1290      function scanLevel(element) {1291        if ( element ) {1292          for (var i = 0, len = element.length; i < len; i++) {1293            if (element[i].nodeName.toLowerCase() === nodeName) {1294              return element[i];1295            }1296          }1297        }1298        return null;1299      }1300      /**1301       * Scan children of specified node1302       */1303      function scanChildren(element) {1304        var found;1305        if ( element ) {1306          for (var i = 0, len = element.length; i < len; i++) {1307            var target = element[i];1308            if ( !found ) {1309              for (var j = 0, numChild = target.childNodes.length; j < numChild; j++) {1310                found = found || scanTree([target.childNodes[j]]);1311              }1312            }1313          }1314        }1315        return found;1316      }1317    },1318    /**1319     * Give optional properties with no value a boolean true if attr provided or false otherwise1320     */1321    initOptionalProperties: function(scope, attr, defaults) {1322      defaults = defaults || {};1323      angular.forEach(scope.$$isolateBindings, function(binding, key) {1324        if (binding.optional && angular.isUndefined(scope[key])) {1325          var attrIsDefined = angular.isDefined(attr[binding.attrName]);1326          scope[key] = angular.isDefined(defaults[key]) ? defaults[key] : attrIsDefined;1327        }1328      });1329    },1330    /**1331     * Alternative to $timeout calls with 0 delay.1332     * nextTick() coalesces all calls within a single frame1333     * to minimize $digest thrashing1334     *1335     * @param callback1336     * @param digest1337     * @returns {*}1338     */1339    nextTick: function(callback, digest, scope) {1340      //-- grab function reference for storing state details1341      var nextTick = $mdUtil.nextTick;1342      var timeout = nextTick.timeout;1343      var queue = nextTick.queue || [];1344      //-- add callback to the queue1345      queue.push({scope: scope, callback: callback});1346      //-- set default value for digest1347      if (digest == null) digest = true;1348      //-- store updated digest/queue values1349      nextTick.digest = nextTick.digest || digest;1350      nextTick.queue = queue;1351      //-- either return existing timeout or create a new one1352      return timeout || (nextTick.timeout = $timeout(processQueue, 0, false));1353      /**1354       * Grab a copy of the current queue1355       * Clear the queue for future use1356       * Process the existing queue1357       * Trigger digest if necessary1358       */1359      function processQueue() {1360        var queue = nextTick.queue;1361        var digest = nextTick.digest;1362        nextTick.queue = [];1363        nextTick.timeout = null;1364        nextTick.digest = false;1365        queue.forEach(function(queueItem) {1366          var skip = queueItem.scope && queueItem.scope.$$destroyed;1367          if (!skip) {1368            queueItem.callback();1369          }1370        });1371        if (digest) $rootScope.$digest();1372      }1373    },1374    /**1375     * Processes a template and replaces the start/end symbols if the application has1376     * overriden them.1377     *1378     * @param template The template to process whose start/end tags may be replaced.1379     * @returns {*}1380     */1381    processTemplate: function(template) {1382      if (usesStandardSymbols) {1383        return template;1384      } else {1385        if (!template || !angular.isString(template)) return template;1386        return template.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);1387      }1388    },1389    /**1390     * Scan up dom hierarchy for enabled parent;1391     */1392    getParentWithPointerEvents: function (element) {1393      var parent = element.parent();1394      // jqLite might return a non-null, but still empty, parent; so check for parent and length1395      while (hasComputedStyle(parent, 'pointer-events', 'none')) {1396        parent = parent.parent();1397      }1398      return parent;1399    },1400    getNearestContentElement: function (element) {1401      var current = element.parent()[0];1402      // Look for the nearest parent md-content, stopping at the rootElement.1403      while (current && current !== $rootElement[0] && current !== document.body && current.nodeName.toUpperCase() !== 'MD-CONTENT') {1404        current = current.parentNode;1405      }1406      return current;1407    },1408    /**1409     * Checks if the current browser is natively supporting the `sticky` position.1410     * @returns {string} supported sticky property name1411     */1412    checkStickySupport: function() {1413      var stickyProp;1414      var testEl = angular.element('<div>');1415      $document[0].body.appendChild(testEl[0]);1416      var stickyProps = ['sticky', '-webkit-sticky'];1417      for (var i = 0; i < stickyProps.length; ++i) {1418        testEl.css({1419          position: stickyProps[i],1420          top: 0,1421          'z-index': 21422        });1423        if (testEl.css('position') == stickyProps[i]) {1424          stickyProp = stickyProps[i];1425          break;1426        }1427      }1428      testEl.remove();1429      return stickyProp;1430    },1431    /**1432     * Parses an attribute value, mostly a string.1433     * By default checks for negated values and returns `falseÂ´ if present.1434     * Negated values are: (native falsy) and negative strings like:1435     * `false` or `0`.1436     * @param value Attribute value which should be parsed.1437     * @param negatedCheck When set to false, won't check for negated values.1438     * @returns {boolean}1439     */1440    parseAttributeBoolean: function(value, negatedCheck) {1441      return value === '' || !!value && (negatedCheck === false || value !== 'false' && value !== '0');1442    },1443    hasComputedStyle: hasComputedStyle,1444    /**1445     * Returns true if the parent form of the element has been submitted.1446     *1447     * @param element An Angular or HTML5 element.1448     *1449     * @returns {boolean}1450     */1451    isParentFormSubmitted: function(element) {1452      var parent = $mdUtil.getClosest(element, 'form');1453      var form = parent ? angular.element(parent).controller('form') : null;1454      return form ? form.$submitted : false;1455    },1456    /**1457     * Animate the requested element's scrollTop to the requested scrollPosition with basic easing.1458     *1459     * @param element The element to scroll.1460     * @param scrollEnd The new/final scroll position.1461     */1462    animateScrollTo: function(element, scrollEnd) {1463      var scrollStart = element.scrollTop;1464      var scrollChange = scrollEnd - scrollStart;1465      var scrollingDown = scrollStart < scrollEnd;1466      var startTime = $mdUtil.now();1467      $$rAF(scrollChunk);1468      function scrollChunk() {1469        var newPosition = calculateNewPosition();1470        1471        element.scrollTop = newPosition;1472        1473        if (scrollingDown ? newPosition < scrollEnd : newPosition > scrollEnd) {1474          $$rAF(scrollChunk);1475        }1476      }1477      1478      function calculateNewPosition() {1479        var duration = 1000;1480        var currentTime = $mdUtil.now() - startTime;1481        1482        return ease(currentTime, scrollStart, scrollChange, duration);1483      }1484      function ease(currentTime, start, change, duration) {1485        // If the duration has passed (which can occur if our app loses focus due to $$rAF), jump1486        // straight to the proper position1487        if (currentTime > duration) {1488          return start + change;1489        }1490        1491        var ts = (currentTime /= duration) * currentTime;1492        var tc = ts * currentTime;1493        return start + change * (-2 * tc + 3 * ts);1494      }1495    }1496  };1497// Instantiate other namespace utility methods1498  $mdUtil.dom.animator = $$mdAnimate($mdUtil);1499  return $mdUtil;1500  function getNode(el) {1501    return el[0] || el;1502  }1503}1504/*1505 * Since removing jQuery from the demos, some code that uses `element.focus()` is broken.1506 * We need to add `element.focus()`, because it's testable unlike `element[0].focus`.1507 */1508angular.element.prototype.focus = angular.element.prototype.focus || function() {1509    if (this.length) {1510      this[0].focus();1511    }1512    return this;1513  };1514angular.element.prototype.blur = angular.element.prototype.blur || function() {1515    if (this.length) {1516      this[0].blur();1517    }1518    return this;1519  };1520/**1521 * @ngdoc module1522 * @name material.core.aria1523 * @description1524 * Aria Expectations for ngMaterial components.1525 */1526MdAriaService.$inject = ["$$rAF", "$log", "$window", "$interpolate"];1527angular1528  .module('material.core')1529  .provider('$mdAria', MdAriaProvider);1530/**1531 * @ngdoc service1532 * @name $mdAriaProvider1533 * @module material.core.aria1534 *1535 * @description1536 *1537 * Modify options of the `$mdAria` service, which will be used by most of the Angular Material1538 * components.1539 *1540 * You are able to disable `$mdAria` warnings, by using the following markup.1541 *1542 * <hljs lang="js">1543 *   app.config(function($mdAriaProvider) {1544 *     // Globally disables all ARIA warnings.1545 *     $mdAriaProvider.disableWarnings();1546 *   });1547 * </hljs>1548 *1549 */1550function MdAriaProvider() {1551  var self = this;1552  /**1553   * Whether we should show ARIA warnings in the console, if labels are missing on the element1554   * By default the warnings are enabled1555   */1556  self.showWarnings = true;1557  return {1558    disableWarnings: disableWarnings,1559    $get: ["$$rAF", "$log", "$window", "$interpolate", function($$rAF, $log, $window, $interpolate) {1560      return MdAriaService.apply(self, arguments);1561    }]1562  };1563  /**1564   * @ngdoc method1565   * @name $mdAriaProvider#disableWarnings1566   * @description Disables all ARIA warnings generated by Angular Material.1567   */1568  function disableWarnings() {1569    self.showWarnings = false;1570  }1571}1572/*1573 * ngInject1574 */1575function MdAriaService($$rAF, $log, $window, $interpolate) {1576  // Load the showWarnings option from the current context and store it inside of a scope variable,1577  // because the context will be probably lost in some function calls.1578  var showWarnings = this.showWarnings;1579  return {1580    expect: expect,1581    expectAsync: expectAsync,1582    expectWithText: expectWithText,1583    expectWithoutText: expectWithoutText1584  };1585  /**1586   * Check if expected attribute has been specified on the target element or child1587   * @param element1588   * @param attrName1589   * @param {optional} defaultValue What to set the attr to if no value is found1590   */1591  function expect(element, attrName, defaultValue) {1592    var node = angular.element(element)[0] || element;1593    // if node exists and neither it nor its children have the attribute1594    if (node &&1595       ((!node.hasAttribute(attrName) ||1596        node.getAttribute(attrName).length === 0) &&1597        !childHasAttribute(node, attrName))) {1598      defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';1599      if (defaultValue.length) {1600        element.attr(attrName, defaultValue);1601      } else if (showWarnings) {1602        $log.warn('ARIA: Attribute "', attrName, '", required for accessibility, is missing on node:', node);1603      }1604    }1605  }1606  function expectAsync(element, attrName, defaultValueGetter) {1607    // Problem: when retrieving the element's contents synchronously to find the label,1608    // the text may not be defined yet in the case of a binding.1609    // There is a higher chance that a binding will be defined if we wait one frame.1610    $$rAF(function() {1611        expect(element, attrName, defaultValueGetter());1612    });1613  }1614  function expectWithText(element, attrName) {1615    var content = getText(element) || "";1616    var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;1617    if ( hasBinding ) {1618      expectAsync(element, attrName, function() {1619        return getText(element);1620      });1621    } else {1622      expect(element, attrName, content);1623    }1624  }1625  function expectWithoutText(element, attrName) {1626    var content = getText(element);1627    var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;1628    if ( !hasBinding && !content) {1629      expect(element, attrName, content);1630    }1631  }1632  function getText(element) {1633    element = element[0] || element;1634    var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);1635    var text = '';1636    var node;1637    while (node = walker.nextNode()) {1638      if (!isAriaHiddenNode(node)) {1639        text += node.textContent;1640      }1641    }1642    return text.trim() || '';1643    function isAriaHiddenNode(node) {1644      while (node.parentNode && (node = node.parentNode) !== element) {1645        if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {1646          return true;1647        }1648      }1649    }1650  }1651  function childHasAttribute(node, attrName) {1652    var hasChildren = node.hasChildNodes(),1653        hasAttr = false;1654    function isHidden(el) {1655      var style = el.currentStyle ? el.currentStyle : $window.getComputedStyle(el);1656      return (style.display === 'none');1657    }1658    if (hasChildren) {1659      var children = node.childNodes;1660      for (var i=0; i < children.length; i++) {1661        var child = children[i];1662        if (child.nodeType === 1 && child.hasAttribute(attrName)) {1663          if (!isHidden(child)) {1664            hasAttr = true;1665          }1666        }1667      }1668    }1669    return hasAttr;1670  }1671}1672mdCompilerService.$inject = ["$q", "$templateRequest", "$injector", "$compile", "$controller"];angular1673  .module('material.core')1674  .service('$mdCompiler', mdCompilerService);1675function mdCompilerService($q, $templateRequest, $injector, $compile, $controller) {1676  /* jshint validthis: true */1677  /*1678   * @ngdoc service1679   * @name $mdCompiler1680   * @module material.core1681   * @description1682   * The $mdCompiler service is an abstraction of angular's compiler, that allows the developer1683   * to easily compile an element with a templateUrl, controller, and locals.1684   *1685   * @usage1686   * <hljs lang="js">1687   * $mdCompiler.compile({1688   *   templateUrl: 'modal.html',1689   *   controller: 'ModalCtrl',1690   *   locals: {1691   *     modal: myModalInstance;1692   *   }1693   * }).then(function(compileData) {1694   *   compileData.element; // modal.html's template in an element1695   *   compileData.link(myScope); //attach controller & scope to element1696   * });1697   * </hljs>1698   */1699   /*1700    * @ngdoc method1701    * @name $mdCompiler#compile1702    * @description A helper to compile an HTML template/templateUrl with a given controller,1703    * locals, and scope.1704    * @param {object} options An options object, with the following properties:1705    *1706    *    - `controller` - `{(string=|function()=}` Controller fn that should be associated with1707    *      newly created scope or the name of a registered controller if passed as a string.1708    *    - `controllerAs` - `{string=}` A controller alias name. If present the controller will be1709    *      published to scope under the `controllerAs` name.1710    *    - `template` - `{string=}` An html template as a string.1711    *    - `templateUrl` - `{string=}` A path to an html template.1712    *    - `transformTemplate` - `{function(template)=}` A function which transforms the template after1713    *      it is loaded. It will be given the template string as a parameter, and should1714    *      return a a new string representing the transformed template.1715    *    - `resolve` - `{Object.<string, function>=}` - An optional map of dependencies which should1716    *      be injected into the controller. If any of these dependencies are promises, the compiler1717    *      will wait for them all to be resolved, or if one is rejected before the controller is1718    *      instantiated `compile()` will fail..1719    *      * `key` - `{string}`: a name of a dependency to be injected into the controller.1720    *      * `factory` - `{string|function}`: If `string` then it is an alias for a service.1721    *        Otherwise if function, then it is injected and the return value is treated as the1722    *        dependency. If the result is a promise, it is resolved before its value is1723    *        injected into the controller.1724    *1725    * @returns {object=} promise A promise, which will be resolved with a `compileData` object.1726    * `compileData` has the following properties:1727    *1728    *   - `element` - `{element}`: an uncompiled element matching the provided template.1729    *   - `link` - `{function(scope)}`: A link function, which, when called, will compile1730    *     the element and instantiate the provided controller (if given).1731    *   - `locals` - `{object}`: The locals which will be passed into the controller once `link` is1732    *     called. If `bindToController` is true, they will be coppied to the ctrl instead1733    *   - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in.1734    */1735  this.compile = function(options) {1736    var templateUrl = options.templateUrl;1737    var template = options.template || '';1738    var controller = options.controller;1739    var controllerAs = options.controllerAs;1740    var resolve = angular.extend({}, options.resolve || {});1741    var locals = angular.extend({}, options.locals || {});1742    var transformTemplate = options.transformTemplate || angular.identity;1743    var bindToController = options.bindToController;1744    // Take resolve values and invoke them.1745    // Resolves can either be a string (value: 'MyRegisteredAngularConst'),1746    // or an invokable 'factory' of sorts: (value: function ValueGetter($dependency) {})1747    angular.forEach(resolve, function(value, key) {1748      if (angular.isString(value)) {1749        resolve[key] = $injector.get(value);1750      } else {1751        resolve[key] = $injector.invoke(value);1752      }1753    });1754    //Add the locals, which are just straight values to inject1755    //eg locals: { three: 3 }, will inject three into the controller1756    angular.extend(resolve, locals);1757    if (templateUrl) {1758      resolve.$template = $templateRequest(templateUrl)1759        .then(function(response) {1760          return response;1761        });1762    } else {1763      resolve.$template = $q.when(template);1764    }1765    // Wait for all the resolves to finish if they are promises1766    return $q.all(resolve).then(function(locals) {1767      var compiledData;1768      var template = transformTemplate(locals.$template, options);1769      var element = options.element || angular.element('<div>').html(template.trim()).contents();1770      var linkFn = $compile(element);1771      // Return a linking function that can be used later when the element is ready1772      return compiledData = {1773        locals: locals,1774        element: element,1775        link: function link(scope) {1776          locals.$scope = scope;1777          //Instantiate controller if it exists, because we have scope1778          if (controller) {1779            var invokeCtrl = $controller(controller, locals, true, controllerAs);1780            if (bindToController) {1781              angular.extend(invokeCtrl.instance, locals);1782            }1783            var ctrl = invokeCtrl();1784            //See angular-route source for this logic1785            element.data('$ngControllerController', ctrl);1786            element.children().data('$ngControllerController', ctrl);1787            // Publish reference to this controller1788            compiledData.controller = ctrl;1789          }1790          return linkFn(scope);1791        }1792      };1793    });1794  };1795}1796MdGesture.$inject = ["$$MdGestureHandler", "$$rAF", "$timeout"];1797attachToDocument.$inject = ["$mdGesture", "$$MdGestureHandler"];var HANDLERS = {};1798/* The state of the current 'pointer'1799 * The pointer represents the state of the current touch.1800 * It contains normalized x and y coordinates from DOM events,1801 * as well as other information abstracted from the DOM.1802 */1803var pointer, lastPointer, forceSkipClickHijack = false;1804/**1805 * The position of the most recent click if that click was on a label element.1806 * @type {{x: number, y: number}?}1807 */1808var lastLabelClickPos = null;1809// Used to attach event listeners once when multiple ng-apps are running.1810var isInitialized = false;1811angular1812  .module('material.core.gestures', [ ])1813  .provider('$mdGesture', MdGestureProvider)1814  .factory('$$MdGestureHandler', MdGestureHandler)1815  .run( attachToDocument );1816/**1817   * @ngdoc service1818   * @name $mdGestureProvider1819   * @module material.core.gestures1820   *1821   * @description1822   * In some scenarios on Mobile devices (without jQuery), the click events should NOT be hijacked.1823   * `$mdGestureProvider` is used to configure the Gesture module to ignore or skip click hijacking on mobile1824   * devices.1825   *1826   * <hljs lang="js">1827   *   app.config(function($mdGestureProvider) {1828   *1829   *     // For mobile devices without jQuery loaded, do not1830   *     // intercept click events during the capture phase.1831   *     $mdGestureProvider.skipClickHijack();1832   *1833   *   });1834   * </hljs>1835   *1836   */1837function MdGestureProvider() { }1838MdGestureProvider.prototype = {1839  // Publish access to setter to configure a variable  BEFORE the1840  // $mdGesture service is instantiated...1841  skipClickHijack: function() {1842    return forceSkipClickHijack = true;1843  },1844  /**1845   * $get is used to build an instance of $mdGesture1846   * ngInject1847   */1848  $get : ["$$MdGestureHandler", "$$rAF", "$timeout", function($$MdGestureHandler, $$rAF, $timeout) {1849       return new MdGesture($$MdGestureHandler, $$rAF, $timeout);1850  }]1851};1852/**1853 * MdGesture factory construction function1854 * ngInject1855 */1856function MdGesture($$MdGestureHandler, $$rAF, $timeout) {1857  var userAgent = navigator.userAgent || navigator.vendor || window.opera;1858  var isIos = userAgent.match(/ipad|iphone|ipod/i);1859  var isAndroid = userAgent.match(/android/i);1860  var touchActionProperty = getTouchAction();1861  var hasJQuery =  (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);1862  var self = {1863    handler: addHandler,1864    register: register,1865    isIos: isIos,1866    isAndroid: isAndroid,1867    // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?1868    isHijackingClicks: (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack1869  };1870  if (self.isHijackingClicks) {1871    var maxClickDistance = 6;1872    self.handler('click', {1873      options: {1874        maxDistance: maxClickDistance1875      },1876      onEnd: checkDistanceAndEmit('click')1877    });1878    self.handler('focus', {1879      options: {1880        maxDistance: maxClickDistance1881      },1882      onEnd: function(ev, pointer) {1883        if (pointer.distance < this.state.options.maxDistance) {1884          if (canFocus(ev.target)) {1885            this.dispatchEvent(ev, 'focus', pointer);1886            ev.target.focus();1887          }1888        }1889        function canFocus(element) {1890          var focusableElements = ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA', 'VIDEO', 'AUDIO'];1891          return (element.getAttribute('tabindex') != '-1') &&1892              !element.hasAttribute('DISABLED') &&1893              (element.hasAttribute('tabindex') || element.hasAttribute('href') || element.isContentEditable ||1894              (focusableElements.indexOf(element.nodeName) != -1));1895        }1896      }1897    });1898    self.handler('mouseup', {1899      options: {1900        maxDistance: maxClickDistance1901      },1902      onEnd: checkDistanceAndEmit('mouseup')1903    });1904    self.handler('mousedown', {1905      onStart: function(ev) {1906        this.dispatchEvent(ev, 'mousedown');1907      }1908    });1909  }1910  function checkDistanceAndEmit(eventName) {1911    return function(ev, pointer) {1912      if (pointer.distance < this.state.options.maxDistance) {1913        this.dispatchEvent(ev, eventName, pointer);1914      }1915    };1916  }1917  /*1918   * Register an element to listen for a handler.1919   * This allows an element to override the default options for a handler.1920   * Additionally, some handlers like drag and hold only dispatch events if1921   * the domEvent happens inside an element that's registered to listen for these events.1922   *1923   * @see GestureHandler for how overriding of default options works.1924   * @example $mdGesture.register(myElement, 'drag', { minDistance: 20, horziontal: false })1925   */1926  function register(element, handlerName, options) {1927    var handler = HANDLERS[handlerName.replace(/^\$md./, '')];1928    if (!handler) {1929      throw new Error('Failed to register element with handler ' + handlerName + '. ' +1930      'Available handlers: ' + Object.keys(HANDLERS).join(', '));1931    }1932    return handler.registerElement(element, options);1933  }1934  /*1935   * add a handler to $mdGesture. see below.1936   */1937  function addHandler(name, definition) {1938    var handler = new $$MdGestureHandler(name);1939    angular.extend(handler, definition);1940    HANDLERS[name] = handler;1941    return self;1942  }1943  /*1944   * Register handlers. These listen to touch/start/move events, interpret them,1945   * and dispatch gesture events depending on options & conditions. These are all1946   * instances of GestureHandler.1947   * @see GestureHandler1948   */1949  return self1950    /*1951     * The press handler dispatches an event on touchdown/touchend.1952     * It's a simple abstraction of touch/mouse/pointer start and end.1953     */1954    .handler('press', {1955      onStart: function (ev, pointer) {1956        this.dispatchEvent(ev, '$md.pressdown');1957      },1958      onEnd: function (ev, pointer) {1959        this.dispatchEvent(ev, '$md.pressup');1960      }1961    })1962    /*1963     * The hold handler dispatches an event if the user keeps their finger within1964     * the same <maxDistance> area for <delay> ms.1965     * The hold handler will only run if a parent of the touch target is registered1966     * to listen for hold events through $mdGesture.register()1967     */1968    .handler('hold', {1969      options: {1970        maxDistance: 6,1971        delay: 5001972      },1973      onCancel: function () {1974        $timeout.cancel(this.state.timeout);1975      },1976      onStart: function (ev, pointer) {1977        // For hold, require a parent to be registered with $mdGesture.register()1978        // Because we prevent scroll events, this is necessary.1979        if (!this.state.registeredParent) return this.cancel();1980        this.state.pos = {x: pointer.x, y: pointer.y};1981        this.state.timeout = $timeout(angular.bind(this, function holdDelayFn() {1982          this.dispatchEvent(ev, '$md.hold');1983          this.cancel(); //we're done!1984        }), this.state.options.delay, false);1985      },1986      onMove: function (ev, pointer) {1987        // Don't scroll while waiting for hold.1988        // If we don't preventDefault touchmove events here, Android will assume we don't1989        // want to listen to anymore touch events. It will start scrolling and stop sending1990        // touchmove events.1991        if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();1992        // If the user moves greater than <maxDistance> pixels, stop the hold timer1993        // set in onStart1994        var dx = this.state.pos.x - pointer.x;1995        var dy = this.state.pos.y - pointer.y;1996        if (Math.sqrt(dx * dx + dy * dy) > this.options.maxDistance) {1997          this.cancel();1998        }1999      },2000      onEnd: function () {2001        this.onCancel();2002      }2003    })2004    /*2005     * The drag handler dispatches a drag event if the user holds and moves his finger greater than2006     * <minDistance> px in the x or y direction, depending on options.horizontal.2007     * The drag will be cancelled if the user moves his finger greater than <minDistance>*<cancelMultiplier> in2008     * the perpendicular direction. Eg if the drag is horizontal and the user moves his finger <minDistance>*<cancelMultiplier>2009     * pixels vertically, this handler won't consider the move part of a drag.2010     */2011    .handler('drag', {2012      options: {2013        minDistance: 6,2014        horizontal: true,2015        cancelMultiplier: 1.52016      },2017      onSetup: function(element, options) {2018        if (touchActionProperty) {2019          // We check for horizontal to be false, because otherwise we would overwrite the default opts.2020          this.oldTouchAction = element[0].style[touchActionProperty];2021          element[0].style[touchActionProperty] = options.horizontal === false ? 'pan-y' : 'pan-x';2022        }2023      },2024      onCleanup: function(element) {2025        if (this.oldTouchAction) {2026          element[0].style[touchActionProperty] = this.oldTouchAction;2027        }2028      },2029      onStart: function (ev) {2030        // For drag, require a parent to be registered with $mdGesture.register()2031        if (!this.state.registeredParent) this.cancel();2032      },2033      onMove: function (ev, pointer) {2034        var shouldStartDrag, shouldCancel;2035        // Don't scroll while deciding if this touchmove qualifies as a drag event.2036        // If we don't preventDefault touchmove events here, Android will assume we don't2037        // want to listen to anymore touch events. It will start scrolling and stop sending2038        // touchmove events.2039        if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();2040        if (!this.state.dragPointer) {2041          if (this.state.options.horizontal) {2042            shouldStartDrag = Math.abs(pointer.distanceX) > this.state.options.minDistance;2043            shouldCancel = Math.abs(pointer.distanceY) > this.state.options.minDistance * this.state.options.cancelMultiplier;2044          } else {2045            shouldStartDrag = Math.abs(pointer.distanceY) > this.state.options.minDistance;2046            shouldCancel = Math.abs(pointer.distanceX) > this.state.options.minDistance * this.state.options.cancelMultiplier;2047          }2048          if (shouldStartDrag) {2049            // Create a new pointer representing this drag, starting at this point where the drag started.2050            this.state.dragPointer = makeStartPointer(ev);2051            updatePointerState(ev, this.state.dragPointer);2052            this.dispatchEvent(ev, '$md.dragstart', this.state.dragPointer);2053          } else if (shouldCancel) {2054            this.cancel();2055          }2056        } else {2057          this.dispatchDragMove(ev);2058        }2059      },2060      // Only dispatch dragmove events every frame; any more is unnecessary2061      dispatchDragMove: $$rAF.throttle(function (ev) {2062        // Make sure the drag didn't stop while waiting for the next frame2063        if (this.state.isRunning) {2064          updatePointerState(ev, this.state.dragPointer);2065          this.dispatchEvent(ev, '$md.drag', this.state.dragPointer);2066        }2067      }),2068      onEnd: function (ev, pointer) {2069        if (this.state.dragPointer) {2070          updatePointerState(ev, this.state.dragPointer);2071          this.dispatchEvent(ev, '$md.dragend', this.state.dragPointer);2072        }2073      }2074    })2075    /*2076     * The swipe handler will dispatch a swipe event if, on the end of a touch,2077     * the velocity and distance were high enough.2078     */2079    .handler('swipe', {2080      options: {2081        minVelocity: 0.65,2082        minDistance: 102083      },2084      onEnd: function (ev, pointer) {2085        var eventType;2086        if (Math.abs(pointer.velocityX) > this.state.options.minVelocity &&2087          Math.abs(pointer.distanceX) > this.state.options.minDistance) {2088          eventType = pointer.directionX == 'left' ? '$md.swipeleft' : '$md.swiperight';2089          this.dispatchEvent(ev, eventType);2090        }2091        else if (Math.abs(pointer.velocityY) > this.state.options.minVelocity &&2092          Math.abs(pointer.distanceY) > this.state.options.minDistance) {2093          eventType = pointer.directionY == 'up' ? '$md.swipeup' : '$md.swipedown';2094          this.dispatchEvent(ev, eventType);2095        }2096      }2097    });2098  function getTouchAction() {2099    var testEl = document.createElement('div');2100    var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];2101    for (var i = 0; i < vendorPrefixes.length; i++) {2102      var prefix = vendorPrefixes[i];2103      var property = prefix ? prefix + 'TouchAction' : 'touchAction';2104      if (angular.isDefined(testEl.style[property])) {2105        return property;2106      }2107    }2108  }2109}2110/**2111 * MdGestureHandler2112 * A GestureHandler is an object which is able to dispatch custom dom events2113 * based on native dom {touch,pointer,mouse}{start,move,end} events.2114 *2115 * A gesture will manage its lifecycle through the start,move,end, and cancel2116 * functions, which are called by native dom events.2117 *2118 * A gesture has the concept of 'options' (eg a swipe's required velocity), which can be2119 * overridden by elements registering through $mdGesture.register()2120 */2121function GestureHandler (name) {2122  this.name = name;2123  this.state = {};2124}2125function MdGestureHandler() {2126  var hasJQuery =  (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);2127  GestureHandler.prototype = {2128    options: {},2129    // jQuery listeners don't work with custom DOMEvents, so we have to dispatch events2130    // differently when jQuery is loaded2131    dispatchEvent: hasJQuery ?  jQueryDispatchEvent : nativeDispatchEvent,2132    // These are overridden by the registered handler2133    onSetup: angular.noop,2134    onCleanup: angular.noop,2135    onStart: angular.noop,2136    onMove: angular.noop,2137    onEnd: angular.noop,2138    onCancel: angular.noop,2139    // onStart sets up a new state for the handler, which includes options from the2140    // nearest registered parent element of ev.target.2141    start: function (ev, pointer) {2142      if (this.state.isRunning) return;2143      var parentTarget = this.getNearestParent(ev.target);2144      // Get the options from the nearest registered parent2145      var parentTargetOptions = parentTarget && parentTarget.$mdGesture[this.name] || {};2146      this.state = {2147        isRunning: true,2148        // Override the default options with the nearest registered parent's options2149        options: angular.extend({}, this.options, parentTargetOptions),2150        // Pass in the registered parent node to the state so the onStart listener can use2151        registeredParent: parentTarget2152      };2153      this.onStart(ev, pointer);2154    },2155    move: function (ev, pointer) {2156      if (!this.state.isRunning) return;2157      this.onMove(ev, pointer);2158    },2159    end: function (ev, pointer) {2160      if (!this.state.isRunning) return;2161      this.onEnd(ev, pointer);2162      this.state.isRunning = false;2163    },2164    cancel: function (ev, pointer) {2165      this.onCancel(ev, pointer);2166      this.state = {};2167    },2168    // Find and return the nearest parent element that has been registered to2169    // listen for this handler via $mdGesture.register(element, 'handlerName').2170    getNearestParent: function (node) {2171      var current = node;2172      while (current) {2173        if ((current.$mdGesture || {})[this.name]) {2174          return current;2175        }2176        current = current.parentNode;2177      }2178      return null;2179    },2180    // Called from $mdGesture.register when an element registers itself with a handler.2181    // Store the options the user gave on the DOMElement itself. These options will2182    // be retrieved with getNearestParent when the handler starts.2183    registerElement: function (element, options) {2184      var self = this;2185      element[0].$mdGesture = element[0].$mdGesture || {};2186      element[0].$mdGesture[this.name] = options || {};2187      element.on('$destroy', onDestroy);2188      self.onSetup(element, options || {});2189      return onDestroy;2190      function onDestroy() {2191        delete element[0].$mdGesture[self.name];2192        element.off('$destroy', onDestroy);2193        self.onCleanup(element, options || {});2194      }2195    }2196  };2197  return GestureHandler;2198  /*2199   * Dispatch an event with jQuery2200   * TODO: Make sure this sends bubbling events2201   *2202   * @param srcEvent the original DOM touch event that started this.2203   * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')2204   * @param eventPointer the pointer object that matches this event.2205   */2206  function jQueryDispatchEvent(srcEvent, eventType, eventPointer) {2207    eventPointer = eventPointer || pointer;2208    var eventObj = new angular.element.Event(eventType);2209    eventObj.$material = true;2210    eventObj.pointer = eventPointer;2211    eventObj.srcEvent = srcEvent;2212    angular.extend(eventObj, {2213      clientX: eventPointer.x,2214      clientY: eventPointer.y,2215      screenX: eventPointer.x,2216      screenY: eventPointer.y,2217      pageX: eventPointer.x,2218      pageY: eventPointer.y,2219      ctrlKey: srcEvent.ctrlKey,2220      altKey: srcEvent.altKey,2221      shiftKey: srcEvent.shiftKey,2222      metaKey: srcEvent.metaKey2223    });2224    angular.element(eventPointer.target).trigger(eventObj);2225  }2226  /*2227   * NOTE: nativeDispatchEvent is very performance sensitive.2228   * @param srcEvent the original DOM touch event that started this.2229   * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')2230   * @param eventPointer the pointer object that matches this event.2231   */2232  function nativeDispatchEvent(srcEvent, eventType, eventPointer) {2233    eventPointer = eventPointer || pointer;2234    var eventObj;2235    if (eventType === 'click' || eventType == 'mouseup' || eventType == 'mousedown' ) {2236      eventObj = document.createEvent('MouseEvents');2237      eventObj.initMouseEvent(2238        eventType, true, true, window, srcEvent.detail,2239        eventPointer.x, eventPointer.y, eventPointer.x, eventPointer.y,2240        srcEvent.ctrlKey, srcEvent.altKey, srcEvent.shiftKey, srcEvent.metaKey,2241        srcEvent.button, srcEvent.relatedTarget || null2242      );2243    } else {2244      eventObj = document.createEvent('CustomEvent');2245      eventObj.initCustomEvent(eventType, true, true, {});2246    }2247    eventObj.$material = true;2248    eventObj.pointer = eventPointer;2249    eventObj.srcEvent = srcEvent;2250    eventPointer.target.dispatchEvent(eventObj);2251  }2252}2253/**2254 * Attach Gestures: hook document and check shouldHijack clicks2255 * ngInject2256 */2257function attachToDocument( $mdGesture, $$MdGestureHandler ) {2258  // Polyfill document.contains for IE11.2259  // TODO: move to util2260  document.contains || (document.contains = function (node) {2261    return document.body.contains(node);2262  });2263  if (!isInitialized && $mdGesture.isHijackingClicks ) {2264    /*2265     * If hijack clicks is true, we preventDefault any click that wasn't2266     * sent by ngMaterial. This is because on older Android & iOS, a false, or 'ghost',2267     * click event will be sent ~400ms after a touchend event happens.2268     * The only way to know if this click is real is to prevent any normal2269     * click events, and add a flag to events sent by material so we know not to prevent those.2270     *2271     * Two exceptions to click events that should be prevented are:2272     *  - click events sent by the keyboard (eg form submit)2273     *  - events that originate from an Ionic app2274     */2275    document.addEventListener('click'    , clickHijacker     , true);2276    document.addEventListener('mouseup'  , mouseInputHijacker, true);2277    document.addEventListener('mousedown', mouseInputHijacker, true);2278    document.addEventListener('focus'    , mouseInputHijacker, true);2279    isInitialized = true;2280  }2281  function mouseInputHijacker(ev) {2282    var isKeyClick = !ev.clientX && !ev.clientY;2283    if (!isKeyClick && !ev.$material && !ev.isIonicTap2284      && !isInputEventFromLabelClick(ev)) {2285      ev.preventDefault();2286      ev.stopPropagation();2287    }2288  }2289  function clickHijacker(ev) {2290    var isKeyClick = ev.clientX === 0 && ev.clientY === 0;2291    if (!isKeyClick && !ev.$material && !ev.isIonicTap2292      && !isInputEventFromLabelClick(ev)) {2293      ev.preventDefault();2294      ev.stopPropagation();2295      lastLabelClickPos = null;2296    } else {2297      lastLabelClickPos = null;2298      if (ev.target.tagName.toLowerCase() == 'label') {2299        lastLabelClickPos = {x: ev.x, y: ev.y};2300      }2301    }2302  }2303  // Listen to all events to cover all platforms.2304  var START_EVENTS = 'mousedown touchstart pointerdown';2305  var MOVE_EVENTS = 'mousemove touchmove pointermove';2306  var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';2307  angular.element(document)2308    .on(START_EVENTS, gestureStart)2309    .on(MOVE_EVENTS, gestureMove)2310    .on(END_EVENTS, gestureEnd)2311    // For testing2312    .on('$$mdGestureReset', function gestureClearCache () {2313      lastPointer = pointer = null;2314    });2315  /*2316   * When a DOM event happens, run all registered gesture handlers' lifecycle2317   * methods which match the DOM event.2318   * Eg when a 'touchstart' event happens, runHandlers('start') will call and2319   * run `handler.cancel()` and `handler.start()` on all registered handlers.2320   */2321  function runHandlers(handlerEvent, event) {2322    var handler;2323    for (var name in HANDLERS) {2324      handler = HANDLERS[name];2325      if( handler instanceof $$MdGestureHandler ) {2326        if (handlerEvent === 'start') {2327          // Run cancel to reset any handlers' state2328          handler.cancel();2329        }2330        handler[handlerEvent](event, pointer);2331      }2332    }2333  }2334  /*2335   * gestureStart vets if a start event is legitimate (and not part of a 'ghost click' from iOS/Android)2336   * If it is legitimate, we initiate the pointer state and mark the current pointer's type2337   * For example, for a touchstart event, mark the current pointer as a 'touch' pointer, so mouse events2338   * won't effect it.2339   */2340  function gestureStart(ev) {2341    // If we're already touched down, abort2342    if (pointer) return;2343    var now = +Date.now();2344    // iOS & old android bug: after a touch event, a click event is sent 350 ms later.2345    // If <400ms have passed, don't allow an event of a different type than the previous event2346    if (lastPointer && !typesMatch(ev, lastPointer) && (now - lastPointer.endTime < 1500)) {2347      return;2348    }2349    pointer = makeStartPointer(ev);2350    runHandlers('start', ev);2351  }2352  /*2353   * If a move event happens of the right type, update the pointer and run all the move handlers.2354   * "of the right type": if a mousemove happens but our pointer started with a touch event, do nothing.2355   */2356  function gestureMove(ev) {2357    if (!pointer || !typesMatch(ev, pointer)) return;2358    updatePointerState(ev, pointer);2359    runHandlers('move', ev);2360  }2361  /*2362   * If an end event happens of the right type, update the pointer, run endHandlers, and save the pointer as 'lastPointer'2363   */2364  function gestureEnd(ev) {2365    if (!pointer || !typesMatch(ev, pointer)) return;2366    updatePointerState(ev, pointer);2367    pointer.endTime = +Date.now();2368    runHandlers('end', ev);2369    lastPointer = pointer;2370    pointer = null;2371  }2372}2373// ********************2374// Module Functions2375// ********************2376/*2377 * Initiate the pointer. x, y, and the pointer's type.2378 */2379function makeStartPointer(ev) {2380  var point = getEventPoint(ev);2381  var startPointer = {2382    startTime: +Date.now(),2383    target: ev.target,2384    // 'p' for pointer events, 'm' for mouse, 't' for touch2385    type: ev.type.charAt(0)2386  };2387  startPointer.startX = startPointer.x = point.pageX;2388  startPointer.startY = startPointer.y = point.pageY;2389  return startPointer;2390}2391/*2392 * return whether the pointer's type matches the event's type.2393 * Eg if a touch event happens but the pointer has a mouse type, return false.2394 */2395function typesMatch(ev, pointer) {2396  return ev && pointer && ev.type.charAt(0) === pointer.type;2397}2398/**2399 * Gets whether the given event is an input event that was caused by clicking on an2400 * associated label element.2401 *2402 * This is necessary because the browser will, upon clicking on a label element, fire an2403 * *extra* click event on its associated input (if any). mdGesture is able to flag the label2404 * click as with `$material` correctly, but not the second input click.2405 *2406 * In order to determine whether an input event is from a label click, we compare the (x, y) for2407 * the event to the (x, y) for the most recent label click (which is cleared whenever a non-label2408 * click occurs). Unfortunately, there are no event properties that tie the input and the label2409 * together (such as relatedTarget).2410 *2411 * @param {MouseEvent} event2412 * @returns {boolean}2413 */2414function isInputEventFromLabelClick(event) {2415  return lastLabelClickPos2416      && lastLabelClickPos.x == event.x2417      && lastLabelClickPos.y == event.y;2418}2419/*2420 * Update the given pointer based upon the given DOMEvent.2421 * Distance, velocity, direction, duration, etc2422 */2423function updatePointerState(ev, pointer) {2424  var point = getEventPoint(ev);2425  var x = pointer.x = point.pageX;2426  var y = pointer.y = point.pageY;2427  pointer.distanceX = x - pointer.startX;2428  pointer.distanceY = y - pointer.startY;2429  pointer.distance = Math.sqrt(2430    pointer.distanceX * pointer.distanceX + pointer.distanceY * pointer.distanceY2431  );2432  pointer.directionX = pointer.distanceX > 0 ? 'right' : pointer.distanceX < 0 ? 'left' : '';2433  pointer.directionY = pointer.distanceY > 0 ? 'down' : pointer.distanceY < 0 ? 'up' : '';2434  pointer.duration = +Date.now() - pointer.startTime;2435  pointer.velocityX = pointer.distanceX / pointer.duration;2436  pointer.velocityY = pointer.distanceY / pointer.duration;2437}2438/*2439 * Normalize the point where the DOM event happened whether it's touch or mouse.2440 * @returns point event obj with pageX and pageY on it.2441 */2442function getEventPoint(ev) {2443  ev = ev.originalEvent || ev; // support jQuery events2444  return (ev.touches && ev.touches[0]) ||2445    (ev.changedTouches && ev.changedTouches[0]) ||2446    ev;2447}2448angular.module('material.core')2449  .provider('$$interimElement', InterimElementProvider);2450/*2451 * @ngdoc service2452 * @name $$interimElement2453 * @module material.core2454 *2455 * @description2456 *2457 * Factory that contructs `$$interimElement.$service` services.2458 * Used internally in material design for elements that appear on screen temporarily.2459 * The service provides a promise-like API for interacting with the temporary2460 * elements.2461 *2462 * ```js2463 * app.service('$mdToast', function($$interimElement) {2464 *   var $mdToast = $$interimElement(toastDefaultOptions);2465 *   return $mdToast;2466 * });2467 * ```2468 * @param {object=} defaultOptions Options used by default for the `show` method on the service.2469 *2470 * @returns {$$interimElement.$service}2471 *2472 */2473function InterimElementProvider() {2474  InterimElementFactory.$inject = ["$document", "$q", "$$q", "$rootScope", "$timeout", "$rootElement", "$animate", "$mdUtil", "$mdCompiler", "$mdTheming", "$injector"];2475  createInterimElementProvider.$get = InterimElementFactory;2476  return createInterimElementProvider;2477  /**2478   * Returns a new provider which allows configuration of a new interimElement2479   * service. Allows configuration of default options & methods for options,2480   * as well as configuration of 'preset' methods (eg dialog.basic(): basic is a preset method)2481   */2482  function createInterimElementProvider(interimFactoryName) {2483    factory.$inject = ["$$interimElement", "$injector"];2484    var EXPOSED_METHODS = ['onHide', 'onShow', 'onRemove'];2485    var customMethods = {};2486    var providerConfig = {2487      presets: {}2488    };2489    var provider = {2490      setDefaults: setDefaults,2491      addPreset: addPreset,2492      addMethod: addMethod,2493      $get: factory2494    };2495    /**2496     * all interim elements will come with the 'build' preset2497     */2498    provider.addPreset('build', {2499      methods: ['controller', 'controllerAs', 'resolve',2500        'template', 'templateUrl', 'themable', 'transformTemplate', 'parent']2501    });2502    return provider;2503    /**2504     * Save the configured defaults to be used when the factory is instantiated2505     */2506    function setDefaults(definition) {2507      providerConfig.optionsFactory = definition.options;2508      providerConfig.methods = (definition.methods || []).concat(EXPOSED_METHODS);2509      return provider;2510    }2511    /**2512     * Add a method to the factory that isn't specific to any interim element operations2513     */2514    function addMethod(name, fn) {2515      customMethods[name] = fn;2516      return provider;2517    }2518    /**2519     * Save the configured preset to be used when the factory is instantiated2520     */2521    function addPreset(name, definition) {2522      definition = definition || {};2523      definition.methods = definition.methods || [];2524      definition.options = definition.options || function() { return {}; };2525      if (/^cancel|hide|show$/.test(name)) {2526        throw new Error("Preset '" + name + "' in " + interimFactoryName + " is reserved!");2527      }2528      if (definition.methods.indexOf('_options') > -1) {2529        throw new Error("Method '_options' in " + interimFactoryName + " is reserved!");2530      }2531      providerConfig.presets[name] = {2532        methods: definition.methods.concat(EXPOSED_METHODS),2533        optionsFactory: definition.options,2534        argOption: definition.argOption2535      };2536      return provider;2537    }2538    function addPresetMethod(presetName, methodName, method) {2539      providerConfig.presets[presetName][methodName] = method;2540    }2541    /**2542     * Create a factory that has the given methods & defaults implementing interimElement2543     */2544    /* ngInject */2545    function factory($$interimElement, $injector) {2546      var defaultMethods;2547      var defaultOptions;2548      var interimElementService = $$interimElement();2549      /*2550       * publicService is what the developer will be using.2551       * It has methods hide(), cancel(), show(), build(), and any other2552       * presets which were set during the config phase.2553       */2554      var publicService = {2555        hide: interimElementService.hide,2556        cancel: interimElementService.cancel,2557        show: showInterimElement,2558        // Special internal method to destroy an interim element without animations2559        // used when navigation changes causes a $scope.$destroy() action2560        destroy : destroyInterimElement2561      };2562      defaultMethods = providerConfig.methods || [];2563      // This must be invoked after the publicService is initialized2564      defaultOptions = invokeFactory(providerConfig.optionsFactory, {});2565      // Copy over the simple custom methods2566      angular.forEach(customMethods, function(fn, name) {2567        publicService[name] = fn;2568      });2569      angular.forEach(providerConfig.presets, function(definition, name) {2570        var presetDefaults = invokeFactory(definition.optionsFactory, {});2571        var presetMethods = (definition.methods || []).concat(defaultMethods);2572        // Every interimElement built with a preset has a field called `$type`,2573        // which matches the name of the preset.2574        // Eg in preset 'confirm', options.$type === 'confirm'2575        angular.extend(presetDefaults, { $type: name });2576        // This creates a preset class which has setter methods for every2577        // method given in the `.addPreset()` function, as well as every2578        // method given in the `.setDefaults()` function.2579        //2580        // @example2581        // .setDefaults({2582        //   methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],2583        //   options: dialogDefaultOptions2584        // })2585        // .addPreset('alert', {2586        //   methods: ['title', 'ok'],2587        //   options: alertDialogOptions2588        // })2589        //2590        // Set values will be passed to the options when interimElement.show() is called.2591        function Preset(opts) {2592          this._options = angular.extend({}, presetDefaults, opts);2593        }2594        angular.forEach(presetMethods, function(name) {2595          Preset.prototype[name] = function(value) {2596            this._options[name] = value;2597            return this;2598          };2599        });2600        // Create shortcut method for one-linear methods2601        if (definition.argOption) {2602          var methodName = 'show' + name.charAt(0).toUpperCase() + name.slice(1);2603          publicService[methodName] = function(arg) {2604            var config = publicService[name](arg);2605            return publicService.show(config);2606          };2607        }2608        // eg $mdDialog.alert() will return a new alert preset2609        publicService[name] = function(arg) {2610          // If argOption is supplied, eg `argOption: 'content'`, then we assume2611          // if the argument is not an options object then it is the `argOption` option.2612          //2613          // @example `$mdToast.simple('hello')` // sets options.content to hello2614          //                                     // because argOption === 'content'2615          if (arguments.length && definition.argOption &&2616              !angular.isObject(arg) && !angular.isArray(arg))  {2617            return (new Preset())[definition.argOption](arg);2618          } else {2619            return new Preset(arg);2620          }2621        };2622      });2623      return publicService;2624      /**2625       *2626       */2627      function showInterimElement(opts) {2628        // opts is either a preset which stores its options on an _options field,2629        // or just an object made up of options2630        opts = opts || { };2631        if (opts._options) opts = opts._options;2632        return interimElementService.show(2633          angular.extend({}, defaultOptions, opts)2634        );2635      }2636      /**2637       *  Special method to hide and destroy an interimElement WITHOUT2638       *  any 'leave` or hide animations ( an immediate force hide/remove )2639       *2640       *  NOTE: This calls the onRemove() subclass method for each component...2641       *  which must have code to respond to `options.$destroy == true`2642       */2643      function destroyInterimElement(opts) {2644          return interimElementService.destroy(opts);2645      }2646      /**2647       * Helper to call $injector.invoke with a local of the factory name for2648       * this provider.2649       * If an $mdDialog is providing options for a dialog and tries to inject2650       * $mdDialog, a circular dependency error will happen.2651       * We get around that by manually injecting $mdDialog as a local.2652       */2653      function invokeFactory(factory, defaultVal) {2654        var locals = {};2655        locals[interimFactoryName] = publicService;2656        return $injector.invoke(factory || function() { return defaultVal; }, {}, locals);2657      }2658    }2659  }2660  /* ngInject */2661  function InterimElementFactory($document, $q, $$q, $rootScope, $timeout, $rootElement, $animate,2662                                 $mdUtil, $mdCompiler, $mdTheming, $injector ) {2663    return function createInterimElementService() {2664      var SHOW_CANCELLED = false;2665      /*2666       * @ngdoc service2667       * @name $$interimElement.$service2668       *2669       * @description2670       * A service used to control inserting and removing an element into the DOM.2671       *2672       */2673      var service, stack = [];2674      // Publish instance $$interimElement service;2675      // ... used as $mdDialog, $mdToast, $mdMenu, and $mdSelect2676      return service = {2677        show: show,2678        hide: hide,2679        cancel: cancel,2680        destroy : destroy,2681        $injector_: $injector2682      };2683      /*2684       * @ngdoc method2685       * @name $$interimElement.$service#show2686       * @kind function2687       *2688       * @description2689       * Adds the `$interimElement` to the DOM and returns a special promise that will be resolved or rejected2690       * with hide or cancel, respectively. To external cancel/hide, developers should use the2691       *2692       * @param {*} options is hashMap of settings2693       * @returns a Promise2694       *2695       */2696      function show(options) {2697        options = options || {};2698        var interimElement = new InterimElement(options || {});2699        // When an interim element is currently showing, we have to cancel it.2700        // Just hiding it, will resolve the InterimElement's promise, the promise should be2701        // rejected instead.2702        var hideExisting = !options.skipHide && stack.length ? service.cancel() : $q.when(true);2703        // This hide()s only the current interim element before showing the next, new one2704        // NOTE: this is not reversible (e.g. interim elements are not stackable)2705        hideExisting.finally(function() {2706          stack.push(interimElement);2707          interimElement2708            .show()2709            .catch(function( reason ) {2710              //$log.error("InterimElement.show() error: " + reason );2711              return reason;2712            });2713        });2714        // Return a promise that will be resolved when the interim2715        // element is hidden or cancelled...2716        return interimElement.deferred.promise;2717      }2718      /*2719       * @ngdoc method2720       * @name $$interimElement.$service#hide2721       * @kind function2722       *2723       * @description2724       * Removes the `$interimElement` from the DOM and resolves the promise returned from `show`2725       *2726       * @param {*} resolveParam Data to resolve the promise with2727       * @returns a Promise that will be resolved after the element has been removed.2728       *2729       */2730      function hide(reason, options) {2731        if ( !stack.length ) return $q.when(reason);2732        options = options || {};2733        if (options.closeAll) {2734          var promise = $q.all(stack.reverse().map(closeElement));2735          stack = [];2736          return promise;2737        } else if (options.closeTo !== undefined) {2738          return $q.all(stack.splice(options.closeTo).map(closeElement));2739        } else {2740          var interim = stack.pop();2741          return closeElement(interim);2742        }2743        function closeElement(interim) {2744          interim2745            .remove(reason, false, options || { })2746            .catch(function( reason ) {2747              //$log.error("InterimElement.hide() error: " + reason );2748              return reason;2749            });2750          return interim.deferred.promise;2751        }2752      }2753      /*2754       * @ngdoc method2755       * @name $$interimElement.$service#cancel2756       * @kind function2757       *2758       * @description2759       * Removes the `$interimElement` from the DOM and rejects the promise returned from `show`2760       *2761       * @param {*} reason Data to reject the promise with2762       * @returns Promise that will be resolved after the element has been removed.2763       *2764       */2765      function cancel(reason, options) {2766        var interim = stack.pop();2767        if ( !interim ) return $q.when(reason);2768        interim2769          .remove(reason, true, options || { })2770          .catch(function( reason ) {2771            //$log.error("InterimElement.cancel() error: " + reason );2772            return reason;2773          });2774        // Since Angular 1.6.7, promises will be logged to $exceptionHandler when the promise2775        // is not handling the rejection. We create a pseudo catch handler, which will prevent the2776        // promise from being logged to the $exceptionHandler.2777        return interim.deferred.promise.catch(angular.noop);2778      }2779      /*2780       * Special method to quick-remove the interim element without animations2781       * Note: interim elements are in "interim containers"2782       */2783      function destroy(target) {2784        var interim = !target ? stack.shift() : null;2785        var cntr = angular.element(target).length ? angular.element(target)[0].parentNode : null;2786        if (cntr) {2787            // Try to find the interim element in the stack which corresponds to the supplied DOM element.2788            var filtered = stack.filter(function(entry) {2789                  var currNode = entry.options.element[0];2790                  return  (currNode === cntr);2791                });2792            // Note: this function might be called when the element already has been removed, in which2793            //       case we won't find any matches. That's ok.2794            if (filtered.length > 0) {2795              interim = filtered[0];2796              stack.splice(stack.indexOf(interim), 1);2797            }2798        }2799        return interim ? interim.remove(SHOW_CANCELLED, false, {'$destroy':true}) : $q.when(SHOW_CANCELLED);2800      }2801      /*2802       * Internal Interim Element Object2803       * Used internally to manage the DOM element and related data2804       */2805      function InterimElement(options) {2806        var self, element, showAction = $q.when(true);2807        options = configureScopeAndTransitions(options);2808        return self = {2809          options : options,2810          deferred: $q.defer(),2811          show    : createAndTransitionIn,2812          remove  : transitionOutAndRemove2813        };2814        /**2815         * Compile, link, and show this interim element2816         * Use optional autoHided and transition-in effects2817         */2818        function createAndTransitionIn() {2819          return $q(function(resolve, reject) {2820            // Trigger onCompiling callback before the compilation starts.2821            // This is useful, when modifying options, which can be influenced by developers.2822            options.onCompiling && options.onCompiling(options);2823            compileElement(options)2824              .then(function( compiledData ) {2825                element = linkElement( compiledData, options );2826                showAction = showElement(element, options, compiledData.controller)2827                  .then(resolve, rejectAll);2828              }, rejectAll);2829            function rejectAll(fault) {2830              // Force the '$md<xxx>.show()' promise to reject2831              self.deferred.reject(fault);2832              // Continue rejection propagation2833              reject(fault);2834            }2835          });2836        }2837        /**2838         * After the show process has finished/rejected:2839         * - announce 'removing',2840         * - perform the transition-out, and2841         * - perform optional clean up scope.2842         */2843        function transitionOutAndRemove(response, isCancelled, opts) {2844          // abort if the show() and compile failed2845          if ( !element ) return $q.when(false);2846          options = angular.extend(options || {}, opts || {});2847          options.cancelAutoHide && options.cancelAutoHide();2848          options.element.triggerHandler('$mdInterimElementRemove');2849          if ( options.$destroy === true ) {2850            return hideElement(options.element, options).then(function(){2851              (isCancelled && rejectAll(response)) || resolveAll(response);2852            });2853          } else {2854            $q.when(showAction)2855                .finally(function() {2856                  hideElement(options.element, options).then(function() {2857                    (isCancelled && rejectAll(response)) || resolveAll(response);2858                  }, rejectAll);2859                });2860            return self.deferred.promise;2861          }2862          /**2863           * The `show()` returns a promise that will be resolved when the interim2864           * element is hidden or cancelled...2865           */2866          function resolveAll(response) {2867            self.deferred.resolve(response);2868          }2869          /**2870           * Force the '$md<xxx>.show()' promise to reject2871           */2872          function rejectAll(fault) {2873            self.deferred.reject(fault);2874          }2875        }2876        /**2877         * Prepare optional isolated scope and prepare $animate with default enter and leave2878         * transitions for the new element instance.2879         */2880        function configureScopeAndTransitions(options) {2881          options = options || { };2882          if ( options.template ) {2883            options.template = $mdUtil.processTemplate(options.template);2884          }2885          return angular.extend({2886            preserveScope: false,2887            cancelAutoHide : angular.noop,2888            scope: options.scope || $rootScope.$new(options.isolateScope),2889            /**2890             * Default usage to enable $animate to transition-in; can be easily overridden via 'options'2891             */2892            onShow: function transitionIn(scope, element, options) {2893              return $animate.enter(element, options.parent);2894            },2895            /**2896             * Default usage to enable $animate to transition-out; can be easily overridden via 'options'2897             */2898            onRemove: function transitionOut(scope, element) {2899              // Element could be undefined if a new element is shown before2900              // the old one finishes compiling.2901              return element && $animate.leave(element) || $q.when();2902            }2903          }, options );2904        }2905        /**2906         * Compile an element with a templateUrl, controller, and locals2907         */2908        function compileElement(options) {2909          var compiled = !options.skipCompile ? $mdCompiler.compile(options) : null;2910          return compiled || $q(function (resolve) {2911              resolve({2912                locals: {},2913                link: function () {2914                  return options.element;2915                }2916              });2917            });2918        }2919        /**2920         *  Link an element with compiled configuration2921         */2922        function linkElement(compileData, options){2923          angular.extend(compileData.locals, options);2924          var element = compileData.link(options.scope);2925          // Search for parent at insertion time, if not specified2926          options.element = element;2927          options.parent = findParent(element, options);2928          if (options.themable) $mdTheming(element);2929          return element;2930        }2931        /**2932         * Search for parent at insertion time, if not specified2933         */2934        function findParent(element, options) {2935          var parent = options.parent;2936          // Search for parent at insertion time, if not specified2937          if (angular.isFunction(parent)) {2938            parent = parent(options.scope, element, options);2939          } else if (angular.isString(parent)) {2940            parent = angular.element($document[0].querySelector(parent));2941          } else {2942            parent = angular.element(parent);2943          }2944          // If parent querySelector/getter function fails, or it's just null,2945          // find a default.2946          if (!(parent || {}).length) {2947            var el;2948            if ($rootElement[0] && $rootElement[0].querySelector) {2949              el = $rootElement[0].querySelector(':not(svg) > body');2950            }2951            if (!el) el = $rootElement[0];2952            if (el.nodeName == '#comment') {2953              el = $document[0].body;2954            }2955            return angular.element(el);2956          }2957          return parent;2958        }2959        /**2960         * If auto-hide is enabled, start timer and prepare cancel function2961         */2962        function startAutoHide() {2963          var autoHideTimer, cancelAutoHide = angular.noop;2964          if (options.hideDelay) {2965            autoHideTimer = $timeout(service.hide, options.hideDelay) ;2966            cancelAutoHide = function() {2967              $timeout.cancel(autoHideTimer);2968            }2969          }2970          // Cache for subsequent use2971          options.cancelAutoHide = function() {2972            cancelAutoHide();2973            options.cancelAutoHide = undefined;2974          }2975        }2976        /**2977         * Show the element ( with transitions), notify complete and start2978         * optional auto-Hide2979         */2980        function showElement(element, options, controller) {2981          // Trigger onShowing callback before the `show()` starts2982          var notifyShowing = options.onShowing || angular.noop;2983          // Trigger onComplete callback when the `show()` finishes2984          var notifyComplete = options.onComplete || angular.noop;2985          notifyShowing(options.scope, element, options, controller);2986          return $q(function (resolve, reject) {2987            try {2988              // Start transitionIn2989              $q.when(options.onShow(options.scope, element, options, controller))2990                .then(function () {2991                  notifyComplete(options.scope, element, options);2992                  startAutoHide();2993                  resolve(element);2994                }, reject );2995            } catch(e) {2996              reject(e.message);2997            }2998          });2999        }3000        function hideElement(element, options) {3001          var announceRemoving = options.onRemoving || angular.noop;3002          return $$q(function (resolve, reject) {3003            try {3004              // Start transitionIn3005              var action = $$q.when( options.onRemove(options.scope, element, options) || true );3006              // Trigger callback *before* the remove operation starts3007              announceRemoving(element, action);3008              if ( options.$destroy == true ) {3009                // For $destroy, onRemove should be synchronous3010                resolve(element);3011              } else {3012                // Wait until transition-out is done3013                action.then(function () {3014                  if (!options.preserveScope && options.scope ) {3015                    options.scope.$destroy();3016                  }3017                  resolve(element);3018                }, reject );3019              }3020            } catch(e) {3021              reject(e);3022            }3023          });3024        }3025      }3026    };3027  }3028}3029(function() {3030  'use strict';3031  var $mdUtil, $interpolate, $log;3032  var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;3033  var WHITESPACE = /\s+/g;3034  var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];3035  var LAYOUT_OPTIONS = ['row', 'column'];3036  var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];3037  var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];3038  var config = {3039    /**3040     * Enable directive attribute-to-class conversions3041     * Developers can use `<body md-layout-css />` to quickly3042     * disable the Layout directives and prohibit the injection of Layout classNames3043     */3044    enabled: true,3045    /**3046     * List of mediaQuery breakpoints and associated suffixes3047     *3048     *   [3049     *    { suffix: "sm", mediaQuery: "screen and (max-width: 599px)" },3050     *    { suffix: "md", mediaQuery: "screen and (min-width: 600px) and (max-width: 959px)" }3051     *   ]3052     */3053    breakpoints: []3054  };3055  registerLayoutAPI( angular.module('material.core.layout', ['ng']) );3056  /**3057   *   registerLayoutAPI()3058   *3059   *   The original ngMaterial Layout solution used attribute selectors and CSS.3060   *3061   *  ```html3062   *  <div layout="column"> My Content </div>3063   *  ```3064   *3065   *  ```css3066   *  [layout] {3067   *    box-sizing: border-box;3068   *    display:flex;3069   *  }3070   *  [layout=column] {3071   *    flex-direction : column3072   *  }3073   *  ```3074   *3075   *  Use of attribute selectors creates significant performance impacts in some3076   *  browsers... mainly IE.3077   *3078   *  This module registers directives that allow the same layout attributes to be3079   *  interpreted and converted to class selectors. The directive will add equivalent classes to each element that3080   *  contains a Layout directive.3081   *3082   * ```html3083   *   <div layout="column" class="layout layout-column"> My Content </div>3084   *```3085   *3086   *  ```css3087   *  .layout {3088   *    box-sizing: border-box;3089   *    display:flex;3090   *  }3091   *  .layout-column {3092   *    flex-direction : column3093   *  }3094   *  ```3095   */3096  function registerLayoutAPI(module){3097    var PREFIX_REGEXP = /^((?:x|data)[\:\-_])/i;3098    var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;3099    // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA3100    var BREAKPOINTS     = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl", "print" ];3101    var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];3102    var API_NO_VALUES   = [ "show", "hide", "layout-padding", "layout-margin" ];3103    // Build directive registration functions for the standard Layout API... for all breakpoints.3104    angular.forEach(BREAKPOINTS, function(mqb) {3105      // Attribute directives with expected, observable value(s)3106      angular.forEach( API_WITH_VALUES, function(name){3107        var fullName = mqb ? name + "-" + mqb : name;3108        module.directive( directiveNormalize(fullName), attributeWithObserve(fullName));3109      });3110      // Attribute directives with no expected value(s)3111      angular.forEach( API_NO_VALUES, function(name){3112        var fullName = mqb ? name + "-" + mqb : name;3113        module.directive( directiveNormalize(fullName), attributeWithoutValue(fullName));3114      });3115    });3116    // Register other, special directive functions for the Layout features:3117    module3118      .provider('$$mdLayout'     , function() {3119        // Publish internal service for Layouts3120        return {3121          $get : angular.noop,3122          validateAttributeValue : validateAttributeValue,3123          validateAttributeUsage : validateAttributeUsage,3124          /**3125           * Easy way to disable/enable the Layout API.3126           * When disabled, this stops all attribute-to-classname generations3127           */3128          disableLayouts  : function(isDisabled) {3129            config.enabled =  (isDisabled !== true);3130          }3131        };3132      })3133      .directive('mdLayoutCss'        , disableLayoutDirective )3134      .directive('ngCloak'            , buildCloakInterceptor('ng-cloak'))3135      .directive('layoutWrap'   , attributeWithoutValue('layout-wrap'))3136      .directive('layoutNowrap' , attributeWithoutValue('layout-nowrap'))3137      .directive('layoutNoWrap' , attributeWithoutValue('layout-no-wrap'))3138      .directive('layoutFill'   , attributeWithoutValue('layout-fill'))3139      // !! Deprecated attributes: use the `-lt` (aka less-than) notations3140      .directive('layoutLtMd'     , warnAttrNotSupported('layout-lt-md', true))3141      .directive('layoutLtLg'     , warnAttrNotSupported('layout-lt-lg', true))3142      .directive('flexLtMd'       , warnAttrNotSupported('flex-lt-md', true))3143      .directive('flexLtLg'       , warnAttrNotSupported('flex-lt-lg', true))3144      .directive('layoutAlignLtMd', warnAttrNotSupported('layout-align-lt-md'))3145      .directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))3146      .directive('flexOrderLtMd'  , warnAttrNotSupported('flex-order-lt-md'))3147      .directive('flexOrderLtLg'  , warnAttrNotSupported('flex-order-lt-lg'))3148      .directive('offsetLtMd'     , warnAttrNotSupported('flex-offset-lt-md'))3149      .directive('offsetLtLg'     , warnAttrNotSupported('flex-offset-lt-lg'))3150      .directive('hideLtMd'       , warnAttrNotSupported('hide-lt-md'))3151      .directive('hideLtLg'       , warnAttrNotSupported('hide-lt-lg'))3152      .directive('showLtMd'       , warnAttrNotSupported('show-lt-md'))3153      .directive('showLtLg'       , warnAttrNotSupported('show-lt-lg'))3154      // Determine if3155      .config( detectDisabledLayouts );3156    /**3157     * Converts snake_case to camelCase.3158     * Also there is special case for Moz prefix starting with upper case letter.3159     * @param name Name to normalize3160     */3161    function directiveNormalize(name) {3162      return name3163        .replace(PREFIX_REGEXP, '')3164        .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {3165          return offset ? letter.toUpperCase() : letter;3166        });3167    }3168  }3169  /**3170    * Detect if any of the HTML tags has a [md-layouts-disabled] attribute;3171    * If yes, then immediately disable all layout API features3172    *3173    * Note: this attribute should be specified on either the HTML or BODY tags3174    */3175   /**3176    * ngInject3177    */3178   function detectDisabledLayouts() {3179     var isDisabled = !!document.querySelector('[md-layouts-disabled]');3180     config.enabled = !isDisabled;3181   }3182  /**3183   * Special directive that will disable ALL Layout conversions of layout3184   * attribute(s) to classname(s).3185   *3186   * <link rel="stylesheet" href="angular-material.min.css">3187   * <link rel="stylesheet" href="angular-material.layout.css">3188   *3189   * <body md-layout-css>3190   *  ...3191   * </body>3192   *3193   * Note: Using md-layout-css directive requires the developer to load the Material3194   * Layout Attribute stylesheet (which only uses attribute selectors):3195   *3196   *       `angular-material.layout.css`3197   *3198   * Another option is to use the LayoutProvider to configure and disable the attribute3199   * conversions; this would obviate the use of the `md-layout-css` directive3200   *3201   */3202  function disableLayoutDirective() {3203    // Return a 1x-only, first-match attribute directive3204    config.enabled = false;3205    return {3206      restrict : 'A',3207      priority : '900'3208    };3209  }3210  /**3211   * Tail-hook ngCloak to delay the uncloaking while Layout transformers3212   * finish processing. Eliminates flicker with Material.Layouts3213   */3214  function buildCloakInterceptor(className) {3215    return [ '$timeout', function($timeout){3216      return {3217        restrict : 'A',3218        priority : -10,   // run after normal ng-cloak3219        compile  : function( element ) {3220          if (!config.enabled) return angular.noop;3221          // Re-add the cloak3222          element.addClass(className);3223          return function( scope, element ) {3224            // Wait while layout injectors configure, then uncloak3225            // NOTE: $rAF does not delay enough... and this is a 1x-only event,3226            //       $timeout is acceptable.3227            $timeout( function(){3228              element.removeClass(className);3229            }, 10, false);3230          };3231        }3232      };3233    }];3234  }3235  // *********************************************************************************3236  //3237  // These functions create registration functions for ngMaterial Layout attribute directives3238  // This provides easy translation to switch ngMaterial attribute selectors to3239  // CLASS selectors and directives; which has huge performance implications3240  // for IE Browsers3241  //3242  // *********************************************************************************3243  /**3244   * Creates a directive registration function where a possible dynamic attribute3245   * value will be observed/watched.3246   * @param {string} className attribute name; eg `layout-gt-md` with value ="row"3247   */3248  function attributeWithObserve(className) {3249    return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {3250      $mdUtil = _$mdUtil_;3251      $interpolate = _$interpolate_;3252      $log = _$log_;3253      return {3254        restrict: 'A',3255        compile: function(element, attr) {3256          var linkFn;3257          if (config.enabled) {3258            // immediately replace static (non-interpolated) invalid values...3259            validateAttributeUsage(className, attr, element, $log);3260            validateAttributeValue( className,3261              getNormalizedAttrValue(className, attr, ""),3262              buildUpdateFn(element, className, attr)3263            );3264            linkFn = translateWithValueToCssClass;3265          }3266          // Use for postLink to account for transforms after ng-transclude.3267          return linkFn || angular.noop;3268        }3269      };3270    }];3271    /**3272     * Add as transformed class selector(s), then3273     * remove the deprecated attribute selector3274     */3275    function translateWithValueToCssClass(scope, element, attrs) {3276      var updateFn = updateClassWithValue(element, className, attrs);3277      var unwatch = attrs.$observe(attrs.$normalize(className), updateFn);3278      updateFn(getNormalizedAttrValue(className, attrs, ""));3279      scope.$on("$destroy", function() { unwatch(); });3280    }3281  }3282  /**3283   * Creates a registration function for ngMaterial Layout attribute directive.3284   * This is a `simple` transpose of attribute usage to class usage; where we ignore3285   * any attribute value3286   */3287  function attributeWithoutValue(className) {3288    return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {3289      $mdUtil = _$mdUtil_;3290      $interpolate = _$interpolate_;3291      $log = _$log_;3292      return {3293        restrict: 'A',3294        compile: function(element, attr) {3295          var linkFn;3296          if (config.enabled) {3297            // immediately replace static (non-interpolated) invalid values...3298            validateAttributeValue( className,3299              getNormalizedAttrValue(className, attr, ""),3300              buildUpdateFn(element, className, attr)3301            );3302            translateToCssClass(null, element);3303            // Use for postLink to account for transforms after ng-transclude.3304            linkFn = translateToCssClass;3305          }3306          return linkFn || angular.noop;3307        }3308      };3309    }];3310    /**3311     * Add as transformed class selector, then3312     * remove the deprecated attribute selector3313     */3314    function translateToCssClass(scope, element) {3315      element.addClass(className);3316    }3317  }3318  /**3319   * After link-phase, do NOT remove deprecated layout attribute selector.3320   * Instead watch the attribute so interpolated data-bindings to layout3321   * selectors will continue to be supported.3322   *3323   * $observe() the className and update with new class (after removing the last one)3324   *3325   * e.g. `layout="{{layoutDemo.direction}}"` will update...3326   *3327   * NOTE: The value must match one of the specified styles in the CSS.3328   * For example `flex-gt-md="{{size}}`  where `scope.size == 47` will NOT work since3329   * only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.3330   *3331   */3332  function updateClassWithValue(element, className) {3333    var lastClass;3334    return function updateClassFn(newValue) {3335      var value = validateAttributeValue(className, newValue || "");3336      if ( angular.isDefined(value) ) {3337        if (lastClass) element.removeClass(lastClass);3338        lastClass = !value ? className : className + "-" + value.replace(WHITESPACE, "-");3339        element.addClass(lastClass);3340      }3341    };3342  }3343  /**3344   * Provide console warning that this layout attribute has been deprecated3345   *3346   */3347  function warnAttrNotSupported(className) {3348    var parts = className.split("-");3349    return ["$log", function($log) {3350      $log.warn(className + "has been deprecated. Please use a `" + parts[0] + "-gt-<xxx>` variant.");3351      return angular.noop;3352    }];3353  }3354  /**3355   * Centralize warnings for known flexbox issues (especially IE-related issues)3356   */3357  function validateAttributeUsage(className, attr, element, $log){3358    var message, usage, url;3359    var nodeName = element[0].nodeName.toLowerCase();3360    switch(className.replace(SUFFIXES,"")) {3361      case "flex":3362        if ((nodeName == "md-button") || (nodeName == "fieldset")){3363          // @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers3364          // Use <div flex> wrapper inside (preferred) or outside3365          usage = "<" + nodeName + " " + className + "></" + nodeName + ">";3366          url = "https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers";3367          message = "Markup '{0}' may not work as expected in IE Browsers. Consult '{1}' for details.";3368          $log.warn( $mdUtil.supplant(message, [usage, url]) );3369        }3370    }3371  }3372  /**3373   * For the Layout attribute value, validate or replace with default3374   * fallback value3375   */3376  function validateAttributeValue(className, value, updateFn) {3377    var origValue = value;3378    if (!needsInterpolation(value)) {3379      switch (className.replace(SUFFIXES,"")) {3380        case 'layout'        :3381          if ( !findIn(value, LAYOUT_OPTIONS) ) {3382            value = LAYOUT_OPTIONS[0];    // 'row';3383          }3384          break;3385        case 'flex'          :3386          if (!findIn(value, FLEX_OPTIONS)) {3387            if (isNaN(value)) {3388              value = '';3389            }3390          }3391          break;3392        case 'flex-offset' :3393        case 'flex-order'    :3394          if (!value || isNaN(+value)) {3395            value = '0';3396          }3397          break;3398        case 'layout-align'  :3399          var axis = extractAlignAxis(value);3400          value = $mdUtil.supplant("{main}-{cross}",axis);3401          break;3402        case 'layout-padding' :3403        case 'layout-margin'  :3404        case 'layout-fill'    :3405        case 'layout-wrap'    :3406        case 'layout-nowrap'  :3407        case 'layout-nowrap' :3408          value = '';3409          break;3410      }3411      if (value != origValue) {3412        (updateFn || angular.noop)(value);3413      }3414    }3415    return value;3416  }3417  /**3418   * Replace current attribute value with fallback value3419   */3420  function buildUpdateFn(element, className, attrs) {3421    return function updateAttrValue(fallback) {3422      if (!needsInterpolation(fallback)) {3423        // Do not modify the element's attribute value; so3424        // uses '<ui-layout layout="/api/sidebar.html" />' will not3425        // be affected. Just update the attrs value.3426        attrs[attrs.$normalize(className)] = fallback;3427      }3428    };3429  }3430  /**3431   * See if the original value has interpolation symbols:3432   * e.g.  flex-gt-md="{{triggerPoint}}"3433   */3434  function needsInterpolation(value) {3435    return (value || "").indexOf($interpolate.startSymbol()) > -1;3436  }3437  function getNormalizedAttrValue(className, attrs, defaultVal) {3438    var normalizedAttr = attrs.$normalize(className);3439    return attrs[normalizedAttr] ? attrs[normalizedAttr].replace(WHITESPACE, "-") : defaultVal || null;3440  }3441  function findIn(item, list, replaceWith) {3442    item = replaceWith && item ? item.replace(WHITESPACE, replaceWith) : item;3443    var found = false;3444    if (item) {3445      list.forEach(function(it) {3446        it = replaceWith ? it.replace(WHITESPACE, replaceWith) : it;3447        found = found || (it === item);3448      });3449    }3450    return found;3451  }3452  function extractAlignAxis(attrValue) {3453    var axis = {3454      main : "start",3455      cross: "stretch"3456    }, values;3457    attrValue = (attrValue || "");3458    if ( attrValue.indexOf("-") === 0 || attrValue.indexOf(" ") === 0) {3459      // For missing main-axis values3460      attrValue = "none" + attrValue;3461    }3462    values = attrValue.toLowerCase().trim().replace(WHITESPACE, "-").split("-");3463    if ( values.length && (values[0] === "space") ) {3464      // for main-axis values of "space-around" or "space-between"3465      values = [ values[0]+"-"+values[1],values[2] ];3466    }3467    if ( values.length > 0 ) axis.main  = values[0] || axis.main;3468    if ( values.length > 1 ) axis.cross = values[1] || axis.cross;3469    if ( ALIGNMENT_MAIN_AXIS.indexOf(axis.main) < 0 )   axis.main = "start";3470    if ( ALIGNMENT_CROSS_AXIS.indexOf(axis.cross) < 0 ) axis.cross = "stretch";3471    return axis;3472  }3473})();3474/**3475 * @ngdoc service3476 * @name $$mdMeta3477 * @module material.core.meta3478 *3479 * @description3480 *3481 * A provider and a service that simplifies meta tags access3482 *3483 * Note: This is intended only for use with dynamic meta tags such as browser color and title.3484 * Tags that are only processed when the page is rendered (such as `charset`, and `http-equiv`)3485 * will not work since `$$mdMeta` adds the tags after the page has already been loaded.3486 *3487 * ```js3488 * app.config(function($$mdMetaProvider) {3489 *   var removeMeta = $$mdMetaProvider.setMeta('meta-name', 'content');3490 *   var metaValue  = $$mdMetaProvider.getMeta('meta-name'); // -> 'content'3491 *3492 *   removeMeta();3493 * });3494 *3495 * app.controller('myController', function($$mdMeta) {3496 *   var removeMeta = $$mdMeta.setMeta('meta-name', 'content');3497 *   var metaValue  = $$mdMeta.getMeta('meta-name'); // -> 'content'3498 *3499 *   removeMeta();3500 * });3501 * ```3502 *3503 * @returns {$$mdMeta.$service}3504 *3505 */3506angular.module('material.core.meta', [])3507  .provider('$$mdMeta', function () {3508    var head = angular.element(document.head);3509    var metaElements = {};3510    /**3511     * Checks if the requested element was written manually and maps it3512     *3513     * @param {string} name meta tag 'name' attribute value3514     * @returns {boolean} returns true if there is an element with the requested name3515     */3516    function mapExistingElement(name) {3517      if (metaElements[name]) {3518        return true;3519      }3520      var element = document.getElementsByName(name)[0];3521      if (!element) {3522        return false;3523      }3524      metaElements[name] = angular.element(element);3525      return true;3526    }3527    /**3528     * @ngdoc method3529     * @name $$mdMeta#setMeta3530     *3531     * @description3532     * Creates meta element with the 'name' and 'content' attributes,3533     * if the meta tag is already created than we replace the 'content' value3534     *3535     * @param {string} name meta tag 'name' attribute value3536     * @param {string} content meta tag 'content' attribute value3537     * @returns {function} remove function3538     *3539     */3540    function setMeta(name, content) {3541      mapExistingElement(name);3542      if (!metaElements[name]) {3543        var newMeta = angular.element('<meta name="' + name + '" content="' + content + '"/>');3544        head.append(newMeta);3545        metaElements[name] = newMeta;3546      }3547      else {3548        metaElements[name].attr('content', content);3549      }3550      return function () {3551        metaElements[name].attr('content', '');3552        metaElements[name].remove();3553        delete metaElements[name];3554      };3555    }3556    /**3557     * @ngdoc method3558     * @name $$mdMeta#getMeta3559     *3560     * @description3561     * Gets the 'content' attribute value of the wanted meta element3562     *3563     * @param {string} name meta tag 'name' attribute value3564     * @returns {string} content attribute value3565     */3566    function getMeta(name) {3567      if (!mapExistingElement(name)) {3568        throw Error('$$mdMeta: could not find a meta tag with the name \'' + name + '\'');3569      }3570      return metaElements[name].attr('content');3571    }3572    var module = {3573      setMeta: setMeta,3574      getMeta: getMeta3575    };3576    return angular.extend({}, module, {3577      $get: function () {3578        return module;3579      }3580    });3581  });3582  /**3583   * @ngdoc module3584   * @name material.core.componentRegistry3585   *3586   * @description3587   * A component instance registration service.3588   * Note: currently this as a private service in the SideNav component.3589   */3590  ComponentRegistry.$inject = ["$log", "$q"];3591  angular.module('material.core')3592    .factory('$mdComponentRegistry', ComponentRegistry);3593  /*3594   * @private3595   * @ngdoc factory3596   * @name ComponentRegistry3597   * @module material.core.componentRegistry3598   *3599   */3600  function ComponentRegistry($log, $q) {3601    var self;3602    var instances = [ ];3603    var pendings = { };3604    return self = {3605      /**3606       * Used to print an error when an instance for a handle isn't found.3607       */3608      notFoundError: function(handle, msgContext) {3609        $log.error( (msgContext || "") + 'No instance found for handle', handle);3610      },3611      /**3612       * Return all registered instances as an array.3613       */3614      getInstances: function() {3615        return instances;3616      },3617      /**3618       * Get a registered instance.3619       * @param handle the String handle to look up for a registered instance.3620       */3621      get: function(handle) {3622        if ( !isValidID(handle) ) return null;3623        var i, j, instance;3624        for(i = 0, j = instances.length; i < j; i++) {3625          instance = instances[i];3626          if(instance.$$mdHandle === handle) {3627            return instance;3628          }3629        }3630        return null;3631      },3632      /**3633       * Register an instance.3634       * @param instance the instance to register3635       * @param handle the handle to identify the instance under.3636       */3637      register: function(instance, handle) {3638        if ( !handle ) return angular.noop;3639        instance.$$mdHandle = handle;3640        instances.push(instance);3641        resolveWhen();3642        return deregister;3643        /**3644         * Remove registration for an instance3645         */3646        function deregister() {3647          var index = instances.indexOf(instance);3648          if (index !== -1) {3649            instances.splice(index, 1);3650          }3651        }3652        /**3653         * Resolve any pending promises for this instance3654         */3655        function resolveWhen() {3656          var dfd = pendings[handle];3657          if ( dfd ) {3658            dfd.forEach(function (promise) {3659              promise.resolve(instance);3660            });3661            delete pendings[handle];3662          }3663        }3664      },3665      /**3666       * Async accessor to registered component instance3667       * If not available then a promise is created to notify3668       * all listeners when the instance is registered.3669       */3670      when : function(handle) {3671        if ( isValidID(handle) ) {3672          var deferred = $q.defer();3673          var instance = self.get(handle);3674          if ( instance )  {3675            deferred.resolve( instance );3676          } else {3677            if (pendings[handle] === undefined) {3678              pendings[handle] = [];3679            }3680            pendings[handle].push(deferred);3681          }3682          return deferred.promise;3683        }3684        return $q.reject("Invalid `md-component-id` value.");3685      }3686    };3687    function isValidID(handle){3688      return handle && (handle !== "");3689    }3690  }3691(function() {3692  'use strict';3693  /**3694   * @ngdoc service3695   * @name $mdButtonInkRipple3696   * @module material.core3697   *3698   * @description3699   * Provides ripple effects for md-button.  See $mdInkRipple service for all possible configuration options.3700   *3701   * @param {object=} scope Scope within the current context3702   * @param {object=} element The element the ripple effect should be applied to3703   * @param {object=} options (Optional) Configuration options to override the default ripple configuration3704   */3705  MdButtonInkRipple.$inject = ["$mdInkRipple"];3706  angular.module('material.core')3707    .factory('$mdButtonInkRipple', MdButtonInkRipple);3708  function MdButtonInkRipple($mdInkRipple) {3709    return {3710      attach: function attachRipple(scope, element, options) {3711        options = angular.extend(optionsForElement(element), options);3712        return $mdInkRipple.attach(scope, element, options);3713      }3714    };3715    function optionsForElement(element) {3716      if (element.hasClass('md-icon-button')) {3717        return {3718          isMenuItem: element.hasClass('md-menu-item'),3719          fitRipple: true,3720          center: true3721        };3722      } else {3723        return {3724          isMenuItem: element.hasClass('md-menu-item'),3725          dimBackground: true3726        }3727      }3728    };3729  };3730})();3731(function() {3732  'use strict';3733    /**3734   * @ngdoc service3735   * @name $mdCheckboxInkRipple3736   * @module material.core3737   *3738   * @description3739   * Provides ripple effects for md-checkbox.  See $mdInkRipple service for all possible configuration options.3740   *3741   * @param {object=} scope Scope within the current context3742   * @param {object=} element The element the ripple effect should be applied to3743   * @param {object=} options (Optional) Configuration options to override the defaultripple configuration3744   */3745  MdCheckboxInkRipple.$inject = ["$mdInkRipple"];3746  angular.module('material.core')3747    .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple);3748  function MdCheckboxInkRipple($mdInkRipple) {3749    return {3750      attach: attach3751    };3752    function attach(scope, element, options) {3753      return $mdInkRipple.attach(scope, element, angular.extend({3754        center: true,3755        dimBackground: false,3756        fitRipple: true3757      }, options));3758    };3759  };3760})();3761(function() {3762  'use strict';3763  /**3764   * @ngdoc service3765   * @name $mdListInkRipple3766   * @module material.core3767   *3768   * @description3769   * Provides ripple effects for md-list.  See $mdInkRipple service for all possible configuration options.3770   *3771   * @param {object=} scope Scope within the current context3772   * @param {object=} element The element the ripple effect should be applied to3773   * @param {object=} options (Optional) Configuration options to override the defaultripple configuration3774   */3775  MdListInkRipple.$inject = ["$mdInkRipple"];3776  angular.module('material.core')3777    .factory('$mdListInkRipple', MdListInkRipple);3778  function MdListInkRipple($mdInkRipple) {3779    return {3780      attach: attach3781    };3782    function attach(scope, element, options) {3783      return $mdInkRipple.attach(scope, element, angular.extend({3784        center: false,3785        dimBackground: true,3786        outline: false,3787        rippleSize: 'full'3788      }, options));3789    };3790  };3791})();3792/**3793 * @ngdoc module3794 * @name material.core.ripple3795 * @description3796 * Ripple3797 */3798InkRippleCtrl.$inject = ["$scope", "$element", "rippleOptions", "$window", "$timeout", "$mdUtil", "$mdColorUtil"];3799InkRippleDirective.$inject = ["$mdButtonInkRipple", "$mdCheckboxInkRipple"];3800angular.module('material.core')3801    .provider('$mdInkRipple', InkRippleProvider)3802    .directive('mdInkRipple', InkRippleDirective)3803    .directive('mdNoInk', attrNoDirective)3804    .directive('mdNoBar', attrNoDirective)3805    .directive('mdNoStretch', attrNoDirective);3806var DURATION = 450;3807/**3808 * @ngdoc directive3809 * @name mdInkRipple3810 * @module material.core.ripple3811 *3812 * @description3813 * The `md-ink-ripple` directive allows you to specify the ripple color or id a ripple is allowed.3814 *3815 * @param {string|boolean} md-ink-ripple A color string `#FF0000` or boolean (`false` or `0`) for preventing ripple3816 *3817 * @usage3818 * ### String values3819 * <hljs lang="html">3820 *   <ANY md-ink-ripple="#FF0000">3821 *     Ripples in red3822 *   </ANY>3823 *3824 *   <ANY md-ink-ripple="false">3825 *     Not rippling3826 *   </ANY>3827 * </hljs>3828 *3829 * ### Interpolated values3830 * <hljs lang="html">3831 *   <ANY md-ink-ripple="{{ randomColor() }}">3832 *     Ripples with the return value of 'randomColor' function3833 *   </ANY>3834 *3835 *   <ANY md-ink-ripple="{{ canRipple() }}">3836 *     Ripples if 'canRipple' function return value is not 'false' or '0'3837 *   </ANY>3838 * </hljs>3839 */3840function InkRippleDirective ($mdButtonInkRipple, $mdCheckboxInkRipple) {3841  return {3842    controller: angular.noop,3843    link:       function (scope, element, attr) {3844      attr.hasOwnProperty('mdInkRippleCheckbox')3845          ? $mdCheckboxInkRipple.attach(scope, element)3846          : $mdButtonInkRipple.attach(scope, element);3847    }3848  };3849}3850/**3851 * @ngdoc service3852 * @name $mdInkRipple3853 * @module material.core.ripple3854 *3855 * @description3856 * `$mdInkRipple` is a service for adding ripples to any element3857 *3858 * @usage3859 * <hljs lang="js">3860 * app.factory('$myElementInkRipple', function($mdInkRipple) {3861 *   return {3862 *     attach: function (scope, element, options) {3863 *       return $mdInkRipple.attach(scope, element, angular.extend({3864 *         center: false,3865 *         dimBackground: true3866 *       }, options));3867 *     }3868 *   };3869 * });3870 *3871 * app.controller('myController', function ($scope, $element, $myElementInkRipple) {3872 *   $scope.onClick = function (ev) {3873 *     $myElementInkRipple.attach($scope, angular.element(ev.target), { center: true });3874 *   }3875 * });3876 * </hljs>3877 *3878 * ### Disabling ripples globally3879 * If you want to disable ink ripples globally, for all components, you can call the3880 * `disableInkRipple` method in your app's config.3881 *3882 * <hljs lang="js">3883 * app.config(function ($mdInkRippleProvider) {3884 *   $mdInkRippleProvider.disableInkRipple();3885 * });3886 */3887function InkRippleProvider () {3888  var isDisabledGlobally = false;3889  return {3890    disableInkRipple: disableInkRipple,3891    $get: ["$injector", function($injector) {3892      return { attach: attach };3893      /**3894       * @ngdoc method3895       * @name $mdInkRipple#attach3896       *3897       * @description3898       * Attaching given scope, element and options to inkRipple controller3899       *3900       * @param {object=} scope Scope within the current context3901       * @param {object=} element The element the ripple effect should be applied to3902       * @param {object=} options (Optional) Configuration options to override the defaultRipple configuration3903       * * `center` -  Whether the ripple should start from the center of the container element3904       * * `dimBackground` - Whether the background should be dimmed with the ripple color3905       * * `colorElement` - The element the ripple should take its color from, defined by css property `color`3906       * * `fitRipple` - Whether the ripple should fill the element3907       */3908      function attach (scope, element, options) {3909        if (isDisabledGlobally || element.controller('mdNoInk')) return angular.noop;3910        return $injector.instantiate(InkRippleCtrl, {3911          $scope:        scope,3912          $element:      element,3913          rippleOptions: options3914        });3915      }3916    }]3917  };3918  /**3919   * @ngdoc method3920   * @name $mdInkRipple#disableInkRipple3921   *3922   * @description3923   * A config-time method that, when called, disables ripples globally.3924   */3925  function disableInkRipple () {3926    isDisabledGlobally = true;3927  }3928}3929/**3930 * Controller used by the ripple service in order to apply ripples3931 * ngInject3932 */3933function InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdUtil, $mdColorUtil) {3934  this.$window    = $window;3935  this.$timeout   = $timeout;3936  this.$mdUtil    = $mdUtil;3937  this.$mdColorUtil    = $mdColorUtil;3938  this.$scope     = $scope;3939  this.$element   = $element;3940  this.options    = rippleOptions;3941  this.mousedown  = false;3942  this.ripples    = [];3943  this.timeout    = null; // Stores a reference to the most-recent ripple timeout3944  this.lastRipple = null;3945  $mdUtil.valueOnUse(this, 'container', this.createContainer);3946  this.$element.addClass('md-ink-ripple');3947  // attach method for unit tests3948  ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);3949  ($element.controller('mdInkRipple') || {}).setColor = angular.bind(this, this.color);3950  this.bindEvents();3951}3952/**3953 * Either remove or unlock any remaining ripples when the user mouses off of the element (either by3954 * mouseup or mouseleave event)3955 */3956function autoCleanup (self, cleanupFn) {3957  if ( self.mousedown || self.lastRipple ) {3958    self.mousedown = false;3959    self.$mdUtil.nextTick( angular.bind(self, cleanupFn), false);3960  }3961}3962/**3963 * Returns the color that the ripple should be (either based on CSS or hard-coded)3964 * @returns {string}3965 */3966InkRippleCtrl.prototype.color = function (value) {3967  var self = this;3968  // If assigning a color value, apply it to background and the ripple color3969  if (angular.isDefined(value)) {3970    self._color = self._parseColor(value);3971  }3972  // If color lookup, use assigned, defined, or inherited3973  return self._color || self._parseColor( self.inkRipple() ) || self._parseColor( getElementColor() );3974  /**3975   * Finds the color element and returns its text color for use as default ripple color3976   * @returns {string}3977   */3978  function getElementColor () {3979    var items = self.options && self.options.colorElement ? self.options.colorElement : [];3980    var elem =  items.length ? items[ 0 ] : self.$element[ 0 ];3981    return elem ? self.$window.getComputedStyle(elem).color : 'rgb(0,0,0)';3982  }3983};3984/**3985 * Updating the ripple colors based on the current inkRipple value3986 * or the element's computed style color3987 */3988InkRippleCtrl.prototype.calculateColor = function () {3989  return this.color();3990};3991/**3992 * Takes a string color and converts it to RGBA format3993 * @param color {string}3994 * @param [multiplier] {int}3995 * @returns {string}3996 */3997InkRippleCtrl.prototype._parseColor = function parseColor (color, multiplier) {3998  multiplier = multiplier || 1;3999  var colorUtil = this.$mdColorUtil;4000  if (!color) return;4001  if (color.indexOf('rgba') === 0) return color.replace(/\d?\.?\d*\s*\)\s*$/, (0.1 * multiplier).toString() + ')');4002  if (color.indexOf('rgb') === 0) return colorUtil.rgbToRgba(color);4003  if (color.indexOf('#') === 0) return colorUtil.hexToRgba(color);4004};4005/**4006 * Binds events to the root element for4007 */4008InkRippleCtrl.prototype.bindEvents = function () {4009  this.$element.on('mousedown', angular.bind(this, this.handleMousedown));4010  this.$element.on('mouseup touchend', angular.bind(this, this.handleMouseup));4011  this.$element.on('mouseleave', angular.bind(this, this.handleMouseup));4012  this.$element.on('touchmove', angular.bind(this, this.handleTouchmove));4013};4014/**4015 * Create a new ripple on every mousedown event from the root element4016 * @param event {MouseEvent}4017 */4018InkRippleCtrl.prototype.handleMousedown = function (event) {4019  if ( this.mousedown ) return;4020  // When jQuery is loaded, we have to get the original event4021  if (event.hasOwnProperty('originalEvent')) event = event.originalEvent;4022  this.mousedown = true;4023  if (this.options.center) {4024    this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);4025  } else {4026    // We need to calculate the relative coordinates if the target is a sublayer of the ripple element4027    if (event.srcElement !== this.$element[0]) {4028      var layerRect = this.$element[0].getBoundingClientRect();4029      var layerX = event.clientX - layerRect.left;4030      var layerY = event.clientY - layerRect.top;4031      this.createRipple(layerX, layerY);4032    } else {4033      this.createRipple(event.offsetX, event.offsetY);4034    }4035  }4036};4037/**4038 * Either remove or unlock any remaining ripples when the user mouses off of the element (either by4039 * mouseup, touchend or mouseleave event)4040 */4041InkRippleCtrl.prototype.handleMouseup = function () {4042  autoCleanup(this, this.clearRipples);4043};4044/**4045 * Either remove or unlock any remaining ripples when the user mouses off of the element (by4046 * touchmove)4047 */4048InkRippleCtrl.prototype.handleTouchmove = function () {4049  autoCleanup(this, this.deleteRipples);4050};4051/**4052 * Cycles through all ripples and attempts to remove them.4053 */4054InkRippleCtrl.prototype.deleteRipples = function () {4055  for (var i = 0; i < this.ripples.length; i++) {4056    this.ripples[ i ].remove();4057  }4058};4059/**4060 * Cycles through all ripples and attempts to remove them with fade.4061 * Depending on logic within `fadeInComplete`, some removals will be postponed.4062 */4063InkRippleCtrl.prototype.clearRipples = function () {4064  for (var i = 0; i < this.ripples.length; i++) {4065    this.fadeInComplete(this.ripples[ i ]);4066  }4067};4068/**4069 * Creates the ripple container element4070 * @returns {*}4071 */4072InkRippleCtrl.prototype.createContainer = function () {4073  var container = angular.element('<div class="md-ripple-container"></div>');4074  this.$element.append(container);4075  return container;4076};4077InkRippleCtrl.prototype.clearTimeout = function () {4078  if (this.timeout) {4079    this.$timeout.cancel(this.timeout);4080    this.timeout = null;4081  }4082};4083InkRippleCtrl.prototype.isRippleAllowed = function () {4084  var element = this.$element[0];4085  do {4086    if (!element.tagName || element.tagName === 'BODY') break;4087    if (element && angular.isFunction(element.hasAttribute)) {4088      if (element.hasAttribute('disabled')) return false;4089      if (this.inkRipple() === 'false' || this.inkRipple() === '0') return false;4090    }4091  } while (element = element.parentNode);4092  return true;4093};4094/**4095 * The attribute `md-ink-ripple` may be a static or interpolated4096 * color value OR a boolean indicator (used to disable ripples)4097 */4098InkRippleCtrl.prototype.inkRipple = function () {4099  return this.$element.attr('md-ink-ripple');4100};4101/**4102 * Creates a new ripple and adds it to the container.  Also tracks ripple in `this.ripples`.4103 * @param left4104 * @param top4105 */4106InkRippleCtrl.prototype.createRipple = function (left, top) {4107  if (!this.isRippleAllowed()) return;4108  var ctrl        = this;4109  var colorUtil   = ctrl.$mdColorUtil;4110  var ripple      = angular.element('<div class="md-ripple"></div>');4111  var width       = this.$element.prop('clientWidth');4112  var height      = this.$element.prop('clientHeight');4113  var x           = Math.max(Math.abs(width - left), left) * 2;4114  var y           = Math.max(Math.abs(height - top), top) * 2;4115  var size        = getSize(this.options.fitRipple, x, y);4116  var color       = this.calculateColor();4117  ripple.css({4118    left:            left + 'px',4119    top:             top + 'px',4120    background:      'black',4121    width:           size + 'px',4122    height:          size + 'px',4123    backgroundColor: colorUtil.rgbaToRgb(color),4124    borderColor:     colorUtil.rgbaToRgb(color)4125  });4126  this.lastRipple = ripple;4127  // we only want one timeout to be running at a time4128  this.clearTimeout();4129  this.timeout    = this.$timeout(function () {4130    ctrl.clearTimeout();4131    if (!ctrl.mousedown) ctrl.fadeInComplete(ripple);4132  }, DURATION * 0.35, false);4133  if (this.options.dimBackground) this.container.css({ backgroundColor: color });4134  this.container.append(ripple);4135  this.ripples.push(ripple);4136  ripple.addClass('md-ripple-placed');4137  this.$mdUtil.nextTick(function () {4138    ripple.addClass('md-ripple-scaled md-ripple-active');4139    ctrl.$timeout(function () {4140      ctrl.clearRipples();4141    }, DURATION, false);4142  }, false);4143  function getSize (fit, x, y) {4144    return fit4145        ? Math.max(x, y)4146        : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));4147  }4148};4149/**4150 * After fadeIn finishes, either kicks off the fade-out animation or queues the element for removal on mouseup4151 * @param ripple4152 */4153InkRippleCtrl.prototype.fadeInComplete = function (ripple) {4154  if (this.lastRipple === ripple) {4155    if (!this.timeout && !this.mousedown) {4156      this.removeRipple(ripple);4157    }4158  } else {4159    this.removeRipple(ripple);4160  }4161};4162/**4163 * Kicks off the animation for removing a ripple4164 * @param ripple {Element}4165 */4166InkRippleCtrl.prototype.removeRipple = function (ripple) {4167  var ctrl  = this;4168  var index = this.ripples.indexOf(ripple);4169  if (index < 0) return;4170  this.ripples.splice(this.ripples.indexOf(ripple), 1);4171  ripple.removeClass('md-ripple-active');4172  ripple.addClass('md-ripple-remove');4173  if (this.ripples.length === 0) this.container.css({ backgroundColor: '' });4174  // use a 2-second timeout in order to allow for the animation to finish4175  // we don't actually care how long the animation takes4176  this.$timeout(function () {4177    ctrl.fadeOutComplete(ripple);4178  }, DURATION, false);4179};4180/**4181 * Removes the provided ripple from the DOM4182 * @param ripple4183 */4184InkRippleCtrl.prototype.fadeOutComplete = function (ripple) {4185  ripple.remove();4186  this.lastRipple = null;4187};4188/**4189 * Used to create an empty directive.  This is used to track flag-directives whose children may have4190 * functionality based on them.4191 *4192 * Example: `md-no-ink` will potentially be used by all child directives.4193 */4194function attrNoDirective () {4195  return { controller: angular.noop };4196}4197(function() {4198  'use strict';4199    /**4200   * @ngdoc service4201   * @name $mdTabInkRipple4202   * @module material.core4203   *4204   * @description4205   * Provides ripple effects for md-tabs.  See $mdInkRipple service for all possible configuration options.4206   *4207   * @param {object=} scope Scope within the current context4208   * @param {object=} element The element the ripple effect should be applied to4209   * @param {object=} options (Optional) Configuration options to override the defaultripple configuration4210   */4211  MdTabInkRipple.$inject = ["$mdInkRipple"];4212  angular.module('material.core')4213    .factory('$mdTabInkRipple', MdTabInkRipple);4214  function MdTabInkRipple($mdInkRipple) {4215    return {4216      attach: attach4217    };4218    function attach(scope, element, options) {4219      return $mdInkRipple.attach(scope, element, angular.extend({4220        center: false,4221        dimBackground: true,4222        outline: false,4223        rippleSize: 'full'4224      }, options));4225    };4226  };4227})();4228angular.module('material.core.theming.palette', [])4229.constant('$mdColorPalette', {4230  'red': {4231    '50': '#ffebee',4232    '100': '#ffcdd2',4233    '200': '#ef9a9a',4234    '300': '#e57373',4235    '400': '#ef5350',4236    '500': '#f44336',4237    '600': '#e53935',4238    '700': '#d32f2f',4239    '800': '#c62828',4240    '900': '#b71c1c',4241    'A100': '#ff8a80',4242    'A200': '#ff5252',4243    'A400': '#ff1744',4244    'A700': '#d50000',4245    'contrastDefaultColor': 'light',4246    'contrastDarkColors': '50 100 200 300 A100',4247    'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'4248  },4249  'pink': {4250    '50': '#fce4ec',4251    '100': '#f8bbd0',4252    '200': '#f48fb1',4253    '300': '#f06292',4254    '400': '#ec407a',4255    '500': '#e91e63',4256    '600': '#d81b60',4257    '700': '#c2185b',4258    '800': '#ad1457',4259    '900': '#880e4f',4260    'A100': '#ff80ab',4261    'A200': '#ff4081',4262    'A400': '#f50057',4263    'A700': '#c51162',4264    'contrastDefaultColor': 'light',4265    'contrastDarkColors': '50 100 200 A100',4266    'contrastStrongLightColors': '500 600 A200 A400 A700'4267  },4268  'purple': {4269    '50': '#f3e5f5',4270    '100': '#e1bee7',4271    '200': '#ce93d8',4272    '300': '#ba68c8',4273    '400': '#ab47bc',4274    '500': '#9c27b0',4275    '600': '#8e24aa',4276    '700': '#7b1fa2',4277    '800': '#6a1b9a',4278    '900': '#4a148c',4279    'A100': '#ea80fc',4280    'A200': '#e040fb',4281    'A400': '#d500f9',4282    'A700': '#aa00ff',4283    'contrastDefaultColor': 'light',4284    'contrastDarkColors': '50 100 200 A100',4285    'contrastStrongLightColors': '300 400 A200 A400 A700'4286  },4287  'deep-purple': {4288    '50': '#ede7f6',4289    '100': '#d1c4e9',4290    '200': '#b39ddb',4291    '300': '#9575cd',4292    '400': '#7e57c2',4293    '500': '#673ab7',4294    '600': '#5e35b1',4295    '700': '#512da8',4296    '800': '#4527a0',4297    '900': '#311b92',4298    'A100': '#b388ff',4299    'A200': '#7c4dff',4300    'A400': '#651fff',4301    'A700': '#6200ea',4302    'contrastDefaultColor': 'light',4303    'contrastDarkColors': '50 100 200 A100',4304    'contrastStrongLightColors': '300 400 A200'4305  },4306  'indigo': {4307    '50': '#e8eaf6',4308    '100': '#c5cae9',4309    '200': '#9fa8da',4310    '300': '#7986cb',4311    '400': '#5c6bc0',4312    '500': '#3f51b5',4313    '600': '#3949ab',4314    '700': '#303f9f',4315    '800': '#283593',4316    '900': '#1a237e',4317    'A100': '#8c9eff',4318    'A200': '#536dfe',4319    'A400': '#3d5afe',4320    'A700': '#304ffe',4321    'contrastDefaultColor': 'light',4322    'contrastDarkColors': '50 100 200 A100',4323    'contrastStrongLightColors': '300 400 A200 A400'4324  },4325  'blue': {4326    '50': '#e3f2fd',4327    '100': '#bbdefb',4328    '200': '#90caf9',4329    '300': '#64b5f6',4330    '400': '#42a5f5',4331    '500': '#2196f3',4332    '600': '#1e88e5',4333    '700': '#1976d2',4334    '800': '#1565c0',4335    '900': '#0d47a1',4336    'A100': '#82b1ff',4337    'A200': '#448aff',4338    'A400': '#2979ff',4339    'A700': '#2962ff',4340    'contrastDefaultColor': 'light',4341    'contrastDarkColors': '50 100 200 300 400 A100',4342    'contrastStrongLightColors': '500 600 700 A200 A400 A700'4343  },4344  'light-blue': {4345    '50': '#e1f5fe',4346    '100': '#b3e5fc',4347    '200': '#81d4fa',4348    '300': '#4fc3f7',4349    '400': '#29b6f6',4350    '500': '#03a9f4',4351    '600': '#039be5',4352    '700': '#0288d1',4353    '800': '#0277bd',4354    '900': '#01579b',4355    'A100': '#80d8ff',4356    'A200': '#40c4ff',4357    'A400': '#00b0ff',4358    'A700': '#0091ea',4359    'contrastDefaultColor': 'dark',4360    'contrastLightColors': '600 700 800 900 A700',4361    'contrastStrongLightColors': '600 700 800 A700'4362  },4363  'cyan': {4364    '50': '#e0f7fa',4365    '100': '#b2ebf2',4366    '200': '#80deea',4367    '300': '#4dd0e1',4368    '400': '#26c6da',4369    '500': '#00bcd4',4370    '600': '#00acc1',4371    '700': '#0097a7',4372    '800': '#00838f',4373    '900': '#006064',4374    'A100': '#84ffff',4375    'A200': '#18ffff',4376    'A400': '#00e5ff',4377    'A700': '#00b8d4',4378    'contrastDefaultColor': 'dark',4379    'contrastLightColors': '700 800 900',4380    'contrastStrongLightColors': '700 800 900'4381  },4382  'teal': {4383    '50': '#e0f2f1',4384    '100': '#b2dfdb',4385    '200': '#80cbc4',4386    '300': '#4db6ac',4387    '400': '#26a69a',4388    '500': '#009688',4389    '600': '#00897b',4390    '700': '#00796b',4391    '800': '#00695c',4392    '900': '#004d40',4393    'A100': '#a7ffeb',4394    'A200': '#64ffda',4395    'A400': '#1de9b6',4396    'A700': '#00bfa5',4397    'contrastDefaultColor': 'dark',4398    'contrastLightColors': '500 600 700 800 900',4399    'contrastStrongLightColors': '500 600 700'4400  },4401  'green': {4402    '50': '#e8f5e9',4403    '100': '#c8e6c9',4404    '200': '#a5d6a7',4405    '300': '#81c784',4406    '400': '#66bb6a',4407    '500': '#4caf50',4408    '600': '#43a047',4409    '700': '#388e3c',4410    '800': '#2e7d32',4411    '900': '#1b5e20',4412    'A100': '#b9f6ca',4413    'A200': '#69f0ae',4414    'A400': '#00e676',4415    'A700': '#00c853',4416    'contrastDefaultColor': 'dark',4417    'contrastLightColors': '500 600 700 800 900',4418    'contrastStrongLightColors': '500 600 700'4419  },4420  'light-green': {4421    '50': '#f1f8e9',4422    '100': '#dcedc8',4423    '200': '#c5e1a5',4424    '300': '#aed581',4425    '400': '#9ccc65',4426    '500': '#8bc34a',4427    '600': '#7cb342',4428    '700': '#689f38',4429    '800': '#558b2f',4430    '900': '#33691e',4431    'A100': '#ccff90',4432    'A200': '#b2ff59',4433    'A400': '#76ff03',4434    'A700': '#64dd17',4435    'contrastDefaultColor': 'dark',4436    'contrastLightColors': '700 800 900',4437    'contrastStrongLightColors': '700 800 900'4438  },4439  'lime': {4440    '50': '#f9fbe7',4441    '100': '#f0f4c3',4442    '200': '#e6ee9c',4443    '300': '#dce775',4444    '400': '#d4e157',4445    '500': '#cddc39',4446    '600': '#c0ca33',4447    '700': '#afb42b',4448    '800': '#9e9d24',4449    '900': '#827717',4450    'A100': '#f4ff81',4451    'A200': '#eeff41',4452    'A400': '#c6ff00',4453    'A700': '#aeea00',4454    'contrastDefaultColor': 'dark',4455    'contrastLightColors': '900',4456    'contrastStrongLightColors': '900'4457  },4458  'yellow': {4459    '50': '#fffde7',4460    '100': '#fff9c4',4461    '200': '#fff59d',4462    '300': '#fff176',4463    '400': '#ffee58',4464    '500': '#ffeb3b',4465    '600': '#fdd835',4466    '700': '#fbc02d',4467    '800': '#f9a825',4468    '900': '#f57f17',4469    'A100': '#ffff8d',4470    'A200': '#ffff00',4471    'A400': '#ffea00',4472    'A700': '#ffd600',4473    'contrastDefaultColor': 'dark'4474  },4475  'amber': {4476    '50': '#fff8e1',4477    '100': '#ffecb3',4478    '200': '#ffe082',4479    '300': '#ffd54f',4480    '400': '#ffca28',4481    '500': '#ffc107',4482    '600': '#ffb300',4483    '700': '#ffa000',4484    '800': '#ff8f00',4485    '900': '#ff6f00',4486    'A100': '#ffe57f',4487    'A200': '#ffd740',4488    'A400': '#ffc400',4489    'A700': '#ffab00',4490    'contrastDefaultColor': 'dark'4491  },4492  'orange': {4493    '50': '#fff3e0',4494    '100': '#ffe0b2',4495    '200': '#ffcc80',4496    '300': '#ffb74d',4497    '400': '#ffa726',4498    '500': '#ff9800',4499    '600': '#fb8c00',4500    '700': '#f57c00',4501    '800': '#ef6c00',4502    '900': '#e65100',4503    'A100': '#ffd180',4504    'A200': '#ffab40',4505    'A400': '#ff9100',4506    'A700': '#ff6d00',4507    'contrastDefaultColor': 'dark',4508    'contrastLightColors': '800 900',4509    'contrastStrongLightColors': '800 900'4510  },4511  'deep-orange': {4512    '50': '#fbe9e7',4513    '100': '#ffccbc',4514    '200': '#ffab91',4515    '300': '#ff8a65',4516    '400': '#ff7043',4517    '500': '#ff5722',4518    '600': '#f4511e',4519    '700': '#e64a19',4520    '800': '#d84315',4521    '900': '#bf360c',4522    'A100': '#ff9e80',4523    'A200': '#ff6e40',4524    'A400': '#ff3d00',4525    'A700': '#dd2c00',4526    'contrastDefaultColor': 'light',4527    'contrastDarkColors': '50 100 200 300 400 A100 A200',4528    'contrastStrongLightColors': '500 600 700 800 900 A400 A700'4529  },4530  'brown': {4531    '50': '#efebe9',4532    '100': '#d7ccc8',4533    '200': '#bcaaa4',4534    '300': '#a1887f',4535    '400': '#8d6e63',4536    '500': '#795548',4537    '600': '#6d4c41',4538    '700': '#5d4037',4539    '800': '#4e342e',4540    '900': '#3e2723',4541    'A100': '#d7ccc8',4542    'A200': '#bcaaa4',4543    'A400': '#8d6e63',4544    'A700': '#5d4037',4545    'contrastDefaultColor': 'light',4546    'contrastDarkColors': '50 100 200 A100 A200',4547    'contrastStrongLightColors': '300 400'4548  },4549  'grey': {4550    '50': '#fafafa',4551    '100': '#f5f5f5',4552    '200': '#eeeeee',4553    '300': '#e0e0e0',4554    '400': '#bdbdbd',4555    '500': '#9e9e9e',4556    '600': '#757575',4557    '700': '#616161',4558    '800': '#424242',4559    '900': '#212121',4560    'A100': '#ffffff',4561    'A200': '#000000',4562    'A400': '#303030',4563    'A700': '#616161',4564    'contrastDefaultColor': 'dark',4565    'contrastLightColors': '600 700 800 900 A200 A400 A700'4566  },4567  'blue-grey': {4568    '50': '#eceff1',4569    '100': '#cfd8dc',4570    '200': '#b0bec5',4571    '300': '#90a4ae',4572    '400': '#78909c',4573    '500': '#607d8b',4574    '600': '#546e7a',4575    '700': '#455a64',4576    '800': '#37474f',4577    '900': '#263238',4578    'A100': '#cfd8dc',4579    'A200': '#b0bec5',4580    'A400': '#78909c',4581    'A700': '#455a64',4582    'contrastDefaultColor': 'light',4583    'contrastDarkColors': '50 100 200 300 A100 A200',4584    'contrastStrongLightColors': '400 500 700'4585  }4586});4587(function(angular) {4588  'use strict';4589/**4590 * @ngdoc module4591 * @name material.core.theming4592 * @description4593 * Theming4594 */4595detectDisabledThemes.$inject = ["$mdThemingProvider"];4596ThemingDirective.$inject = ["$mdTheming", "$interpolate", "$log"];4597ThemableDirective.$inject = ["$mdTheming"];4598ThemingProvider.$inject = ["$mdColorPalette", "$$mdMetaProvider"];4599generateAllThemes.$inject = ["$injector", "$mdTheming"];4600angular.module('material.core.theming', ['material.core.theming.palette', 'material.core.meta'])4601  .directive('mdTheme', ThemingDirective)4602  .directive('mdThemable', ThemableDirective)4603  .directive('mdThemesDisabled', disableThemesDirective )4604  .provider('$mdTheming', ThemingProvider)4605  .config( detectDisabledThemes )4606  .run(generateAllThemes);4607/**4608 * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute4609 * If yes, then immediately disable all theme stylesheet generation and DOM injection4610 */4611/**4612 * ngInject4613 */4614function detectDisabledThemes($mdThemingProvider) {4615  var isDisabled = !!document.querySelector('[md-themes-disabled]');4616  $mdThemingProvider.disableTheming(isDisabled);4617}4618/**4619 * @ngdoc service4620 * @name $mdThemingProvider4621 * @module material.core.theming4622 *4623 * @description Provider to configure the `$mdTheming` service.4624 *4625 * ### Default Theme4626 * The `$mdThemingProvider` uses by default the following theme configuration:4627 *4628 * - Primary Palette: `Primary`4629 * - Accent Palette: `Pink`4630 * - Warn Palette: `Deep-Orange`4631 * - Background Palette: `Grey`4632 *4633 * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite4634 * the default theme.<br/>4635 * This can be done by using the following markup.4636 *4637 * <hljs lang="js">4638 *   myAppModule.config(function($mdThemingProvider) {4639 *     $mdThemingProvider4640 *       .theme('default')4641 *       .primaryPalette('blue')4642 *       .accentPalette('teal')4643 *       .warnPalette('red')4644 *       .backgroundPalette('grey');4645 *   });4646 * </hljs>4647 *4648 * ### Dynamic Themes4649 *4650 * By default, if you change a theme at runtime, the `$mdTheming` service will not detect those changes.<br/>4651 * If you have an application, which changes its theme on runtime, you have to enable theme watching.4652 *4653 * <hljs lang="js">4654 *   myAppModule.config(function($mdThemingProvider) {4655 *     // Enable theme watching.4656 *     $mdThemingProvider.alwaysWatchTheme(true);4657 *   });4658 * </hljs>4659 *4660 * ### Custom Theme Styles4661 *4662 * Sometimes you may want to use your own theme styles for some custom components.<br/>4663 * You are able to register your own styles by using the following markup.4664 *4665 * <hljs lang="js">4666 *   myAppModule.config(function($mdThemingProvider) {4667 *     // Register our custom stylesheet into the theming provider.4668 *     $mdThemingProvider.registerStyles(STYLESHEET);4669 *   });4670 * </hljs>4671 *4672 * The `registerStyles` method only accepts strings as value, so you're actually not able to load an external4673 * stylesheet file into the `$mdThemingProvider`.4674 *4675 * If it's necessary to load an external stylesheet, we suggest using a bundler, which supports including raw content,4676 * like [raw-loader](https://github.com/webpack/raw-loader) for `webpack`.4677 *4678 * <hljs lang="js">4679 *   myAppModule.config(function($mdThemingProvider) {4680 *     // Register your custom stylesheet into the theming provider.4681 *     $mdThemingProvider.registerStyles(require('../styles/my-component.theme.css'));4682 *   });4683 * </hljs>4684 *4685 * ### Browser color4686 *4687 * Enables browser header coloring4688 * for more info please visit:4689 * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color4690 *4691 * Options parameter: <br/>4692 * `theme`   - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme. <br/>4693 * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',4694 *             'accent', 'background' and 'warn'. Default is `primary`. <br/>4695 * `hue`     - The hue from the selected palette. Default is `800`<br/>4696 *4697 * <hljs lang="js">4698 *   myAppModule.config(function($mdThemingProvider) {4699 *     // Enable browser color4700 *     $mdThemingProvider.enableBrowserColor({4701 *       theme: 'myTheme', // Default is 'default'4702 *       palette: 'accent', // Default is 'primary', any basic material palette and extended palettes are available4703 *       hue: '200' // Default is '800'4704 *     });4705 *   });4706 * </hljs>4707 */4708/**4709 * @ngdoc method4710 * @name $mdThemingProvider#registerStyles4711 * @param {string} styles The styles to be appended to Angular Material's built in theme css.4712 */4713/**4714 * @ngdoc method4715 * @name $mdThemingProvider#setNonce4716 * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.4717 * Setting a value allows the use of CSP policy without using the unsafe-inline directive.4718 */4719/**4720 * @ngdoc method4721 * @name $mdThemingProvider#setDefaultTheme4722 * @param {string} themeName Default theme name to be applied to elements. Default value is `default`.4723 */4724/**4725 * @ngdoc method4726 * @name $mdThemingProvider#alwaysWatchTheme4727 * @param {boolean} watch Whether or not to always watch themes for changes and re-apply4728 * classes when they change. Default is `false`. Enabling can reduce performance.4729 */4730/**4731 * @ngdoc method4732 * @name $mdThemingProvider#enableBrowserColor4733 * @param {Object=} options Options object for the browser color<br/>4734 * `theme`   - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme. <br/>4735 * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',4736 *             'accent', 'background' and 'warn'. Default is `primary`. <br/>4737 * `hue`     - The hue from the selected palette. Default is `800`<br/>4738 * @returns {Function} remove function of the browser color4739 */4740/* Some Example Valid Theming Expressions4741 * =======================================4742 *4743 * Intention group expansion: (valid for primary, accent, warn, background)4744 *4745 * {{primary-100}} - grab shade 100 from the primary palette4746 * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.74747 * {{primary-100-contrast}} - grab shade 100's contrast color4748 * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette4749 * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-14750 * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue4751 * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules4752 * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue4753 * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules4754 *4755 * Foreground expansion: Applies rgba to black/white foreground text4756 *4757 * {{foreground-1}} - used for primary text4758 * {{foreground-2}} - used for secondary text/divider4759 * {{foreground-3}} - used for disabled text4760 * {{foreground-4}} - used for dividers4761 *4762 */4763// In memory generated CSS rules; registered by theme.name4764var GENERATED = { };4765// In memory storage of defined themes and color palettes (both loaded by CSS, and user specified)4766var PALETTES;4767// Text Colors on light and dark backgrounds4768// @see https://www.google.com/design/spec/style/color.html#color-text-background-colors4769var DARK_FOREGROUND = {4770  name: 'dark',4771  '1': 'rgba(0,0,0,0.87)',4772  '2': 'rgba(0,0,0,0.54)',4773  '3': 'rgba(0,0,0,0.38)',4774  '4': 'rgba(0,0,0,0.12)'4775};4776var LIGHT_FOREGROUND = {4777  name: 'light',4778  '1': 'rgba(255,255,255,1.0)',4779  '2': 'rgba(255,255,255,0.7)',4780  '3': 'rgba(255,255,255,0.5)',4781  '4': 'rgba(255,255,255,0.12)'4782};4783var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';4784var LIGHT_SHADOW = '';4785var DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)');4786var LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87)');4787var STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)');4788var THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background'];4789var DEFAULT_COLOR_TYPE = 'primary';4790// A color in a theme will use these hues by default, if not specified by user.4791var LIGHT_DEFAULT_HUES = {4792  'accent': {4793    'default': 'A200',4794    'hue-1': 'A100',4795    'hue-2': 'A400',4796    'hue-3': 'A700'4797  },4798  'background': {4799    'default': '50',4800    'hue-1': 'A100',4801    'hue-2': '100',4802    'hue-3': '300'4803  }4804};4805var DARK_DEFAULT_HUES = {4806  'background': {4807    'default': 'A400',4808    'hue-1': '800',4809    'hue-2': '900',4810    'hue-3': 'A200'4811  }4812};4813THEME_COLOR_TYPES.forEach(function(colorType) {4814  // Color types with unspecified default hues will use these default hue values4815  var defaultDefaultHues = {4816    'default': '500',4817    'hue-1': '300',4818    'hue-2': '800',4819    'hue-3': 'A100'4820  };4821  if (!LIGHT_DEFAULT_HUES[colorType]) LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues;4822  if (!DARK_DEFAULT_HUES[colorType]) DARK_DEFAULT_HUES[colorType] = defaultDefaultHues;4823});4824var VALID_HUE_VALUES = [4825  '50', '100', '200', '300', '400', '500', '600',4826  '700', '800', '900', 'A100', 'A200', 'A400', 'A700'4827];4828var themeConfig = {4829  disableTheming : false,   // Generate our themes at run time; also disable stylesheet DOM injection4830  generateOnDemand : false, // Whether or not themes are to be generated on-demand (vs. eagerly).4831  registeredStyles : [],    // Custom styles registered to be used in the theming of custom components.4832  nonce : null              // Nonce to be added as an attribute to the generated themes style tags.4833};4834/**4835 *4836 */4837function ThemingProvider($mdColorPalette, $$mdMetaProvider) {4838  ThemingService.$inject = ["$rootScope", "$log"];4839  PALETTES = { };4840  var THEMES = { };4841  var themingProvider;4842  var alwaysWatchTheme = false;4843  var defaultTheme = 'default';4844  // Load JS Defined Palettes4845  angular.extend(PALETTES, $mdColorPalette);4846  // Default theme defined in core.js4847  /**4848   * Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter4849   * @param {string} color Hex value of the wanted browser color4850   * @returns {Function} Remove function of the meta tags4851   */4852  var setBrowserColor = function (color) {4853    // Chrome, Firefox OS and Opera4854    var removeChrome = $$mdMetaProvider.setMeta('theme-color', color);4855    // Windows Phone4856    var removeWindows = $$mdMetaProvider.setMeta('msapplication-navbutton-color', color);4857    return function () {4858      removeChrome();4859      removeWindows();4860    }4861  };4862  /**4863   * Enables browser header coloring4864   * for more info please visit:4865   * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color4866   *4867   * The default color is `800` from `primary` palette of the `default` theme4868   *4869   * options are:4870   * `theme`   - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme4871   * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',4872   *             'accent', 'background' and 'warn'. Default is `primary`4873   * `hue`     - The hue from the selected palette. Default is `800`4874   *4875   * @param {Object=} options Options object for the browser color4876   * @returns {Function} remove function of the browser color4877   */4878  var enableBrowserColor = function (options) {4879    options = angular.isObject(options) ? options : {};4880    var theme = options.theme || 'default';4881    var hue = options.hue || '800';4882    var palette = PALETTES[options.palette] ||4883      PALETTES[THEMES[theme].colors[options.palette || 'primary'].name];4884    var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue];4885    return setBrowserColor(color);4886  };4887  return themingProvider = {4888    definePalette: definePalette,4889    extendPalette: extendPalette,4890    theme: registerTheme,4891    /**4892     * return a read-only clone of the current theme configuration4893     */4894    configuration : function() {4895      return angular.extend( { }, themeConfig, {4896        defaultTheme : defaultTheme,4897        alwaysWatchTheme : alwaysWatchTheme,4898        registeredStyles : [].concat(themeConfig.registeredStyles)4899      });4900    },4901    /**4902     * Easy way to disable theming without having to use4903     * `.constant("$MD_THEME_CSS","");` This disables4904     * all dynamic theme style sheet generations and injections...4905     */4906    disableTheming: function(isDisabled) {4907      themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;4908    },4909    registerStyles: function(styles) {4910      themeConfig.registeredStyles.push(styles);4911    },4912    setNonce: function(nonceValue) {4913      themeConfig.nonce = nonceValue;4914    },4915    generateThemesOnDemand: function(onDemand) {4916      themeConfig.generateOnDemand = onDemand;4917    },4918    setDefaultTheme: function(theme) {4919      defaultTheme = theme;4920    },4921    alwaysWatchTheme: function(alwaysWatch) {4922      alwaysWatchTheme = alwaysWatch;4923    },4924    enableBrowserColor: enableBrowserColor,4925    $get: ThemingService,4926    _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,4927    _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,4928    _PALETTES: PALETTES,4929    _THEMES: THEMES,4930    _parseRules: parseRules,4931    _rgba: rgba4932  };4933  // Example: $mdThemingProvider.definePalette('neonRed', { 50: '#f5fafa', ... });4934  function definePalette(name, map) {4935    map = map || {};4936    PALETTES[name] = checkPaletteValid(name, map);4937    return themingProvider;4938  }4939  // Returns an new object which is a copy of a given palette `name` with variables from4940  // `map` overwritten4941  // Example: var neonRedMap = $mdThemingProvider.extendPalette('red', { 50: '#f5fafafa' });4942  function extendPalette(name, map) {4943    return checkPaletteValid(name,  angular.extend({}, PALETTES[name] || {}, map) );4944  }4945  // Make sure that palette has all required hues4946  function checkPaletteValid(name, map) {4947    var missingColors = VALID_HUE_VALUES.filter(function(field) {4948      return !map[field];4949    });4950    if (missingColors.length) {4951      throw new Error("Missing colors %1 in palette %2!"4952                      .replace('%1', missingColors.join(', '))4953                      .replace('%2', name));4954    }4955    return map;4956  }4957  // Register a theme (which is a collection of color palettes to use with various states4958  // ie. warn, accent, primary )4959  // Optionally inherit from an existing theme4960  // $mdThemingProvider.theme('custom-theme').primaryPalette('red');4961  function registerTheme(name, inheritFrom) {4962    if (THEMES[name]) return THEMES[name];4963    inheritFrom = inheritFrom || 'default';4964    var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom;4965    var theme = new Theme(name);4966    if (parentTheme) {4967      angular.forEach(parentTheme.colors, function(color, colorType) {4968        theme.colors[colorType] = {4969          name: color.name,4970          // Make sure a COPY of the hues is given to the child color,4971          // not the same reference.4972          hues: angular.extend({}, color.hues)4973        };4974      });4975    }4976    THEMES[name] = theme;4977    return theme;4978  }4979  function Theme(name) {4980    var self = this;4981    self.name = name;4982    self.colors = {};4983    self.dark = setDark;4984    setDark(false);4985    function setDark(isDark) {4986      isDark = arguments.length === 0 ? true : !!isDark;4987      // If no change, abort4988      if (isDark === self.isDark) return;4989      self.isDark = isDark;4990      self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;4991      self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;4992      // Light and dark themes have different default hues.4993      // Go through each existing color type for this theme, and for every4994      // hue value that is still the default hue value from the previous light/dark setting,4995      // set it to the default hue value from the new light/dark setting.4996      var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES;4997      var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES;4998      angular.forEach(newDefaultHues, function(newDefaults, colorType) {4999        var color = self.colors[colorType];5000        var oldDefaults = oldDefaultHues[colorType];5001        if (color) {5002          for (var hueName in color.hues) {5003            if (color.hues[hueName] === oldDefaults[hueName]) {5004              color.hues[hueName] = newDefaults[hueName];5005            }5006          }5007        }5008      });5009      return self;5010    }5011    THEME_COLOR_TYPES.forEach(function(colorType) {5012      var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];5013      self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {5014        var color = self.colors[colorType] = {5015          name: paletteName,5016          hues: angular.extend({}, defaultHues, hues)5017        };5018        Object.keys(color.hues).forEach(function(name) {5019          if (!defaultHues[name]) {5020            throw new Error("Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4"5021              .replace('%1', name)5022              .replace('%2', self.name)5023              .replace('%3', paletteName)5024              .replace('%4', Object.keys(defaultHues).join(', '))5025            );5026          }5027        });5028        Object.keys(color.hues).map(function(key) {5029          return color.hues[key];5030        }).forEach(function(hueValue) {5031          if (VALID_HUE_VALUES.indexOf(hueValue) == -1) {5032            throw new Error("Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5"5033              .replace('%1', hueValue)5034              .replace('%2', self.name)5035              .replace('%3', colorType)5036              .replace('%4', paletteName)5037              .replace('%5', VALID_HUE_VALUES.join(', '))5038            );5039          }5040        });5041        return self;5042      };5043      self[colorType + 'Color'] = function() {5044        var args = Array.prototype.slice.call(arguments);5045        console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' +5046                     'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.');5047        return self[colorType + 'Palette'].apply(self, args);5048      };5049    });5050  }5051  /**5052   * @ngdoc service5053   * @name $mdTheming5054   *5055   * @description5056   *5057   * Service that makes an element apply theming related classes to itself.5058   *5059   * ```js5060   * app.directive('myFancyDirective', function($mdTheming) {5061   *   return {5062   *     restrict: 'e',5063   *     link: function(scope, el, attrs) {5064   *       $mdTheming(el);5065   *     }5066   *   };5067   * });5068   * ```5069   * @param {el=} element to apply theming to5070   */5071  /* ngInject */5072  function ThemingService($rootScope, $log) {5073        // Allow us to be invoked via a linking function signature.5074    var applyTheme = function (scope, el) {5075          if (el === undefined) { el = scope; scope = undefined; }5076          if (scope === undefined) { scope = $rootScope; }5077          applyTheme.inherit(el, el);5078        };5079    applyTheme.THEMES = angular.extend({}, THEMES);5080    applyTheme.PALETTES = angular.extend({}, PALETTES);5081    applyTheme.inherit = inheritTheme;5082    applyTheme.registered = registered;5083    applyTheme.defaultTheme = function() { return defaultTheme; };5084    applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); };5085    applyTheme.setBrowserColor = enableBrowserColor;5086    return applyTheme;5087    /**5088     * Determine is specified theme name is a valid, registered theme5089     */5090    function registered(themeName) {5091      if (themeName === undefined || themeName === '') return true;5092      return applyTheme.THEMES[themeName] !== undefined;5093    }5094    /**5095     * Get theme name for the element, then update with Theme CSS class5096     */5097    function inheritTheme (el, parent) {5098      var ctrl = parent.controller('mdTheme');5099      var attrThemeValue = el.attr('md-theme-watch');5100      var watchTheme = (alwaysWatchTheme || angular.isDefined(attrThemeValue)) && attrThemeValue != 'false';5101      updateThemeClass(lookupThemeName());5102      if ((alwaysWatchTheme && !registerChangeCallback()) || (!alwaysWatchTheme && watchTheme)) {5103        el.on('$destroy', $rootScope.$watch(lookupThemeName, updateThemeClass) );5104      }5105      /**5106       * Find the theme name from the parent controller or element data5107       */5108      function lookupThemeName() {5109        // As a few components (dialog) add their controllers later, we should also watch for a controller init.5110        ctrl = parent.controller('mdTheme') || el.data('$mdThemeController');5111        return ctrl && ctrl.$mdTheme || (defaultTheme == 'default' ? '' : defaultTheme);5112      }5113      /**5114       * Remove old theme class and apply a new one5115       * NOTE: if not a valid theme name, then the current name is not changed5116       */5117      function updateThemeClass(theme) {5118        if (!theme) return;5119        if (!registered(theme)) {5120          $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' +5121                    'Register it with $mdThemingProvider.theme().');5122        }5123        var oldTheme = el.data('$mdThemeName');5124        if (oldTheme) el.removeClass('md-' + oldTheme +'-theme');5125        el.addClass('md-' + theme + '-theme');5126        el.data('$mdThemeName', theme);5127        if (ctrl) {5128          el.data('$mdThemeController', ctrl);5129        }5130      }5131      /**5132       * Register change callback with parent mdTheme controller5133       */5134      function registerChangeCallback() {5135        var parentController = parent.controller('mdTheme');5136        if (!parentController) return false;5137        el.on('$destroy', parentController.registerChanges( function() {5138          updateThemeClass(lookupThemeName());5139        }));5140        return true;5141      }5142    }5143  }5144}5145function ThemingDirective($mdTheming, $interpolate, $log) {5146  return {5147    priority: 100,5148    link: {5149      pre: function(scope, el, attrs) {5150        var registeredCallbacks = [];5151        var ctrl = {5152          registerChanges: function (cb, context) {5153            if (context) {5154              cb = angular.bind(context, cb);5155            }5156            registeredCallbacks.push(cb);5157            return function () {5158              var index = registeredCallbacks.indexOf(cb);5159              if (index > -1) {5160                registeredCallbacks.splice(index, 1);5161              }5162            };5163          },5164          $setTheme: function (theme) {5165            if (!$mdTheming.registered(theme)) {5166              $log.warn('attempted to use unregistered theme \'' + theme + '\'');5167            }5168            ctrl.$mdTheme = theme;5169            registeredCallbacks.forEach(function (cb) {5170              cb();5171            });5172          }5173        };5174        el.data('$mdThemeController', ctrl);5175        ctrl.$setTheme($interpolate(attrs.mdTheme)(scope));5176        attrs.$observe('mdTheme', ctrl.$setTheme);5177      }5178    }5179  };5180}5181/**5182 * Special directive that will disable ALL runtime Theme style generation and DOM injection5183 *5184 * <link rel="stylesheet" href="angular-material.min.css">5185 * <link rel="stylesheet" href="angular-material.themes.css">5186 *5187 * <body md-themes-disabled>5188 *  ...5189 * </body>5190 *5191 * Note: Using md-themes-css directive requires the developer to load external5192 * theme stylesheets; e.g. custom themes from Material-Tools:5193 *5194 *       `angular-material.themes.css`5195 *5196 * Another option is to use the ThemingProvider to configure and disable the attribute5197 * conversions; this would obviate the use of the `md-themes-css` directive5198 *5199 */5200function disableThemesDirective() {5201  themeConfig.disableTheming = true;5202  // Return a 1x-only, first-match attribute directive5203  return {5204    restrict : 'A',5205    priority : '900'5206  };5207}5208function ThemableDirective($mdTheming) {5209  return $mdTheming;5210}5211function parseRules(theme, colorType, rules) {5212  checkValidPalette(theme, colorType);5213  rules = rules.replace(/THEME_NAME/g, theme.name);5214  var generatedRules = [];5215  var color = theme.colors[colorType];5216  var themeNameRegex = new RegExp('\\.md-' + theme.name + '-theme', 'g');5217  // Matches '{{ primary-color }}', etc5218  var hueRegex = new RegExp('(\'|")?{{\\s*(' + colorType + ')-(color|contrast)-?(\\d\\.?\\d*)?\\s*}}(\"|\')?','g');5219  var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow|default)-?(\d\.?\d*)?(contrast)?\s*\}\}'?"?/g;5220  var palette = PALETTES[color.name];5221  // find and replace simple variables where we use a specific hue, not an entire palette5222  // eg. "{{primary-100}}"5223  //\(' + THEME_COLOR_TYPES.join('\|') + '\)'5224  rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity, contrast) {5225    if (colorType === 'foreground') {5226      if (hue == 'shadow') {5227        return theme.foregroundShadow;5228      } else {5229        return theme.foregroundPalette[hue] || theme.foregroundPalette['1'];5230      }5231    }5232    // `default` is also accepted as a hue-value, because the background palettes are5233    // using it as a name for the default hue.5234    if (hue.indexOf('hue') === 0 || hue === 'default') {5235      hue = theme.colors[colorType].hues[hue];5236    }5237    return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity );5238  });5239  // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)5240  angular.forEach(color.hues, function(hueValue, hueName) {5241    var newRule = rules5242      .replace(hueRegex, function(match, _, colorType, hueType, opacity) {5243        return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity);5244      });5245    if (hueName !== 'default') {5246      newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName);5247    }5248    // Don't apply a selector rule to the default theme, making it easier to override5249    // styles of the base-component5250    if (theme.name == 'default') {5251      var themeRuleRegex = /((?:(?:(?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)+) )?)((?:(?:\w|\.|-)+)?)\.md-default-theme((?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g;5252      newRule = newRule.replace(themeRuleRegex, function(match, prefix, target, suffix) {5253        return match + ', ' + prefix + target + suffix;5254      });5255    }5256    generatedRules.push(newRule);5257  });5258  return generatedRules;5259}5260var rulesByType = {};5261// Generate our themes at run time given the state of THEMES and PALETTES5262function generateAllThemes($injector, $mdTheming) {5263  var head = document.head;5264  var firstChild = head ? head.firstElementChild : null;5265  var themeCss = !themeConfig.disableTheming && $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : '';5266  // Append our custom registered styles to the theme stylesheet.5267  themeCss += themeConfig.registeredStyles.join('');5268  if ( !firstChild ) return;5269  if (themeCss.length === 0) return; // no rules, so no point in running this expensive task5270  // Expose contrast colors for palettes to ensure that text is always readable5271  angular.forEach(PALETTES, sanitizePalette);5272  // MD_THEME_CSS is a string generated by the build process that includes all the themable5273  // components as templates5274  // Break the CSS into individual rules5275  var rules = themeCss5276                  .split(/\}(?!(\}|'|"|;))/)5277                  .filter(function(rule) { return rule && rule.trim().length; })5278                  .map(function(rule) { return rule.trim() + '}'; });5279  var ruleMatchRegex = new RegExp('md-(' + THEME_COLOR_TYPES.join('|') + ')', 'g');5280  THEME_COLOR_TYPES.forEach(function(type) {5281    rulesByType[type] = '';5282  });5283  // Sort the rules based on type, allowing us to do color substitution on a per-type basis5284  rules.forEach(function(rule) {5285    var match = rule.match(ruleMatchRegex);5286    // First: test that if the rule has '.md-accent', it goes into the accent set of rules5287    for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) {5288      if (rule.indexOf('.md-' + type) > -1) {5289        return rulesByType[type] += rule;5290      }5291    }5292    // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from5293    // there5294    for (i = 0; type = THEME_COLOR_TYPES[i]; i++) {5295      if (rule.indexOf(type) > -1) {5296        return rulesByType[type] += rule;5297      }5298    }5299    // Default to the primary array5300    return rulesByType[DEFAULT_COLOR_TYPE] += rule;5301  });5302  // If themes are being generated on-demand, quit here. The user will later manually5303  // call generateTheme to do this on a theme-by-theme basis.5304  if (themeConfig.generateOnDemand) return;5305  angular.forEach($mdTheming.THEMES, function(theme) {5306    if (!GENERATED[theme.name] && !($mdTheming.defaultTheme() !== 'default' && theme.name === 'default')) {5307      generateTheme(theme, theme.name, themeConfig.nonce);5308    }5309  });5310  // *************************5311  // Internal functions5312  // *************************5313  // The user specifies a 'default' contrast color as either light or dark,5314  // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light)5315  function sanitizePalette(palette, name) {5316    var defaultContrast = palette.contrastDefaultColor;5317    var lightColors = palette.contrastLightColors || [];5318    var strongLightColors = palette.contrastStrongLightColors || [];5319    var darkColors = palette.contrastDarkColors || [];5320    // These colors are provided as space-separated lists5321    if (typeof lightColors === 'string') lightColors = lightColors.split(' ');5322    if (typeof strongLightColors === 'string') strongLightColors = strongLightColors.split(' ');5323    if (typeof darkColors === 'string') darkColors = darkColors.split(' ');5324    // Cleanup after ourselves5325    delete palette.contrastDefaultColor;5326    delete palette.contrastLightColors;5327    delete palette.contrastStrongLightColors;5328    delete palette.contrastDarkColors;5329    // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR }5330    angular.forEach(palette, function(hueValue, hueName) {5331      if (angular.isObject(hueValue)) return; // Already converted5332      // Map everything to rgb colors5333      var rgbValue = colorToRgbaArray(hueValue);5334      if (!rgbValue) {5335        throw new Error("Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected."5336                        .replace('%1', hueValue)5337                        .replace('%2', palette.name)5338                        .replace('%3', hueName));5339      }5340      palette[hueName] = {5341        hex: palette[hueName],5342        value: rgbValue,5343        contrast: getContrastColor()5344      };5345      function getContrastColor() {5346        if (defaultContrast === 'light') {5347          if (darkColors.indexOf(hueName) > -1) {5348            return DARK_CONTRAST_COLOR;5349          } else {5350            return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR5351              : LIGHT_CONTRAST_COLOR;5352          }5353        } else {5354          if (lightColors.indexOf(hueName) > -1) {5355            return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR5356              : LIGHT_CONTRAST_COLOR;5357          } else {5358            return DARK_CONTRAST_COLOR;5359          }5360        }5361      }5362    });5363  }5364}5365function generateTheme(theme, name, nonce) {5366  var head = document.head;5367  var firstChild = head ? head.firstElementChild : null;5368  if (!GENERATED[name]) {5369    // For each theme, use the color palettes specified for5370    // `primary`, `warn` and `accent` to generate CSS rules.5371    THEME_COLOR_TYPES.forEach(function(colorType) {5372      var styleStrings = parseRules(theme, colorType, rulesByType[colorType]);5373      while (styleStrings.length) {5374        var styleContent = styleStrings.shift();5375        if (styleContent) {5376          var style = document.createElement('style');5377          style.setAttribute('md-theme-style', '');5378          if (nonce) {5379            style.setAttribute('nonce', nonce);5380          }5381          style.appendChild(document.createTextNode(styleContent));5382          head.insertBefore(style, firstChild);5383        }5384      }5385    });5386    GENERATED[theme.name] = true;5387  }5388}5389function checkValidPalette(theme, colorType) {5390  // If theme attempts to use a palette that doesnt exist, throw error5391  if (!PALETTES[ (theme.colors[colorType] || {}).name ]) {5392    throw new Error(5393      "You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3"5394                    .replace('%1', theme.name)5395                    .replace('%2', colorType)5396                    .replace('%3', Object.keys(PALETTES).join(', '))5397    );5398  }5399}5400function colorToRgbaArray(clr) {5401  if (angular.isArray(clr) && clr.length == 3) return clr;5402  if (/^rgb/.test(clr)) {5403    return clr.replace(/(^\s*rgba?\(|\)\s*$)/g, '').split(',').map(function(value, i) {5404      return i == 3 ? parseFloat(value, 10) : parseInt(value, 10);5405    });5406  }5407  if (clr.charAt(0) == '#') clr = clr.substring(1);5408  if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return;5409  var dig = clr.length / 3;5410  var red = clr.substr(0, dig);5411  var grn = clr.substr(dig, dig);5412  var blu = clr.substr(dig * 2);5413  if (dig === 1) {5414    red += red;5415    grn += grn;5416    blu += blu;5417  }5418  return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)];5419}5420function rgba(rgbArray, opacity) {5421  if ( !rgbArray ) return "rgb('0,0,0')";5422  if (rgbArray.length == 4) {5423    rgbArray = angular.copy(rgbArray);5424    opacity ? rgbArray.pop() : opacity = rgbArray.pop();5425  }5426  return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ?5427    'rgba(' + rgbArray.join(',') + ',' + opacity + ')' :5428    'rgb(' + rgbArray.join(',') + ')';5429}5430})(window.angular);5431// Polyfill angular < 1.4 (provide $animateCss)5432angular5433  .module('material.core')5434  .factory('$$mdAnimate', ["$q", "$timeout", "$mdConstant", "$animateCss", function($q, $timeout, $mdConstant, $animateCss){5435     // Since $$mdAnimate is injected into $mdUtil... use a wrapper function5436     // to subsequently inject $mdUtil as an argument to the AnimateDomUtils5437     return function($mdUtil) {5438       return AnimateDomUtils( $mdUtil, $q, $timeout, $mdConstant, $animateCss);5439     };5440   }]);5441/**5442 * Factory function that requires special injections5443 */5444function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {5445  var self;5446  return self = {5447    /**5448     *5449     */5450    translate3d : function( target, from, to, options ) {5451      return $animateCss(target,{5452        from:from,5453        to:to,5454        addClass:options.transitionInClass,5455        removeClass:options.transitionOutClass5456      })5457      .start()5458      .then(function(){5459          // Resolve with reverser function...5460          return reverseTranslate;5461      });5462      /**5463       * Specific reversal of the request translate animation above...5464       */5465      function reverseTranslate (newFrom) {5466        return $animateCss(target, {5467           to: newFrom || from,5468           addClass: options.transitionOutClass,5469           removeClass: options.transitionInClass5470        }).start();5471      }5472    },5473    /**5474     * Listen for transitionEnd event (with optional timeout)5475     * Announce completion or failure via promise handlers5476     */5477    waitTransitionEnd: function (element, opts) {5478      var TIMEOUT = 3000; // fallback is 3 secs5479      return $q(function(resolve, reject){5480        opts = opts || { };5481        // If there is no transition is found, resolve immediately5482        //5483        // NOTE: using $mdUtil.nextTick() causes delays/issues5484        if (noTransitionFound(opts.cachedTransitionStyles)) {5485          TIMEOUT = 0;5486        }5487        var timer = $timeout(finished, opts.timeout || TIMEOUT);5488        element.on($mdConstant.CSS.TRANSITIONEND, finished);5489        /**5490         * Upon timeout or transitionEnd, reject or resolve (respectively) this promise.5491         * NOTE: Make sure this transitionEnd didn't bubble up from a child5492         */5493        function finished(ev) {5494          if ( ev && ev.target !== element[0]) return;5495          if ( ev  ) $timeout.cancel(timer);5496          element.off($mdConstant.CSS.TRANSITIONEND, finished);5497          // Never reject since ngAnimate may cause timeouts due missed transitionEnd events5498          resolve();5499        }5500        /**5501         * Checks whether or not there is a transition.5502         *5503         * @param styles The cached styles to use for the calculation. If null, getComputedStyle()5504         * will be used.5505         *5506         * @returns {boolean} True if there is no transition/duration; false otherwise.5507         */5508        function noTransitionFound(styles) {5509          styles = styles || window.getComputedStyle(element[0]);5510          return styles.transitionDuration == '0s' || (!styles.transition && !styles.transitionProperty);5511        }5512      });5513    },5514    calculateTransformValues: function (element, originator) {5515      var origin = originator.element;5516      var bounds = originator.bounds;5517      if (origin || bounds) {5518        var originBnds = origin ? self.clientRect(origin) || currentBounds() : self.copyRect(bounds);5519        var dialogRect = self.copyRect(element[0].getBoundingClientRect());5520        var dialogCenterPt = self.centerPointFor(dialogRect);5521        var originCenterPt = self.centerPointFor(originBnds);5522        return {5523          centerX: originCenterPt.x - dialogCenterPt.x,5524          centerY: originCenterPt.y - dialogCenterPt.y,5525          scaleX: Math.round(100 * Math.min(0.5, originBnds.width / dialogRect.width)) / 100,5526          scaleY: Math.round(100 * Math.min(0.5, originBnds.height / dialogRect.height)) / 1005527        };5528      }5529      return {centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5};5530      /**5531       * This is a fallback if the origin information is no longer valid, then the5532       * origin bounds simply becomes the current bounds for the dialogContainer's parent5533       */5534      function currentBounds() {5535        var cntr = element ? element.parent() : null;5536        var parent = cntr ? cntr.parent() : null;5537        return parent ? self.clientRect(parent) : null;5538      }5539    },5540    /**5541     * Calculate the zoom transform from dialog to origin.5542     *5543     * We use this to set the dialog position immediately;5544     * then the md-transition-in actually translates back to5545     * `translate3d(0,0,0) scale(1.0)`...5546     *5547     * NOTE: all values are rounded to the nearest integer5548     */5549    calculateZoomToOrigin: function (element, originator) {5550      var zoomTemplate = "translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )";5551      var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate);5552      return buildZoom(self.calculateTransformValues(element, originator));5553    },5554    /**5555     * Calculate the slide transform from panel to origin.5556     * NOTE: all values are rounded to the nearest integer5557     */5558    calculateSlideToOrigin: function (element, originator) {5559      var slideTemplate = "translate3d( {centerX}px, {centerY}px, 0 )";5560      var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate);5561      return buildSlide(self.calculateTransformValues(element, originator));5562    },5563    /**5564     * Enhance raw values to represent valid css stylings...5565     */5566    toCss : function( raw ) {5567      var css = { };5568      var lookups = 'left top right bottom width height x y min-width min-height max-width max-height';5569      angular.forEach(raw, function(value,key) {5570        if ( angular.isUndefined(value) ) return;5571        if ( lookups.indexOf(key) >= 0 ) {5572          css[key] = value + 'px';5573        } else {5574          switch (key) {5575            case 'transition':5576              convertToVendor(key, $mdConstant.CSS.TRANSITION, value);5577              break;5578            case 'transform':5579              convertToVendor(key, $mdConstant.CSS.TRANSFORM, value);5580              break;5581            case 'transformOrigin':5582              convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value);5583              break;5584            case 'font-size':5585              css['font-size'] = value; // font sizes aren't always in px5586              break;5587          }5588        }5589      });5590      return css;5591      function convertToVendor(key, vendor, value) {5592        angular.forEach(vendor.split(' '), function (key) {5593          css[key] = value;5594        });5595      }5596    },5597    /**5598     * Convert the translate CSS value to key/value pair(s).5599     */5600    toTransformCss: function (transform, addTransition, transition) {5601      var css = {};5602      angular.forEach($mdConstant.CSS.TRANSFORM.split(' '), function (key) {5603        css[key] = transform;5604      });5605      if (addTransition) {5606        transition = transition || "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important";5607        css.transition = transition;5608      }5609      return css;5610    },5611    /**5612     *  Clone the Rect and calculate the height/width if needed5613     */5614    copyRect: function (source, destination) {5615      if (!source) return null;5616      destination = destination || {};5617      angular.forEach('left top right bottom width height'.split(' '), function (key) {5618        destination[key] = Math.round(source[key]);5619      });5620      destination.width = destination.width || (destination.right - destination.left);5621      destination.height = destination.height || (destination.bottom - destination.top);5622      return destination;5623    },5624    /**5625     * Calculate ClientRect of element; return null if hidden or zero size5626     */5627    clientRect: function (element) {5628      var bounds = angular.element(element)[0].getBoundingClientRect();5629      var isPositiveSizeClientRect = function (rect) {5630        return rect && (rect.width > 0) && (rect.height > 0);5631      };5632      // If the event origin element has zero size, it has probably been hidden.5633      return isPositiveSizeClientRect(bounds) ? self.copyRect(bounds) : null;5634    },5635    /**5636     *  Calculate 'rounded' center point of Rect5637     */5638    centerPointFor: function (targetRect) {5639      return targetRect ? {5640        x: Math.round(targetRect.left + (targetRect.width / 2)),5641        y: Math.round(targetRect.top + (targetRect.height / 2))5642      } : { x : 0, y : 0 };5643    }5644  };5645}5646"use strict";5647if (angular.version.minor >= 4) {5648  angular.module('material.core.animate', []);5649} else {5650(function() {5651  var forEach = angular.forEach;5652  var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance);5653  var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition';5654  var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation';5655  var PREFIX = WEBKIT ? '-webkit-' : '';5656  var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend';5657  var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend';5658  var $$ForceReflowFactory = ['$document', function($document) {5659    return function() {5660      return $document[0].body.clientWidth + 1;5661    }5662  }];5663  var $$rAFMutexFactory = ['$$rAF', function($$rAF) {5664    return function() {5665      var passed = false;5666      $$rAF(function() {5667        passed = true;5668      });5669      return function(fn) {5670        passed ? fn() : $$rAF(fn);5671      };5672    };5673  }];5674  var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {5675    var INITIAL_STATE = 0;5676    var DONE_PENDING_STATE = 1;5677    var DONE_COMPLETE_STATE = 2;5678    function AnimateRunner(host) {5679      this.setHost(host);5680      this._doneCallbacks = [];5681      this._runInAnimationFrame = $$rAFMutex();5682      this._state = 0;5683    }5684    AnimateRunner.prototype = {5685      setHost: function(host) {5686        this.host = host || {};5687      },5688      done: function(fn) {5689        if (this._state === DONE_COMPLETE_STATE) {5690          fn();5691        } else {5692          this._doneCallbacks.push(fn);5693        }5694      },5695      progress: angular.noop,5696      getPromise: function() {5697        if (!this.promise) {5698          var self = this;5699          this.promise = $q(function(resolve, reject) {5700            self.done(function(status) {5701              status === false ? reject() : resolve();5702            });5703          });5704        }5705        return this.promise;5706      },5707      then: function(resolveHandler, rejectHandler) {5708        return this.getPromise().then(resolveHandler, rejectHandler);5709      },5710      'catch': function(handler) {5711        return this.getPromise()['catch'](handler);5712      },5713      'finally': function(handler) {5714        return this.getPromise()['finally'](handler);5715      },5716      pause: function() {5717        if (this.host.pause) {5718          this.host.pause();5719        }5720      },5721      resume: function() {5722        if (this.host.resume) {5723          this.host.resume();5724        }5725      },5726      end: function() {5727        if (this.host.end) {5728          this.host.end();5729        }5730        this._resolve(true);5731      },5732      cancel: function() {5733        if (this.host.cancel) {5734          this.host.cancel();5735        }5736        this._resolve(false);5737      },5738      complete: function(response) {5739        var self = this;5740        if (self._state === INITIAL_STATE) {5741          self._state = DONE_PENDING_STATE;5742          self._runInAnimationFrame(function() {5743            self._resolve(response);5744          });5745        }5746      },5747      _resolve: function(response) {5748        if (this._state !== DONE_COMPLETE_STATE) {5749          forEach(this._doneCallbacks, function(fn) {5750            fn(response);5751          });5752          this._doneCallbacks.length = 0;5753          this._state = DONE_COMPLETE_STATE;5754        }5755      }5756    };5757    // Polyfill AnimateRunner.all which is used by input animations5758    AnimateRunner.all = function(runners, callback) {5759      var count = 0;5760      var status = true;5761      forEach(runners, function(runner) {5762        runner.done(onProgress);5763      });5764      function onProgress(response) {5765        status = status && response;5766        if (++count === runners.length) {5767          callback(status);5768        }5769      }5770    };5771    return AnimateRunner;5772  }];5773  angular5774    .module('material.core.animate', [])5775    .factory('$$forceReflow', $$ForceReflowFactory)5776    .factory('$$AnimateRunner', $$AnimateRunnerFactory)5777    .factory('$$rAFMutex', $$rAFMutexFactory)5778    .factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate',5779                     function($window,   $$rAF,   $$AnimateRunner,   $$forceReflow,   $$jqLite,   $timeout, $animate) {5780      function init(element, options) {5781        var temporaryStyles = [];5782        var node = getDomNode(element);5783        var areAnimationsAllowed = node && $animate.enabled();5784        var hasCompleteStyles = false;5785        var hasCompleteClasses = false;5786        if (areAnimationsAllowed) {5787          if (options.transitionStyle) {5788            temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]);5789          }5790          if (options.keyframeStyle) {5791            temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]);5792          }5793          if (options.delay) {5794            temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']);5795          }5796          if (options.duration) {5797            temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']);5798          }5799          hasCompleteStyles = options.keyframeStyle ||5800              (options.to && (options.duration > 0 || options.transitionStyle));5801          hasCompleteClasses = !!options.addClass || !!options.removeClass;5802          blockTransition(element, true);5803        }5804        var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses);5805        applyAnimationFromStyles(element, options);5806        var animationClosed = false;5807        var events, eventFn;5808        return {5809          close: $window.close,5810          start: function() {5811            var runner = new $$AnimateRunner();5812            waitUntilQuiet(function() {5813              blockTransition(element, false);5814              if (!hasCompleteAnimation) {5815                return close();5816              }5817              forEach(temporaryStyles, function(entry) {5818                var key = entry[0];5819                var value = entry[1];5820                node.style[camelCase(key)] = value;5821              });5822              applyClasses(element, options);5823              var timings = computeTimings(element);5824              if (timings.duration === 0) {5825                return close();5826              }5827              var moreStyles = [];5828              if (options.easing) {5829                if (timings.transitionDuration) {5830                  moreStyles.push([PREFIX + 'transition-timing-function', options.easing]);5831                }5832                if (timings.animationDuration) {5833                  moreStyles.push([PREFIX + 'animation-timing-function', options.easing]);5834                }5835              }5836              if (options.delay && timings.animationDelay) {5837                moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']);5838              }5839              if (options.duration && timings.animationDuration) {5840                moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']);5841              }5842              forEach(moreStyles, function(entry) {5843                var key = entry[0];5844                var value = entry[1];5845                node.style[camelCase(key)] = value;5846                temporaryStyles.push(entry);5847              });5848              var maxDelay = timings.delay;5849              var maxDelayTime = maxDelay * 1000;5850              var maxDuration = timings.duration;5851              var maxDurationTime = maxDuration * 1000;5852              var startTime = Date.now();5853              events = [];5854              if (timings.transitionDuration) {5855                events.push(TRANSITION_EVENTS);5856              }5857              if (timings.animationDuration) {5858                events.push(ANIMATION_EVENTS);5859              }5860              events = events.join(' ');5861              eventFn = function(event) {5862                event.stopPropagation();5863                var ev = event.originalEvent || event;5864                var timeStamp = ev.timeStamp || Date.now();5865                var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3));5866                if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {5867                  close();5868                }5869              };5870              element.on(events, eventFn);5871              applyAnimationToStyles(element, options);5872              $timeout(close, maxDelayTime + maxDurationTime * 1.5, false);5873            });5874            return runner;5875            function close() {5876              if (animationClosed) return;5877              animationClosed = true;5878              if (events && eventFn) {5879                element.off(events, eventFn);5880              }5881              applyClasses(element, options);5882              applyAnimationStyles(element, options);5883              forEach(temporaryStyles, function(entry) {5884                node.style[camelCase(entry[0])] = '';5885              });5886              runner.complete(true);5887              return runner;5888            }5889          }5890        }5891      }5892      function applyClasses(element, options) {5893        if (options.addClass) {5894          $$jqLite.addClass(element, options.addClass);5895          options.addClass = null;5896        }5897        if (options.removeClass) {5898          $$jqLite.removeClass(element, options.removeClass);5899          options.removeClass = null;5900        }5901      }5902      function computeTimings(element) {5903        var node = getDomNode(element);5904        var cs = $window.getComputedStyle(node)5905        var tdr = parseMaxTime(cs[prop('transitionDuration')]);5906        var adr = parseMaxTime(cs[prop('animationDuration')]);5907        var tdy = parseMaxTime(cs[prop('transitionDelay')]);5908        var ady = parseMaxTime(cs[prop('animationDelay')]);5909        adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1);5910        var duration = Math.max(adr, tdr);5911        var delay = Math.max(ady, tdy);5912        return {5913          duration: duration,5914          delay: delay,5915          animationDuration: adr,5916          transitionDuration: tdr,5917          animationDelay: ady,5918          transitionDelay: tdy5919        };5920        function prop(key) {5921          return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1)5922                        : key;5923        }5924      }5925      function parseMaxTime(str) {5926        var maxValue = 0;5927        var values = (str || "").split(/\s*,\s*/);5928        forEach(values, function(value) {5929          // it's always safe to consider only second values and omit `ms` values since5930          // getComputedStyle will always handle the conversion for us5931          if (value.charAt(value.length - 1) == 's') {5932            value = value.substring(0, value.length - 1);5933          }5934          value = parseFloat(value) || 0;5935          maxValue = maxValue ? Math.max(value, maxValue) : value;5936        });5937        return maxValue;5938      }5939      var cancelLastRAFRequest;5940      var rafWaitQueue = [];5941      function waitUntilQuiet(callback) {5942        if (cancelLastRAFRequest) {5943          cancelLastRAFRequest(); //cancels the request5944        }5945        rafWaitQueue.push(callback);5946        cancelLastRAFRequest = $$rAF(function() {5947          cancelLastRAFRequest = null;5948          // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.5949          // PLEASE EXAMINE THE `$$forceReflow` service to understand why.5950          var pageWidth = $$forceReflow();5951          // we use a for loop to ensure that if the queue is changed5952          // during this looping then it will consider new requests5953          for (var i = 0; i < rafWaitQueue.length; i++) {5954            rafWaitQueue[i](pageWidth);5955          }5956          rafWaitQueue.length = 0;5957        });5958      }5959      function applyAnimationStyles(element, options) {5960        applyAnimationFromStyles(element, options);5961        applyAnimationToStyles(element, options);5962      }5963      function applyAnimationFromStyles(element, options) {5964        if (options.from) {5965          element.css(options.from);5966          options.from = null;5967        }5968      }5969      function applyAnimationToStyles(element, options) {5970        if (options.to) {5971          element.css(options.to);5972          options.to = null;5973        }5974      }5975      function getDomNode(element) {5976        for (var i = 0; i < element.length; i++) {5977          if (element[i].nodeType === 1) return element[i];5978        }5979      }5980      function blockTransition(element, bool) {5981        var node = getDomNode(element);5982        var key = camelCase(PREFIX + 'transition-delay');5983        node.style[key] = bool ? '-9999s' : '';5984      }5985      return init;5986    }]);5987  /**5988   * Older browsers [FF31] expect camelCase5989   * property keys.5990   * e.g.5991   *  animation-duration --> animationDuration5992   */5993  function camelCase(str) {5994    return str.replace(/-[a-z]/g, function(str) {5995      return str.charAt(1).toUpperCase();5996    });5997  }5998})();5999}6000(function(){ 6001angular.module("material.core").constant("$MD_THEME_CSS", "md-autocomplete.md-THEME_NAME-theme {  background: '{{background-A100}}'; }  md-autocomplete.md-THEME_NAME-theme[disabled]:not([md-floating-label]) {    background: '{{background-100}}'; }  md-autocomplete.md-THEME_NAME-theme button md-icon path {    fill: '{{background-600}}'; }  md-autocomplete.md-THEME_NAME-theme button:after {    background: '{{background-600-0.3}}'; }.md-autocomplete-suggestions-container.md-THEME_NAME-theme {  background: '{{background-A100}}'; }  .md-autocomplete-suggestions-container.md-THEME_NAME-theme li {    color: '{{background-900}}'; }    .md-autocomplete-suggestions-container.md-THEME_NAME-theme li .highlight {      color: '{{background-600}}'; }    .md-autocomplete-suggestions-container.md-THEME_NAME-theme li:hover, .md-autocomplete-suggestions-container.md-THEME_NAME-theme li.selected {      background: '{{background-200}}'; }md-backdrop {  background-color: '{{background-900-0.0}}'; }  md-backdrop.md-opaque.md-THEME_NAME-theme {    background-color: '{{background-900-1.0}}'; }md-bottom-sheet.md-THEME_NAME-theme {  background-color: '{{background-50}}';  border-top-color: '{{background-300}}'; }  md-bottom-sheet.md-THEME_NAME-theme.md-list md-list-item {    color: '{{foreground-1}}'; }  md-bottom-sheet.md-THEME_NAME-theme .md-subheader {    background-color: '{{background-50}}'; }  md-bottom-sheet.md-THEME_NAME-theme .md-subheader {    color: '{{foreground-1}}'; }.md-button.md-THEME_NAME-theme:not([disabled]):hover {  background-color: '{{background-500-0.2}}'; }.md-button.md-THEME_NAME-theme:not([disabled]).md-focused {  background-color: '{{background-500-0.2}}'; }.md-button.md-THEME_NAME-theme:not([disabled]).md-icon-button:hover {  background-color: transparent; }.md-button.md-THEME_NAME-theme.md-fab {  background-color: '{{accent-color}}';  color: '{{accent-contrast}}'; }  .md-button.md-THEME_NAME-theme.md-fab md-icon {    color: '{{accent-contrast}}'; }  .md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover {    background-color: '{{accent-A700}}'; }  .md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused {    background-color: '{{accent-A700}}'; }.md-button.md-THEME_NAME-theme.md-primary {  color: '{{primary-color}}'; }  .md-button.md-THEME_NAME-theme.md-primary.md-raised, .md-button.md-THEME_NAME-theme.md-primary.md-fab {    color: '{{primary-contrast}}';    background-color: '{{primary-color}}'; }    .md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]) md-icon {      color: '{{primary-contrast}}'; }    .md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {      background-color: '{{primary-600}}'; }    .md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {      background-color: '{{primary-600}}'; }  .md-button.md-THEME_NAME-theme.md-primary:not([disabled]) md-icon {    color: '{{primary-color}}'; }.md-button.md-THEME_NAME-theme.md-fab {  background-color: '{{accent-color}}';  color: '{{accent-contrast}}'; }  .md-button.md-THEME_NAME-theme.md-fab:not([disabled]) .md-icon {    color: '{{accent-contrast}}'; }  .md-button.md-THEME_NAME-theme.md-fab:not([disabled]):hover {    background-color: '{{accent-A700}}'; }  .md-button.md-THEME_NAME-theme.md-fab:not([disabled]).md-focused {    background-color: '{{accent-A700}}'; }.md-button.md-THEME_NAME-theme.md-raised {  color: '{{background-900}}';  background-color: '{{background-50}}'; }  .md-button.md-THEME_NAME-theme.md-raised:not([disabled]) md-icon {    color: '{{background-900}}'; }  .md-button.md-THEME_NAME-theme.md-raised:not([disabled]):hover {    background-color: '{{background-50}}'; }  .md-button.md-THEME_NAME-theme.md-raised:not([disabled]).md-focused {    background-color: '{{background-200}}'; }.md-button.md-THEME_NAME-theme.md-warn {  color: '{{warn-color}}'; }  .md-button.md-THEME_NAME-theme.md-warn.md-raised, .md-button.md-THEME_NAME-theme.md-warn.md-fab {    color: '{{warn-contrast}}';    background-color: '{{warn-color}}'; }    .md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]) md-icon {      color: '{{warn-contrast}}'; }    .md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]):hover {      background-color: '{{warn-600}}'; }    .md-button.md-THEME_NAME-theme.md-warn.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-warn.md-fab:not([disabled]).md-focused {      background-color: '{{warn-600}}'; }  .md-button.md-THEME_NAME-theme.md-warn:not([disabled]) md-icon {    color: '{{warn-color}}'; }.md-button.md-THEME_NAME-theme.md-accent {  color: '{{accent-color}}'; }  .md-button.md-THEME_NAME-theme.md-accent.md-raised, .md-button.md-THEME_NAME-theme.md-accent.md-fab {    color: '{{accent-contrast}}';    background-color: '{{accent-color}}'; }    .md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]) md-icon, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]) md-icon {      color: '{{accent-contrast}}'; }    .md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]):hover, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]):hover {      background-color: '{{accent-A700}}'; }    .md-button.md-THEME_NAME-theme.md-accent.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-accent.md-fab:not([disabled]).md-focused {      background-color: '{{accent-A700}}'; }  .md-button.md-THEME_NAME-theme.md-accent:not([disabled]) md-icon {    color: '{{accent-color}}'; }.md-button.md-THEME_NAME-theme[disabled], .md-button.md-THEME_NAME-theme.md-raised[disabled], .md-button.md-THEME_NAME-theme.md-fab[disabled], .md-button.md-THEME_NAME-theme.md-accent[disabled], .md-button.md-THEME_NAME-theme.md-warn[disabled] {  color: '{{foreground-3}}';  cursor: default; }  .md-button.md-THEME_NAME-theme[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-raised[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-fab[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-accent[disabled] md-icon, .md-button.md-THEME_NAME-theme.md-warn[disabled] md-icon {    color: '{{foreground-3}}'; }.md-button.md-THEME_NAME-theme.md-raised[disabled], .md-button.md-THEME_NAME-theme.md-fab[disabled] {  background-color: '{{foreground-4}}'; }.md-button.md-THEME_NAME-theme[disabled] {  background-color: transparent; }._md a.md-THEME_NAME-theme:not(.md-button).md-primary {  color: '{{primary-color}}'; }  ._md a.md-THEME_NAME-theme:not(.md-button).md-primary:hover {    color: '{{primary-700}}'; }._md a.md-THEME_NAME-theme:not(.md-button).md-accent {  color: '{{accent-color}}'; }  ._md a.md-THEME_NAME-theme:not(.md-button).md-accent:hover {    color: '{{accent-700}}'; }._md a.md-THEME_NAME-theme:not(.md-button).md-accent {  color: '{{accent-color}}'; }  ._md a.md-THEME_NAME-theme:not(.md-button).md-accent:hover {    color: '{{accent-A700}}'; }._md a.md-THEME_NAME-theme:not(.md-button).md-warn {  color: '{{warn-color}}'; }  ._md a.md-THEME_NAME-theme:not(.md-button).md-warn:hover {    color: '{{warn-700}}'; }md-card.md-THEME_NAME-theme {  color: '{{foreground-1}}';  background-color: '{{background-hue-1}}';  border-radius: 2px; }  md-card.md-THEME_NAME-theme .md-card-image {    border-radius: 2px 2px 0 0; }  md-card.md-THEME_NAME-theme md-card-header md-card-avatar md-icon {    color: '{{background-color}}';    background-color: '{{foreground-3}}'; }  md-card.md-THEME_NAME-theme md-card-header md-card-header-text .md-subhead {    color: '{{foreground-2}}'; }  md-card.md-THEME_NAME-theme md-card-title md-card-title-text:not(:only-child) .md-subhead {    color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme .md-ripple {  color: '{{accent-A700}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-ripple {  color: '{{background-600}}'; }md-checkbox.md-THEME_NAME-theme.md-checked.md-focused .md-container:before {  background-color: '{{accent-color-0.26}}'; }md-checkbox.md-THEME_NAME-theme .md-ink-ripple {  color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-ink-ripple {  color: '{{accent-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not(.md-checked) .md-icon {  border-color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-icon {  background-color: '{{accent-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme.md-checked .md-icon:after {  border-color: '{{accent-contrast-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ripple {  color: '{{primary-600}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ripple {  color: '{{background-600}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-ink-ripple {  color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple {  color: '{{primary-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary:not(.md-checked) .md-icon {  border-color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon {  background-color: '{{primary-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked.md-focused .md-container:before {  background-color: '{{primary-color-0.26}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-icon:after {  border-color: '{{primary-contrast-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-primary .md-indeterminate[disabled] .md-container {  color: '{{foreground-3}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ripple {  color: '{{warn-600}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn .md-ink-ripple {  color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple {  color: '{{warn-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn:not(.md-checked) .md-icon {  border-color: '{{foreground-2}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon {  background-color: '{{warn-color-0.87}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked.md-focused:not([disabled]) .md-container:before {  background-color: '{{warn-color-0.26}}'; }md-checkbox.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-icon:after {  border-color: '{{background-200}}'; }md-checkbox.md-THEME_NAME-theme[disabled]:not(.md-checked) .md-icon {  border-color: '{{foreground-3}}'; }md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon {  background-color: '{{foreground-3}}'; }md-checkbox.md-THEME_NAME-theme[disabled].md-checked .md-icon:after {  border-color: '{{background-200}}'; }md-checkbox.md-THEME_NAME-theme[disabled] .md-icon:after {  border-color: '{{foreground-3}}'; }md-checkbox.md-THEME_NAME-theme[disabled] .md-label {  color: '{{foreground-3}}'; }md-chips.md-THEME_NAME-theme .md-chips {  box-shadow: 0 1px '{{foreground-4}}'; }  md-chips.md-THEME_NAME-theme .md-chips.md-focused {    box-shadow: 0 2px '{{primary-color}}'; }  md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input {    color: '{{foreground-1}}'; }    md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-webkit-input-placeholder {      color: '{{foreground-3}}'; }    md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input:-moz-placeholder {      color: '{{foreground-3}}'; }    md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-moz-placeholder {      color: '{{foreground-3}}'; }    md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input:-ms-input-placeholder {      color: '{{foreground-3}}'; }    md-chips.md-THEME_NAME-theme .md-chips .md-chip-input-container input::-webkit-input-placeholder {      color: '{{foreground-3}}'; }md-chips.md-THEME_NAME-theme md-chip {  background: '{{background-300}}';  color: '{{background-800}}'; }  md-chips.md-THEME_NAME-theme md-chip md-icon {    color: '{{background-700}}'; }  md-chips.md-THEME_NAME-theme md-chip.md-focused {    background: '{{primary-color}}';    color: '{{primary-contrast}}'; }    md-chips.md-THEME_NAME-theme md-chip.md-focused md-icon {      color: '{{primary-contrast}}'; }  md-chips.md-THEME_NAME-theme md-chip._md-chip-editing {    background: transparent;    color: '{{background-800}}'; }md-chips.md-THEME_NAME-theme md-chip-remove .md-button md-icon path {  fill: '{{background-500}}'; }.md-contact-suggestion span.md-contact-email {  color: '{{background-400}}'; }md-content.md-THEME_NAME-theme {  color: '{{foreground-1}}';  background-color: '{{background-default}}'; }/** Theme styles for mdCalendar. */.md-calendar.md-THEME_NAME-theme {  background: '{{background-A100}}';  color: '{{background-A200-0.87}}'; }  .md-calendar.md-THEME_NAME-theme tr:last-child td {    border-bottom-color: '{{background-200}}'; }.md-THEME_NAME-theme .md-calendar-day-header {  background: '{{background-300}}';  color: '{{background-A200-0.87}}'; }.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator {  border: 1px solid '{{primary-500}}'; }.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled {  color: '{{primary-500-0.6}}'; }.md-calendar-date.md-focus .md-THEME_NAME-theme .md-calendar-date-selection-indicator, .md-THEME_NAME-theme .md-calendar-date-selection-indicator:hover {  background: '{{background-300}}'; }.md-THEME_NAME-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator,.md-THEME_NAME-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator {  background: '{{primary-500}}';  color: '{{primary-500-contrast}}';  border-color: transparent; }.md-THEME_NAME-theme .md-calendar-date-disabled,.md-THEME_NAME-theme .md-calendar-month-label-disabled {  color: '{{background-A200-0.435}}'; }/** Theme styles for mdDatepicker. */.md-THEME_NAME-theme .md-datepicker-input {  color: '{{foreground-1}}'; }  .md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder {    color: '{{foreground-3}}'; }  .md-THEME_NAME-theme .md-datepicker-input:-moz-placeholder {    color: '{{foreground-3}}'; }  .md-THEME_NAME-theme .md-datepicker-input::-moz-placeholder {    color: '{{foreground-3}}'; }  .md-THEME_NAME-theme .md-datepicker-input:-ms-input-placeholder {    color: '{{foreground-3}}'; }  .md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder {    color: '{{foreground-3}}'; }.md-THEME_NAME-theme .md-datepicker-input-container {  border-bottom-color: '{{foreground-4}}'; }  .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused {    border-bottom-color: '{{primary-color}}'; }    .md-accent .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused {      border-bottom-color: '{{accent-color}}'; }    .md-warn .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused {      border-bottom-color: '{{warn-A700}}'; }  .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-invalid {    border-bottom-color: '{{warn-A700}}'; }.md-THEME_NAME-theme .md-datepicker-calendar-pane {  border-color: '{{background-hue-1}}'; }.md-THEME_NAME-theme .md-datepicker-triangle-button .md-datepicker-expand-triangle {  border-top-color: '{{foreground-3}}'; }.md-THEME_NAME-theme .md-datepicker-triangle-button:hover .md-datepicker-expand-triangle {  border-top-color: '{{foreground-2}}'; }.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon {  color: '{{primary-color}}'; }.md-THEME_NAME-theme .md-datepicker-open.md-accent .md-datepicker-calendar-icon, .md-accent .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon {  color: '{{accent-color}}'; }.md-THEME_NAME-theme .md-datepicker-open.md-warn .md-datepicker-calendar-icon, .md-warn .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon {  color: '{{warn-A700}}'; }.md-THEME_NAME-theme .md-datepicker-calendar {  background: '{{background-A100}}'; }.md-THEME_NAME-theme .md-datepicker-input-mask-opaque {  box-shadow: 0 0 0 9999px \"{{background-hue-1}}\"; }.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-input-container {  background: \"{{background-hue-1}}\"; }md-dialog.md-THEME_NAME-theme {  border-radius: 4px;  background-color: '{{background-hue-1}}';  color: '{{foreground-1}}'; }  md-dialog.md-THEME_NAME-theme.md-content-overflow .md-actions, md-dialog.md-THEME_NAME-theme.md-content-overflow md-dialog-actions {    border-top-color: '{{foreground-4}}'; }md-divider.md-THEME_NAME-theme {  border-top-color: '{{foreground-4}}'; }.layout-row > md-divider.md-THEME_NAME-theme,.layout-xs-row > md-divider.md-THEME_NAME-theme, .layout-gt-xs-row > md-divider.md-THEME_NAME-theme,.layout-sm-row > md-divider.md-THEME_NAME-theme, .layout-gt-sm-row > md-divider.md-THEME_NAME-theme,.layout-md-row > md-divider.md-THEME_NAME-theme, .layout-gt-md-row > md-divider.md-THEME_NAME-theme,.layout-lg-row > md-divider.md-THEME_NAME-theme, .layout-gt-lg-row > md-divider.md-THEME_NAME-theme,.layout-xl-row > md-divider.md-THEME_NAME-theme {  border-right-color: '{{foreground-4}}'; }md-icon.md-THEME_NAME-theme {  color: '{{foreground-2}}'; }  md-icon.md-THEME_NAME-theme.md-primary {    color: '{{primary-color}}'; }  md-icon.md-THEME_NAME-theme.md-accent {    color: '{{accent-color}}'; }  md-icon.md-THEME_NAME-theme.md-warn {    color: '{{warn-color}}'; }md-input-container.md-THEME_NAME-theme .md-input {  color: '{{foreground-1}}';  border-color: '{{foreground-4}}'; }  md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder {    color: '{{foreground-3}}'; }  md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder {    color: '{{foreground-3}}'; }  md-input-container.md-THEME_NAME-theme .md-input::-moz-placeholder {    color: '{{foreground-3}}'; }  md-input-container.md-THEME_NAME-theme .md-input:-ms-input-placeholder {    color: '{{foreground-3}}'; }  md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder {    color: '{{foreground-3}}'; }md-input-container.md-THEME_NAME-theme > md-icon {  color: '{{foreground-1}}'; }md-input-container.md-THEME_NAME-theme label,md-input-container.md-THEME_NAME-theme .md-placeholder {  color: '{{foreground-3}}'; }md-input-container.md-THEME_NAME-theme label.md-required:after {  color: '{{warn-A700}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {  color: '{{foreground-2}}'; }md-input-container.md-THEME_NAME-theme .md-input-messages-animation, md-input-container.md-THEME_NAME-theme .md-input-message-animation {  color: '{{warn-A700}}'; }  md-input-container.md-THEME_NAME-theme .md-input-messages-animation .md-char-counter, md-input-container.md-THEME_NAME-theme .md-input-message-animation .md-char-counter {    color: '{{foreground-1}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-has-value label {  color: '{{foreground-2}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused .md-input, md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-resized .md-input {  border-color: '{{primary-color}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused label,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused md-icon {  color: '{{primary-color}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent .md-input {  border-color: '{{accent-color}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent label,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent md-icon {  color: '{{accent-color}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn .md-input {  border-color: '{{warn-A700}}'; }md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn label,md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn md-icon {  color: '{{warn-A700}}'; }md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input {  border-color: '{{warn-A700}}'; }md-input-container.md-THEME_NAME-theme.md-input-invalid label,md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input-message-animation,md-input-container.md-THEME_NAME-theme.md-input-invalid .md-char-counter {  color: '{{warn-A700}}'; }md-input-container.md-THEME_NAME-theme .md-input[disabled],[disabled] md-input-container.md-THEME_NAME-theme .md-input {  border-bottom-color: transparent;  color: '{{foreground-3}}';  background-image: linear-gradient(to right, \"{{foreground-3}}\" 0%, \"{{foreground-3}}\" 33%, transparent 0%);  background-image: -ms-linear-gradient(left, transparent 0%, \"{{foreground-3}}\" 100%); }md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text h3, md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text h4,md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text h3,md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text h4 {  color: '{{foreground-1}}'; }md-list.md-THEME_NAME-theme md-list-item.md-2-line .md-list-item-text p,md-list.md-THEME_NAME-theme md-list-item.md-3-line .md-list-item-text p {  color: '{{foreground-2}}'; }md-list.md-THEME_NAME-theme .md-proxy-focus.md-focused div.md-no-style {  background-color: '{{background-100}}'; }md-list.md-THEME_NAME-theme md-list-item .md-avatar-icon {  background-color: '{{foreground-3}}';  color: '{{background-color}}'; }md-list.md-THEME_NAME-theme md-list-item > md-icon {  color: '{{foreground-2}}'; }  md-list.md-THEME_NAME-theme md-list-item > md-icon.md-highlight {    color: '{{primary-color}}'; }    md-list.md-THEME_NAME-theme md-list-item > md-icon.md-highlight.md-accent {      color: '{{accent-color}}'; }md-menu-content.md-THEME_NAME-theme {  background-color: '{{background-A100}}'; }  md-menu-content.md-THEME_NAME-theme md-menu-item {    color: '{{background-A200-0.87}}'; }    md-menu-content.md-THEME_NAME-theme md-menu-item md-icon {      color: '{{background-A200-0.54}}'; }    md-menu-content.md-THEME_NAME-theme md-menu-item .md-button[disabled] {      color: '{{background-A200-0.25}}'; }      md-menu-content.md-THEME_NAME-theme md-menu-item .md-button[disabled] md-icon {        color: '{{background-A200-0.25}}'; }  md-menu-content.md-THEME_NAME-theme md-menu-divider {    background-color: '{{background-A200-0.11}}'; }md-menu-bar.md-THEME_NAME-theme > button.md-button {  color: '{{foreground-2}}';  border-radius: 2px; }md-menu-bar.md-THEME_NAME-theme md-menu.md-open > button, md-menu-bar.md-THEME_NAME-theme md-menu > button:focus {  outline: none;  background: '{{background-200}}'; }md-menu-bar.md-THEME_NAME-theme.md-open:not(.md-keyboard-mode) md-menu:hover > button {  background-color: '{{ background-500-0.2}}'; }md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:hover,md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:focus {  background: transparent; }md-menu-content.md-THEME_NAME-theme .md-menu > .md-button:after {  color: '{{background-A200-0.54}}'; }md-menu-content.md-THEME_NAME-theme .md-menu.md-open > .md-button {  background-color: '{{ background-500-0.2}}'; }md-toolbar.md-THEME_NAME-theme.md-menu-toolbar {  background-color: '{{background-A100}}';  color: '{{background-A200}}'; }  md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler {    background-color: '{{primary-color}}';    color: '{{background-A100-0.87}}'; }    md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler md-icon {      color: '{{background-A100-0.87}}'; }md-nav-bar.md-THEME_NAME-theme .md-nav-bar {  background-color: transparent;  border-color: '{{foreground-4}}'; }md-nav-bar.md-THEME_NAME-theme .md-button._md-nav-button.md-unselected {  color: '{{foreground-2}}'; }md-nav-bar.md-THEME_NAME-theme md-nav-ink-bar {  color: '{{accent-color}}';  background: '{{accent-color}}'; }.md-panel {  background-color: '{{background-900-0.0}}'; }  .md-panel._md-panel-backdrop.md-THEME_NAME-theme {    background-color: '{{background-900-1.0}}'; }md-progress-circular.md-THEME_NAME-theme path {  stroke: '{{primary-color}}'; }md-progress-circular.md-THEME_NAME-theme.md-warn path {  stroke: '{{warn-color}}'; }md-progress-circular.md-THEME_NAME-theme.md-accent path {  stroke: '{{accent-color}}'; }md-progress-linear.md-THEME_NAME-theme .md-container {  background-color: '{{primary-100}}'; }md-progress-linear.md-THEME_NAME-theme .md-bar {  background-color: '{{primary-color}}'; }md-progress-linear.md-THEME_NAME-theme.md-warn .md-container {  background-color: '{{warn-100}}'; }md-progress-linear.md-THEME_NAME-theme.md-warn .md-bar {  background-color: '{{warn-color}}'; }md-progress-linear.md-THEME_NAME-theme.md-accent .md-container {  background-color: '{{accent-100}}'; }md-progress-linear.md-THEME_NAME-theme.md-accent .md-bar {  background-color: '{{accent-color}}'; }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-warn .md-bar1 {  background-color: '{{warn-100}}'; }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-warn .md-dashed:before {  background: radial-gradient(\"{{warn-100}}\" 0%, \"{{warn-100}}\" 16%, transparent 42%); }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-accent .md-bar1 {  background-color: '{{accent-100}}'; }md-progress-linear.md-THEME_NAME-theme[md-mode=buffer].md-accent .md-dashed:before {  background: radial-gradient(\"{{accent-100}}\" 0%, \"{{accent-100}}\" 16%, transparent 42%); }md-radio-button.md-THEME_NAME-theme .md-off {  border-color: '{{foreground-2}}'; }md-radio-button.md-THEME_NAME-theme .md-on {  background-color: '{{accent-color-0.87}}'; }md-radio-button.md-THEME_NAME-theme.md-checked .md-off {  border-color: '{{accent-color-0.87}}'; }md-radio-button.md-THEME_NAME-theme.md-checked .md-ink-ripple {  color: '{{accent-color-0.87}}'; }md-radio-button.md-THEME_NAME-theme .md-container .md-ripple {  color: '{{accent-A700}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-on, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-on,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-on,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-on {  background-color: '{{primary-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-off {  border-color: '{{primary-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary.md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary.md-checked .md-ink-ripple {  color: '{{primary-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-primary .md-container .md-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-primary .md-container .md-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-primary .md-container .md-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-primary .md-container .md-ripple {  color: '{{primary-600}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-on, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-on,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-on,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-on {  background-color: '{{warn-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-off, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-off,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-off {  border-color: '{{warn-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-ink-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn.md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-checked .md-ink-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn.md-checked .md-ink-ripple {  color: '{{warn-color-0.87}}'; }md-radio-group.md-THEME_NAME-theme:not([disabled]) .md-warn .md-container .md-ripple, md-radio-group.md-THEME_NAME-theme:not([disabled]).md-warn .md-container .md-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]) .md-warn .md-container .md-ripple,md-radio-button.md-THEME_NAME-theme:not([disabled]).md-warn .md-container .md-ripple {  color: '{{warn-600}}'; }md-radio-group.md-THEME_NAME-theme[disabled],md-radio-button.md-THEME_NAME-theme[disabled] {  color: '{{foreground-3}}'; }  md-radio-group.md-THEME_NAME-theme[disabled] .md-container .md-off,  md-radio-button.md-THEME_NAME-theme[disabled] .md-container .md-off {    border-color: '{{foreground-3}}'; }  md-radio-group.md-THEME_NAME-theme[disabled] .md-container .md-on,  md-radio-button.md-THEME_NAME-theme[disabled] .md-container .md-on {    border-color: '{{foreground-3}}'; }md-radio-group.md-THEME_NAME-theme .md-checked .md-ink-ripple {  color: '{{accent-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-primary .md-checked:not([disabled]) .md-ink-ripple, md-radio-group.md-THEME_NAME-theme .md-checked:not([disabled]).md-primary .md-ink-ripple {  color: '{{primary-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme .md-checked.md-primary .md-ink-ripple {  color: '{{warn-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) .md-checked .md-container:before {  background-color: '{{accent-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty).md-primary .md-checked .md-container:before,md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) .md-checked.md-primary .md-container:before {  background-color: '{{primary-color-0.26}}'; }md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty).md-warn .md-checked .md-container:before,md-radio-group.md-THEME_NAME-theme.md-focused:not(:empty) .md-checked.md-warn .md-container:before {  background-color: '{{warn-color-0.26}}'; }md-input-container md-select.md-THEME_NAME-theme .md-select-value span:first-child:after {  color: '{{warn-A700}}'; }md-input-container:not(.md-input-focused):not(.md-input-invalid) md-select.md-THEME_NAME-theme .md-select-value span:first-child:after {  color: '{{foreground-3}}'; }md-input-container.md-input-focused:not(.md-input-has-value) md-select.md-THEME_NAME-theme .md-select-value {  color: '{{primary-color}}'; }  md-input-container.md-input-focused:not(.md-input-has-value) md-select.md-THEME_NAME-theme .md-select-value.md-select-placeholder {    color: '{{primary-color}}'; }md-input-container.md-input-invalid md-select.md-THEME_NAME-theme .md-select-value {  color: '{{warn-A700}}' !important;  border-bottom-color: '{{warn-A700}}' !important; }md-input-container.md-input-invalid md-select.md-THEME_NAME-theme.md-no-underline .md-select-value {  border-bottom-color: transparent !important; }md-select.md-THEME_NAME-theme[disabled] .md-select-value {  border-bottom-color: transparent;  background-image: linear-gradient(to right, \"{{foreground-3}}\" 0%, \"{{foreground-3}}\" 33%, transparent 0%);  background-image: -ms-linear-gradient(left, transparent 0%, \"{{foreground-3}}\" 100%); }md-select.md-THEME_NAME-theme .md-select-value {  border-bottom-color: '{{foreground-4}}'; }  md-select.md-THEME_NAME-theme .md-select-value.md-select-placeholder {    color: '{{foreground-3}}'; }  md-select.md-THEME_NAME-theme .md-select-value span:first-child:after {    color: '{{warn-A700}}'; }md-select.md-THEME_NAME-theme.md-no-underline .md-select-value {  border-bottom-color: transparent !important; }md-select.md-THEME_NAME-theme.ng-invalid.ng-touched .md-select-value {  color: '{{warn-A700}}' !important;  border-bottom-color: '{{warn-A700}}' !important; }md-select.md-THEME_NAME-theme.ng-invalid.ng-touched.md-no-underline .md-select-value {  border-bottom-color: transparent !important; }md-select.md-THEME_NAME-theme:not([disabled]):focus .md-select-value {  border-bottom-color: '{{primary-color}}';  color: '{{ foreground-1 }}'; }  md-select.md-THEME_NAME-theme:not([disabled]):focus .md-select-value.md-select-placeholder {    color: '{{ foreground-1 }}'; }md-select.md-THEME_NAME-theme:not([disabled]):focus.md-no-underline .md-select-value {  border-bottom-color: transparent !important; }md-select.md-THEME_NAME-theme:not([disabled]):focus.md-accent .md-select-value {  border-bottom-color: '{{accent-color}}'; }md-select.md-THEME_NAME-theme:not([disabled]):focus.md-warn .md-select-value {  border-bottom-color: '{{warn-color}}'; }md-select.md-THEME_NAME-theme[disabled] .md-select-value {  color: '{{foreground-3}}'; }  md-select.md-THEME_NAME-theme[disabled] .md-select-value.md-select-placeholder {    color: '{{foreground-3}}'; }md-select-menu.md-THEME_NAME-theme md-content {  background: '{{background-A100}}'; }  md-select-menu.md-THEME_NAME-theme md-content md-optgroup {    color: '{{background-600-0.87}}'; }  md-select-menu.md-THEME_NAME-theme md-content md-option {    color: '{{background-900-0.87}}'; }    md-select-menu.md-THEME_NAME-theme md-content md-option[disabled] .md-text {      color: '{{background-400-0.87}}'; }    md-select-menu.md-THEME_NAME-theme md-content md-option:not([disabled]):focus, md-select-menu.md-THEME_NAME-theme md-content md-option:not([disabled]):hover {      background: '{{background-200}}'; }    md-select-menu.md-THEME_NAME-theme md-content md-option[selected] {      color: '{{primary-500}}'; }      md-select-menu.md-THEME_NAME-theme md-content md-option[selected]:focus {        color: '{{primary-600}}'; }      md-select-menu.md-THEME_NAME-theme md-content md-option[selected].md-accent {        color: '{{accent-color}}'; }        md-select-menu.md-THEME_NAME-theme md-content md-option[selected].md-accent:focus {          color: '{{accent-A700}}'; }.md-checkbox-enabled.md-THEME_NAME-theme .md-ripple {  color: '{{primary-600}}'; }.md-checkbox-enabled.md-THEME_NAME-theme[selected] .md-ripple {  color: '{{background-600}}'; }.md-checkbox-enabled.md-THEME_NAME-theme .md-ink-ripple {  color: '{{foreground-2}}'; }.md-checkbox-enabled.md-THEME_NAME-theme[selected] .md-ink-ripple {  color: '{{primary-color-0.87}}'; }.md-checkbox-enabled.md-THEME_NAME-theme:not(.md-checked) .md-icon {  border-color: '{{foreground-2}}'; }.md-checkbox-enabled.md-THEME_NAME-theme[selected] .md-icon {  background-color: '{{primary-color-0.87}}'; }.md-checkbox-enabled.md-THEME_NAME-theme[selected].md-focused .md-container:before {  background-color: '{{primary-color-0.26}}'; }.md-checkbox-enabled.md-THEME_NAME-theme[selected] .md-icon:after {  border-color: '{{primary-contrast-0.87}}'; }.md-checkbox-enabled.md-THEME_NAME-theme .md-indeterminate[disabled] .md-container {  color: '{{foreground-3}}'; }.md-checkbox-enabled.md-THEME_NAME-theme md-option .md-text {  color: '{{background-900-0.87}}'; }md-sidenav.md-THEME_NAME-theme, md-sidenav.md-THEME_NAME-theme md-content {  background-color: '{{background-hue-1}}'; }md-slider.md-THEME_NAME-theme .md-track {  background-color: '{{foreground-3}}'; }md-slider.md-THEME_NAME-theme .md-track-ticks {  color: '{{background-contrast}}'; }md-slider.md-THEME_NAME-theme .md-focus-ring {  background-color: '{{accent-A200-0.2}}'; }md-slider.md-THEME_NAME-theme .md-disabled-thumb {  border-color: '{{background-color}}';  background-color: '{{background-color}}'; }md-slider.md-THEME_NAME-theme.md-min .md-thumb:after {  background-color: '{{background-color}}';  border-color: '{{foreground-3}}'; }md-slider.md-THEME_NAME-theme.md-min .md-focus-ring {  background-color: '{{foreground-3-0.38}}'; }md-slider.md-THEME_NAME-theme.md-min[md-discrete] .md-thumb:after {  background-color: '{{background-contrast}}';  border-color: transparent; }md-slider.md-THEME_NAME-theme.md-min[md-discrete] .md-sign {  background-color: '{{background-400}}'; }  md-slider.md-THEME_NAME-theme.md-min[md-discrete] .md-sign:after {    border-top-color: '{{background-400}}'; }md-slider.md-THEME_NAME-theme.md-min[md-discrete][md-vertical] .md-sign:after {  border-top-color: transparent;  border-left-color: '{{background-400}}'; }md-slider.md-THEME_NAME-theme .md-track.md-track-fill {  background-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-thumb:after {  border-color: '{{accent-color}}';  background-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-sign {  background-color: '{{accent-color}}'; }  md-slider.md-THEME_NAME-theme .md-sign:after {    border-top-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme[md-vertical] .md-sign:after {  border-top-color: transparent;  border-left-color: '{{accent-color}}'; }md-slider.md-THEME_NAME-theme .md-thumb-text {  color: '{{accent-contrast}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-focus-ring {  background-color: '{{warn-200-0.38}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-track.md-track-fill {  background-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-thumb:after {  border-color: '{{warn-color}}';  background-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-sign {  background-color: '{{warn-color}}'; }  md-slider.md-THEME_NAME-theme.md-warn .md-sign:after {    border-top-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn[md-vertical] .md-sign:after {  border-top-color: transparent;  border-left-color: '{{warn-color}}'; }md-slider.md-THEME_NAME-theme.md-warn .md-thumb-text {  color: '{{warn-contrast}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-focus-ring {  background-color: '{{primary-200-0.38}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-track.md-track-fill {  background-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-thumb:after {  border-color: '{{primary-color}}';  background-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-sign {  background-color: '{{primary-color}}'; }  md-slider.md-THEME_NAME-theme.md-primary .md-sign:after {    border-top-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary[md-vertical] .md-sign:after {  border-top-color: transparent;  border-left-color: '{{primary-color}}'; }md-slider.md-THEME_NAME-theme.md-primary .md-thumb-text {  color: '{{primary-contrast}}'; }md-slider.md-THEME_NAME-theme[disabled] .md-thumb:after {  border-color: transparent; }md-slider.md-THEME_NAME-theme[disabled]:not(.md-min) .md-thumb:after, md-slider.md-THEME_NAME-theme[disabled][md-discrete] .md-thumb:after {  background-color: '{{foreground-3}}';  border-color: transparent; }md-slider.md-THEME_NAME-theme[disabled][readonly] .md-sign {  background-color: '{{background-400}}'; }  md-slider.md-THEME_NAME-theme[disabled][readonly] .md-sign:after {    border-top-color: '{{background-400}}'; }md-slider.md-THEME_NAME-theme[disabled][readonly][md-vertical] .md-sign:after {  border-top-color: transparent;  border-left-color: '{{background-400}}'; }md-slider.md-THEME_NAME-theme[disabled][readonly] .md-disabled-thumb {  border-color: transparent;  background-color: transparent; }md-slider-container[disabled] > *:first-child:not(md-slider),md-slider-container[disabled] > *:last-child:not(md-slider) {  color: '{{foreground-3}}'; }.md-subheader.md-THEME_NAME-theme {  color: '{{ foreground-2-0.23 }}';  background-color: '{{background-default}}'; }  .md-subheader.md-THEME_NAME-theme.md-primary {    color: '{{primary-color}}'; }  .md-subheader.md-THEME_NAME-theme.md-accent {    color: '{{accent-color}}'; }  .md-subheader.md-THEME_NAME-theme.md-warn {    color: '{{warn-color}}'; }md-switch.md-THEME_NAME-theme .md-ink-ripple {  color: '{{background-500}}'; }md-switch.md-THEME_NAME-theme .md-thumb {  background-color: '{{background-50}}'; }md-switch.md-THEME_NAME-theme .md-bar {  background-color: '{{background-500}}'; }md-switch.md-THEME_NAME-theme.md-checked .md-ink-ripple {  color: '{{accent-color}}'; }md-switch.md-THEME_NAME-theme.md-checked .md-thumb {  background-color: '{{accent-color}}'; }md-switch.md-THEME_NAME-theme.md-checked .md-bar {  background-color: '{{accent-color-0.5}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-focused .md-thumb:before {  background-color: '{{accent-color-0.26}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-ink-ripple {  color: '{{primary-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-thumb {  background-color: '{{primary-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary .md-bar {  background-color: '{{primary-color-0.5}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-primary.md-focused .md-thumb:before {  background-color: '{{primary-color-0.26}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-ink-ripple {  color: '{{warn-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-thumb {  background-color: '{{warn-color}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn .md-bar {  background-color: '{{warn-color-0.5}}'; }md-switch.md-THEME_NAME-theme.md-checked.md-warn.md-focused .md-thumb:before {  background-color: '{{warn-color-0.26}}'; }md-switch.md-THEME_NAME-theme[disabled] .md-thumb {  background-color: '{{background-400}}'; }md-switch.md-THEME_NAME-theme[disabled] .md-bar {  background-color: '{{foreground-4}}'; }md-tabs.md-THEME_NAME-theme md-tabs-wrapper {  background-color: transparent;  border-color: '{{foreground-4}}'; }md-tabs.md-THEME_NAME-theme .md-paginator md-icon {  color: '{{primary-color}}'; }md-tabs.md-THEME_NAME-theme md-ink-bar {  color: '{{accent-color}}';  background: '{{accent-color}}'; }md-tabs.md-THEME_NAME-theme .md-tab {  color: '{{foreground-2}}'; }  md-tabs.md-THEME_NAME-theme .md-tab[disabled], md-tabs.md-THEME_NAME-theme .md-tab[disabled] md-icon {    color: '{{foreground-3}}'; }  md-tabs.md-THEME_NAME-theme .md-tab.md-active, md-tabs.md-THEME_NAME-theme .md-tab.md-active md-icon, md-tabs.md-THEME_NAME-theme .md-tab.md-focused, md-tabs.md-THEME_NAME-theme .md-tab.md-focused md-icon {    color: '{{primary-color}}'; }  md-tabs.md-THEME_NAME-theme .md-tab.md-focused {    background: '{{primary-color-0.1}}'; }  md-tabs.md-THEME_NAME-theme .md-tab .md-ripple-container {    color: '{{accent-A100}}'; }md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper {  background-color: '{{accent-color}}'; }  md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {    color: '{{accent-A100}}'; }    md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {      color: '{{accent-contrast}}'; }    md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused {      background: '{{accent-contrast-0.1}}'; }  md-tabs.md-THEME_NAME-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar {    color: '{{primary-600-1}}';    background: '{{primary-600-1}}'; }md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper {  background-color: '{{primary-color}}'; }  md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {    color: '{{primary-100}}'; }    md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {      color: '{{primary-contrast}}'; }    md-tabs.md-THEME_NAME-theme.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused {      background: '{{primary-contrast-0.1}}'; }md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper {  background-color: '{{warn-color}}'; }  md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {    color: '{{warn-100}}'; }    md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {      color: '{{warn-contrast}}'; }    md-tabs.md-THEME_NAME-theme.md-warn > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused {      background: '{{warn-contrast-0.1}}'; }md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper {  background-color: '{{primary-color}}'; }  md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {    color: '{{primary-100}}'; }    md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {      color: '{{primary-contrast}}'; }    md-toolbar > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused {      background: '{{primary-contrast-0.1}}'; }md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper {  background-color: '{{accent-color}}'; }  md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {    color: '{{accent-A100}}'; }    md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {      color: '{{accent-contrast}}'; }    md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused {      background: '{{accent-contrast-0.1}}'; }  md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-ink-bar {    color: '{{primary-600-1}}';    background: '{{primary-600-1}}'; }md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper {  background-color: '{{warn-color}}'; }  md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {    color: '{{warn-100}}'; }    md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {      color: '{{warn-contrast}}'; }    md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused {      background: '{{warn-contrast-0.1}}'; }md-toast.md-THEME_NAME-theme .md-toast-content {  background-color: #323232;  color: '{{background-50}}'; }  md-toast.md-THEME_NAME-theme .md-toast-content .md-button {    color: '{{background-50}}'; }    md-toast.md-THEME_NAME-theme .md-toast-content .md-button.md-highlight {      color: '{{accent-color}}'; }      md-toast.md-THEME_NAME-theme .md-toast-content .md-button.md-highlight.md-primary {        color: '{{primary-color}}'; }      md-toast.md-THEME_NAME-theme .md-toast-content .md-button.md-highlight.md-warn {        color: '{{warn-color}}'; }md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {  background-color: '{{primary-color}}';  color: '{{primary-contrast}}'; }  md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) md-icon {    color: '{{primary-contrast}}';    fill: '{{primary-contrast}}'; }  md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) .md-button[disabled] md-icon {    color: '{{primary-contrast-0.26}}';    fill: '{{primary-contrast-0.26}}'; }  md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-accent {    background-color: '{{accent-color}}';    color: '{{accent-contrast}}'; }    md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-accent .md-ink-ripple {      color: '{{accent-contrast}}'; }    md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-accent md-icon {      color: '{{accent-contrast}}';      fill: '{{accent-contrast}}'; }    md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-accent .md-button[disabled] md-icon {      color: '{{accent-contrast-0.26}}';      fill: '{{accent-contrast-0.26}}'; }  md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar).md-warn {    background-color: '{{warn-color}}';    color: '{{warn-contrast}}'; }md-tooltip.md-THEME_NAME-theme {  color: '{{background-700-contrast}}'; }  md-tooltip.md-THEME_NAME-theme .md-content {    background-color: '{{background-700}}'; }/*  Only used with Theme processes */html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {  color: '{{foreground-1}}';  background-color: '{{background-color}}'; }"); 6002})();...

chips.js

Source:chips.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7goog.provide('ngmaterial.components.chips');8goog.require('ngmaterial.components.autocomplete');9goog.require('ngmaterial.core');10/**11 * @ngdoc module12 * @name material.components.chips13 */14/*15 * @see js folder for chips implementation16 */17angular.module('material.components.chips', [18  'material.core',19  'material.components.autocomplete'20]);21MdChipCtrl.$inject = ["$scope", "$element", "$mdConstant", "$timeout", "$mdUtil"];angular22  .module('material.components.chips')23  .controller('MdChipCtrl', MdChipCtrl);24/**25 * Controller for the MdChip component. Responsible for handling keyboard26 * events and editting the chip if needed.27 *28 * @param $scope29 * @param $element30 * @param $mdConstant31 * @param $timeout32 * @param $mdUtil33 * @constructor34 */35function MdChipCtrl ($scope, $element, $mdConstant, $timeout, $mdUtil) {36  /**37   * @type {$scope}38   */39  this.$scope = $scope;40  /**41   * @type {$element}42   */43  this.$element = $element;44  /**45   * @type {$mdConstant}46   */47  this.$mdConstant = $mdConstant;48  /**49   * @type {$timeout}50   */51  this.$timeout = $timeout;52  /**53   * @type {$mdUtil}54   */55  this.$mdUtil = $mdUtil;56  /**57   * @type {boolean}58   */59  this.isEditting = false;60  /**61   * @type {MdChipsCtrl}62   */63  this.parentController = undefined;64  /**65   * @type {boolean}66   */67  this.enableChipEdit = false;68}69/**70 * @param {MdChipsCtrl} controller71 */72MdChipCtrl.prototype.init = function(controller) {73  this.parentController = controller;74  this.enableChipEdit = this.parentController.enableChipEdit;75  if (this.enableChipEdit) {76    this.$element.on('keydown', this.chipKeyDown.bind(this));77    this.$element.on('mousedown', this.chipMouseDown.bind(this));78    this.getChipContent().addClass('_md-chip-content-edit-is-enabled');79  }80};81/**82 * @return {Object}83 */84MdChipCtrl.prototype.getChipContent = function() {85  var chipContents = this.$element[0].getElementsByClassName('md-chip-content');86  return angular.element(chipContents[0]);87};88/**89 * @return {Object}90 */91MdChipCtrl.prototype.getContentElement = function() {92  return angular.element(this.getChipContent().children()[0]);93};94/**95 * @return {number}96 */97MdChipCtrl.prototype.getChipIndex = function() {98  return parseInt(this.$element.attr('index'));99};100/**101 * Presents an input element to edit the contents of the chip.102 */103MdChipCtrl.prototype.goOutOfEditMode = function() {104  if (!this.isEditting) return;105  this.isEditting = false;106  this.$element.removeClass('_md-chip-editing');107  this.getChipContent()[0].contentEditable = 'false';108  var chipIndex = this.getChipIndex();109  var content = this.getContentElement().text();110  if (content) {111    this.parentController.updateChipContents(112        chipIndex,113        this.getContentElement().text()114    );115    this.$mdUtil.nextTick(function() {116      if (this.parentController.selectedChip === chipIndex) {117        this.parentController.focusChip(chipIndex);118      }119    }.bind(this));120  } else {121    this.parentController.removeChipAndFocusInput(chipIndex);122  }123};124/**125 * Given an HTML element. Selects contents of it.126 * @param node127 */128MdChipCtrl.prototype.selectNodeContents = function(node) {129  var range, selection;130  if (document.body.createTextRange) {131    range = document.body.createTextRange();132    range.moveToElementText(node);133    range.select();134  } else if (window.getSelection) {135    selection = window.getSelection();136    range = document.createRange();137    range.selectNodeContents(node);138    selection.removeAllRanges();139    selection.addRange(range);140  }141};142/**143 * Presents an input element to edit the contents of the chip.144 */145MdChipCtrl.prototype.goInEditMode = function() {146  this.isEditting = true;147  this.$element.addClass('_md-chip-editing');148  this.getChipContent()[0].contentEditable = 'true';149  this.getChipContent().on('blur', function() {150    this.goOutOfEditMode();151  }.bind(this));152  this.selectNodeContents(this.getChipContent()[0]);153};154/**155 * Handles the keydown event on the chip element. If enable-chip-edit attribute is156 * set to true, space or enter keys can trigger going into edit mode. Enter can also157 * trigger submitting if the chip is already being edited.158 * @param event159 */160MdChipCtrl.prototype.chipKeyDown = function(event) {161  if (!this.isEditting &&162    (event.keyCode === this.$mdConstant.KEY_CODE.ENTER ||163    event.keyCode === this.$mdConstant.KEY_CODE.SPACE)) {164    event.preventDefault();165    this.goInEditMode();166  } else if (this.isEditting &&167    event.keyCode === this.$mdConstant.KEY_CODE.ENTER) {168    event.preventDefault();169    this.goOutOfEditMode();170  }171};172/**173 * Handles the double click event174 */175MdChipCtrl.prototype.chipMouseDown = function() {176  if(this.getChipIndex() == this.parentController.selectedChip &&177    this.enableChipEdit &&178    !this.isEditting) {179    this.goInEditMode();180  }181};182MdChip.$inject = ["$mdTheming", "$mdUtil"];angular183    .module('material.components.chips')184    .directive('mdChip', MdChip);185/**186 * @ngdoc directive187 * @name mdChip188 * @module material.components.chips189 *190 * @description191 * `<md-chip>` is a component used within `<md-chips>` and is responsible for rendering individual192 * chips.193 *194 *195 * @usage196 * <hljs lang="html">197 *   <md-chip>{{$chip}}</md-chip>198 * </hljs>199 *200 */201// This hint text is hidden within a chip but used by screen readers to202// inform the user how they can interact with a chip.203var DELETE_HINT_TEMPLATE = '\204    <span ng-if="!$mdChipsCtrl.readonly" class="md-visually-hidden">\205      {{$mdChipsCtrl.deleteHint}}\206    </span>';207/**208 * MDChip Directive Definition209 *210 * @param $mdTheming211 * @param $mdUtil212 * ngInject213 */214function MdChip($mdTheming, $mdUtil) {215  var hintTemplate = $mdUtil.processTemplate(DELETE_HINT_TEMPLATE);216  return {217    restrict: 'E',218    require: ['^?mdChips', 'mdChip'],219    compile:  compile,220    controller: 'MdChipCtrl'221  };222  function compile(element, attr) {223    // Append the delete template224    element.append($mdUtil.processTemplate(hintTemplate));225    return function postLink(scope, element, attr, ctrls) {226      var chipsController = ctrls.shift();227      var chipController  = ctrls.shift();228      $mdTheming(element);229      if (chipsController) {230        chipController.init(chipsController);231        angular232          .element(element[0]233          .querySelector('.md-chip-content'))234          .on('blur', function () {235            chipsController.resetSelectedChip();236            chipsController.$scope.$applyAsync();237          });238      }239    };240  }241}242MdChipRemove.$inject = ["$timeout"];angular243    .module('material.components.chips')244    .directive('mdChipRemove', MdChipRemove);245/**246 * @ngdoc directive247 * @name mdChipRemove248 * @restrict A249 * @module material.components.chips250 *251 * @description252 * Designates an element to be used as the delete button for a chip. <br/>253 * This element is passed as a child of the `md-chips` element.254 *255 * The designated button will be just appended to the chip and removes the given chip on click.<br/>256 * By default the button is not being styled by the `md-chips` component.257 *258 * @usage259 * <hljs lang="html">260 *   <md-chips>261 *     <button md-chip-remove="">262 *       <md-icon md-svg-icon="md-close"></md-icon>263 *     </button>264 *   </md-chips>265 * </hljs>266 */267/**268 * MdChipRemove Directive Definition.269 * 270 * @param $timeout271 * @returns {{restrict: string, require: string[], link: Function, scope: boolean}}272 * @constructor273 */274function MdChipRemove ($timeout) {275  return {276    restrict: 'A',277    require: '^mdChips',278    scope: false,279    link: postLink280  };281  function postLink(scope, element, attr, ctrl) {282    element.on('click', function(event) {283      scope.$apply(function() {284        ctrl.removeChip(scope.$$replacedScope.$index);285      });286    });287    // Child elements aren't available until after a $timeout tick as they are hidden by an288    // `ng-if`. see http://goo.gl/zIWfuw289    $timeout(function() {290      element.attr({ tabindex: -1, 'aria-hidden': true });291      element.find('button').attr('tabindex', '-1');292    });293  }294}295MdChipTransclude.$inject = ["$compile"];angular296    .module('material.components.chips')297    .directive('mdChipTransclude', MdChipTransclude);298function MdChipTransclude ($compile) {299  return {300    restrict: 'EA',301    terminal: true,302    link: link,303    scope: false304  };305  function link (scope, element, attr) {306    var ctrl = scope.$parent.$mdChipsCtrl,307        newScope = ctrl.parent.$new(false, ctrl.parent);308    newScope.$$replacedScope = scope;309    newScope.$chip = scope.$chip;310    newScope.$index = scope.$index;311    newScope.$mdChipsCtrl = ctrl;312    var newHtml = ctrl.$scope.$eval(attr.mdChipTransclude);313    element.html(newHtml);314    $compile(element.contents())(newScope);315  }316}317MdChipsCtrl.$inject = ["$scope", "$attrs", "$mdConstant", "$log", "$element", "$timeout", "$mdUtil"];angular318    .module('material.components.chips')319    .controller('MdChipsCtrl', MdChipsCtrl);320/**321 * Controller for the MdChips component. Responsible for adding to and322 * removing from the list of chips, marking chips as selected, and binding to323 * the models of various input components.324 *325 * @param $scope326 * @param $attrs327 * @param $mdConstant328 * @param $log329 * @param $element330 * @param $timeout331 * @param $mdUtil332 * @constructor333 */334function MdChipsCtrl ($scope, $attrs, $mdConstant, $log, $element, $timeout, $mdUtil) {335  /** @type {$timeout} **/336  this.$timeout = $timeout;337  /** @type {Object} */338  this.$mdConstant = $mdConstant;339  /** @type {angular.$scope} */340  this.$scope = $scope;341  /** @type {angular.$scope} */342  this.parent = $scope.$parent;343  /** @type {$log} */344  this.$log = $log;345  /** @type {$element} */346  this.$element = $element;347  /** @type {angular.NgModelController} */348  this.ngModelCtrl = null;349  /** @type {angular.NgModelController} */350  this.userInputNgModelCtrl = null;351  /** @type {MdAutocompleteCtrl} */352  this.autocompleteCtrl = null;353  /** @type {Element} */354  this.userInputElement = null;355  /** @type {Array.<Object>} */356  this.items = [];357  /** @type {number} */358  this.selectedChip = -1;359  /** @type {string} */360  this.enableChipEdit = $mdUtil.parseAttributeBoolean($attrs.mdEnableChipEdit);361  /** @type {string} */362  this.addOnBlur = $mdUtil.parseAttributeBoolean($attrs.mdAddOnBlur);363  /**364   * Hidden hint text for how to delete a chip. Used to give context to screen readers.365   * @type {string}366   */367  this.deleteHint = 'Press delete to remove this chip.';368  /**369   * Hidden label for the delete button. Used to give context to screen readers.370   * @type {string}371   */372  this.deleteButtonLabel = 'Remove';373  /**374   * Model used by the input element.375   * @type {string}376   */377  this.chipBuffer = '';378  /**379   * Whether to use the transformChip expression to transform the chip buffer380   * before appending it to the list.381   * @type {boolean}382   */383  this.useTransformChip = false;384  /**385   * Whether to use the onAdd expression to notify of chip additions.386   * @type {boolean}387   */388  this.useOnAdd = false;389  /**390   * Whether to use the onRemove expression to notify of chip removals.391   * @type {boolean}392   */393  this.useOnRemove = false;394  /**395   * Whether to use the onSelect expression to notify the component's user396   * after selecting a chip from the list.397   * @type {boolean}398   */399}400/**401 * Handles the keydown event on the input element: by default <enter> appends402 * the buffer to the chip list, while backspace removes the last chip in the403 * list if the current buffer is empty.404 * @param event405 */406MdChipsCtrl.prototype.inputKeydown = function(event) {407  var chipBuffer = this.getChipBuffer();408  // If we have an autocomplete, and it handled the event, we have nothing to do409  if (this.autocompleteCtrl && event.isDefaultPrevented && event.isDefaultPrevented()) {410    return;411  }412  if (event.keyCode === this.$mdConstant.KEY_CODE.BACKSPACE) {413    // Only select and focus the previous chip, if the current caret position of the414    // input element is at the beginning.415    if (this.getCursorPosition(event.target) !== 0) {416      return;417    }418    event.preventDefault();419    event.stopPropagation();420    if (this.items.length) {421      this.selectAndFocusChipSafe(this.items.length - 1);422    }423    return;424  }425  // By default <enter> appends the buffer to the chip list.426  if (!this.separatorKeys || this.separatorKeys.length < 1) {427    this.separatorKeys = [this.$mdConstant.KEY_CODE.ENTER];428  }429  // Support additional separator key codes in an array of `md-separator-keys`.430  if (this.separatorKeys.indexOf(event.keyCode) !== -1) {431    if ((this.autocompleteCtrl && this.requireMatch) || !chipBuffer) return;432    event.preventDefault();433    // Only append the chip and reset the chip buffer if the max chips limit isn't reached.434    if (this.hasMaxChipsReached()) return;435    this.appendChip(chipBuffer.trim());436    this.resetChipBuffer();437  }438};439/**440 * Returns the cursor position of the specified input element.441 * @param element HTMLInputElement442 * @returns {Number} Cursor Position of the input.443 */444MdChipsCtrl.prototype.getCursorPosition = function(element) {445  /*446   * Figure out whether the current input for the chips buffer is valid for using447   * the selectionStart / end property to retrieve the cursor position.448   * Some browsers do not allow the use of those attributes, on different input types.449   */450  try {451    if (element.selectionStart === element.selectionEnd) {452      return element.selectionStart;453    }454  } catch (e) {455    if (!element.value) {456      return 0;457    }458  }459};460/**461 * Updates the content of the chip at given index462 * @param chipIndex463 * @param chipContents464 */465MdChipsCtrl.prototype.updateChipContents = function(chipIndex, chipContents){466  if(chipIndex >= 0 && chipIndex < this.items.length) {467    this.items[chipIndex] = chipContents;468    this.ngModelCtrl.$setDirty();469  }470};471/**472 * Returns true if a chip is currently being edited. False otherwise.473 * @return {boolean}474 */475MdChipsCtrl.prototype.isEditingChip = function() {476  return !!this.$element[0].getElementsByClassName('_md-chip-editing').length;477};478MdChipsCtrl.prototype.isRemovable = function() {479  // Return false if we have static chips480  if (!this.ngModelCtrl) {481    return false;482  }483  return this.readonly ? this.removable :484         angular.isDefined(this.removable) ? this.removable : true;485};486/**487 * Handles the keydown event on the chip elements: backspace removes the selected chip, arrow488 * keys switch which chips is active489 * @param event490 */491MdChipsCtrl.prototype.chipKeydown = function (event) {492  if (this.getChipBuffer()) return;493  if (this.isEditingChip()) return;494  495  switch (event.keyCode) {496    case this.$mdConstant.KEY_CODE.BACKSPACE:497    case this.$mdConstant.KEY_CODE.DELETE:498      if (this.selectedChip < 0) return;499      event.preventDefault();500      // Cancel the delete action only after the event cancel. Otherwise the page will go back.501      if (!this.isRemovable()) return;502      this.removeAndSelectAdjacentChip(this.selectedChip);503      break;504    case this.$mdConstant.KEY_CODE.LEFT_ARROW:505      event.preventDefault();506      if (this.selectedChip < 0) this.selectedChip = this.items.length;507      if (this.items.length) this.selectAndFocusChipSafe(this.selectedChip - 1);508      break;509    case this.$mdConstant.KEY_CODE.RIGHT_ARROW:510      event.preventDefault();511      this.selectAndFocusChipSafe(this.selectedChip + 1);512      break;513    case this.$mdConstant.KEY_CODE.ESCAPE:514    case this.$mdConstant.KEY_CODE.TAB:515      if (this.selectedChip < 0) return;516      event.preventDefault();517      this.onFocus();518      break;519  }520};521/**522 * Get the input's placeholder - uses `placeholder` when list is empty and `secondary-placeholder`523 * when the list is non-empty. If `secondary-placeholder` is not provided, `placeholder` is used524 * always.525 */526MdChipsCtrl.prototype.getPlaceholder = function() {527  // Allow `secondary-placeholder` to be blank.528  var useSecondary = (this.items && this.items.length &&529      (this.secondaryPlaceholder == '' || this.secondaryPlaceholder));530  return useSecondary ? this.secondaryPlaceholder : this.placeholder;531};532/**533 * Removes chip at {@code index} and selects the adjacent chip.534 * @param index535 */536MdChipsCtrl.prototype.removeAndSelectAdjacentChip = function(index) {537  var selIndex = this.getAdjacentChipIndex(index);538  this.removeChip(index);539  this.$timeout(angular.bind(this, function () {540      this.selectAndFocusChipSafe(selIndex);541  }));542};543/**544 * Sets the selected chip index to -1.545 */546MdChipsCtrl.prototype.resetSelectedChip = function() {547  this.selectedChip = -1;548};549/**550 * Gets the index of an adjacent chip to select after deletion. Adjacency is551 * determined as the next chip in the list, unless the target chip is the552 * last in the list, then it is the chip immediately preceding the target. If553 * there is only one item in the list, -1 is returned (select none).554 * The number returned is the index to select AFTER the target has been555 * removed.556 * If the current chip is not selected, then -1 is returned to select none.557 */558MdChipsCtrl.prototype.getAdjacentChipIndex = function(index) {559  var len = this.items.length - 1;560  return (len == 0) ? -1 :561      (index == len) ? index -1 : index;562};563/**564 * Append the contents of the buffer to the chip list. This method will first565 * call out to the md-transform-chip method, if provided.566 *567 * @param newChip568 */569MdChipsCtrl.prototype.appendChip = function(newChip) {570  if (this.useTransformChip && this.transformChip) {571    var transformedChip = this.transformChip({'$chip': newChip});572    // Check to make sure the chip is defined before assigning it, otherwise, we'll just assume573    // they want the string version.574    if (angular.isDefined(transformedChip)) {575      newChip = transformedChip;576    }577  }578  // If items contains an identical object to newChip, do not append579  if (angular.isObject(newChip)){580    var identical = this.items.some(function(item){581      return angular.equals(newChip, item);582    });583    if (identical) return;584  }585  // Check for a null (but not undefined), or existing chip and cancel appending586  if (newChip == null || this.items.indexOf(newChip) + 1) return;587  // Append the new chip onto our list588  var index = this.items.push(newChip);589  // Update model validation590  this.ngModelCtrl.$setDirty();591  this.validateModel();592  // If they provide the md-on-add attribute, notify them of the chip addition593  if (this.useOnAdd && this.onAdd) {594    this.onAdd({ '$chip': newChip, '$index': index });595  }596};597/**598 * Sets whether to use the md-transform-chip expression. This expression is599 * bound to scope and controller in {@code MdChipsDirective} as600 * {@code transformChip}. Due to the nature of directive scope bindings, the601 * controller cannot know on its own/from the scope whether an expression was602 * actually provided.603 */604MdChipsCtrl.prototype.useTransformChipExpression = function() {605  this.useTransformChip = true;606};607/**608 * Sets whether to use the md-on-add expression. This expression is609 * bound to scope and controller in {@code MdChipsDirective} as610 * {@code onAdd}. Due to the nature of directive scope bindings, the611 * controller cannot know on its own/from the scope whether an expression was612 * actually provided.613 */614MdChipsCtrl.prototype.useOnAddExpression = function() {615  this.useOnAdd = true;616};617/**618 * Sets whether to use the md-on-remove expression. This expression is619 * bound to scope and controller in {@code MdChipsDirective} as620 * {@code onRemove}. Due to the nature of directive scope bindings, the621 * controller cannot know on its own/from the scope whether an expression was622 * actually provided.623 */624MdChipsCtrl.prototype.useOnRemoveExpression = function() {625  this.useOnRemove = true;626};627/*628 * Sets whether to use the md-on-select expression. This expression is629 * bound to scope and controller in {@code MdChipsDirective} as630 * {@code onSelect}. Due to the nature of directive scope bindings, the631 * controller cannot know on its own/from the scope whether an expression was632 * actually provided.633 */634MdChipsCtrl.prototype.useOnSelectExpression = function() {635  this.useOnSelect = true;636};637/**638 * Gets the input buffer. The input buffer can be the model bound to the639 * default input item {@code this.chipBuffer}, the {@code selectedItem}640 * model of an {@code md-autocomplete}, or, through some magic, the model641 * bound to any inpput or text area element found within a642 * {@code md-input-container} element.643 * @return {Object|string}644 */645MdChipsCtrl.prototype.getChipBuffer = function() {646  return !this.userInputElement ? this.chipBuffer :647      this.userInputNgModelCtrl ? this.userInputNgModelCtrl.$viewValue :648          this.userInputElement[0].value;649};650/**651 * Resets the input buffer for either the internal input or user provided input element.652 */653MdChipsCtrl.prototype.resetChipBuffer = function() {654  if (this.userInputElement) {655    if (this.userInputNgModelCtrl) {656      this.userInputNgModelCtrl.$setViewValue('');657      this.userInputNgModelCtrl.$render();658    } else {659      this.userInputElement[0].value = '';660    }661  } else {662    this.chipBuffer = '';663  }664};665MdChipsCtrl.prototype.hasMaxChipsReached = function() {666  if (angular.isString(this.maxChips)) this.maxChips = parseInt(this.maxChips, 10) || 0;667  return this.maxChips > 0 && this.items.length >= this.maxChips;668};669/**670 * Updates the validity properties for the ngModel.671 */672MdChipsCtrl.prototype.validateModel = function() {673  this.ngModelCtrl.$setValidity('md-max-chips', !this.hasMaxChipsReached());674};675/**676 * Removes the chip at the given index.677 * @param index678 */679MdChipsCtrl.prototype.removeChip = function(index) {680  var removed = this.items.splice(index, 1);681  // Update model validation682  this.ngModelCtrl.$setDirty();683  this.validateModel();684  if (removed && removed.length && this.useOnRemove && this.onRemove) {685    this.onRemove({ '$chip': removed[0], '$index': index });686  }687};688MdChipsCtrl.prototype.removeChipAndFocusInput = function (index) {689  this.removeChip(index);690  if (this.autocompleteCtrl) {691    // Always hide the autocomplete dropdown before focusing the autocomplete input.692    // Wait for the input to move horizontally, because the chip was removed.693    // This can lead to an incorrect dropdown position.694    this.autocompleteCtrl.hidden = true;695    this.$mdUtil.nextTick(this.onFocus.bind(this));696  } else {697    this.onFocus();698  }699};700/**701 * Selects the chip at `index`,702 * @param index703 */704MdChipsCtrl.prototype.selectAndFocusChipSafe = function(index) {705  if (!this.items.length) {706    this.selectChip(-1);707    this.onFocus();708    return;709  }710  if (index === this.items.length) return this.onFocus();711  index = Math.max(index, 0);712  index = Math.min(index, this.items.length - 1);713  this.selectChip(index);714  this.focusChip(index);715};716/**717 * Marks the chip at the given index as selected.718 * @param index719 */720MdChipsCtrl.prototype.selectChip = function(index) {721  if (index >= -1 && index <= this.items.length) {722    this.selectedChip = index;723    // Fire the onSelect if provided724    if (this.useOnSelect && this.onSelect) {725      this.onSelect({'$chip': this.items[this.selectedChip] });726    }727  } else {728    this.$log.warn('Selected Chip index out of bounds; ignoring.');729  }730};731/**732 * Selects the chip at `index` and gives it focus.733 * @param index734 */735MdChipsCtrl.prototype.selectAndFocusChip = function(index) {736  this.selectChip(index);737  if (index != -1) {738    this.focusChip(index);739  }740};741/**742 * Call `focus()` on the chip at `index`743 */744MdChipsCtrl.prototype.focusChip = function(index) {745  this.$element[0].querySelector('md-chip[index="' + index + '"] .md-chip-content').focus();746};747/**748 * Configures the required interactions with the ngModel Controller.749 * Specifically, set {@code this.items} to the {@code NgModelCtrl#$viewVale}.750 * @param ngModelCtrl751 */752MdChipsCtrl.prototype.configureNgModel = function(ngModelCtrl) {753  this.ngModelCtrl = ngModelCtrl;754  var self = this;755  ngModelCtrl.$render = function() {756    // model is updated. do something.757    self.items = self.ngModelCtrl.$viewValue;758  };759};760MdChipsCtrl.prototype.onFocus = function () {761  var input = this.$element[0].querySelector('input');762  input && input.focus();763  this.resetSelectedChip();764};765MdChipsCtrl.prototype.onInputFocus = function () {766  this.inputHasFocus = true;767  this.resetSelectedChip();768};769MdChipsCtrl.prototype.onInputBlur = function () {770  this.inputHasFocus = false;771  var chipBuffer = this.getChipBuffer().trim();772  // Update the custom chip validators.773  this.validateModel();774  var isModelValid = this.ngModelCtrl.$valid;775  if (this.userInputNgModelCtrl) {776    isModelValid &= this.userInputNgModelCtrl.$valid;777  }778  // Only append the chip and reset the chip buffer if the chips and input ngModel is valid.779  if (this.addOnBlur && chipBuffer && isModelValid) {780    this.appendChip(chipBuffer);781    this.resetChipBuffer();782  }783};784/**785 * Configure event bindings on a user-provided input element.786 * @param inputElement787 */788MdChipsCtrl.prototype.configureUserInput = function(inputElement) {789  this.userInputElement = inputElement;790  // Find the NgModelCtrl for the input element791  var ngModelCtrl = inputElement.controller('ngModel');792  // `.controller` will look in the parent as well.793  if (ngModelCtrl != this.ngModelCtrl) {794    this.userInputNgModelCtrl = ngModelCtrl;795  }796  var scope = this.$scope;797  var ctrl = this;798  // Run all of the events using evalAsync because a focus may fire a blur in the same digest loop799  var scopeApplyFn = function(event, fn) {800    scope.$evalAsync(angular.bind(ctrl, fn, event));801  };802  // Bind to keydown and focus events of input803  inputElement804      .attr({ tabindex: 0 })805      .on('keydown', function(event) { scopeApplyFn(event, ctrl.inputKeydown) })806      .on('focus', function(event) { scopeApplyFn(event, ctrl.onInputFocus) })807      .on('blur', function(event) { scopeApplyFn(event, ctrl.onInputBlur) })808};809MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {810  if (ctrl) {811    this.autocompleteCtrl = ctrl;812    ctrl.registerSelectedItemWatcher(angular.bind(this, function (item) {813      if (item) {814        // Only append the chip and reset the chip buffer if the max chips limit isn't reached.815        if (this.hasMaxChipsReached()) return;816        this.appendChip(item);817        this.resetChipBuffer();818      }819    }));820    this.$element.find('input')821        .on('focus',angular.bind(this, this.onInputFocus) )822        .on('blur', angular.bind(this, this.onInputBlur) );823  }824};825MdChipsCtrl.prototype.hasFocus = function () {826  return this.inputHasFocus || this.selectedChip >= 0;827};828  829  MdChips.$inject = ["$mdTheming", "$mdUtil", "$compile", "$log", "$timeout", "$$mdSvgRegistry"];angular830      .module('material.components.chips')831      .directive('mdChips', MdChips);832  /**833   * @ngdoc directive834   * @name mdChips835   * @module material.components.chips836   *837   * @description838   * `<md-chips>` is an input component for building lists of strings or objects. The list items are839   * displayed as 'chips'. This component can make use of an `<input>` element or an 840   * `<md-autocomplete>` element.841   *842   * ### Custom templates843   * A custom template may be provided to render the content of each chip. This is achieved by844   * specifying an `<md-chip-template>` element containing the custom content as a child of845   * `<md-chips>`.846   *847   * Note: Any attributes on848   * `<md-chip-template>` will be dropped as only the innerHTML is used for the chip template. The849   * variables `$chip` and `$index` are available in the scope of `<md-chip-template>`, representing850   * the chip object and its index in the list of chips, respectively.851   * To override the chip delete control, include an element (ideally a button) with the attribute852   * `md-chip-remove`. A click listener to remove the chip will be added automatically. The element853   * is also placed as a sibling to the chip content (on which there are also click listeners) to854   * avoid a nested ng-click situation.855   *856   * <h3> Pending Features </h3>857   * <ul style="padding-left:20px;">858   *859   *   <ul>Style860   *     <li>Colours for hover, press states (ripple?).</li>861   *   </ul>862   *863   *   <ul>Validation864   *     <li>allow a validation callback</li>865   *     <li>hilighting style for invalid chips</li>866   *   </ul>867   *868   *   <ul>Item mutation869   *     <li>Support `870   *       <md-chip-edit>` template, show/hide the edit element on tap/click? double tap/double871   *       click?872   *     </li>873   *   </ul>874   *875   *   <ul>Truncation and Disambiguation (?)876   *     <li>Truncate chip text where possible, but do not truncate entries such that two are877   *     indistinguishable.</li>878   *   </ul>879   *880   *   <ul>Drag and Drop881   *     <li>Drag and drop chips between related `<md-chips>` elements.882   *     </li>883   *   </ul>884   * </ul>885   *886   * <span style="font-size:.8em;text-align:center">887   *   Warning: This component is a WORK IN PROGRESS. If you use it now,888   *   it will probably break on you in the future.889   * </span>890   *891   * Sometimes developers want to limit the amount of possible chips.<br/>892   * You can specify the maximum amount of chips by using the following markup.893   *894   * <hljs lang="html">895   *   <md-chips896   *       ng-model="myItems"897   *       placeholder="Add an item"898   *       md-max-chips="5">899   *   </md-chips>900   * </hljs>901   *902   * In some cases, you have an autocomplete inside of the `md-chips`.<br/>903   * When the maximum amount of chips has been reached, you can also disable the autocomplete selection.<br/>904   * Here is an example markup.905   *906   * <hljs lang="html">907   *   <md-chips ng-model="myItems" md-max-chips="5">908   *     <md-autocomplete ng-hide="myItems.length > 5" ...></md-autocomplete>909   *   </md-chips>910   * </hljs>911   *912   * @param {string=|object=} ng-model A model to bind the list of items to913   * @param {string=} placeholder Placeholder text that will be forwarded to the input.914   * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,915   *    displayed when there is at least one item in the list916   * @param {boolean=} md-removable Enables or disables the deletion of chips through the917   *    removal icon or the Delete/Backspace key. Defaults to true.918   * @param {boolean=} readonly Disables list manipulation (deleting or adding list items), hiding919   *    the input and delete buttons. If no `ng-model` is provided, the chips will automatically be920   *    marked as readonly.<br/><br/>921   *    When `md-removable` is not defined, the `md-remove` behavior will be overwritten and disabled.922   * @param {string=} md-enable-chip-edit Set this to "true" to enable editing of chip contents. The user can 923   *    go into edit mode with pressing "space", "enter", or double clicking on the chip. Chip edit is only924   *    supported for chips with basic template.925   * @param {number=} md-max-chips The maximum number of chips allowed to add through user input.926   *    <br/><br/>The validation property `md-max-chips` can be used when the max chips927   *    amount is reached.928   * @param {boolean=} md-add-on-blur When set to true, remaining text inside of the input will929   *    be converted into a new chip on blur.930   * @param {expression} md-transform-chip An expression of form `myFunction($chip)` that when called931   *    expects one of the following return values:932   *    - an object representing the `$chip` input string933   *    - `undefined` to simply add the `$chip` input string, or934   *    - `null` to prevent the chip from being appended935   * @param {expression=} md-on-add An expression which will be called when a chip has been936   *    added.937   * @param {expression=} md-on-remove An expression which will be called when a chip has been938   *    removed.939   * @param {expression=} md-on-select An expression which will be called when a chip is selected.940   * @param {boolean} md-require-match If true, and the chips template contains an autocomplete,941   *    only allow selection of pre-defined chips (i.e. you cannot add new ones).942   * @param {string=} delete-hint A string read by screen readers instructing users that pressing943   *    the delete key will remove the chip.944   * @param {string=} delete-button-label A label for the delete button. Also hidden and read by945   *    screen readers.946   * @param {expression=} md-separator-keys An array of key codes used to separate chips.947   *948   * @usage949   * <hljs lang="html">950   *   <md-chips951   *       ng-model="myItems"952   *       placeholder="Add an item"953   *       readonly="isReadOnly">954   *   </md-chips>955   * </hljs>956   *957   * <h3>Validation</h3>958   * When using [ngMessages](https://docs.angularjs.org/api/ngMessages), you can show errors based959   * on our custom validators.960   * <hljs lang="html">961   *   <form name="userForm">962   *     <md-chips963   *       name="fruits"964   *       ng-model="myItems"965   *       placeholder="Add an item"966   *       md-max-chips="5">967   *     </md-chips>968   *     <div ng-messages="userForm.fruits.$error" ng-if="userForm.$dirty">969   *       <div ng-message="md-max-chips">You reached the maximum amount of chips</div>970   *    </div>971   *   </form>972   * </hljs>973   *974   */975  var MD_CHIPS_TEMPLATE = '\976      <md-chips-wrap\977          ng-keydown="$mdChipsCtrl.chipKeydown($event)"\978          ng-class="{ \'md-focused\': $mdChipsCtrl.hasFocus(), \979                      \'md-readonly\': !$mdChipsCtrl.ngModelCtrl || $mdChipsCtrl.readonly,\980                      \'md-removable\': $mdChipsCtrl.isRemovable() }"\981          class="md-chips">\982        <md-chip ng-repeat="$chip in $mdChipsCtrl.items"\983            index="{{$index}}"\984            ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': !$mdChipsCtrl.ngModelCtrl || $mdChipsCtrl.readonly}">\985          <div class="md-chip-content"\986              tabindex="-1"\987              aria-hidden="true"\988              ng-click="!$mdChipsCtrl.readonly && $mdChipsCtrl.focusChip($index)"\989              ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\990              md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\991          <div ng-if="$mdChipsCtrl.isRemovable()"\992               class="md-chip-remove-container"\993               md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\994        </md-chip>\995        <div class="md-chip-input-container" ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl">\996          <div md-chip-transclude="$mdChipsCtrl.chipInputTemplate"></div>\997        </div>\998      </md-chips-wrap>';999  var CHIP_INPUT_TEMPLATE = '\1000        <input\1001            class="md-input"\1002            tabindex="0"\1003            placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\1004            aria-label="{{$mdChipsCtrl.getPlaceholder()}}"\1005            ng-model="$mdChipsCtrl.chipBuffer"\1006            ng-focus="$mdChipsCtrl.onInputFocus()"\1007            ng-blur="$mdChipsCtrl.onInputBlur()"\1008            ng-keydown="$mdChipsCtrl.inputKeydown($event)">';1009  var CHIP_DEFAULT_TEMPLATE = '\1010      <span>{{$chip}}</span>';1011  var CHIP_REMOVE_TEMPLATE = '\1012      <button\1013          class="md-chip-remove"\1014          ng-if="$mdChipsCtrl.isRemovable()"\1015          ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index)"\1016          type="button"\1017          aria-hidden="true"\1018          tabindex="-1">\1019        <md-icon md-svg-src="{{ $mdChipsCtrl.mdCloseIcon }}"></md-icon>\1020        <span class="md-visually-hidden">\1021          {{$mdChipsCtrl.deleteButtonLabel}}\1022        </span>\1023      </button>';1024  /**1025   * MDChips Directive Definition1026   */1027  function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {1028    // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols1029    var templates = getTemplates();1030    return {1031      template: function(element, attrs) {1032        // Clone the element into an attribute. By prepending the attribute1033        // name with '$', Angular won't write it into the DOM. The cloned1034        // element propagates to the link function via the attrs argument,1035        // where various contained-elements can be consumed.1036        attrs['$mdUserTemplate'] = element.clone();1037        return templates.chips;1038      },1039      require: ['mdChips'],1040      restrict: 'E',1041      controller: 'MdChipsCtrl',1042      controllerAs: '$mdChipsCtrl',1043      bindToController: true,1044      compile: compile,1045      scope: {1046        readonly: '=readonly',1047        removable: '=mdRemovable',1048        placeholder: '@',1049        secondaryPlaceholder: '@',1050        maxChips: '@mdMaxChips',1051        transformChip: '&mdTransformChip',1052        onAppend: '&mdOnAppend',1053        onAdd: '&mdOnAdd',1054        onRemove: '&mdOnRemove',1055        onSelect: '&mdOnSelect',1056        deleteHint: '@',1057        deleteButtonLabel: '@',1058        separatorKeys: '=?mdSeparatorKeys',1059        requireMatch: '=?mdRequireMatch'1060      }1061    };1062    /**1063     * Builds the final template for `md-chips` and returns the postLink function.1064     *1065     * Building the template involves 3 key components:1066     * static chips1067     * chip template1068     * input control1069     *1070     * If no `ng-model` is provided, only the static chip work needs to be done.1071     *1072     * If no user-passed `md-chip-template` exists, the default template is used. This resulting1073     * template is appended to the chip content element.1074     *1075     * The remove button may be overridden by passing an element with an md-chip-remove attribute.1076     *1077     * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for1078     * transclusion later. The transclusion happens in `postLink` as the parent scope is required.1079     * If no user input is provided, a default one is appended to the input container node in the1080     * template.1081     *1082     * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for1083     * transclusion in the `postLink` function.1084     *1085     *1086     * @param element1087     * @param attr1088     * @returns {Function}1089     */1090    function compile(element, attr) {1091      // Grab the user template from attr and reset the attribute to null.1092      var userTemplate = attr['$mdUserTemplate'];1093      attr['$mdUserTemplate'] = null;1094      var chipTemplate = getTemplateByQuery('md-chips>md-chip-template');1095      var chipRemoveSelector = $mdUtil1096        .prefixer()1097        .buildList('md-chip-remove')1098        .map(function(attr) {1099          return 'md-chips>*[' + attr + ']';1100        })1101        .join(',');1102      // Set the chip remove, chip contents and chip input templates. The link function will put1103      // them on the scope for transclusion later.1104      var chipRemoveTemplate   = getTemplateByQuery(chipRemoveSelector) || templates.remove,1105          chipContentsTemplate = chipTemplate || templates.default,1106          chipInputTemplate    = getTemplateByQuery('md-chips>md-autocomplete')1107              || getTemplateByQuery('md-chips>input')1108              || templates.input,1109          staticChips = userTemplate.find('md-chip');1110      // Warn of malformed template. See #25451111      if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {1112        $log.warn('invalid placement of md-chip-remove within md-chip-template.');1113      }1114      function getTemplateByQuery (query) {1115        if (!attr.ngModel) return;1116        var element = userTemplate[0].querySelector(query);1117        return element && element.outerHTML;1118      }1119      /**1120       * Configures controller and transcludes.1121       */1122      return function postLink(scope, element, attrs, controllers) {1123        $mdUtil.initOptionalProperties(scope, attr);1124        $mdTheming(element);1125        var mdChipsCtrl = controllers[0];1126        if(chipTemplate) {1127          // Chip editing functionality assumes we are using the default chip template.1128          mdChipsCtrl.enableChipEdit = false;1129        }1130        mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;1131        mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;1132        mdChipsCtrl.chipInputTemplate    = chipInputTemplate;1133        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;1134        element1135            .attr({ 'aria-hidden': true, tabindex: -1 })1136            .on('focus', function () { mdChipsCtrl.onFocus(); });1137        if (attr.ngModel) {1138          mdChipsCtrl.configureNgModel(element.controller('ngModel'));1139          // If an `md-transform-chip` attribute was set, tell the controller to use the expression1140          // before appending chips.1141          if (attrs.mdTransformChip) mdChipsCtrl.useTransformChipExpression();1142          // If an `md-on-append` attribute was set, tell the controller to use the expression1143          // when appending chips.1144          //1145          // DEPRECATED: Will remove in official 1.0 release1146          if (attrs.mdOnAppend) mdChipsCtrl.useOnAppendExpression();1147          // If an `md-on-add` attribute was set, tell the controller to use the expression1148          // when adding chips.1149          if (attrs.mdOnAdd) mdChipsCtrl.useOnAddExpression();1150          // If an `md-on-remove` attribute was set, tell the controller to use the expression1151          // when removing chips.1152          if (attrs.mdOnRemove) mdChipsCtrl.useOnRemoveExpression();1153          // If an `md-on-select` attribute was set, tell the controller to use the expression1154          // when selecting chips.1155          if (attrs.mdOnSelect) mdChipsCtrl.useOnSelectExpression();1156          // The md-autocomplete and input elements won't be compiled until after this directive1157          // is complete (due to their nested nature). Wait a tick before looking for them to1158          // configure the controller.1159          if (chipInputTemplate != templates.input) {1160            // The autocomplete will not appear until the readonly attribute is not true (i.e.1161            // false or undefined), so we have to watch the readonly and then on the next tick1162            // after the chip transclusion has run, we can configure the autocomplete and user1163            // input.1164            scope.$watch('$mdChipsCtrl.readonly', function(readonly) {1165              if (!readonly) {1166                $mdUtil.nextTick(function(){1167                  if (chipInputTemplate.indexOf('<md-autocomplete') === 0) {1168                    var autocompleteEl = element.find('md-autocomplete');1169                    mdChipsCtrl.configureAutocomplete(autocompleteEl.controller('mdAutocomplete'));1170                  }1171                  mdChipsCtrl.configureUserInput(element.find('input'));1172                });1173              }1174            });1175          }1176          // At the next tick, if we find an input, make sure it has the md-input class1177          $mdUtil.nextTick(function() {1178            var input = element.find('input');1179            input && input.toggleClass('md-input', true);1180          });1181        }1182        // Compile with the parent's scope and prepend any static chips to the wrapper.1183        if (staticChips.length > 0) {1184          var compiledStaticChips = $compile(staticChips.clone())(scope.$parent);1185          $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });1186        }1187      };1188    }1189    function getTemplates() {1190      return {1191        chips: $mdUtil.processTemplate(MD_CHIPS_TEMPLATE),1192        input: $mdUtil.processTemplate(CHIP_INPUT_TEMPLATE),1193        default: $mdUtil.processTemplate(CHIP_DEFAULT_TEMPLATE),1194        remove: $mdUtil.processTemplate(CHIP_REMOVE_TEMPLATE)1195      };1196    }1197  }1198angular1199    .module('material.components.chips')1200    .controller('MdContactChipsCtrl', MdContactChipsCtrl);1201/**1202 * Controller for the MdContactChips component1203 * @constructor1204 */1205function MdContactChipsCtrl () {1206  /** @type {Object} */1207  this.selectedItem = null;1208  /** @type {string} */1209  this.searchText = '';1210}1211MdContactChipsCtrl.prototype.queryContact = function(searchText) {1212  var results = this.contactQuery({'$query': searchText});1213  return this.filterSelected ?1214      results.filter(angular.bind(this, this.filterSelectedContacts)) : results;1215};1216MdContactChipsCtrl.prototype.itemName = function(item) {1217  return item[this.contactName];1218};1219MdContactChipsCtrl.prototype.filterSelectedContacts = function(contact) {1220  return this.contacts.indexOf(contact) == -1;1221};1222MdContactChips.$inject = ["$mdTheming", "$mdUtil"];angular1223  .module('material.components.chips')1224  .directive('mdContactChips', MdContactChips);1225/**1226 * @ngdoc directive1227 * @name mdContactChips1228 * @module material.components.chips1229 *1230 * @description1231 * `<md-contact-chips>` is an input component based on `md-chips` and makes use of an1232 * `md-autocomplete` element. The component allows the caller to supply a query expression which1233 * returns  a list of possible contacts. The user can select one of these and add it to the list of1234 * chips.1235 *1236 * You may also use the `md-highlight-text` directive along with its parameters to control the1237 * appearance of the matched text inside of the contacts' autocomplete popup.1238 *1239 * @param {string=|object=} ng-model A model to bind the list of items to1240 * @param {string=} placeholder Placeholder text that will be forwarded to the input.1241 * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,1242 *    displayed when there is at least on item in the list1243 * @param {expression} md-contacts An expression expected to return contacts matching the search1244 *    test, `$query`. If this expression involves a promise, a loading bar is displayed while1245 *    waiting for it to resolve.1246 * @param {string} md-contact-name The field name of the contact object representing the1247 *    contact's name.1248 * @param {string} md-contact-email The field name of the contact object representing the1249 *    contact's email address.1250 * @param {string} md-contact-image The field name of the contact object representing the1251 *    contact's image.1252 *1253 *1254 * @param {expression=} filter-selected Whether to filter selected contacts from the list of1255 *    suggestions shown in the autocomplete. This attribute has been removed but may come back.1256 *1257 *1258 *1259 * @usage1260 * <hljs lang="html">1261 *   <md-contact-chips1262 *       ng-model="ctrl.contacts"1263 *       md-contacts="ctrl.querySearch($query)"1264 *       md-contact-name="name"1265 *       md-contact-image="image"1266 *       md-contact-email="email"1267 *       placeholder="To">1268 *   </md-contact-chips>1269 * </hljs>1270 *1271 */1272var MD_CONTACT_CHIPS_TEMPLATE = '\1273      <md-chips class="md-contact-chips"\1274          ng-model="$mdContactChipsCtrl.contacts"\1275          md-require-match="$mdContactChipsCtrl.requireMatch"\1276          md-autocomplete-snap>\1277          <md-autocomplete\1278              md-menu-class="md-contact-chips-suggestions"\1279              md-selected-item="$mdContactChipsCtrl.selectedItem"\1280              md-search-text="$mdContactChipsCtrl.searchText"\1281              md-items="item in $mdContactChipsCtrl.queryContact($mdContactChipsCtrl.searchText)"\1282              md-item-text="$mdContactChipsCtrl.itemName(item)"\1283              md-no-cache="true"\1284              md-autoselect\1285              placeholder="{{$mdContactChipsCtrl.contacts.length == 0 ?\1286                  $mdContactChipsCtrl.placeholder : $mdContactChipsCtrl.secondaryPlaceholder}}">\1287            <div class="md-contact-suggestion">\1288              <img \1289                  ng-src="{{item[$mdContactChipsCtrl.contactImage]}}"\1290                  alt="{{item[$mdContactChipsCtrl.contactName]}}"\1291                  ng-if="item[$mdContactChipsCtrl.contactImage]" />\1292              <span class="md-contact-name" md-highlight-text="$mdContactChipsCtrl.searchText"\1293                    md-highlight-flags="{{$mdContactChipsCtrl.highlightFlags}}">\1294                {{item[$mdContactChipsCtrl.contactName]}}\1295              </span>\1296              <span class="md-contact-email" >{{item[$mdContactChipsCtrl.contactEmail]}}</span>\1297            </div>\1298          </md-autocomplete>\1299          <md-chip-template>\1300            <div class="md-contact-avatar">\1301              <img \1302                  ng-src="{{$chip[$mdContactChipsCtrl.contactImage]}}"\1303                  alt="{{$chip[$mdContactChipsCtrl.contactName]}}"\1304                  ng-if="$chip[$mdContactChipsCtrl.contactImage]" />\1305            </div>\1306            <div class="md-contact-name">\1307              {{$chip[$mdContactChipsCtrl.contactName]}}\1308            </div>\1309          </md-chip-template>\1310      </md-chips>';1311/**1312 * MDContactChips Directive Definition1313 *1314 * @param $mdTheming1315 * @returns {*}1316 * ngInject1317 */1318function MdContactChips($mdTheming, $mdUtil) {1319  return {1320    template: function(element, attrs) {1321      return MD_CONTACT_CHIPS_TEMPLATE;1322    },1323    restrict: 'E',1324    controller: 'MdContactChipsCtrl',1325    controllerAs: '$mdContactChipsCtrl',1326    bindToController: true,1327    compile: compile,1328    scope: {1329      contactQuery: '&mdContacts',1330      placeholder: '@',1331      secondaryPlaceholder: '@',1332      contactName: '@mdContactName',1333      contactImage: '@mdContactImage',1334      contactEmail: '@mdContactEmail',1335      contacts: '=ngModel',1336      requireMatch: '=?mdRequireMatch',1337      highlightFlags: '@?mdHighlightFlags'1338    }1339  };1340  function compile(element, attr) {1341    return function postLink(scope, element, attrs, controllers) {1342      $mdUtil.initOptionalProperties(scope, attr);1343      $mdTheming(element);1344      element.attr('tabindex', '-1');1345    };1346  }1347}...

list.js

Source:list.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7(function( window, angular, undefined ){8"use strict";9/**10 * @ngdoc module11 * @name material.components.list12 * @description13 * List module14 */15MdListController.$inject = ["$scope", "$element", "$mdListInkRipple"];16mdListDirective.$inject = ["$mdTheming"];17mdListItemDirective.$inject = ["$mdAria", "$mdConstant", "$mdUtil", "$timeout"];18angular.module('material.components.list', [19  'material.core'20])21  .controller('MdListController', MdListController)22  .directive('mdList', mdListDirective)23  .directive('mdListItem', mdListItemDirective);24/**25 * @ngdoc directive26 * @name mdList27 * @module material.components.list28 *29 * @restrict E30 *31 * @description32 * The `<md-list>` directive is a list container for 1..n `<md-list-item>` tags.33 *34 * @usage35 * <hljs lang="html">36 * <md-list>37 *   <md-list-item class="md-2-line" ng-repeat="item in todos">38 *     <md-checkbox ng-model="item.done"></md-checkbox>39 *     <div class="md-list-item-text">40 *       <h3>{{item.title}}</h3>41 *       <p>{{item.description}}</p>42 *     </div>43 *   </md-list-item>44 * </md-list>45 * </hljs>46 */47function mdListDirective($mdTheming) {48  return {49    restrict: 'E',50    compile: function(tEl) {51      tEl[0].setAttribute('role', 'list');52      return $mdTheming;53    }54  };55}56/**57 * @ngdoc directive58 * @name mdListItem59 * @module material.components.list60 *61 * @restrict E62 *63 * @description64 * A `md-list-item` element can be used to represent some information in a row.<br/>65 *66 * @usage67 * ### Single Row Item68 * <hljs lang="html">69 *   <md-list-item>70 *     <span>Single Row Item</span>71 *   </md-list-item>72 * </hljs>73 *74 * ### Multiple Lines75 * By using the following markup, you will be able to have two lines inside of one `md-list-item`.76 *77 * <hljs lang="html">78 *   <md-list-item class="md-2-line">79 *     <div class="md-list-item-text" layout="column">80 *       <p>First Line</p>81 *       <p>Second Line</p>82 *     </div>83 *   </md-list-item>84 * </hljs>85 *86 * It is also possible to have three lines inside of one list item.87 *88 * <hljs lang="html">89 *   <md-list-item class="md-3-line">90 *     <div class="md-list-item-text" layout="column">91 *       <p>First Line</p>92 *       <p>Second Line</p>93 *       <p>Third Line</p>94 *     </div>95 *   </md-list-item>96 * </hljs>97 *98 * ### Secondary Items99 * Secondary items are elements which will be aligned at the end of the `md-list-item`.100 *101 * <hljs lang="html">102 *   <md-list-item>103 *     <span>Single Row Item</span>104 *     <md-button class="md-secondary">105 *       Secondary Button106 *     </md-button>107 *   </md-list-item>108 * </hljs>109 *110 * It also possible to have multiple secondary items inside of one `md-list-item`.111 *112 * <hljs lang="html">113 *   <md-list-item>114 *     <span>Single Row Item</span>115 *     <md-button class="md-secondary">First Button</md-button>116 *     <md-button class="md-secondary">Second Button</md-button>117 *   </md-list-item>118 * </hljs>119 *120 * ### Proxy Item121 * Proxies are elements, which will execute their specific action on click<br/>122 * Currently supported proxy items are123 * - `md-checkbox` (Toggle)124 * - `md-switch` (Toggle)125 * - `md-menu` (Open)126 *127 * This means, when using a supported proxy item inside of `md-list-item`, the list item will128 * become clickable and executes the associated action of the proxy element on click.129 *130 * <hljs lang="html">131 *   <md-list-item>132 *     <span>First Line</span>133 *     <md-checkbox class="md-secondary"></md-checkbox>134 *   </md-list-item>135 * </hljs>136 *137 * The `md-checkbox` element will be automatically detected as a proxy element and will toggle on click.138 *139 * <hljs lang="html">140 *   <md-list-item>141 *     <span>First Line</span>142 *     <md-switch class="md-secondary"></md-switch>143 *   </md-list-item>144 * </hljs>145 *146 * The recognized `md-switch` will toggle its state, when the user clicks on the `md-list-item`.147 *148 * It is also possible to have a `md-menu` inside of a `md-list-item`.149 * <hljs lang="html">150 *   <md-list-item>151 *     <p>Click anywhere to fire the secondary action</p>152 *     <md-menu class="md-secondary">153 *       <md-button class="md-icon-button">154 *         <md-icon md-svg-icon="communication:message"></md-icon>155 *       </md-button>156 *       <md-menu-content width="4">157 *         <md-menu-item>158 *           <md-button>159 *             Redial160 *           </md-button>161 *         </md-menu-item>162 *         <md-menu-item>163 *           <md-button>164 *             Check voicemail165 *           </md-button>166 *         </md-menu-item>167 *         <md-menu-divider></md-menu-divider>168 *         <md-menu-item>169 *           <md-button>170 *             Notifications171 *           </md-button>172 *         </md-menu-item>173 *       </md-menu-content>174 *     </md-menu>175 *   </md-list-item>176 * </hljs>177 *178 * The menu will automatically open, when the users clicks on the `md-list-item`.<br/>179 *180 * If the developer didn't specify any position mode on the menu, the `md-list-item` will automatically detect the181 * position mode and applies it to the `md-menu`.182 *183 * ### Avatars184 * Sometimes you may want to have some avatars inside of the `md-list-item `.<br/>185 * You are able to create a optimized icon for the list item, by applying the `.md-avatar` class on the `<img>` element.186 *187 * <hljs lang="html">188 *   <md-list-item>189 *     <img src="my-avatar.png" class="md-avatar">190 *     <span>Alan Turing</span>191 * </hljs>192 *193 * When using `<md-icon>` for an avater, you have to use the `.md-avatar-icon` class.194 * <hljs lang="html">195 *   <md-list-item>196 *     <md-icon class="md-avatar-icon" md-svg-icon="avatars:timothy"></md-icon>197 *     <span>Timothy Kopra</span>198 *   </md-list-item>199 * </hljs>200 *201 * In cases, you have a `md-list-item`, which doesn't have any avatar,202 * but you want to align it with the other avatar items, you have to use the `.md-offset` class.203 *204 * <hljs lang="html">205 *   <md-list-item class="md-offset">206 *     <span>Jon Doe</span>207 *   </md-list-item>208 * </hljs>209 *210 * ### DOM modification211 * The `md-list-item` component automatically detects if the list item should be clickable.212 *213 * ---214 * If the `md-list-item` is clickable, we wrap all content inside of a `<div>` and create215 * an overlaying button, which will will execute the given actions (like `ng-href`, `ng-click`)216 *217 * We create an overlaying button, instead of wrapping all content inside of the button,218 * because otherwise some elements may not be clickable inside of the button.219 *220 * ---221 * When using a secondary item inside of your list item, the `md-list-item` component will automatically create222 * a secondary container at the end of the `md-list-item`, which contains all secondary items.223 *224 * The secondary item container is not static, because otherwise the overflow will not work properly on the225 * list item.226 *227 */228function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {229  var proxiedTypes = ['md-checkbox', 'md-switch', 'md-menu'];230  return {231    restrict: 'E',232    controller: 'MdListController',233    compile: function(tEl, tAttrs) {234      // Check for proxy controls (no ng-click on parent, and a control inside)235      var secondaryItems = tEl[0].querySelectorAll('.md-secondary');236      var hasProxiedElement;237      var proxyElement;238      var itemContainer = tEl;239      tEl[0].setAttribute('role', 'listitem');240      if (tAttrs.ngClick || tAttrs.ngDblclick ||  tAttrs.ngHref || tAttrs.href || tAttrs.uiSref || tAttrs.ngAttrUiSref) {241        wrapIn('button');242      } else {243        for (var i = 0, type; type = proxiedTypes[i]; ++i) {244          if (proxyElement = tEl[0].querySelector(type)) {245            hasProxiedElement = true;246            break;247          }248        }249        if (hasProxiedElement) {250          wrapIn('div');251        } else if (!tEl[0].querySelector('md-button:not(.md-secondary):not(.md-exclude)')) {252          tEl.addClass('md-no-proxy');253        }254      }255      wrapSecondaryItems();256      setupToggleAria();257      if (hasProxiedElement && proxyElement.nodeName === "MD-MENU") {258        setupProxiedMenu();259      }260      function setupToggleAria() {261        var toggleTypes = ['md-switch', 'md-checkbox'];262        var toggle;263        for (var i = 0, toggleType; toggleType = toggleTypes[i]; ++i) {264          if (toggle = tEl.find(toggleType)[0]) {265            if (!toggle.hasAttribute('aria-label')) {266              var p = tEl.find('p')[0];267              if (!p) return;268              toggle.setAttribute('aria-label', 'Toggle ' + p.textContent);269            }270          }271        }272      }273      function setupProxiedMenu() {274        var menuEl = angular.element(proxyElement);275        var isEndAligned = menuEl.parent().hasClass('md-secondary-container') ||276                           proxyElement.parentNode.firstElementChild !== proxyElement;277        var xAxisPosition = 'left';278        if (isEndAligned) {279          // When the proxy item is aligned at the end of the list, we have to set the origin to the end.280          xAxisPosition = 'right';281        }282        283        // Set the position mode / origin of the proxied menu.284        if (!menuEl.attr('md-position-mode')) {285          menuEl.attr('md-position-mode', xAxisPosition + ' target');286        }287        // Apply menu open binding to menu button288        var menuOpenButton = menuEl.children().eq(0);289        if (!hasClickEvent(menuOpenButton[0])) {290          menuOpenButton.attr('ng-click', '$mdOpenMenu($event)');291        }292        if (!menuOpenButton.attr('aria-label')) {293          menuOpenButton.attr('aria-label', 'Open List Menu');294        }295      }296      function wrapIn(type) {297        if (type == 'div') {298          itemContainer = angular.element('<div class="md-no-style md-list-item-inner">');299          itemContainer.append(tEl.contents());300          tEl.addClass('md-proxy-focus');301        } else {302          // Element which holds the default list-item content.303          itemContainer = angular.element(304            '<div class="md-button md-no-style">'+305            '   <div class="md-list-item-inner"></div>'+306            '</div>'307          );308          // Button which shows ripple and executes primary action.309          var buttonWrap = angular.element(310            '<md-button class="md-no-style"></md-button>'311          );312          buttonWrap[0].setAttribute('aria-label', tEl[0].textContent);313          copyAttributes(tEl[0], buttonWrap[0]);314          // We allow developers to specify the `md-no-focus` class, to disable the focus style315          // on the button executor. Once more classes should be forwarded, we should probably make the316          // class forward more generic.317          if (tEl.hasClass('md-no-focus')) {318            buttonWrap.addClass('md-no-focus');319          }320          // Append the button wrap before our list-item content, because it will overlay in relative.321          itemContainer.prepend(buttonWrap);322          itemContainer.children().eq(1).append(tEl.contents());323          tEl.addClass('_md-button-wrap');324        }325        tEl[0].setAttribute('tabindex', '-1');326        tEl.append(itemContainer);327      }328      function wrapSecondaryItems() {329        var secondaryItemsWrapper = angular.element('<div class="md-secondary-container">');330        angular.forEach(secondaryItems, function(secondaryItem) {331          wrapSecondaryItem(secondaryItem, secondaryItemsWrapper);332        });333        itemContainer.append(secondaryItemsWrapper);334      }335      function wrapSecondaryItem(secondaryItem, container) {336        // If the current secondary item is not a button, but contains a ng-click attribute,337        // the secondary item will be automatically wrapped inside of a button.338        if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {339          $mdAria.expect(secondaryItem, 'aria-label');340          var buttonWrapper = angular.element('<md-button class="md-secondary md-icon-button">');341          // Copy the attributes from the secondary item to the generated button.342          // We also support some additional attributes from the secondary item,343          // because some developers may use a ngIf, ngHide, ngShow on their item.344          copyAttributes(secondaryItem, buttonWrapper[0], ['ng-if', 'ng-hide', 'ng-show']);345          secondaryItem.setAttribute('tabindex', '-1');346          buttonWrapper.append(secondaryItem);347          secondaryItem = buttonWrapper[0];348        }349        if (secondaryItem && (!hasClickEvent(secondaryItem) || (!tAttrs.ngClick && isProxiedElement(secondaryItem)))) {350          // In this case we remove the secondary class, so we can identify it later, when we searching for the351          // proxy items.352          angular.element(secondaryItem).removeClass('md-secondary');353        }354        tEl.addClass('md-with-secondary');355        container.append(secondaryItem);356      }357      /**358       * Copies attributes from a source element to the destination element359       * By default the function will copy the most necessary attributes, supported360       * by the button executor for clickable list items.361       * @param source Element with the specified attributes362       * @param destination Element which will retrieve the attributes363       * @param extraAttrs Additional attributes, which will be copied over.364       */365      function copyAttributes(source, destination, extraAttrs) {366        var copiedAttrs = $mdUtil.prefixer([367          'ng-if', 'ng-click', 'ng-dblclick', 'aria-label', 'ng-disabled', 'ui-sref',368          'href', 'ng-href', 'target', 'ng-attr-ui-sref', 'ui-sref-opts'369        ]);370        if (extraAttrs) {371          copiedAttrs = copiedAttrs.concat($mdUtil.prefixer(extraAttrs));372        }373        angular.forEach(copiedAttrs, function(attr) {374          if (source.hasAttribute(attr)) {375            destination.setAttribute(attr, source.getAttribute(attr));376            source.removeAttribute(attr);377          }378        });379      }380      function isProxiedElement(el) {381        return proxiedTypes.indexOf(el.nodeName.toLowerCase()) != -1;382      }383      function isButton(el) {384        var nodeName = el.nodeName.toUpperCase();385        return nodeName == "MD-BUTTON" || nodeName == "BUTTON";386      }387      function hasClickEvent (element) {388        var attr = element.attributes;389        for (var i = 0; i < attr.length; i++) {390          if (tAttrs.$normalize(attr[i].name) === 'ngClick') return true;391        }392        return false;393      }394      return postLink;395      function postLink($scope, $element, $attr, ctrl) {396        $element.addClass('_md');     // private md component indicator for styling397        var proxies       = [],398            firstElement  = $element[0].firstElementChild,399            isButtonWrap  = $element.hasClass('_md-button-wrap'),400            clickChild    = isButtonWrap ? firstElement.firstElementChild : firstElement,401            hasClick      = clickChild && hasClickEvent(clickChild);402        computeProxies();403        computeClickable();404        if ($element.hasClass('md-proxy-focus') && proxies.length) {405          angular.forEach(proxies, function(proxy) {406            proxy = angular.element(proxy);407            $scope.mouseActive = false;408            proxy.on('mousedown', function() {409              $scope.mouseActive = true;410              $timeout(function(){411                $scope.mouseActive = false;412              }, 100);413            })414            .on('focus', function() {415              if ($scope.mouseActive === false) { $element.addClass('md-focused'); }416              proxy.on('blur', function proxyOnBlur() {417                $element.removeClass('md-focused');418                proxy.off('blur', proxyOnBlur);419              });420            });421          });422        }423        function computeProxies() {424          if (firstElement && firstElement.children && !hasClick) {425            angular.forEach(proxiedTypes, function(type) {426              // All elements which are not capable for being used a proxy have the .md-secondary class427              // applied. These items had been sorted out in the secondary wrap function.428              angular.forEach(firstElement.querySelectorAll(type + ':not(.md-secondary)'), function(child) {429                proxies.push(child);430              });431            });432          }433        }434        function computeClickable() {435          if (proxies.length == 1 || hasClick) {436            $element.addClass('md-clickable');437            if (!hasClick) {438              ctrl.attachRipple($scope, angular.element($element[0].querySelector('.md-no-style')));439            }440          }441        }442        function isEventFromControl(event) {443          var forbiddenControls = ['md-slider'];444          // If there is no path property in the event, then we can assume that the event was not bubbled.445          if (!event.path) {446            return forbiddenControls.indexOf(event.target.tagName.toLowerCase()) !== -1;447          }448          // We iterate the event path up and check for a possible component.449          // Our maximum index to search, is the list item root.450          var maxPath = event.path.indexOf($element.children()[0]);451          for (var i = 0; i < maxPath; i++) {452            if (forbiddenControls.indexOf(event.path[i].tagName.toLowerCase()) !== -1) {453              return true;454            }455          }456        }457        var clickChildKeypressListener = function(e) {458          if (e.target.nodeName != 'INPUT' && e.target.nodeName != 'TEXTAREA' && !e.target.isContentEditable) {459            var keyCode = e.which || e.keyCode;460            if (keyCode == $mdConstant.KEY_CODE.SPACE) {461              if (clickChild) {462                clickChild.click();463                e.preventDefault();464                e.stopPropagation();465              }466            }467          }468        };469        if (!hasClick && !proxies.length) {470          clickChild && clickChild.addEventListener('keypress', clickChildKeypressListener);471        }472        $element.off('click');473        $element.off('keypress');474        if (proxies.length == 1 && clickChild) {475          $element.children().eq(0).on('click', function(e) {476            // When the event is coming from an control and it should not trigger the proxied element477            // then we are skipping.478            if (isEventFromControl(e)) return;479            var parentButton = $mdUtil.getClosest(e.target, 'BUTTON');480            if (!parentButton && clickChild.contains(e.target)) {481              angular.forEach(proxies, function(proxy) {482                if (e.target !== proxy && !proxy.contains(e.target)) {483                  if (proxy.nodeName === 'MD-MENU') {484                    proxy = proxy.children[0];485                  }486                  angular.element(proxy).triggerHandler('click');487                }488              });489            }490          });491        }492        $scope.$on('$destroy', function () {493          clickChild && clickChild.removeEventListener('keypress', clickChildKeypressListener);494        });495      }496    }497  };498}499/*500 * @private501 * @ngdoc controller502 * @name MdListController503 * @module material.components.list504 *505 */506function MdListController($scope, $element, $mdListInkRipple) {507  var ctrl = this;508  ctrl.attachRipple = attachRipple;509  function attachRipple (scope, element) {510    var options = {};511    $mdListInkRipple.attach(scope, element, options);512  }513}...

menuBar.js

Source:menuBar.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7(function( window, angular, undefined ){8"use strict";9/**10 * @ngdoc module11 * @name material.components.menu-bar12 */13angular.module('material.components.menuBar', [14  'material.core',15  'material.components.icon',16  'material.components.menu'17]);18MenuBarController.$inject = ["$scope", "$rootScope", "$element", "$attrs", "$mdConstant", "$document", "$mdUtil", "$timeout"];19angular20  .module('material.components.menuBar')21  .controller('MenuBarController', MenuBarController);22var BOUND_MENU_METHODS = ['handleKeyDown', 'handleMenuHover', 'scheduleOpenHoveredMenu', 'cancelScheduledOpen'];23/**24 * ngInject25 */26function MenuBarController($scope, $rootScope, $element, $attrs, $mdConstant, $document, $mdUtil, $timeout) {27  this.$element = $element;28  this.$attrs = $attrs;29  this.$mdConstant = $mdConstant;30  this.$mdUtil = $mdUtil;31  this.$document = $document;32  this.$scope = $scope;33  this.$rootScope = $rootScope;34  this.$timeout = $timeout;35  var self = this;36  angular.forEach(BOUND_MENU_METHODS, function(methodName) {37    self[methodName] = angular.bind(self, self[methodName]);38  });39}40MenuBarController.prototype.init = function() {41  var $element = this.$element;42  var $mdUtil = this.$mdUtil;43  var $scope = this.$scope;44  var self = this;45  var deregisterFns = [];46  $element.on('keydown', this.handleKeyDown);47  this.parentToolbar = $mdUtil.getClosest($element, 'MD-TOOLBAR');48  deregisterFns.push(this.$rootScope.$on('$mdMenuOpen', function(event, el) {49    if (self.getMenus().indexOf(el[0]) != -1) {50      $element[0].classList.add('md-open');51      el[0].classList.add('md-open');52      self.currentlyOpenMenu = el.controller('mdMenu');53      self.currentlyOpenMenu.registerContainerProxy(self.handleKeyDown);54      self.enableOpenOnHover();55    }56  }));57  deregisterFns.push(this.$rootScope.$on('$mdMenuClose', function(event, el, opts) {58    var rootMenus = self.getMenus();59    if (rootMenus.indexOf(el[0]) != -1) {60      $element[0].classList.remove('md-open');61      el[0].classList.remove('md-open');62    }63    if ($element[0].contains(el[0])) {64      var parentMenu = el[0];65      while (parentMenu && rootMenus.indexOf(parentMenu) == -1) {66        parentMenu = $mdUtil.getClosest(parentMenu, 'MD-MENU', true);67      }68      if (parentMenu) {69        if (!opts.skipFocus) parentMenu.querySelector('button:not([disabled])').focus();70        self.currentlyOpenMenu = undefined;71        self.disableOpenOnHover();72        self.setKeyboardMode(true);73      }74    }75  }));76  $scope.$on('$destroy', function() {77    self.disableOpenOnHover();78    while (deregisterFns.length) {79      deregisterFns.shift()();80    }81  });82  this.setKeyboardMode(true);83};84MenuBarController.prototype.setKeyboardMode = function(enabled) {85  if (enabled) this.$element[0].classList.add('md-keyboard-mode');86  else this.$element[0].classList.remove('md-keyboard-mode');87};88MenuBarController.prototype.enableOpenOnHover = function() {89  if (this.openOnHoverEnabled) return;90  var self = this;91  self.openOnHoverEnabled = true;92  if (self.parentToolbar) {93    self.parentToolbar.classList.add('md-has-open-menu');94    // Needs to be on the next tick so it doesn't close immediately.95    self.$mdUtil.nextTick(function() {96      angular.element(self.parentToolbar).on('click', self.handleParentClick);97    }, false);98  }99  angular100    .element(self.getMenus())101    .on('mouseenter', self.handleMenuHover);102};103MenuBarController.prototype.handleMenuHover = function(e) {104  this.setKeyboardMode(false);105  if (this.openOnHoverEnabled) {106    this.scheduleOpenHoveredMenu(e);107  }108};109MenuBarController.prototype.disableOpenOnHover = function() {110  if (!this.openOnHoverEnabled) return;111  this.openOnHoverEnabled = false;112  if (this.parentToolbar) {113    this.parentToolbar.classList.remove('md-has-open-menu');114    angular.element(this.parentToolbar).off('click', this.handleParentClick);115  }116  angular117    .element(this.getMenus())118    .off('mouseenter', this.handleMenuHover);119};120MenuBarController.prototype.scheduleOpenHoveredMenu = function(e) {121  var menuEl = angular.element(e.currentTarget);122  var menuCtrl = menuEl.controller('mdMenu');123  this.setKeyboardMode(false);124  this.scheduleOpenMenu(menuCtrl);125};126MenuBarController.prototype.scheduleOpenMenu = function(menuCtrl) {127  var self = this;128  var $timeout = this.$timeout;129  if (menuCtrl != self.currentlyOpenMenu) {130    $timeout.cancel(self.pendingMenuOpen);131    self.pendingMenuOpen = $timeout(function() {132      self.pendingMenuOpen = undefined;133      if (self.currentlyOpenMenu) {134        self.currentlyOpenMenu.close(true, { closeAll: true });135      }136      menuCtrl.open();137    }, 200, false);138  }139};140MenuBarController.prototype.handleKeyDown = function(e) {141  var keyCodes = this.$mdConstant.KEY_CODE;142  var currentMenu = this.currentlyOpenMenu;143  var wasOpen = currentMenu && currentMenu.isOpen;144  this.setKeyboardMode(true);145  var handled, newMenu, newMenuCtrl;146  switch (e.keyCode) {147    case keyCodes.DOWN_ARROW:148      if (currentMenu) {149        currentMenu.focusMenuContainer();150      } else {151        this.openFocusedMenu();152      }153      handled = true;154      break;155    case keyCodes.UP_ARROW:156      currentMenu && currentMenu.close();157      handled = true;158      break;159    case keyCodes.LEFT_ARROW:160      newMenu = this.focusMenu(-1);161      if (wasOpen) {162        newMenuCtrl = angular.element(newMenu).controller('mdMenu');163        this.scheduleOpenMenu(newMenuCtrl);164      }165      handled = true;166      break;167    case keyCodes.RIGHT_ARROW:168      newMenu = this.focusMenu(+1);169      if (wasOpen) {170        newMenuCtrl = angular.element(newMenu).controller('mdMenu');171        this.scheduleOpenMenu(newMenuCtrl);172      }173      handled = true;174      break;175  }176  if (handled) {177    e && e.preventDefault && e.preventDefault();178    e && e.stopImmediatePropagation && e.stopImmediatePropagation();179  }180};181MenuBarController.prototype.focusMenu = function(direction) {182  var menus = this.getMenus();183  var focusedIndex = this.getFocusedMenuIndex();184  if (focusedIndex == -1) { focusedIndex = this.getOpenMenuIndex(); }185  var changed = false;186  if (focusedIndex == -1) { focusedIndex = 0; changed = true; }187  else if (188    direction < 0 && focusedIndex > 0 ||189    direction > 0 && focusedIndex < menus.length - direction190  ) {191    focusedIndex += direction;192    changed = true;193  }194  if (changed) {195    menus[focusedIndex].querySelector('button').focus();196    return menus[focusedIndex];197  }198};199MenuBarController.prototype.openFocusedMenu = function() {200  var menu = this.getFocusedMenu();201  menu && angular.element(menu).controller('mdMenu').open();202};203MenuBarController.prototype.getMenus = function() {204  var $element = this.$element;205  return this.$mdUtil.nodesToArray($element[0].children)206    .filter(function(el) { return el.nodeName == 'MD-MENU'; });207};208MenuBarController.prototype.getFocusedMenu = function() {209  return this.getMenus()[this.getFocusedMenuIndex()];210};211MenuBarController.prototype.getFocusedMenuIndex = function() {212  var $mdUtil = this.$mdUtil;213  var focusedEl = $mdUtil.getClosest(214    this.$document[0].activeElement,215    'MD-MENU'216  );217  if (!focusedEl) return -1;218  var focusedIndex = this.getMenus().indexOf(focusedEl);219  return focusedIndex;220};221MenuBarController.prototype.getOpenMenuIndex = function() {222  var menus = this.getMenus();223  for (var i = 0; i < menus.length; ++i) {224    if (menus[i].classList.contains('md-open')) return i;225  }226  return -1;227};228MenuBarController.prototype.handleParentClick = function(event) {229  var openMenu = this.querySelector('md-menu.md-open');230  if (openMenu && !openMenu.contains(event.target)) {231    angular.element(openMenu).controller('mdMenu').close();232  }233};234/**235 * @ngdoc directive236 * @name mdMenuBar237 * @module material.components.menu-bar238 * @restrict E239 * @description240 *241 * Menu bars are containers that hold multiple menus. They change the behavior and appearence242 * of the `md-menu` directive to behave similar to an operating system provided menu.243 *244 * @usage245 * <hljs lang="html">246 * <md-menu-bar>247 *   <md-menu>248 *     <button ng-click="$mdOpenMenu()">249 *       File250 *     </button>251 *     <md-menu-content>252 *       <md-menu-item>253 *         <md-button ng-click="ctrl.sampleAction('share', $event)">254 *           Share...255 *         </md-button>256 *       </md-menu-item>257 *       <md-menu-divider></md-menu-divider>258 *       <md-menu-item>259 *       <md-menu-item>260 *         <md-menu>261 *           <md-button ng-click="$mdOpenMenu()">New</md-button>262 *           <md-menu-content>263 *             <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>264 *             <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>265 *             <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>266 *             <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>267 *             <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>268 *           </md-menu-content>269 *         </md-menu>270 *       </md-menu-item>271 *     </md-menu-content>272 *   </md-menu>273 * </md-menu-bar>274 * </hljs>275 *276 * ## Menu Bar Controls277 *278 * You may place `md-menu-items` that function as controls within menu bars.279 * There are two modes that are exposed via the `type` attribute of the `md-menu-item`.280 * `type="checkbox"` will function as a boolean control for the `ng-model` attribute of the281 * `md-menu-item`. `type="radio"` will function like a radio button, setting the `ngModel`282 * to the `string` value of the `value` attribute. If you need non-string values, you can use283 * `ng-value` to provide an expression (this is similar to how angular's native `input[type=radio]` works.284 *285 * <hljs lang="html">286 * <md-menu-bar>287 *  <md-menu>288 *    <button ng-click="$mdOpenMenu()">289 *      Sample Menu290 *    </button>291 *    <md-menu-content>292 *      <md-menu-item type="checkbox" ng-model="settings.allowChanges">Allow changes</md-menu-item>293 *      <md-menu-divider></md-menu-divider>294 *      <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 1</md-menu-item>295 *      <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 2</md-menu-item>296 *      <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 3</md-menu-item>297 *    </md-menu-content>298 *  </md-menu>299 * </md-menu-bar>300 * </hljs>301 *302 *303 * ### Nesting Menus304 *305 * Menus may be nested within menu bars. This is commonly called cascading menus.306 * To nest a menu place the nested menu inside the content of the `md-menu-item`.307 * <hljs lang="html">308 * <md-menu-item>309 *   <md-menu>310 *     <button ng-click="$mdOpenMenu()">New</md-button>311 *     <md-menu-content>312 *       <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>313 *       <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>314 *       <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>315 *       <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>316 *       <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>317 *     </md-menu-content>318 *   </md-menu>319 * </md-menu-item>320 * </hljs>321 *322 */323MenuBarDirective.$inject = ["$mdUtil", "$mdTheming"];324angular325  .module('material.components.menuBar')326  .directive('mdMenuBar', MenuBarDirective);327/* ngInject */328function MenuBarDirective($mdUtil, $mdTheming) {329  return {330    restrict: 'E',331    require: 'mdMenuBar',332    controller: 'MenuBarController',333    compile: function compile(templateEl, templateAttrs) {334      if (!templateAttrs.ariaRole) {335        templateEl[0].setAttribute('role', 'menubar');336      }337      angular.forEach(templateEl[0].children, function(menuEl) {338        if (menuEl.nodeName == 'MD-MENU') {339          if (!menuEl.hasAttribute('md-position-mode')) {340            menuEl.setAttribute('md-position-mode', 'left bottom');341            // Since we're in the compile function and actual `md-buttons` are not compiled yet,342            // we need to query for possible `md-buttons` as well.343            menuEl.querySelector('button, a, md-button').setAttribute('role', 'menuitem');344          }345          var contentEls = $mdUtil.nodesToArray(menuEl.querySelectorAll('md-menu-content'));346          angular.forEach(contentEls, function(contentEl) {347            contentEl.classList.add('md-menu-bar-menu');348            contentEl.classList.add('md-dense');349            if (!contentEl.hasAttribute('width')) {350              contentEl.setAttribute('width', 5);351            }352          });353        }354      });355      // Mark the child menu items that they're inside a menu bar. This is necessary,356      // because mnMenuItem has special behaviour during compilation, depending on357      // whether it is inside a mdMenuBar. We can usually figure this out via the DOM,358      // however if a directive that uses documentFragment is applied to the child (e.g. ngRepeat),359      // the element won't have a parent and won't compile properly.360      templateEl.find('md-menu-item').addClass('md-in-menu-bar');361      return function postLink(scope, el, attr, ctrl) {362        el.addClass('_md');     // private md component indicator for styling363        $mdTheming(scope, el);364        ctrl.init();365      };366    }367  };368}369angular370  .module('material.components.menuBar')371  .directive('mdMenuDivider', MenuDividerDirective);372function MenuDividerDirective() {373  return {374    restrict: 'E',375    compile: function(templateEl, templateAttrs) {376      if (!templateAttrs.role) {377        templateEl[0].setAttribute('role', 'separator');378      }379    }380  };381}382MenuItemController.$inject = ["$scope", "$element", "$attrs"];383angular384  .module('material.components.menuBar')385  .controller('MenuItemController', MenuItemController);386/**387 * ngInject388 */389function MenuItemController($scope, $element, $attrs) {390  this.$element = $element;391  this.$attrs = $attrs;392  this.$scope = $scope;393}394MenuItemController.prototype.init = function(ngModel) {395  var $element = this.$element;396  var $attrs = this.$attrs;397  this.ngModel = ngModel;398  if ($attrs.type == 'checkbox' || $attrs.type == 'radio') {399    this.mode  = $attrs.type;400    this.iconEl = $element[0].children[0];401    this.buttonEl = $element[0].children[1];402    if (ngModel) {403      // Clear ngAria set attributes404      this.initClickListeners();405    }406  }407};408// ngAria auto sets attributes on a menu-item with a ngModel.409// We don't want this because our content (buttons) get the focus410// and set their own aria attributes appropritately. Having both411// breaks NVDA / JAWS. This undeoes ngAria's attrs.412MenuItemController.prototype.clearNgAria = function() {413  var el = this.$element[0];414  var clearAttrs = ['role', 'tabindex', 'aria-invalid', 'aria-checked'];415  angular.forEach(clearAttrs, function(attr) {416    el.removeAttribute(attr);417  });418};419MenuItemController.prototype.initClickListeners = function() {420  var self = this;421  var ngModel = this.ngModel;422  var $scope = this.$scope;423  var $attrs = this.$attrs;424  var $element = this.$element;425  var mode = this.mode;426  this.handleClick = angular.bind(this, this.handleClick);427  var icon = this.iconEl;428  var button = angular.element(this.buttonEl);429  var handleClick = this.handleClick;430  $attrs.$observe('disabled', setDisabled);431  setDisabled($attrs.disabled);432  ngModel.$render = function render() {433    self.clearNgAria();434    if (isSelected()) {435      icon.style.display = '';436      button.attr('aria-checked', 'true');437    } else {438      icon.style.display = 'none';439      button.attr('aria-checked', 'false');440    }441  };442  $scope.$$postDigest(ngModel.$render);443  function isSelected() {444    if (mode == 'radio') {445      var val = $attrs.ngValue ? $scope.$eval($attrs.ngValue) : $attrs.value;446      return ngModel.$modelValue == val;447    } else {448      return ngModel.$modelValue;449    }450  }451  function setDisabled(disabled) {452    if (disabled) {453      button.off('click', handleClick);454    } else {455      button.on('click', handleClick);456    }457  }458};459MenuItemController.prototype.handleClick = function(e) {460  var mode = this.mode;461  var ngModel = this.ngModel;462  var $attrs = this.$attrs;463  var newVal;464  if (mode == 'checkbox') {465    newVal = !ngModel.$modelValue;466  } else if (mode == 'radio') {467    newVal = $attrs.ngValue ? this.$scope.$eval($attrs.ngValue) : $attrs.value;468  }469  ngModel.$setViewValue(newVal);470  ngModel.$render();471};472MenuItemDirective.$inject = ["$mdUtil", "$$mdSvgRegistry"];473angular474  .module('material.components.menuBar')475  .directive('mdMenuItem', MenuItemDirective);476 /* ngInject */477function MenuItemDirective($mdUtil, $$mdSvgRegistry) {478  return {479    controller: 'MenuItemController',480    require: ['mdMenuItem', '?ngModel'],481    priority: 210, // ensure that our post link runs after ngAria482    compile: function(templateEl, templateAttrs) {483      var type = templateAttrs.type;484      var inMenuBarClass = 'md-in-menu-bar';485      // Note: This allows us to show the `check` icon for the md-menu-bar items.486      // The `md-in-menu-bar` class is set by the mdMenuBar directive.487      if ((type == 'checkbox' || type == 'radio') && templateEl.hasClass(inMenuBarClass)) {488        var text = templateEl[0].textContent;489        var buttonEl = angular.element('<md-button type="button"></md-button>');490        var iconTemplate = '<md-icon md-svg-src="' + $$mdSvgRegistry.mdChecked + '"></md-icon>';491        buttonEl.html(text);492        buttonEl.attr('tabindex', '0');493        templateEl.html('');494        templateEl.append(angular.element(iconTemplate));495        templateEl.append(buttonEl);496        templateEl.addClass('md-indent').removeClass(inMenuBarClass);497        setDefault('role', type == 'checkbox' ? 'menuitemcheckbox' : 'menuitemradio', buttonEl);498        moveAttrToButton('ng-disabled');499      } else {500        setDefault('role', 'menuitem', templateEl[0].querySelector('md-button, button, a'));501      }502      return function(scope, el, attrs, ctrls) {503        var ctrl = ctrls[0];504        var ngModel = ctrls[1];505        ctrl.init(ngModel);506      };507      function setDefault(attr, val, el) {508        el = el || templateEl;509        if (el instanceof angular.element) {510          el = el[0];511        }512        if (!el.hasAttribute(attr)) {513          el.setAttribute(attr, val);514        }515      }516      function moveAttrToButton(attribute) {517        var attributes = $mdUtil.prefixer(attribute);518        angular.forEach(attributes, function(attr) {519          if (templateEl[0].hasAttribute(attr)) {520            var val = templateEl[0].getAttribute(attr);521            buttonEl[0].setAttribute(attr, val);522            templateEl[0].removeAttribute(attr);523          }524        });525      }526    }527  };528}...

navBar.js

Source:navBar.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7(function( window, angular, undefined ){8"use strict";9/**10 * @ngdoc module11 * @name material.components.navBar12 */13MdNavBarController.$inject = ["$element", "$scope", "$timeout", "$mdConstant"];14MdNavItem.$inject = ["$$rAF"];15MdNavItemController.$inject = ["$element"];16MdNavBar.$inject = ["$mdAria", "$mdTheming"];17angular.module('material.components.navBar', ['material.core'])18    .controller('MdNavBarController', MdNavBarController)19    .directive('mdNavBar', MdNavBar)20    .controller('MdNavItemController', MdNavItemController)21    .directive('mdNavItem', MdNavItem);22/*****************************************************************************23 *                            PUBLIC DOCUMENTATION                           *24 *****************************************************************************/25/**26 * @ngdoc directive27 * @name mdNavBar28 * @module material.components.navBar29 *30 * @restrict E31 *32 * @description33 * The `<md-nav-bar>` directive renders a list of material tabs that can be used34 * for top-level page navigation. Unlike `<md-tabs>`, it has no concept of a tab35 * body and no bar pagination.36 *37 * Because it deals with page navigation, certain routing concepts are built-in.38 * Route changes via via ng-href, ui-sref, or ng-click events are supported.39 * Alternatively, the user could simply watch currentNavItem for changes.40 *41 * Accessibility functionality is implemented as a site navigator with a42 * listbox, according to43 * https://www.w3.org/TR/wai-aria-practices/#Site_Navigator_Tabbed_Style44 *45 * @param {string=} mdSelectedNavItem The name of the current tab; this must46 * match the name attribute of `<md-nav-item>`47 * @param {string=} navBarAriaLabel An aria-label for the nav-bar48 *49 * @usage50 * <hljs lang="html">51 *  <md-nav-bar md-selected-nav-item="currentNavItem">52 *    <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>53 *    <md-nav-item md-nav-sref="app.page2" name="page2">Page Two</md-nav-item>54 *    <md-nav-item md-nav-href="#page3" name="page3">Page Three</md-nav-item>55 *  </md-nav-bar>56 *</hljs>57 * <hljs lang="js">58 * (function() {59 *   âuse strictâ;60 *61 *    $rootScope.$on('$routeChangeSuccess', function(event, current) {62 *      $scope.currentLink = getCurrentLinkFromRoute(current);63 *    });64 * });65 * </hljs>66 */67/*****************************************************************************68 *                            mdNavItem69 *****************************************************************************/70/**71 * @ngdoc directive72 * @name mdNavItem73 * @module material.components.navBar74 *75 * @restrict E76 *77 * @description78 * `<md-nav-item>` describes a page navigation link within the `<md-nav-bar>`79 * component. It renders an md-button as the actual link.80 *81 * Exactly one of the mdNavClick, mdNavHref, mdNavSref attributes are required to be82 * specified.83 *84 * @param {Function=} mdNavClick Function which will be called when the85 * link is clicked to change the page. Renders as an `ng-click`.86 * @param {string=} mdNavHref url to transition to when this link is clicked.87 * Renders as an `ng-href`.88 * @param {string=} mdNavSref Ui-router state to transition to when this link is89 * clicked. Renders as a `ui-sref`.90 * @param {string=} name The name of this link. Used by the nav bar to know91 * which link is currently selected.92 *93 * @usage94 * See `<md-nav-bar>` for usage.95 */96/*****************************************************************************97 *                                IMPLEMENTATION                             *98 *****************************************************************************/99function MdNavBar($mdAria, $mdTheming) {100  return {101    restrict: 'E',102    transclude: true,103    controller: MdNavBarController,104    controllerAs: 'ctrl',105    bindToController: true,106    scope: {107      'mdSelectedNavItem': '=?',108      'navBarAriaLabel': '@?',109    },110    template:111      '<div class="md-nav-bar">' +112        '<nav role="navigation">' +113          '<ul class="_md-nav-bar-list" ng-transclude role="listbox"' +114            'tabindex="0"' +115            'ng-focus="ctrl.onFocus()"' +116            'ng-blur="ctrl.onBlur()"' +117            'ng-keydown="ctrl.onKeydown($event)"' +118            'aria-label="{{ctrl.navBarAriaLabel}}">' +119          '</ul>' +120        '</nav>' +121        '<md-nav-ink-bar></md-nav-ink-bar>' +122      '</div>',123    link: function(scope, element, attrs, ctrl) {124      $mdTheming(element);125      if (!ctrl.navBarAriaLabel) {126        $mdAria.expectAsync(element, 'aria-label', angular.noop);127      }128    },129  };130}131/**132 * Controller for the nav-bar component.133 *134 * Accessibility functionality is implemented as a site navigator with a135 * listbox, according to136 * https://www.w3.org/TR/wai-aria-practices/#Site_Navigator_Tabbed_Style137 * @param {!angular.JQLite} $element138 * @param {!angular.Scope} $scope139 * @param {!angular.Timeout} $timeout140 * @param {!Object} $mdConstant141 * @constructor142 * @final143 * ngInject144 */145function MdNavBarController($element, $scope, $timeout, $mdConstant) {146  // Injected variables147  /** @private @const {!angular.Timeout} */148  this._$timeout = $timeout;149  /** @private @const {!angular.Scope} */150  this._$scope = $scope;151  /** @private @const {!Object} */152  this._$mdConstant = $mdConstant;153  // Data-bound variables.154  /** @type {string} */155  this.mdSelectedNavItem;156  /** @type {string} */157  this.navBarAriaLabel;158  // State variables.159  /** @type {?angular.JQLite} */160  this._navBarEl = $element[0];161  /** @type {?angular.JQLite} */162  this._inkbar;163  var self = this;164  // need to wait for transcluded content to be available165  var deregisterTabWatch = this._$scope.$watch(function() {166    return self._navBarEl.querySelectorAll('._md-nav-button').length;167  },168  function(newLength) {169    if (newLength > 0) {170      self._initTabs();171      deregisterTabWatch();172    }173  });174}175/**176 * Initializes the tab components once they exist.177 * @private178 */179MdNavBarController.prototype._initTabs = function() {180  this._inkbar = angular.element(this._navBarEl.getElementsByTagName('md-nav-ink-bar')[0]);181  var self = this;182  this._$timeout(function() {183    self._updateTabs(self.mdSelectedNavItem, undefined);184  });185  this._$scope.$watch('ctrl.mdSelectedNavItem', function(newValue, oldValue) {186    // Wait a digest before update tabs for products doing187    // anything dynamic in the template.188    self._$timeout(function() {189      self._updateTabs(newValue, oldValue);190    });191  });192};193/**194 * Set the current tab to be selected.195 * @param {string|undefined} newValue New current tab name.196 * @param {string|undefined} oldValue Previous tab name.197 * @private198 */199MdNavBarController.prototype._updateTabs = function(newValue, oldValue) {200  var self = this;201  var tabs = this._getTabs();202  var oldIndex = -1;203  var newIndex = -1;204  var newTab = this._getTabByName(newValue);205  var oldTab = this._getTabByName(oldValue);206  if (oldTab) {207    oldTab.setSelected(false);208    oldIndex = tabs.indexOf(oldTab);209  }210  if (newTab) {211    newTab.setSelected(true);212    newIndex = tabs.indexOf(newTab);213  }214  this._$timeout(function() {215    self._updateInkBarStyles(newTab, newIndex, oldIndex);216  });217};218/**219 * Repositions the ink bar to the selected tab.220 * @private221 */222MdNavBarController.prototype._updateInkBarStyles = function(tab, newIndex, oldIndex) {223  this._inkbar.toggleClass('_md-left', newIndex < oldIndex)224      .toggleClass('_md-right', newIndex > oldIndex);225  this._inkbar.css({display: newIndex < 0 ? 'none' : ''});226  if(tab){227    var tabEl = tab.getButtonEl();228    var left = tabEl.offsetLeft;229    this._inkbar.css({left: left + 'px', width: tabEl.offsetWidth + 'px'});230  }231};232/**233 * Returns an array of the current tabs.234 * @return {!Array<!NavItemController>}235 * @private236 */237MdNavBarController.prototype._getTabs = function() {238  var linkArray = Array.prototype.slice.call(239      this._navBarEl.querySelectorAll('.md-nav-item'));240  return linkArray.map(function(el) {241    return angular.element(el).controller('mdNavItem')242  });243};244/**245 * Returns the tab with the specified name.246 * @param {string} name The name of the tab, found in its name attribute.247 * @return {!NavItemController|undefined}248 * @private249 */250MdNavBarController.prototype._getTabByName = function(name) {251  return this._findTab(function(tab) {252    return tab.getName() == name;253  });254};255/**256 * Returns the selected tab.257 * @return {!NavItemController|undefined}258 * @private259 */260MdNavBarController.prototype._getSelectedTab = function() {261  return this._findTab(function(tab) {262    return tab.isSelected()263  });264};265/**266 * Returns the focused tab.267 * @return {!NavItemController|undefined}268 */269MdNavBarController.prototype.getFocusedTab = function() {270  return this._findTab(function(tab) {271    return tab.hasFocus()272  });273};274/**275 * Find a tab that matches the specified function.276 * @private277 */278MdNavBarController.prototype._findTab = function(fn) {279  var tabs = this._getTabs();280  for (var i = 0; i < tabs.length; i++) {281    if (fn(tabs[i])) {282      return tabs[i];283    }284  }285  return null;286};287/**288 * Direct focus to the selected tab when focus enters the nav bar.289 */290MdNavBarController.prototype.onFocus = function() {291  var tab = this._getSelectedTab();292  if (tab) {293    tab.setFocused(true);294  }295};296/**297 * Clear tab focus when focus leaves the nav bar.298 */299MdNavBarController.prototype.onBlur = function() {300  var tab = this.getFocusedTab();301  if (tab) {302    tab.setFocused(false);303  }304};305/**306 * Move focus from oldTab to newTab.307 * @param {!NavItemController} oldTab308 * @param {!NavItemController} newTab309 * @private310 */311MdNavBarController.prototype._moveFocus = function(oldTab, newTab) {312  oldTab.setFocused(false);313  newTab.setFocused(true);314};315/**316 * Responds to keypress events.317 * @param {!Event} e318 */319MdNavBarController.prototype.onKeydown = function(e) {320  var keyCodes = this._$mdConstant.KEY_CODE;321  var tabs = this._getTabs();322  var focusedTab = this.getFocusedTab();323  if (!focusedTab) return;324  var focusedTabIndex = tabs.indexOf(focusedTab);325  // use arrow keys to navigate between tabs326  switch (e.keyCode) {327    case keyCodes.UP_ARROW:328    case keyCodes.LEFT_ARROW:329      if (focusedTabIndex > 0) {330        this._moveFocus(focusedTab, tabs[focusedTabIndex - 1]);331      }332      break;333    case keyCodes.DOWN_ARROW:334    case keyCodes.RIGHT_ARROW:335      if (focusedTabIndex < tabs.length - 1) {336        this._moveFocus(focusedTab, tabs[focusedTabIndex + 1]);337      }338      break;339    case keyCodes.SPACE:340    case keyCodes.ENTER:341      // timeout to avoid a "digest already in progress" console error342      this._$timeout(function() {343        focusedTab.getButtonEl().click();344      });345      break;346  }347};348/**349 * ngInject350 */351function MdNavItem($$rAF) {352  return {353    restrict: 'E',354    require: ['mdNavItem', '^mdNavBar'],355    controller: MdNavItemController,356    bindToController: true,357    controllerAs: 'ctrl',358    replace: true,359    transclude: true,360    template:361      '<li class="md-nav-item" role="option" aria-selected="{{ctrl.isSelected()}}">' +362        '<md-button ng-if="ctrl.mdNavSref" class="_md-nav-button md-accent"' +363          'ng-class="ctrl.getNgClassMap()"' +364          'tabindex="-1"' +365          'ui-sref="{{ctrl.mdNavSref}}">' +366          '<span ng-transclude class="_md-nav-button-text"></span>' +367        '</md-button>' +368        '<md-button ng-if="ctrl.mdNavHref" class="_md-nav-button md-accent"' +369          'ng-class="ctrl.getNgClassMap()"' +370          'tabindex="-1"' +371          'ng-href="{{ctrl.mdNavHref}}">' +372          '<span ng-transclude class="_md-nav-button-text"></span>' +373        '</md-button>' +374        '<md-button ng-if="ctrl.mdNavClick" class="_md-nav-button md-accent"' +375          'ng-class="ctrl.getNgClassMap()"' +376          'tabindex="-1"' +377          'ng-click="ctrl.mdNavClick()">' +378          '<span ng-transclude class="_md-nav-button-text"></span>' +379        '</md-button>' +380      '</li>',381    scope: {382      'mdNavClick': '&?',383      'mdNavHref': '@?',384      'mdNavSref': '@?',385      'name': '@',386    },387    link: function(scope, element, attrs, controllers) {388      var mdNavItem = controllers[0];389      var mdNavBar = controllers[1];390      // When accessing the element's contents synchronously, they391      // may not be defined yet because of transclusion. There is a higher chance392      // that it will be accessible if we wait one frame.393      $$rAF(function() {394        if (!mdNavItem.name) {395          mdNavItem.name = angular.element(element[0].querySelector('._md-nav-button-text'))396            .text().trim();397        }398        var navButton = angular.element(element[0].querySelector('._md-nav-button'));399        navButton.on('click', function() {400          mdNavBar.mdSelectedNavItem = mdNavItem.name;401          scope.$apply();402        });403      });404    }405  };406}407/**408 * Controller for the nav-item component.409 * @param {!angular.JQLite} $element410 * @constructor411 * @final412 * ngInject413 */414function MdNavItemController($element) {415  /** @private @const {!angular.JQLite} */416  this._$element = $element;417  // Data-bound variables418  /** @const {?Function} */419  this.mdNavClick;420  /** @const {?string} */421  this.mdNavHref;422  /** @const {?string} */423  this.name;424  // State variables425  /** @private {boolean} */426  this._selected = false;427  /** @private {boolean} */428  this._focused = false;429  var hasNavClick = !!($element.attr('md-nav-click'));430  var hasNavHref = !!($element.attr('md-nav-href'));431  var hasNavSref = !!($element.attr('md-nav-sref'));432  // Cannot specify more than one nav attribute433  if ((hasNavClick ? 1:0) + (hasNavHref ? 1:0) + (hasNavSref ? 1:0) > 1) {434    throw Error(435        'Must specify exactly one of md-nav-click, md-nav-href, ' +436        'md-nav-sref for nav-item directive');437  }438}439/**440 * Returns a map of class names and values for use by ng-class.441 * @return {!Object<string,boolean>}442 */443MdNavItemController.prototype.getNgClassMap = function() {444  return {445    'md-active': this._selected,446    'md-primary': this._selected,447    'md-unselected': !this._selected,448    'md-focused': this._focused,449  };450};451/**452 * Get the name attribute of the tab.453 * @return {string}454 */455MdNavItemController.prototype.getName = function() {456  return this.name;457};458/**459 * Get the button element associated with the tab.460 * @return {!Element}461 */462MdNavItemController.prototype.getButtonEl = function() {463  return this._$element[0].querySelector('._md-nav-button');464};465/**466 * Set the selected state of the tab.467 * @param {boolean} isSelected468 */469MdNavItemController.prototype.setSelected = function(isSelected) {470  this._selected = isSelected;471};472/**473 * @return {boolean}474 */475MdNavItemController.prototype.isSelected = function() {476  return this._selected;477};478/**479 * Set the focused state of the tab.480 * @param {boolean} isFocused481 */482MdNavItemController.prototype.setFocused = function(isFocused) {483  this._focused = isFocused;484};485/**486 * @return {boolean}487 */488MdNavItemController.prototype.hasFocus = function() {489  return this._focused;490};...

button.js

Source:button.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7goog.provide('ngmaterial.components.button');8goog.require('ngmaterial.core');9/**10 * @ngdoc module11 * @name material.components.button12 * @description13 *14 * Button15 */16MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];17MdAnchorDirective.$inject = ["$mdTheming"];18angular19    .module('material.components.button', [ 'material.core' ])20    .directive('mdButton', MdButtonDirective)21    .directive('a', MdAnchorDirective);22/**23 * @private24 * @restrict E25 *26 * @description27 * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.28 *29 * @usage30 *31 * <hljs lang="html">32 *  <md-content md-theme="myTheme">33 *    <a href="#chapter1" class="md-accent"></a>34 *  </md-content>35 * </hljs>36 */37function MdAnchorDirective($mdTheming) {38  return {39    restrict : 'E',40    link : function postLink(scope, element) {41      // Make sure to inherit theme so stand-alone anchors42      // support theme colors for md-primary, md-accent, etc.43      $mdTheming(element);44    }45  };46}47/**48 * @ngdoc directive49 * @name mdButton50 * @module material.components.button51 *52 * @restrict E53 *54 * @description55 * `<md-button>` is a button directive with optional ink ripples (default enabled).56 *57 * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it58 * will become a `<button>` element. As per the59 * [Material Design specifications](https://material.google.com/style/color.html#color-color-palette)60 * the FAB button background is filled with the accent color [by default]. The primary color palette61 * may be used with the `md-primary` class.62 *63 * Developers can also change the color palette of the button, by using the following classes64 * - `md-primary`65 * - `md-accent`66 * - `md-warn`67 *68 * See for example69 *70 * <hljs lang="html">71 *   <md-button class="md-primary">Primary Button</md-button>72 * </hljs>73 *74 * Button can be also raised, which means that they will use the current color palette to fill the button.75 *76 * <hljs lang="html">77 *   <md-button class="md-accent md-raised">Raised and Accent Button</md-button>78 * </hljs>79 *80 * It is also possible to disable the focus effect on the button, by using the following markup.81 *82 * <hljs lang="html">83 *   <md-button class="md-no-focus">No Focus Style</md-button>84 * </hljs>85 *86 * @param {boolean=} md-no-ink If present, disable ripple ink effects.87 * @param {expression=} ng-disabled En/Disable based on the expression88 * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`89 * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.90 * If no default text is found, a warning will be logged.91 *92 * @usage93 *94 * Regular buttons:95 *96 * <hljs lang="html">97 *  <md-button> Flat Button </md-button>98 *  <md-button href="http://google.com"> Flat link </md-button>99 *  <md-button class="md-raised"> Raised Button </md-button>100 *  <md-button ng-disabled="true"> Disabled Button </md-button>101 *  <md-button>102 *    <md-icon md-svg-src="your/icon.svg"></md-icon>103 *    Register Now104 *  </md-button>105 * </hljs>106 *107 * FAB buttons:108 *109 * <hljs lang="html">110 *  <md-button class="md-fab" aria-label="FAB">111 *    <md-icon md-svg-src="your/icon.svg"></md-icon>112 *  </md-button>113 *  <!-- mini-FAB -->114 *  <md-button class="md-fab md-mini" aria-label="Mini FAB">115 *    <md-icon md-svg-src="your/icon.svg"></md-icon>116 *  </md-button>117 *  <!-- Button with SVG Icon -->118 *  <md-button class="md-icon-button" aria-label="Custom Icon Button">119 *    <md-icon md-svg-icon="path/to/your.svg"></md-icon>120 *  </md-button>121 * </hljs>122 */123function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {124  return {125    restrict: 'EA',126    replace: true,127    transclude: true,128    template: getTemplate,129    link: postLink130  };131  function isAnchor(attr) {132    return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);133  }134  function getTemplate(element, attr) {135    if (isAnchor(attr)) {136      return '<a class="md-button" ng-transclude></a>';137    } else {138      //If buttons don't have type="button", they will submit forms automatically.139      var btnType = (typeof attr.type === 'undefined') ? 'button' : attr.type;140      return '<button class="md-button" type="' + btnType + '" ng-transclude></button>';141    }142  }143  function postLink(scope, element, attr) {144    $mdTheming(element);145    $mdButtonInkRipple.attach(scope, element);146    // Use async expect to support possible bindings in the button label147    $mdAria.expectWithoutText(element, 'aria-label');148    // For anchor elements, we have to set tabindex manually when the149    // element is disabled150    if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {151      scope.$watch(attr.ngDisabled, function(isDisabled) {152        element.attr('tabindex', isDisabled ? -1 : 0);153      });154    }155    // disabling click event when disabled is true156    element.on('click', function(e){157      if (attr.disabled === true) {158        e.preventDefault();159        e.stopImmediatePropagation();160      }161    });162    if (!element.hasClass('md-no-focus')) {163      // restrict focus styles to the keyboard164      scope.mouseActive = false;165      element.on('mousedown', function() {166        scope.mouseActive = true;167        $timeout(function(){168          scope.mouseActive = false;169        }, 100);170      })171      .on('focus', function() {172        if (scope.mouseActive === false) {173          element.addClass('md-focused');174        }175      })176      .on('blur', function(ev) {177        element.removeClass('md-focused');178      });179    }180  }181}...

card.js

Source:card.js

1/*!2 * Angular Material Design3 * https://github.com/angular/material4 * @license MIT5 * v1.1.16 */7goog.provide('ngmaterial.components.card');8goog.require('ngmaterial.core');9/**10 * @ngdoc module11 * @name material.components.card12 *13 * @description14 * Card components.15 */16mdCardDirective.$inject = ["$mdTheming"];17angular.module('material.components.card', [18    'material.core'19  ])20  .directive('mdCard', mdCardDirective);21/**22 * @ngdoc directive23 * @name mdCard24 * @module material.components.card25 *26 * @restrict E27 *28 * @description29 * The `<md-card>` directive is a container element used within `<md-content>` containers.30 *31 * An image included as a direct descendant will fill the card's width. If you want to avoid this,32 * you can add the `md-image-no-fill` class to the parent element. The `<md-card-content>`33 * container will wrap text content and provide padding. An `<md-card-footer>` element can be34 * optionally included to put content flush against the bottom edge of the card.35 *36 * Action buttons can be included in an `<md-card-actions>` element, similar to `<md-dialog-actions>`.37 * You can then position buttons using layout attributes.38 *39 * Card is built with:40 * * `<md-card-header>` - Header for the card, holds avatar, text and squared image41 *  - `<md-card-avatar>` - Card avatar42 *    - `md-user-avatar` - Class for user image43 *    - `<md-icon>`44 *  - `<md-card-header-text>` - Contains elements for the card description45 *    - `md-title` - Class for the card title46 *    - `md-subhead` - Class for the card sub header47 * * `<img>` - Image for the card48 * * `<md-card-title>` - Card content title49 *  - `<md-card-title-text>`50 *    - `md-headline` - Class for the card content title51 *    - `md-subhead` - Class for the card content sub header52 *  - `<md-card-title-media>` - Squared image within the title53 *    - `md-media-sm` - Class for small image54 *    - `md-media-md` - Class for medium image55 *    - `md-media-lg` - Class for large image56 * * `<md-card-content>` - Card content57 *  - `md-media-xl` - Class for extra large image58 * * `<md-card-actions>` - Card actions59 *  - `<md-card-icon-actions>` - Icon actions60 *61 * Cards have constant width and variable heights; where the maximum height is limited to what can62 * fit within a single view on a platform, but it can temporarily expand as needed.63 *64 * @usage65 * ### Card with optional footer66 * <hljs lang="html">67 * <md-card>68 *  <img src="card-image.png" class="md-card-image" alt="image caption">69 *  <md-card-content>70 *    <h2>Card headline</h2>71 *    <p>Card content</p>72 *  </md-card-content>73 *  <md-card-footer>74 *    Card footer75 *  </md-card-footer>76 * </md-card>77 * </hljs>78 *79 * ### Card with actions80 * <hljs lang="html">81 * <md-card>82 *  <img src="card-image.png" class="md-card-image" alt="image caption">83 *  <md-card-content>84 *    <h2>Card headline</h2>85 *    <p>Card content</p>86 *  </md-card-content>87 *  <md-card-actions layout="row" layout-align="end center">88 *    <md-button>Action 1</md-button>89 *    <md-button>Action 2</md-button>90 *  </md-card-actions>91 * </md-card>92 * </hljs>93 *94 * ### Card with header, image, title actions and content95 * <hljs lang="html">96 * <md-card>97 *   <md-card-header>98 *     <md-card-avatar>99 *       <img class="md-user-avatar" src="avatar.png"/>100 *     </md-card-avatar>101 *     <md-card-header-text>102 *       <span class="md-title">Title</span>103 *       <span class="md-subhead">Sub header</span>104 *     </md-card-header-text>105 *   </md-card-header>106 *   <img ng-src="card-image.png" class="md-card-image" alt="image caption">107 *   <md-card-title>108 *     <md-card-title-text>109 *       <span class="md-headline">Card headline</span>110 *       <span class="md-subhead">Card subheader</span>111 *     </md-card-title-text>112 *   </md-card-title>113 *   <md-card-actions layout="row" layout-align="start center">114 *     <md-button>Action 1</md-button>115 *     <md-button>Action 2</md-button>116 *     <md-card-icon-actions>117 *       <md-button class="md-icon-button" aria-label="icon">118 *         <md-icon md-svg-icon="icon"></md-icon>119 *       </md-button>120 *     </md-card-icon-actions>121 *   </md-card-actions>122 *   <md-card-content>123 *     <p>124 *      Card content125 *     </p>126 *   </md-card-content>127 * </md-card>128 * </hljs>129 */130function mdCardDirective($mdTheming) {131  return {132    restrict: 'E',133    link: function ($scope, $element, attr) {134      $element.addClass('_md');     // private md component indicator for styling135      $mdTheming($element);136    }137  };138}...

markDown.js

Source:markDown.js

1function parseMd(md){2  //ul3  md = md.replace(/^\s*\n\*/gm, '<ul>\n*');4  md = md.replace(/^(\*.+)\s*\n([^\*])/gm, '$1\n</ul>\n\n$2');5  md = md.replace(/^\*(.+)/gm, '<li>$1</li>');6  //ol7  md = md.replace(/^\s*\n\d\./gm, '<ol>\n1.');8  md = md.replace(/^(\d\..+)\s*\n([^\d\.])/gm, '$1\n</ol>\n\n$2');9  md = md.replace(/^\d\.(.+)/gm, '<li>$1</li>');10  //blockquote11  md = md.replace(/^\>(.+)/gm, '<blockquote>$1</blockquote>');12  //h13  md = md.replace(/[\#]{6}(.+)/g, '<h6>$1</h6>');14  md = md.replace(/[\#]{5}(.+)/g, '<h5>$1</h5>');15  md = md.replace(/[\#]{4}(.+)/g, '<h4>$1</h4>');16  md = md.replace(/[\#]{3}(.+)/g, '<h3>$1</h3>');17  md = md.replace(/[\#]{2}(.+)/g, '<h2>$1</h2>');18  md = md.replace(/[\#]{1}(.+)/g, '<h1>$1</h1>');19  //alt h20  md = md.replace(/^(.+)\n\=+/gm, '<h1>$1</h1>');21  md = md.replace(/^(.+)\n\-+/gm, '<h2>$1</h2>');22  //images23  md = md.replace(/\!\[([^\]]+)\]\(([^\)]+)\)/g, '<img src="$2" alt="$1" />');24  //links25  md = md.replace(/[\[]{1}([^\]]+)[\]]{1}[\(]{1}([^\)\"]+)(\"(.+)\")?[\)]{1}/g, '<a href="$2" title="$4">$1</a>');26  //font styles27  md = md.replace(/[\*\_]{2}([^\*\_]+)[\*\_]{2}/g, '<b>$1</b>');28  md = md.replace(/[\*\_]{1}([^\*\_]+)[\*\_]{1}/g, '<i>$1</i>');29  md = md.replace(/[\~]{2}([^\~]+)[\~]{2}/g, '<del>$1</del>');30  //pre31  md = md.replace(/^\s*\n\`\`\`(([^\s]+))?/gm, '<pre class="$2">');32  md = md.replace(/^\`\`\`\s*\n/gm, '</pre>\n\n');33  //code34  md = md.replace(/[\`]{1}([^\`]+)[\`]{1}/g, '<code>$1</code>');35  //p36  md = md.replace(/^\s*(\n)?(.+)/gm, function(m){37    return  /\<(\/)?(h\d|ul|ol|li|blockquote|pre|img)/.test(m) ? m : '<p>'+m+'</p>';38  });39  //strip p from pre40  // md = md.replace(/(\<pre.+\>)\s*\n\<p\>(.+)\<\/p\>/gm, '$1$2');41  return md;42}43function openModal(filepath) {44	var modal = document.getElementById("modal");45	modal.style.display = "block";46  var input = document.getElementById("input");47	$.get(filepath, function(data) {48    html = parseMd(data);49    input.innerHTML = html;50	});51}52function closeModal() {53	var modal = document.getElementById("modal");54	modal.style.display = "none";55	var input = document.getElementById("input");56  input.innerHTML = "";57}58window.onclick = function(event) {59	if (event.target == modal) {60		closeModal();61	}...

Using AI Code Generation

1const { md } = require("@playwright/test");2const { md } = require("@playwright/test");3const { md } = require("@playwright/test");4const { md } = require("@playwright/test");5const { md } = require("@playwright/test");6const { md } = require("@playwright/test");7const { md } = require("@playwright/test");8const { md } = require("@playwright/test");9const { md } = require("@playwright/test");10const { md } = require("@playwright/test");11const { md } = require("@playwright/test");12const { md } = require("@playwright/test");13const { md } = require("@playwright/test");14const { md } = require("@playwright/test");15const { md } = require("@playwright/test");16const { md } = require("@playwright/test");17const { md } = require("@playwright/test");18const { md } = require("@playwright/test");19const { md } = require("@playwright/test");20const { md } = require("@playwright/test");21const { md } = require("@

Using AI Code Generation

1const { md } = require("@playwright/test");2const { test, expect } = require("@playwright/test");3test("should be able to use md method", async ({ page }) => {4  await page.waitForSelector("text=Get started");5  const titleElement = await page.$("text=Get started");6  const title = await titleElement.textContent();7  expect(title).toBe("Get started");8  await page.screenshot({ path: `screenshots/${md(title)}.png` });9});

Using AI Code Generation

1const { md } = require('@playwright/test')2const { md } = require('@playwright/test')3const { md } = require('@playwright/test')4const { md } = require('@playwright/test')5const { md } = require('@playwright/test')6const { md } = require('@playwright/test')7const { md } = require('@playwright/test')8const { md } = require('@playwright/test')9const { md } = require('@playwright/test')10const { md } = require('@playwright/test')11const { md } = require('@playwright/test')12const { md } = require('@playwright/test')13const { md } = require('@playwright/test')14const { md } = require('@playwright/test')15const { md } = require('@playwright/test')16const { md } = require('@playwright/test')17const { md } = require('@playwright/test')18const { md } = require('@playwright/test')19const { md } = require('@playwright/test')20const { md } = require('@playwright/test')

Using AI Code Generation

1const { md } = require('@playwright/test');2console.log(md`# Hello World!`);3const { md } = require('@playwright/test');4test('example test', async ({ page }) => {5  const title = page.locator('text=Get started');6  console.log(md`# Hello World!`);7  expect(title).toBeVisible();8});

Using AI Code Generation

1const { md } = require('@playwright/test');2md`## My markdown header`;3md(`## My markdown header`);4md(['## My markdown header']);5md(['## My markdown header'], 'My markdown header');6md(['## My markdown header'], { header: 'My markdown header' });7md(['## My markdown header'], { header: 'My markdown header', timeout: 5000 });8md(['## My markdown header'], { header: 'My markdown header', timeout: 5000, timeoutMessage: 'My custom timeout message' });9md(['## My markdown header'], { header: 'My markdown header', timeout: 5000, timeoutMessage: 'My custom timeout message', waitFor: 'visible' });10md(['## My markdown header'], { header: 'My markdown header', timeout: 5000, timeoutMessage: 'My custom timeout message', waitFor: 'visible', timeoutOptions: { visibility: 'hidden' } });11md(['## My markdown header'], { header: 'My markdown header', timeout: 5000, timeoutMessage: 'My custom timeout message', waitFor: 'visible', timeoutOptions: { visibility: 'hidden' }, page: page });12md(['## My markdown header'], { header: 'My markdown header', timeout: 5000, timeoutMessage: 'My custom timeout message', waitFor: 'visible', timeoutOptions: { visibility: 'hidden' }, page: page, container: container });13md(['## My markdown header'], { header: 'My markdown header', timeout: 5000, timeoutMessage: 'My custom timeout message', waitFor: 'visible', timeoutOptions: { visibility: 'hidden' }, page: page, container: container, state: state });14md(['

Using AI Code Generation

1const { md } = require('playwright');2console.log(md);3const { md } = require('playwright');4const fs = require('fs');5(async () => {6  const browser = await chromium.launch();7  const context = await browser.newContext();8  const page = await context.newPage();9  await page.screenshot({ path: 'screenshot.png' });10  await page.pdf({ path: 'page.pdf' });11  const markdown = await md.generate();12  fs.writeFileSync('test.md', markdown);13  await browser.close();14})();15await md.generate({16});

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.