1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.3
  6 */
  7goog.provide('ngmaterial.components.checkbox');
  8goog.require('ngmaterial.core');
  9/**
 10 * @ngdoc module
 11 * @name material.components.checkbox
 12 * @description Checkbox module!
 13 */
 14MdCheckboxDirective['$inject'] = ["inputDirective", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$mdInteraction"];
 15angular
 16  .module('material.components.checkbox', ['material.core'])
 17  .directive('mdCheckbox', MdCheckboxDirective);
 18
 19/**
 20 * @ngdoc directive
 21 * @name mdCheckbox
 22 * @module material.components.checkbox
 23 * @restrict E
 24 *
 25 * @description
 26 * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
 27 *
 28 * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-color-schemes)
 29 * the checkbox is in the accent color by default. The primary color palette may be used with
 30 * the `md-primary` class.
 31 *
 32 * @param {string} ng-model Assignable angular expression to data-bind to.
 33 * @param {string=} name Property name of the form under which the control is published.
 34 * @param {expression=} ng-true-value The value to which the expression should be set when selected.
 35 * @param {expression=} ng-false-value The value to which the expression should be set when not selected.
 36 * @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element.
 37 * @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects
 38 * @param {string=} aria-label Adds label to checkbox for accessibility.
 39 *     Defaults to checkbox's text. If no default text is found, a warning will be logged.
 40 * @param {expression=} md-indeterminate This determines when the checkbox should be rendered as 'indeterminate'.
 41 *     If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
 42 *     If falsy expression is passed in it just looks like a normal unchecked checkbox.
 43 *     The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
 44 *     Adding the 'md-indeterminate' attribute overrides any checked/unchecked rendering logic.
 45 *     When using the 'md-indeterminate' attribute use 'ng-checked' to define rendering logic instead of using 'ng-model'.
 46 * @param {expression=} ng-checked If this expression evaluates as truthy, the 'md-checked' css class is added to the checkbox and it
 47 *     will appear checked.
 48 *
 49 * @usage
 50 * <hljs lang="html">
 51 * <md-checkbox ng-model="isChecked" aria-label="Finished?">
 52 *   Finished ?
 53 * </md-checkbox>
 54 *
 55 * <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
 56 *   No Ink Effects
 57 * </md-checkbox>
 58 *
 59 * <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
 60 *   Disabled
 61 * </md-checkbox>
 62 *
 63 * </hljs>
 64 *
 65 */
 66function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $mdInteraction) {
 67  inputDirective = inputDirective[0];
 68
 69  return {
 70    restrict: 'E',
 71    transclude: true,
 72    require: ['^?mdInputContainer', '?ngModel', '?^form'],
 73    priority: $mdConstant.BEFORE_NG_ARIA,
 74    template:
 75      '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
 76        '<div class="md-icon"></div>' +
 77      '</div>' +
 78      '<div ng-transclude class="md-label"></div>',
 79    compile: compile
 80  };
 81
 82  // **********************************************************
 83  // Private Methods
 84  // **********************************************************
 85
 86  function compile (tElement, tAttrs) {
 87    tAttrs.$set('tabindex', tAttrs.tabindex || '0');
 88    tAttrs.$set('type', 'checkbox');
 89    tAttrs.$set('role', tAttrs.type);
 90
 91    return  {
 92      pre: function(scope, element) {
 93        // Attach a click handler during preLink, in order to immediately stop propagation
 94        // (especially for ng-click) when the checkbox is disabled.
 95        element.on('click', function(e) {
 96          if (this.hasAttribute('disabled')) {
 97            e.stopImmediatePropagation();
 98          }
 99        });
100      },
101      post: postLink
102    };
103
104    function postLink(scope, element, attr, ctrls) {
105      var isIndeterminate;
106      var containerCtrl = ctrls[0];
107      var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
108      var formCtrl = ctrls[2];
109
110      if (containerCtrl) {
111        var isErrorGetter = containerCtrl.isErrorGetter || function() {
112          return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
113        };
114
115        containerCtrl.input = element;
116
117        scope.$watch(isErrorGetter, containerCtrl.setInvalid);
118      }
119
120      $mdTheming(element);
121
122      // Redirect focus events to the root element, because IE11 is always focusing the container element instead
123      // of the md-checkbox element. This causes issues when using ngModelOptions: `updateOnBlur`
124      element.children().on('focus', function() {
125        element.focus();
126      });
127
128      if ($mdUtil.parseAttributeBoolean(attr.mdIndeterminate)) {
129        setIndeterminateState();
130        scope.$watch(attr.mdIndeterminate, setIndeterminateState);
131      }
132
133      if (attr.ngChecked) {
134        scope.$watch(scope.$eval.bind(scope, attr.ngChecked), function(value) {
135          ngModelCtrl.$setViewValue(value);
136          ngModelCtrl.$render();
137        });
138      }
139
140      $$watchExpr('ngDisabled', 'tabindex', {
141        true: '-1',
142        false: attr.tabindex
143      });
144
145      $mdAria.expectWithText(element, 'aria-label');
146
147      // Reuse the original input[type=checkbox] directive from Angular core.
148      // This is a bit hacky as we need our own event listener and own render
149      // function.
150      inputDirective.link.pre(scope, {
151        on: angular.noop,
152        0: {}
153      }, attr, [ngModelCtrl]);
154
155      element.on('click', listener)
156        .on('keypress', keypressHandler)
157        .on('focus', function() {
158          if ($mdInteraction.getLastInteractionType() === 'keyboard') {
159            element.addClass('md-focused');
160          }
161        })
162        .on('blur', function() {
163          element.removeClass('md-focused');
164        });
165
166      ngModelCtrl.$render = render;
167
168      function $$watchExpr(expr, htmlAttr, valueOpts) {
169        if (attr[expr]) {
170          scope.$watch(attr[expr], function(val) {
171            if (valueOpts[val]) {
172              element.attr(htmlAttr, valueOpts[val]);
173            }
174          });
175        }
176      }
177
178      function keypressHandler(ev) {
179        var keyCode = ev.which || ev.keyCode;
180        if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
181          ev.preventDefault();
182          element.addClass('md-focused');
183          listener(ev);
184        }
185      }
186
187      function listener(ev) {
188        // skipToggle boolean is used by the switch directive to prevent the click event
189        // when releasing the drag. There will be always a click if releasing the drag over the checkbox
190        if (element[0].hasAttribute('disabled') || scope.skipToggle) {
191          return;
192        }
193
194        scope.$apply(function() {
195          // Toggle the checkbox value...
196          var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
197
198          ngModelCtrl.$setViewValue(viewValue, ev && ev.type);
199          ngModelCtrl.$render();
200        });
201      }
202
203      function render() {
204        // Cast the $viewValue to a boolean since it could be undefined
205        element.toggleClass('md-checked', !!ngModelCtrl.$viewValue && !isIndeterminate);
206      }
207
208      function setIndeterminateState(newValue) {
209        isIndeterminate = newValue !== false;
210        if (isIndeterminate) {
211          element.attr('aria-checked', 'mixed');
212        }
213        element.toggleClass('md-indeterminate', isIndeterminate);
214      }
215    }
216  }
217}
218
219ngmaterial.components.checkbox = angular.module("material.components.checkbox");