primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 21.4 kB
JavaScript
import { forwardRef, EventEmitter, ElementRef, Input, ViewChild, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomHandler } from 'primeng/dom';
import { InputTextModule } from 'primeng/inputtext';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
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 INPUTMASK_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return InputMask; }),
multi: true
};
var InputMask = /** @class */ (function () {
function InputMask(el) {
this.el = el;
this.type = 'text';
this.slotChar = '_';
this.autoClear = true;
this.characterPattern = '[A-Za-z]';
this.onComplete = new EventEmitter();
this.onFocus = new EventEmitter();
this.onBlur = new EventEmitter();
this.onInput = new EventEmitter();
this.onModelChange = function () { };
this.onModelTouched = function () { };
}
InputMask.prototype.ngOnInit = function () {
var ua = DomHandler.getUserAgent();
this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
this.initMask();
};
Object.defineProperty(InputMask.prototype, "mask", {
get: function () {
return this._mask;
},
set: function (val) {
this._mask = val;
this.initMask();
this.writeValue('');
this.onModelChange(this.value);
},
enumerable: true,
configurable: true
});
InputMask.prototype.initMask = function () {
this.tests = [];
this.partialPosition = this.mask.length;
this.len = this.mask.length;
this.firstNonMaskPos = null;
this.defs = {
'9': '[0-9]',
'a': this.characterPattern,
'*': this.characterPattern + "|[0-9]"
};
var maskTokens = this.mask.split('');
for (var i = 0; i < maskTokens.length; i++) {
var c = maskTokens[i];
if (c == '?') {
this.len--;
this.partialPosition = i;
}
else if (this.defs[c]) {
this.tests.push(new RegExp(this.defs[c]));
if (this.firstNonMaskPos === null) {
this.firstNonMaskPos = this.tests.length - 1;
}
if (i < this.partialPosition) {
this.lastRequiredNonMaskPos = this.tests.length - 1;
}
}
else {
this.tests.push(null);
}
}
this.buffer = [];
for (var i = 0; i < maskTokens.length; i++) {
var c = maskTokens[i];
if (c != '?') {
if (this.defs[c])
this.buffer.push(this.getPlaceholder(i));
else
this.buffer.push(c);
}
}
this.defaultBuffer = this.buffer.join('');
};
InputMask.prototype.writeValue = function (value) {
this.value = value;
if (this.inputViewChild && this.inputViewChild.nativeElement) {
if (this.value == undefined || this.value == null)
this.inputViewChild.nativeElement.value = '';
else
this.inputViewChild.nativeElement.value = this.value;
this.checkVal();
this.focusText = this.inputViewChild.nativeElement.value;
this.updateFilledState();
}
};
InputMask.prototype.registerOnChange = function (fn) {
this.onModelChange = fn;
};
InputMask.prototype.registerOnTouched = function (fn) {
this.onModelTouched = fn;
};
InputMask.prototype.setDisabledState = function (val) {
this.disabled = val;
};
InputMask.prototype.caret = function (first, last) {
var range, begin, end;
if (!this.inputViewChild.nativeElement.offsetParent || this.inputViewChild.nativeElement !== document.activeElement) {
return;
}
if (typeof first == 'number') {
begin = first;
end = (typeof last === 'number') ? last : begin;
if (this.inputViewChild.nativeElement.setSelectionRange) {
this.inputViewChild.nativeElement.setSelectionRange(begin, end);
}
else if (this.inputViewChild.nativeElement['createTextRange']) {
range = this.inputViewChild.nativeElement['createTextRange']();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
}
else {
if (this.inputViewChild.nativeElement.setSelectionRange) {
begin = this.inputViewChild.nativeElement.selectionStart;
end = this.inputViewChild.nativeElement.selectionEnd;
}
else if (document['selection'] && document['selection'].createRange) {
range = document['selection'].createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return { begin: begin, end: end };
}
};
InputMask.prototype.isCompleted = function () {
var completed;
for (var i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
return false;
}
}
return true;
};
InputMask.prototype.getPlaceholder = function (i) {
if (i < this.slotChar.length) {
return this.slotChar.charAt(i);
}
return this.slotChar.charAt(0);
};
InputMask.prototype.seekNext = function (pos) {
while (++pos < this.len && !this.tests[pos])
;
return pos;
};
InputMask.prototype.seekPrev = function (pos) {
while (--pos >= 0 && !this.tests[pos])
;
return pos;
};
InputMask.prototype.shiftL = function (begin, end) {
var i, j;
if (begin < 0) {
return;
}
for (i = begin, j = this.seekNext(end); i < this.len; i++) {
if (this.tests[i]) {
if (j < this.len && this.tests[i].test(this.buffer[j])) {
this.buffer[i] = this.buffer[j];
this.buffer[j] = this.getPlaceholder(j);
}
else {
break;
}
j = this.seekNext(j);
}
}
this.writeBuffer();
this.caret(Math.max(this.firstNonMaskPos, begin));
};
InputMask.prototype.shiftR = function (pos) {
var i, c, j, t;
for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
if (this.tests[i]) {
j = this.seekNext(i);
t = this.buffer[i];
this.buffer[i] = c;
if (j < this.len && this.tests[j].test(t)) {
c = t;
}
else {
break;
}
}
}
};
InputMask.prototype.handleAndroidInput = function (e) {
var _this = this;
var curVal = this.inputViewChild.nativeElement.value;
var pos = this.caret();
if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
// a deletion or backspace happened
this.checkVal(true);
while (pos.begin > 0 && !this.tests[pos.begin - 1])
pos.begin--;
if (pos.begin === 0) {
while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
pos.begin++;
}
setTimeout(function () {
_this.caret(pos.begin, pos.begin);
_this.updateModel(e);
if (_this.isCompleted()) {
_this.onComplete.emit();
}
}, 0);
}
else {
this.checkVal(true);
while (pos.begin < this.len && !this.tests[pos.begin])
pos.begin++;
setTimeout(function () {
_this.caret(pos.begin, pos.begin);
_this.updateModel(e);
if (_this.isCompleted()) {
_this.onComplete.emit();
}
}, 0);
}
};
InputMask.prototype.onInputBlur = function (e) {
this.focused = false;
this.onModelTouched();
this.checkVal();
this.updateFilledState();
this.onBlur.emit(e);
if (this.inputViewChild.nativeElement.value != this.focusText || this.inputViewChild.nativeElement.value != this.value) {
this.updateModel(e);
var event_1 = document.createEvent('HTMLEvents');
event_1.initEvent('change', true, false);
this.inputViewChild.nativeElement.dispatchEvent(event_1);
}
};
InputMask.prototype.onKeyDown = function (e) {
if (this.readonly) {
return;
}
var k = e.which || e.keyCode, pos, begin, end;
var iPhone = /iphone/i.test(DomHandler.getUserAgent());
this.oldVal = this.inputViewChild.nativeElement.value;
//backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || (iPhone && k === 127)) {
pos = this.caret();
begin = pos.begin;
end = pos.end;
if (end - begin === 0) {
begin = k !== 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
end = k === 46 ? this.seekNext(end) : end;
}
this.clearBuffer(begin, end);
this.shiftL(begin, end - 1);
this.updateModel(e);
this.onInput.emit(e);
e.preventDefault();
}
else if (k === 13) { // enter
this.onInputBlur(e);
this.updateModel(e);
}
else if (k === 27) { // escape
this.inputViewChild.nativeElement.value = this.focusText;
this.caret(0, this.checkVal());
this.updateModel(e);
e.preventDefault();
}
};
InputMask.prototype.onKeyPress = function (e) {
var _this = this;
if (this.readonly) {
return;
}
var k = e.which || e.keyCode, pos = this.caret(), p, c, next, completed;
if (e.ctrlKey || e.altKey || e.metaKey || k < 32 || (k > 34 && k < 41)) { //Ignore
return;
}
else if (k && k !== 13) {
if (pos.end - pos.begin !== 0) {
this.clearBuffer(pos.begin, pos.end);
this.shiftL(pos.begin, pos.end - 1);
}
p = this.seekNext(pos.begin - 1);
if (p < this.len) {
c = String.fromCharCode(k);
if (this.tests[p].test(c)) {
this.shiftR(p);
this.buffer[p] = c;
this.writeBuffer();
next = this.seekNext(p);
if (/android/i.test(DomHandler.getUserAgent())) {
//Path for CSP Violation on FireFox OS 1.1
var proxy = function () {
_this.caret(next);
};
setTimeout(proxy, 0);
}
else {
this.caret(next);
}
if (pos.begin <= this.lastRequiredNonMaskPos) {
completed = this.isCompleted();
}
this.onInput.emit(e);
}
}
e.preventDefault();
}
this.updateModel(e);
this.updateFilledState();
if (completed) {
this.onComplete.emit();
}
};
InputMask.prototype.clearBuffer = function (start, end) {
var i;
for (i = start; i < end && i < this.len; i++) {
if (this.tests[i]) {
this.buffer[i] = this.getPlaceholder(i);
}
}
};
InputMask.prototype.writeBuffer = function () {
this.inputViewChild.nativeElement.value = this.buffer.join('');
};
InputMask.prototype.checkVal = function (allow) {
//try to place characters where they belong
var test = this.inputViewChild.nativeElement.value, lastMatch = -1, i, c, pos;
for (i = 0, pos = 0; i < this.len; i++) {
if (this.tests[i]) {
this.buffer[i] = this.getPlaceholder(i);
while (pos++ < test.length) {
c = test.charAt(pos - 1);
if (this.tests[i].test(c)) {
this.buffer[i] = c;
lastMatch = i;
break;
}
}
if (pos > test.length) {
this.clearBuffer(i + 1, this.len);
break;
}
}
else {
if (this.buffer[i] === test.charAt(pos)) {
pos++;
}
if (i < this.partialPosition) {
lastMatch = i;
}
}
}
if (allow) {
this.writeBuffer();
}
else if (lastMatch + 1 < this.partialPosition) {
if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
if (this.inputViewChild.nativeElement.value)
this.inputViewChild.nativeElement.value = '';
this.clearBuffer(0, this.len);
}
else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
this.writeBuffer();
}
}
else {
this.writeBuffer();
this.inputViewChild.nativeElement.value = this.inputViewChild.nativeElement.value.substring(0, lastMatch + 1);
}
return (this.partialPosition ? i : this.firstNonMaskPos);
};
InputMask.prototype.onInputFocus = function (event) {
var _this = this;
if (this.readonly) {
return;
}
this.focused = true;
clearTimeout(this.caretTimeoutId);
var pos;
this.focusText = this.inputViewChild.nativeElement.value;
pos = this.checkVal();
this.caretTimeoutId = setTimeout(function () {
if (_this.inputViewChild.nativeElement !== document.activeElement) {
return;
}
_this.writeBuffer();
if (pos == _this.mask.replace("?", "").length) {
_this.caret(0, pos);
}
else {
_this.caret(pos);
}
}, 10);
this.onFocus.emit(event);
};
InputMask.prototype.onInputChange = function (event) {
if (this.androidChrome)
this.handleAndroidInput(event);
else
this.handleInputChange(event);
this.onInput.emit(event);
};
InputMask.prototype.handleInputChange = function (event) {
var _this = this;
if (this.readonly) {
return;
}
setTimeout(function () {
var pos = _this.checkVal(true);
_this.caret(pos);
_this.updateModel(event);
if (_this.isCompleted()) {
_this.onComplete.emit();
}
}, 0);
};
InputMask.prototype.getUnmaskedValue = function () {
var unmaskedBuffer = [];
for (var i = 0; i < this.buffer.length; i++) {
var c = this.buffer[i];
if (this.tests[i] && c != this.getPlaceholder(i)) {
unmaskedBuffer.push(c);
}
}
return unmaskedBuffer.join('');
};
InputMask.prototype.updateModel = function (e) {
var updatedValue = this.unmask ? this.getUnmaskedValue() : e.target.value;
if (updatedValue !== null || updatedValue !== undefined) {
this.value = updatedValue;
this.onModelChange(this.value);
}
};
InputMask.prototype.updateFilledState = function () {
this.filled = this.inputViewChild.nativeElement && this.inputViewChild.nativeElement.value != '';
};
InputMask.prototype.focus = function () {
this.inputViewChild.nativeElement.focus();
};
InputMask.prototype.ngOnDestroy = function () {
};
InputMask.ctorParameters = function () { return [
{ type: ElementRef }
]; };
__decorate([
Input()
], InputMask.prototype, "type", void 0);
__decorate([
Input()
], InputMask.prototype, "slotChar", void 0);
__decorate([
Input()
], InputMask.prototype, "autoClear", void 0);
__decorate([
Input()
], InputMask.prototype, "style", void 0);
__decorate([
Input()
], InputMask.prototype, "inputId", void 0);
__decorate([
Input()
], InputMask.prototype, "styleClass", void 0);
__decorate([
Input()
], InputMask.prototype, "placeholder", void 0);
__decorate([
Input()
], InputMask.prototype, "size", void 0);
__decorate([
Input()
], InputMask.prototype, "maxlength", void 0);
__decorate([
Input()
], InputMask.prototype, "tabindex", void 0);
__decorate([
Input()
], InputMask.prototype, "title", void 0);
__decorate([
Input()
], InputMask.prototype, "ariaLabel", void 0);
__decorate([
Input()
], InputMask.prototype, "ariaRequired", void 0);
__decorate([
Input()
], InputMask.prototype, "disabled", void 0);
__decorate([
Input()
], InputMask.prototype, "readonly", void 0);
__decorate([
Input()
], InputMask.prototype, "unmask", void 0);
__decorate([
Input()
], InputMask.prototype, "name", void 0);
__decorate([
Input()
], InputMask.prototype, "required", void 0);
__decorate([
Input()
], InputMask.prototype, "characterPattern", void 0);
__decorate([
Input()
], InputMask.prototype, "autoFocus", void 0);
__decorate([
Input()
], InputMask.prototype, "autocomplete", void 0);
__decorate([
ViewChild('input')
], InputMask.prototype, "inputViewChild", void 0);
__decorate([
Output()
], InputMask.prototype, "onComplete", void 0);
__decorate([
Output()
], InputMask.prototype, "onFocus", void 0);
__decorate([
Output()
], InputMask.prototype, "onBlur", void 0);
__decorate([
Output()
], InputMask.prototype, "onInput", void 0);
__decorate([
Input()
], InputMask.prototype, "mask", null);
InputMask = __decorate([
Component({
selector: 'p-inputMask',
template: "<input #input pInputText [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\" [ngStyle]=\"style\" [ngClass]=\"styleClass\" [attr.placeholder]=\"placeholder\" [attr.title]=\"title\"\n [attr.size]=\"size\" [attr.autocomplete]=\"autocomplete\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"ariaLabel\" [attr.aria-required]=\"ariaRequired\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.required]=\"required\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onKeyDown($event)\" (keypress)=\"onKeyPress($event)\" [attr.autofocus]=\"autoFocus\"\n (input)=\"onInputChange($event)\" (paste)=\"handleInputChange($event)\">",
host: {
'[class.ui-inputwrapper-filled]': 'filled',
'[class.ui-inputwrapper-focus]': 'focused'
},
providers: [INPUTMASK_VALUE_ACCESSOR],
changeDetection: ChangeDetectionStrategy.Default
})
], InputMask);
return InputMask;
}());
var InputMaskModule = /** @class */ (function () {
function InputMaskModule() {
}
InputMaskModule = __decorate([
NgModule({
imports: [CommonModule, InputTextModule],
exports: [InputMask],
declarations: [InputMask]
})
], InputMaskModule);
return InputMaskModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { INPUTMASK_VALUE_ACCESSOR, InputMask, InputMaskModule };
//# sourceMappingURL=primeng-inputmask.js.map