2 * Angular Material Design
3 * https://github.com/angular/material
5 * v0.9.0-rc1-master-3c0ce9b
12 * @name material.components.textField
16 angular.module('material.components.textField', [
19 .directive('mdInputGroup', mdInputGroupDirective)
20 .directive('mdInput', mdInputDirective)
21 .directive('mdTextFloat', mdTextFloatDirective);
24 function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
33 compile : function(element, attr) {
35 $log.warn('<md-text-float> is deprecated. Please use `<md-input-container>` and `<input>`.' +
36 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
38 if ( angular.isUndefined(attr.mdFid) ) {
39 attr.mdFid = $mdUtil.nextUid();
43 pre : function(scope, element, attrs) {
44 var disabledParsed = $parse(attrs.ngDisabled);
45 scope.isDisabled = function() {
46 return disabledParsed(scope.$parent);
49 scope.inputType = attrs.type || "text";
55 '<md-input-group tabindex="-1">' +
56 ' <label for="{{fid}}" >{{label}}</label>' +
57 ' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
61 mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
63 function mdInputGroupDirective($log) {
66 controller: ['$element', function($element) {
68 $log.warn('<md-input-group> is deprecated. Please use `<md-input-container>` and `<input>`.' +
69 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
70 this.setFocused = function(isFocused) {
71 $element.toggleClass('md-input-focused', !!isFocused);
73 this.setHasValue = function(hasValue) {
74 $element.toggleClass('md-input-has-value', hasValue );
80 mdInputGroupDirective.$inject = ["$log"];
82 function mdInputDirective($mdUtil, $log) {
87 require: ['^?mdInputGroup', '?ngModel'],
88 link: function(scope, element, attr, ctrls) {
89 if ( !ctrls[0] ) return;
91 $log.warn('<md-input> is deprecated. Please use `<md-input-container>` and `<input>`.' +
92 'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
94 var inputGroupCtrl = ctrls[0];
95 var ngModelCtrl = ctrls[1];
97 scope.$watch(scope.isDisabled, function(isDisabled) {
98 element.attr('aria-disabled', !!isDisabled);
99 element.attr('tabindex', !!isDisabled);
101 element.attr('type', attr.type || element.parent().attr('type') || "text");
103 // When the input value changes, check if it "has" a value, and
104 // set the appropriate class on the input group
106 //Add a $formatter so we don't use up the render function
107 ngModelCtrl.$formatters.push(function(value) {
108 inputGroupCtrl.setHasValue( isNotEmpty(value) );
114 .on('input', function() {
115 inputGroupCtrl.setHasValue( isNotEmpty() );
117 .on('focus', function(e) {
118 // When the input focuses, add the focused class to the group
119 inputGroupCtrl.setFocused(true);
121 .on('blur', function(e) {
122 // When the input blurs, remove the focused class from the group
123 inputGroupCtrl.setFocused(false);
124 inputGroupCtrl.setHasValue( isNotEmpty() );
127 scope.$on('$destroy', function() {
128 inputGroupCtrl.setFocused(false);
129 inputGroupCtrl.setHasValue(false);
133 function isNotEmpty(value) {
134 value = angular.isUndefined(value) ? element.val() : value;
135 return (angular.isDefined(value) && (value!==null) &&
136 (value.toString().trim() !== ""));
141 mdInputDirective.$inject = ["$mdUtil", "$log"];