2 * Angular Material Design
3 * https://github.com/angular/material
5 * v0.9.0-rc1-master-3c0ce9b
7 goog.provide('ng.material.components.textField');
8 goog.require('ng.material.core');
14 * @name material.components.textField
18 ng.material.components.textField = angular.module('material.components.textField', [
21 .directive('mdInputGroup', mdInputGroupDirective)
22 .directive('mdInput', mdInputDirective)
23 .directive('mdTextFloat', mdTextFloatDirective);
26 function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
35 compile : function(element, attr) {
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');
40 if ( angular.isUndefined(attr.mdFid) ) {
41 attr.mdFid = $mdUtil.nextUid();
45 pre : function(scope, element, attrs) {
46 var disabledParsed = $parse(attrs.ngDisabled);
47 scope.isDisabled = function() {
48 return disabledParsed(scope.$parent);
51 scope.inputType = attrs.type || "text";
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>' +
63 mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
65 function mdInputGroupDirective($log) {
68 controller: ['$element', function($element) {
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);
75 this.setHasValue = function(hasValue) {
76 $element.toggleClass('md-input-has-value', hasValue );
82 mdInputGroupDirective.$inject = ["$log"];
84 function mdInputDirective($mdUtil, $log) {
89 require: ['^?mdInputGroup', '?ngModel'],
90 link: function(scope, element, attr, ctrls) {
91 if ( !ctrls[0] ) return;
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');
96 var inputGroupCtrl = ctrls[0];
97 var ngModelCtrl = ctrls[1];
99 scope.$watch(scope.isDisabled, function(isDisabled) {
100 element.attr('aria-disabled', !!isDisabled);
101 element.attr('tabindex', !!isDisabled);
103 element.attr('type', attr.type || element.parent().attr('type') || "text");
105 // When the input value changes, check if it "has" a value, and
106 // set the appropriate class on the input group
108 //Add a $formatter so we don't use up the render function
109 ngModelCtrl.$formatters.push(function(value) {
110 inputGroupCtrl.setHasValue( isNotEmpty(value) );
116 .on('input', function() {
117 inputGroupCtrl.setHasValue( isNotEmpty() );
119 .on('focus', function(e) {
120 // When the input focuses, add the focused class to the group
121 inputGroupCtrl.setFocused(true);
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() );
129 scope.$on('$destroy', function() {
130 inputGroupCtrl.setFocused(false);
131 inputGroupCtrl.setHasValue(false);
135 function isNotEmpty(value) {
136 value = angular.isUndefined(value) ? element.val() : value;
137 return (angular.isDefined(value) && (value!==null) &&
138 (value.toString().trim() !== ""));
143 mdInputDirective.$inject = ["$mdUtil", "$log"];