diff options
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/angular-material/modules/js/input/input.js')
| -rw-r--r-- | ecomp-portal-FE/client/bower_components/angular-material/modules/js/input/input.js | 372 |
1 files changed, 372 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/angular-material/modules/js/input/input.js b/ecomp-portal-FE/client/bower_components/angular-material/modules/js/input/input.js new file mode 100644 index 00000000..4e6666be --- /dev/null +++ b/ecomp-portal-FE/client/bower_components/angular-material/modules/js/input/input.js @@ -0,0 +1,372 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v0.9.8 + */ +(function( window, angular, undefined ){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.input + */ + +angular.module('material.components.input', [ + 'material.core' +]) + .directive('mdInputContainer', mdInputContainerDirective) + .directive('label', labelDirective) + .directive('input', inputTextareaDirective) + .directive('textarea', inputTextareaDirective) + .directive('mdMaxlength', mdMaxlengthDirective) + .directive('placeholder', placeholderDirective); + +/** + * @ngdoc directive + * @name mdInputContainer + * @module material.components.input + * + * @restrict E + * + * @description + * `<md-input-container>` is the parent of any input or textarea element. + * + * Input and textarea elements will not behave properly unless the md-input-container + * parent is provided. + * + * @param md-is-error {expression=} When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid. + * @param md-no-float {boolean=} When present, placeholders will not be converted to floating labels + * + * @usage + * <hljs lang="html"> + * + * <md-input-container> + * <label>Username</label> + * <input type="text" ng-model="user.name"> + * </md-input-container> + * + * <md-input-container> + * <label>Description</label> + * <textarea ng-model="user.description"></textarea> + * </md-input-container> + * + * </hljs> + */ +function mdInputContainerDirective($mdTheming, $parse) { + ContainerCtrl.$inject = ["$scope", "$element", "$attrs"]; + return { + restrict: 'E', + link: postLink, + controller: ContainerCtrl + }; + + function postLink(scope, element, attr) { + $mdTheming(element); + } + function ContainerCtrl($scope, $element, $attrs) { + var self = this; + + self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError); + + self.delegateClick = function() { + self.input.focus(); + }; + self.element = $element; + self.setFocused = function(isFocused) { + $element.toggleClass('md-input-focused', !!isFocused); + }; + self.setHasValue = function(hasValue) { + $element.toggleClass('md-input-has-value', !!hasValue); + }; + self.setInvalid = function(isInvalid) { + $element.toggleClass('md-input-invalid', !!isInvalid); + }; + $scope.$watch(function() { + return self.label && self.input; + }, function(hasLabelAndInput) { + if (hasLabelAndInput && !self.label.attr('for')) { + self.label.attr('for', self.input.attr('id')); + } + }); + } +} +mdInputContainerDirective.$inject = ["$mdTheming", "$parse"]; + +function labelDirective() { + return { + restrict: 'E', + require: '^?mdInputContainer', + link: function(scope, element, attr, containerCtrl) { + if (!containerCtrl || attr.mdNoFloat) return; + + containerCtrl.label = element; + scope.$on('$destroy', function() { + containerCtrl.label = null; + }); + } + }; +} + +/** + * @ngdoc directive + * @name mdInput + * @restrict E + * @module material.components.input + * + * @description + * Use the `<input>` or the `<textarea>` as a child of an `<md-input-container>`. + * + * @param {number=} md-maxlength The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input.<br/><br/> + * The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" `ng-maxlength` or maxlength attributes. + * @param {string=} aria-label Aria-label is required when no label is present. A warning message will be logged in the console if not present. + * @param {string=} placeholder An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute. + * + * @usage + * <hljs lang="html"> + * <md-input-container> + * <label>Color</label> + * <input type="text" ng-model="color" required md-maxlength="10"> + * </md-input-container> + * </hljs> + * <h3>With Errors</h3> + * + * <hljs lang="html"> + * <form name="userForm"> + * <md-input-container> + * <label>Last Name</label> + * <input name="lastName" ng-model="lastName" required md-maxlength="10" minlength="4"> + * <div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty"> + * <div ng-message="required">This is required!</div> + * <div ng-message="md-maxlength">That's too long!</div> + * <div ng-message="minlength">That's too short!</div> + * </div> + * </md-input-container> + * <md-input-container> + * <label>Biography</label> + * <textarea name="bio" ng-model="biography" required md-maxlength="150"></textarea> + * <div ng-messages="userForm.bio.$error" ng-show="userForm.bio.$dirty"> + * <div ng-message="required">This is required!</div> + * <div ng-message="md-maxlength">That's too long!</div> + * </div> + * </md-input-container> + * <md-input-container> + * <input aria-label='title' ng-model='title'> + * </md-input-container> + * <md-input-container> + * <input placeholder='title' ng-model='title'> + * </md-input-container> + * </form> + * </hljs> + * + * Requires [ngMessages](https://docs.angularjs.org/api/ngMessages). + * Behaves like the [AngularJS input directive](https://docs.angularjs.org/api/ng/directive/input). + * + */ + +function inputTextareaDirective($mdUtil, $window, $mdAria) { + return { + restrict: 'E', + require: ['^?mdInputContainer', '?ngModel'], + link: postLink + }; + + function postLink(scope, element, attr, ctrls) { + + var containerCtrl = ctrls[0]; + var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel(); + var isReadonly = angular.isDefined(attr.readonly); + + if ( !containerCtrl ) return; + if (containerCtrl.input) { + throw new Error("<md-input-container> can only have *one* <input> or <textarea> child element!"); + } + containerCtrl.input = element; + + if(!containerCtrl.label) { + $mdAria.expect(element, 'aria-label', element.attr('placeholder')); + } + + element.addClass('md-input'); + if (!element.attr('id')) { + element.attr('id', 'input_' + $mdUtil.nextUid()); + } + + if (element[0].tagName.toLowerCase() === 'textarea') { + setupTextarea(); + } + + var isErrorGetter = containerCtrl.isErrorGetter || function() { + return ngModelCtrl.$invalid && ngModelCtrl.$touched; + }; + scope.$watch(isErrorGetter, containerCtrl.setInvalid); + + ngModelCtrl.$parsers.push(ngModelPipelineCheckValue); + ngModelCtrl.$formatters.push(ngModelPipelineCheckValue); + + element.on('input', inputCheckValue); + + if (!isReadonly) { + element + .on('focus', function(ev) { + containerCtrl.setFocused(true); + }) + .on('blur', function(ev) { + containerCtrl.setFocused(false); + inputCheckValue(); + }); + + } + + //ngModelCtrl.$setTouched(); + //if( ngModelCtrl.$invalid ) containerCtrl.setInvalid(); + + scope.$on('$destroy', function() { + containerCtrl.setFocused(false); + containerCtrl.setHasValue(false); + containerCtrl.input = null; + }); + + /** + * + */ + function ngModelPipelineCheckValue(arg) { + containerCtrl.setHasValue(!ngModelCtrl.$isEmpty(arg)); + return arg; + } + function inputCheckValue() { + // An input's value counts if its length > 0, + // or if the input's validity state says it has bad input (eg string in a number input) + containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity||{}).badInput); + } + + function setupTextarea() { + var node = element[0]; + var onChangeTextarea = $mdUtil.debounce(growTextarea, 1); + + function pipelineListener(value) { + onChangeTextarea(); + return value; + } + + if (ngModelCtrl) { + ngModelCtrl.$formatters.push(pipelineListener); + ngModelCtrl.$viewChangeListeners.push(pipelineListener); + } else { + onChangeTextarea(); + } + element.on('keydown input', onChangeTextarea); + element.on('scroll', onScroll); + angular.element($window).on('resize', onChangeTextarea); + + scope.$on('$destroy', function() { + angular.element($window).off('resize', onChangeTextarea); + }); + + function growTextarea() { + node.style.height = "auto"; + node.scrollTop = 0; + var height = getHeight(); + if (height) node.style.height = height + 'px'; + } + + function getHeight () { + var line = node.scrollHeight - node.offsetHeight; + return node.offsetHeight + (line > 0 ? line : 0); + } + + function onScroll(e) { + node.scrollTop = 0; + // for smooth new line adding + var line = node.scrollHeight - node.offsetHeight; + var height = node.offsetHeight + line; + node.style.height = height + 'px'; + } + } + } +} +inputTextareaDirective.$inject = ["$mdUtil", "$window", "$mdAria"]; + +function mdMaxlengthDirective($animate) { + return { + restrict: 'A', + require: ['ngModel', '^mdInputContainer'], + link: postLink + }; + + function postLink(scope, element, attr, ctrls) { + var maxlength; + var ngModelCtrl = ctrls[0]; + var containerCtrl = ctrls[1]; + var charCountEl = angular.element('<div class="md-char-counter">'); + + // Stop model from trimming. This makes it so whitespace + // over the maxlength still counts as invalid. + attr.$set('ngTrim', 'false'); + containerCtrl.element.append(charCountEl); + + ngModelCtrl.$formatters.push(renderCharCount); + ngModelCtrl.$viewChangeListeners.push(renderCharCount); + element.on('input keydown', function() { + renderCharCount(); //make sure it's called with no args + }); + + scope.$watch(attr.mdMaxlength, function(value) { + maxlength = value; + if (angular.isNumber(value) && value > 0) { + if (!charCountEl.parent().length) { + $animate.enter(charCountEl, containerCtrl.element, + angular.element(containerCtrl.element[0].lastElementChild)); + } + renderCharCount(); + } else { + $animate.leave(charCountEl); + } + }); + + ngModelCtrl.$validators['md-maxlength'] = function(modelValue, viewValue) { + if (!angular.isNumber(maxlength) || maxlength < 0) { + return true; + } + return ( modelValue || element.val() || viewValue || '' ).length <= maxlength; + }; + + function renderCharCount(value) { + charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength ); + return value; + } + } +} +mdMaxlengthDirective.$inject = ["$animate"]; + +function placeholderDirective($log) { + var blackListElements = ['MD-SELECT']; + return { + restrict: 'A', + require: '^^?mdInputContainer', + priority: 200, + link: postLink + }; + + function postLink(scope, element, attr, inputContainer) { + if (!inputContainer) return; + if (blackListElements.indexOf(element[0].nodeName) != -1) return; + if (angular.isDefined(inputContainer.element.attr('md-no-float'))) return; + + var placeholderText = attr.placeholder; + element.removeAttr('placeholder'); + + if ( inputContainer.element.find('label').length == 0 ) { + var placeholder = '<label ng-click="delegateClick()">' + placeholderText + '</label>'; + + inputContainer.element.addClass('md-icon-float'); + inputContainer.element.prepend(placeholder); + } else { + $log.warn("The placeholder='" + placeholderText + "' will be ignored since this md-input-container has a child label element."); + } + + } +} +placeholderDirective.$inject = ["$log"]; + +})(window, window.angular);
\ No newline at end of file |