123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- /*!
- * 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"];
- })();
|