1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.3
  6 */
  7(function( window, angular, undefined ){
  8"use strict";
  9
 10/**
 11 * @ngdoc module
 12 * @name material.components.radioButton
 13 * @description radioButton module!
 14 */
 15mdRadioGroupDirective['$inject'] = ["$mdUtil", "$mdConstant", "$mdTheming", "$timeout"];
 16mdRadioButtonDirective['$inject'] = ["$mdAria", "$mdUtil", "$mdTheming"];
 17angular.module('material.components.radioButton', [
 18  'material.core'
 19])
 20  .directive('mdRadioGroup', mdRadioGroupDirective)
 21  .directive('mdRadioButton', mdRadioButtonDirective);
 22
 23/**
 24 * @ngdoc directive
 25 * @module material.components.radioButton
 26 * @name mdRadioGroup
 27 *
 28 * @restrict E
 29 *
 30 * @description
 31 * The `<md-radio-group>` directive identifies a grouping
 32 * container for the 1..n grouped radio buttons; specified using nested
 33 * `<md-radio-button>` tags.
 34 *
 35 * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
 36 * the radio button is in the accent color by default. The primary color palette may be used with
 37 * the `md-primary` class.
 38 *
 39 * Note: `<md-radio-group>` and `<md-radio-button>` handle tabindex differently
 40 * than the native `<input type='radio'>` controls. Whereas the native controls
 41 * force the user to tab through all the radio buttons, `<md-radio-group>`
 42 * is focusable, and by default the `<md-radio-button>`s are not.
 43 *
 44 * @param {string} ng-model Assignable angular expression to data-bind to.
 45 * @param {boolean=} md-no-ink Use of attribute indicates flag to disable ink ripple effects.
 46 *
 47 * @usage
 48 * <hljs lang="html">
 49 * <md-radio-group ng-model="selected">
 50 *
 51 *   <md-radio-button
 52 *        ng-repeat="d in colorOptions"
 53 *        ng-value="d.value" aria-label="{{ d.label }}">
 54 *
 55 *          {{ d.label }}
 56 *
 57 *   </md-radio-button>
 58 *
 59 * </md-radio-group>
 60 * </hljs>
 61 *
 62 */
 63function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming, $timeout) {
 64  RadioGroupController.prototype = createRadioGroupControllerProto();
 65
 66  return {
 67    restrict: 'E',
 68    controller: ['$element', RadioGroupController],
 69    require: ['mdRadioGroup', '?ngModel'],
 70    link: { pre: linkRadioGroup }
 71  };
 72
 73  function linkRadioGroup(scope, element, attr, ctrls) {
 74    element.addClass('_md');     // private md component indicator for styling
 75    $mdTheming(element);
 76
 77    var rgCtrl = ctrls[0];
 78    var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
 79
 80    rgCtrl.init(ngModelCtrl);
 81
 82    scope.mouseActive = false;
 83
 84    element
 85      .attr({
 86        'role': 'radiogroup',
 87        'tabIndex': element.attr('tabindex') || '0'
 88      })
 89      .on('keydown', keydownListener)
 90      .on('mousedown', function(event) {
 91        scope.mouseActive = true;
 92        $timeout(function() {
 93          scope.mouseActive = false;
 94        }, 100);
 95      })
 96      .on('focus', function() {
 97        if(scope.mouseActive === false) {
 98          rgCtrl.$element.addClass('md-focused');
 99        }
100      })
101      .on('blur', function() {
102        rgCtrl.$element.removeClass('md-focused');
103      });
104
105    /**
106     *
107     */
108    function setFocus() {
109      if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
110    }
111
112    /**
113     *
114     */
115    function keydownListener(ev) {
116      var keyCode = ev.which || ev.keyCode;
117
118      // Only listen to events that we originated ourselves
119      // so that we don't trigger on things like arrow keys in
120      // inputs.
121
122      if (keyCode != $mdConstant.KEY_CODE.ENTER &&
123          ev.currentTarget != ev.target) {
124        return;
125      }
126
127      switch (keyCode) {
128        case $mdConstant.KEY_CODE.LEFT_ARROW:
129        case $mdConstant.KEY_CODE.UP_ARROW:
130          ev.preventDefault();
131          rgCtrl.selectPrevious();
132          setFocus();
133          break;
134
135        case $mdConstant.KEY_CODE.RIGHT_ARROW:
136        case $mdConstant.KEY_CODE.DOWN_ARROW:
137          ev.preventDefault();
138          rgCtrl.selectNext();
139          setFocus();
140          break;
141
142        case $mdConstant.KEY_CODE.ENTER:
143          var form = angular.element($mdUtil.getClosest(element[0], 'form'));
144          if (form.length > 0) {
145            form.triggerHandler('submit');
146          }
147          break;
148      }
149
150    }
151  }
152
153  function RadioGroupController($element) {
154    this._radioButtonRenderFns = [];
155    this.$element = $element;
156  }
157
158  function createRadioGroupControllerProto() {
159    return {
160      init: function(ngModelCtrl) {
161        this._ngModelCtrl = ngModelCtrl;
162        this._ngModelCtrl.$render = angular.bind(this, this.render);
163      },
164      add: function(rbRender) {
165        this._radioButtonRenderFns.push(rbRender);
166      },
167      remove: function(rbRender) {
168        var index = this._radioButtonRenderFns.indexOf(rbRender);
169        if (index !== -1) {
170          this._radioButtonRenderFns.splice(index, 1);
171        }
172      },
173      render: function() {
174        this._radioButtonRenderFns.forEach(function(rbRender) {
175          rbRender();
176        });
177      },
178      setViewValue: function(value, eventType) {
179        this._ngModelCtrl.$setViewValue(value, eventType);
180        // update the other radio buttons as well
181        this.render();
182      },
183      getViewValue: function() {
184        return this._ngModelCtrl.$viewValue;
185      },
186      selectNext: function() {
187        return changeSelectedButton(this.$element, 1);
188      },
189      selectPrevious: function() {
190        return changeSelectedButton(this.$element, -1);
191      },
192      setActiveDescendant: function (radioId) {
193        this.$element.attr('aria-activedescendant', radioId);
194      },
195      isDisabled: function() {
196        return this.$element[0].hasAttribute('disabled');
197      }
198    };
199  }
200  /**
201   * Change the radio group's selected button by a given increment.
202   * If no button is selected, select the first button.
203   */
204  function changeSelectedButton(parent, increment) {
205    // Coerce all child radio buttons into an array, then wrap then in an iterator
206    var buttons = $mdUtil.iterator(parent[0].querySelectorAll('md-radio-button'), true);
207
208    if (buttons.count()) {
209      var validate = function (button) {
210        // If disabled, then NOT valid
211        return !angular.element(button).attr("disabled");
212      };
213
214      var selected = parent[0].querySelector('md-radio-button.md-checked');
215      var target = buttons[increment < 0 ? 'previous' : 'next'](selected, validate) || buttons.first();
216
217      // Activate radioButton's click listener (triggerHandler won't create a real click event)
218      angular.element(target).triggerHandler('click');
219    }
220  }
221
222}
223
224/**
225 * @ngdoc directive
226 * @module material.components.radioButton
227 * @name mdRadioButton
228 *
229 * @restrict E
230 *
231 * @description
232 * The `<md-radio-button>`directive is the child directive required to be used within `<md-radio-group>` elements.
233 *
234 * While similar to the `<input type="radio" ng-model="" value="">` directive,
235 * the `<md-radio-button>` directive provides ink effects, ARIA support, and
236 * supports use within named radio groups.
237 *
238 * @param {string} ngModel Assignable angular expression to data-bind to.
239 * @param {string=} ngChange Angular expression to be executed when input changes due to user
240 *    interaction with the input element.
241 * @param {string} ngValue Angular expression which sets the value to which the expression should
242 *    be set when selected.
243 * @param {string} value The value to which the expression should be set when selected.
244 * @param {string=} name Property name of the form under which the control is published.
245 * @param {string=} aria-label Adds label to radio button for accessibility.
246 * Defaults to radio button's text. If no text content is available, a warning will be logged.
247 *
248 * @usage
249 * <hljs lang="html">
250 *
251 * <md-radio-button value="1" aria-label="Label 1">
252 *   Label 1
253 * </md-radio-button>
254 *
255 * <md-radio-button ng-model="color" ng-value="specialValue" aria-label="Green">
256 *   Green
257 * </md-radio-button>
258 *
259 * </hljs>
260 *
261 */
262function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
263
264  var CHECKED_CSS = 'md-checked';
265
266  return {
267    restrict: 'E',
268    require: '^mdRadioGroup',
269    transclude: true,
270    template: '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
271                '<div class="md-off"></div>' +
272                '<div class="md-on"></div>' +
273              '</div>' +
274              '<div ng-transclude class="md-label"></div>',
275    link: link
276  };
277
278  function link(scope, element, attr, rgCtrl) {
279    var lastChecked;
280
281    $mdTheming(element);
282    configureAria(element, scope);
283
284    // ngAria overwrites the aria-checked inside a $watch for ngValue.
285    // We should defer the initialization until all the watches have fired.
286    // This can also be fixed by removing the `lastChecked` check, but that'll
287    // cause more DOM manipulation on each digest.
288    if (attr.ngValue) {
289      $mdUtil.nextTick(initialize, false);
290    } else {
291      initialize();
292    }
293
294    /**
295     * Initializes the component.
296     */
297    function initialize() {
298      if (!rgCtrl) {
299        throw 'RadioButton: No RadioGroupController could be found.';
300      }
301
302      rgCtrl.add(render);
303      attr.$observe('value', render);
304
305      element
306        .on('click', listener)
307        .on('$destroy', function() {
308          rgCtrl.remove(render);
309        });
310    }
311
312    /**
313     * On click functionality.
314     */
315    function listener(ev) {
316      if (element[0].hasAttribute('disabled') || rgCtrl.isDisabled()) return;
317
318      scope.$apply(function() {
319        rgCtrl.setViewValue(attr.value, ev && ev.type);
320      });
321    }
322
323    /**
324     *  Add or remove the `.md-checked` class from the RadioButton (and conditionally its parent).
325     *  Update the `aria-activedescendant` attribute.
326     */
327    function render() {
328      var checked = rgCtrl.getViewValue() == attr.value;
329
330      if (checked === lastChecked) return;
331
332      if (element[0].parentNode.nodeName.toLowerCase() !== 'md-radio-group') {
333        // If the radioButton is inside a div, then add class so highlighting will work
334        element.parent().toggleClass(CHECKED_CSS, checked);
335      }
336
337      if (checked) {
338        rgCtrl.setActiveDescendant(element.attr('id'));
339      }
340
341      lastChecked = checked;
342
343      element
344        .attr('aria-checked', checked)
345        .toggleClass(CHECKED_CSS, checked);
346    }
347
348    /**
349     * Inject ARIA-specific attributes appropriate for each radio button
350     */
351    function configureAria(element, scope){
352      element.attr({
353        id: attr.id || 'radio_' + $mdUtil.nextUid(),
354        role: 'radio',
355        'aria-checked': 'false'
356      });
357
358      $mdAria.expectWithText(element, 'aria-label');
359    }
360  }
361}
362
363})(window, window.angular);