/*!
|
|
* Angular Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v0.9.0-rc1-master-3c0ce9b
|
|
*/
|
|
goog.provide('ng.material.components.textField');
|
|
goog.require('ng.material.core');
|
|
(function() {
|
|
'use strict';
|
|
|
|
/**
|
|
* @ngdoc module
|
|
* @name material.components.textField
|
|
* @description
|
|
* Form
|
|
*/
|
|
ng.material.components.textField = angular.module('material.components.textField', [
|
|
'material.core'
|
|
])
|
|
.directive('mdInputGroup', mdInputGroupDirective)
|
|
.directive('mdInput', mdInputDirective)
|
|
.directive('mdTextFloat', mdTextFloatDirective);
|
|
|
|
|
|
function mdTextFloatDirective($mdTheming, $mdUtil, $parse, $log) {
|
|
return {
|
|
restrict: 'E',
|
|
replace: true,
|
|
scope : {
|
|
fid : '@?mdFid',
|
|
label : '@?',
|
|
value : '=ngModel'
|
|
},
|
|
compile : function(element, attr) {
|
|
|
|
$log.warn('<md-text-float> is deprecated. Please use `<md-input-container>` and `<input>`.' +
|
|
'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
|
|
|
|
if ( angular.isUndefined(attr.mdFid) ) {
|
|
attr.mdFid = $mdUtil.nextUid();
|
|
}
|
|
|
|
return {
|
|
pre : function(scope, element, attrs) {
|
|
var disabledParsed = $parse(attrs.ngDisabled);
|
|
scope.isDisabled = function() {
|
|
return disabledParsed(scope.$parent);
|
|
};
|
|
|
|
scope.inputType = attrs.type || "text";
|
|
},
|
|
post: $mdTheming
|
|
};
|
|
},
|
|
template:
|
|
'<md-input-group tabindex="-1">' +
|
|
' <label for="{{fid}}" >{{label}}</label>' +
|
|
' <md-input id="{{fid}}" ng-disabled="isDisabled()" ng-model="value" type="{{inputType}}"></md-input>' +
|
|
'</md-input-group>'
|
|
};
|
|
}
|
|
mdTextFloatDirective.$inject = ["$mdTheming", "$mdUtil", "$parse", "$log"];
|
|
|
|
function mdInputGroupDirective($log) {
|
|
return {
|
|
restrict: 'CE',
|
|
controller: ['$element', function($element) {
|
|
|
|
$log.warn('<md-input-group> is deprecated. Please use `<md-input-container>` and `<input>`.' +
|
|
'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
|
|
this.setFocused = function(isFocused) {
|
|
$element.toggleClass('md-input-focused', !!isFocused);
|
|
};
|
|
this.setHasValue = function(hasValue) {
|
|
$element.toggleClass('md-input-has-value', hasValue );
|
|
};
|
|
}]
|
|
};
|
|
|
|
}
|
|
mdInputGroupDirective.$inject = ["$log"];
|
|
|
|
function mdInputDirective($mdUtil, $log) {
|
|
return {
|
|
restrict: 'E',
|
|
replace: true,
|
|
template: '<input >',
|
|
require: ['^?mdInputGroup', '?ngModel'],
|
|
link: function(scope, element, attr, ctrls) {
|
|
if ( !ctrls[0] ) return;
|
|
|
|
$log.warn('<md-input> is deprecated. Please use `<md-input-container>` and `<input>`.' +
|
|
'More information at http://material.angularjs.org/#/api/material.components.input/directive/mdInputContainer');
|
|
|
|
var inputGroupCtrl = ctrls[0];
|
|
var ngModelCtrl = ctrls[1];
|
|
|
|
scope.$watch(scope.isDisabled, function(isDisabled) {
|
|
element.attr('aria-disabled', !!isDisabled);
|
|
element.attr('tabindex', !!isDisabled);
|
|
});
|
|
element.attr('type', attr.type || element.parent().attr('type') || "text");
|
|
|
|
// When the input value changes, check if it "has" a value, and
|
|
// set the appropriate class on the input group
|
|
if (ngModelCtrl) {
|
|
//Add a $formatter so we don't use up the render function
|
|
ngModelCtrl.$formatters.push(function(value) {
|
|
inputGroupCtrl.setHasValue( isNotEmpty(value) );
|
|
return value;
|
|
});
|
|
}
|
|
|
|
element
|
|
.on('input', function() {
|
|
inputGroupCtrl.setHasValue( isNotEmpty() );
|
|
})
|
|
.on('focus', function(e) {
|
|
// When the input focuses, add the focused class to the group
|
|
inputGroupCtrl.setFocused(true);
|
|
})
|
|
.on('blur', function(e) {
|
|
// When the input blurs, remove the focused class from the group
|
|
inputGroupCtrl.setFocused(false);
|
|
inputGroupCtrl.setHasValue( isNotEmpty() );
|
|
});
|
|
|
|
scope.$on('$destroy', function() {
|
|
inputGroupCtrl.setFocused(false);
|
|
inputGroupCtrl.setHasValue(false);
|
|
});
|
|
|
|
|
|
function isNotEmpty(value) {
|
|
value = angular.isUndefined(value) ? element.val() : value;
|
|
return (angular.isDefined(value) && (value!==null) &&
|
|
(value.toString().trim() !== ""));
|
|
}
|
|
}
|
|
};
|
|
}
|
|
mdInputDirective.$inject = ["$mdUtil", "$log"];
|
|
|
|
})();
|