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