import ngModule from '../../module'; import Input from '../../lib/input'; import './style.scss'; export default class Textfield extends Input { constructor($element, $scope, $attrs, vnTemplate) { super($element, $scope); vnTemplate.normalizeInputAttrs($attrs); this._value = null; this.type = $attrs.type; this.showActions = false; this.hasInfo = Boolean($attrs.info); this.hasFocus = false; this.hasMouseIn = false; this.input.addEventListener('keyup', e => { if (e.defaultPrevented || e.key != 'Escape') return; this.value = this.oldValue; this.cancelled = true; e.preventDefault(); }); this.input.addEventListener('change', e => { if (this.onChange && !this.cancelled && (this.oldValue != this.value)) { this.onChange(); this.saveOldValue(); } else this.cancelled = false; }); } $postLink() { this.saveOldValue(); } saveOldValue() { this.oldValue = this.value; } set value(value) { this._value = (value === undefined || value === '') ? null : value; this.input.value = this._value; this.hasValue = this._value !== null; if (this.hasValue) this.element.classList.add('not-empty'); else this.element.classList.remove('not-empty'); } get value() { return this._value; } set type(value) { this._type = value || 'text'; } get type() { return this._type; } set vnTabIndex(value) { this.input.tabindex = value; } clear() { this.saveOldValue(); this.value = null; if (this.onClear) this.onClear(); this.input.focus(); } } Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate']; ngModule.component('vnTextfield', { template: require('./textfield.html'), transclude: { leftIcons: '?tLeftIcons', rightIcons: '?tRightIcons' }, controller: Textfield, bindings: { value: '=model', label: '@?', name: '@?', disabled: '<?', required: '@?', readonly: '<?', rule: '@?', type: '@?', vnTabIndex: '@?', onChange: '&', onClear: '&', info: '@?' } });