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