1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v0.9.0-rc1-master-3c0ce9b
  6 */
  7goog.provide('ng.material.components.textField');
  8goog.require('ng.material.core');
  9(function() {
 10'use strict';
 11
 12/**
 13 * @ngdoc module
 14 * @name material.components.textField
 15 * @description
 16 * Form
 17 */
 18ng.material.components.textField = angular.module('material.components.textField', [
 19  'material.core'
 20])
 21  .directive('mdInputGroup', mdInputGroupDirective)
 22  .directive('mdInput', mdInputDirective)
 23  .directive('mdTextFloat', mdTextFloatDirective);
 24
 25
 26function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
 27  return {
 28    restrict: 'E',
 29    replace: true,
 30    scope : {
 31      fid : '@?mdFid',
 32      label : '@?',
 33      value : '=ngModel'
 34    },
 35    compile : function(element, attr) {
 36
 37      $log.warn('<md-text-float> is deprecated. Please use `<md-input-container>` and `<input>`.' + 
 38                'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
 39
 40      if ( angular.isUndefined(attr.mdFid) ) {
 41        attr.mdFid = $mdUtil.nextUid();
 42      }
 43
 44      return {
 45        pre : function(scope, element, attrs) {
 46          var disabledParsed = $parse(attrs.ngDisabled);
 47          scope.isDisabled = function() {
 48            return disabledParsed(scope.$parent);
 49          };
 50
 51          scope.inputType = attrs.type || "text";
 52        },
 53        post: $mdTheming
 54      };
 55    },
 56    template:
 57    '<md-input-group tabindex="-1">' +
 58    ' <label for="{{fid}}" >{{label}}</label>' +
 59    ' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
 60    '</md-input-group>'
 61  };
 62}
 63mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
 64
 65function mdInputGroupDirective($log) {
 66  return {
 67    restrict: 'CE',
 68    controller: ['$element', function($element) {
 69
 70      $log.warn('<md-input-group> is deprecated. Please use `<md-input-container>` and `<input>`.' + 
 71                'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
 72      this.setFocused = function(isFocused) {
 73        $element.toggleClass('md-input-focused', !!isFocused);
 74      };
 75      this.setHasValue = function(hasValue) {
 76        $element.toggleClass('md-input-has-value', hasValue );
 77      };
 78    }]
 79  };
 80
 81}
 82mdInputGroupDirective.$inject = ["$log"];
 83
 84function mdInputDirective($mdUtil, $log) {
 85  return {
 86    restrict: 'E',
 87    replace: true,
 88    template: '<input >',
 89    require: ['^?mdInputGroup', '?ngModel'],
 90    link: function(scope, element, attr, ctrls) {
 91      if ( !ctrls[0] ) return;
 92
 93      $log.warn('<md-input> is deprecated. Please use `<md-input-container>` and `<input>`.' + 
 94                'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
 95
 96      var inputGroupCtrl = ctrls[0];
 97      var ngModelCtrl = ctrls[1];
 98
 99      scope.$watch(scope.isDisabled, function(isDisabled) {
100        element.attr('aria-disabled', !!isDisabled);
101        element.attr('tabindex', !!isDisabled);
102      });
103      element.attr('type', attr.type || element.parent().attr('type') || "text");
104
105      // When the input value changes, check if it "has" a value, and
106      // set the appropriate class on the input group
107      if (ngModelCtrl) {
108        //Add a $formatter so we don't use up the render function
109        ngModelCtrl.$formatters.push(function(value) {
110          inputGroupCtrl.setHasValue( isNotEmpty(value) );
111          return value;
112        });
113      }
114
115      element
116        .on('input', function() {
117          inputGroupCtrl.setHasValue( isNotEmpty() );
118        })
119        .on('focus', function(e) {
120          // When the input focuses, add the focused class to the group
121          inputGroupCtrl.setFocused(true);
122        })
123        .on('blur', function(e) {
124          // When the input blurs, remove the focused class from the group
125          inputGroupCtrl.setFocused(false);
126          inputGroupCtrl.setHasValue( isNotEmpty() );
127        });
128
129      scope.$on('$destroy', function() {
130        inputGroupCtrl.setFocused(false);
131        inputGroupCtrl.setHasValue(false);
132      });
133
134
135      function isNotEmpty(value) {
136        value = angular.isUndefined(value) ? element.val() : value;
137        return (angular.isDefined(value) && (value!==null) &&
138               (value.toString().trim() !== ""));
139      }
140    }
141  };
142}
143mdInputDirective.$inject = ["$mdUtil", "$log"];
144
145})();