ionic-framework
Version:
The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.
183 lines (182 loc) • 7.09 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var core_1 = require('angular2/core');
var dom_1 = require('../../util/dom');
/**
* @private
*/
var TextInput = (function () {
function TextInput(type, _elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this.focusChange = new core_1.EventEmitter();
this.valueChange = new core_1.EventEmitter();
this.type = type || 'text';
}
/**
* @private
*/
TextInput.prototype.ngOnInit = function () {
if (this.ngModel) {
this.value = this.ngModel;
}
else {
this.value = this._elementRef.nativeElement.value;
}
};
/**
* @private
*/
TextInput.prototype._keyup = function (ev) {
this.valueChange.emit(ev.target.value);
};
/**
* @private
*/
TextInput.prototype._focus = function () {
this.focusChange.emit(true);
};
/**
* @private
*/
TextInput.prototype._blur = function () {
this.focusChange.emit(false);
this.hideFocus(false);
};
TextInput.prototype.labelledBy = function (val) {
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val);
};
/**
* @private
*/
TextInput.prototype.setFocus = function () {
this.element().focus();
};
/**
* @private
*/
TextInput.prototype.relocate = function (shouldRelocate, inputRelativeY) {
if (this._relocated !== shouldRelocate) {
var focusedInputEle = this.element();
if (shouldRelocate) {
var clonedInputEle = cloneInput(focusedInputEle, 'cloned-input');
focusedInputEle.classList.add('hide-focused-input');
focusedInputEle.style[dom_1.CSS.transform] = "translate3d(-9999px," + inputRelativeY + "px,0)";
focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
this.setFocus();
}
else {
focusedInputEle.classList.remove('hide-focused-input');
focusedInputEle.style[dom_1.CSS.transform] = '';
var clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-input');
if (clonedInputEle) {
clonedInputEle.parentNode.removeChild(clonedInputEle);
}
}
this._relocated = shouldRelocate;
}
};
/**
* @private
*/
TextInput.prototype.hideFocus = function (shouldHideFocus) {
var focusedInputEle = this.element();
if (shouldHideFocus) {
var clonedInputEle = cloneInput(focusedInputEle, 'cloned-hidden');
focusedInputEle.classList.add('hide-focused-input');
focusedInputEle.style[dom_1.CSS.transform] = 'translate3d(-9999px,0,0)';
focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
}
else {
focusedInputEle.classList.remove('hide-focused-input');
focusedInputEle.style[dom_1.CSS.transform] = '';
var clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-hidden');
if (clonedInputEle) {
clonedInputEle.parentNode.removeChild(clonedInputEle);
}
}
};
TextInput.prototype.hasFocus = function () {
return dom_1.hasFocus(this.element());
};
/**
* @private
*/
TextInput.prototype.addClass = function (className) {
this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
};
TextInput.prototype.hasClass = function (className) {
return this._elementRef.nativeElement.classList.contains(className);
};
/**
* @private
*/
TextInput.prototype.element = function () {
return this._elementRef.nativeElement;
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], TextInput.prototype, "ngModel", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], TextInput.prototype, "value", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], TextInput.prototype, "focusChange", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], TextInput.prototype, "valueChange", void 0);
__decorate([
core_1.HostListener('keyup', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [Object]),
__metadata('design:returntype', void 0)
], TextInput.prototype, "_keyup", null);
__decorate([
core_1.HostListener('focus'),
__metadata('design:type', Function),
__metadata('design:paramtypes', []),
__metadata('design:returntype', void 0)
], TextInput.prototype, "_focus", null);
__decorate([
core_1.HostListener('blur'),
__metadata('design:type', Function),
__metadata('design:paramtypes', []),
__metadata('design:returntype', void 0)
], TextInput.prototype, "_blur", null);
TextInput = __decorate([
core_1.Directive({
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=week],input[type=time]',
host: {
'class': 'text-input'
}
}),
__param(0, core_1.Attribute('type')),
__metadata('design:paramtypes', [String, core_1.ElementRef, core_1.Renderer])
], TextInput);
return TextInput;
})();
exports.TextInput = TextInput;
function cloneInput(srcInput, addCssClass) {
var clonedInputEle = srcInput.cloneNode(true);
clonedInputEle.classList.add(addCssClass);
clonedInputEle.classList.remove('hide-focused-input');
clonedInputEle.setAttribute('aria-hidden', true);
clonedInputEle.removeAttribute('aria-labelledby');
clonedInputEle.tabIndex = -1;
return clonedInputEle;
}