109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
import Component from './component';
|
|
|
|
/**
|
|
* Component that host an input.
|
|
*/
|
|
export default class Input extends Component {
|
|
constructor($element, $scope) {
|
|
super($element, $scope);
|
|
this.input = this.element.querySelector('input');
|
|
}
|
|
|
|
set disabled(value) {
|
|
this.input.disabled = value == true;
|
|
this.mdlUpdate();
|
|
}
|
|
|
|
get disabled() {
|
|
return this.input.disabled;
|
|
}
|
|
|
|
select() {
|
|
this.input.select();
|
|
}
|
|
|
|
focus() {
|
|
this.input.focus();
|
|
}
|
|
|
|
mdlUpdate() {
|
|
if (this.mdlElement)
|
|
this.mdlElement.updateClasses_();
|
|
}
|
|
|
|
get validationError() {
|
|
return this.input.validationMessage;
|
|
}
|
|
|
|
/**
|
|
* Validates a valid input value
|
|
*
|
|
* @return {Boolean} - True if has a valid value
|
|
*/
|
|
hasValidValue() {
|
|
return this.input.checkValidity();
|
|
}
|
|
|
|
/**
|
|
* Changes the input element
|
|
* if has a validation error
|
|
*/
|
|
validateValue() {
|
|
if (!this.hasValidValue()) {
|
|
this.hideError();
|
|
this.showError();
|
|
} else
|
|
this.hideError();
|
|
}
|
|
|
|
/**
|
|
* Shows the input validation error
|
|
*/
|
|
showError() {
|
|
const infixElement = this.element.querySelector('.infix');
|
|
const infixClassList = infixElement.classList;
|
|
|
|
const errorSpan = document.createElement('span');
|
|
errorSpan.className = 'mdl-textfield__error';
|
|
|
|
const errorText = document.createTextNode(this.validationError);
|
|
|
|
errorSpan.append(errorText);
|
|
infixElement.append(errorSpan);
|
|
|
|
infixClassList.add('validated', 'invalid');
|
|
}
|
|
|
|
/**
|
|
* Hides the input validation error
|
|
*/
|
|
hideError() {
|
|
const infixElement = this.element.querySelector('.infix');
|
|
const infixClassList = infixElement.classList;
|
|
const errorElement = this.element.querySelector('.infix span.mdl-textfield__error');
|
|
|
|
if (errorElement)
|
|
errorElement.remove();
|
|
|
|
infixClassList.remove('validated', 'invalid');
|
|
}
|
|
}
|
|
Input.$inject = ['$element', '$scope'];
|
|
|
|
export const component = {
|
|
transclude: {
|
|
leftIcons: '?tLeftIcons',
|
|
rightIcons: '?tRightIcons'
|
|
},
|
|
bindings: {
|
|
label: '@?',
|
|
disabled: '<?',
|
|
readonly: '<?',
|
|
rule: '@?',
|
|
value: '=model',
|
|
vnTabIndex: '@?',
|
|
onChange: '&',
|
|
onClear: '&'
|
|
}
|
|
};
|