ng-numeric-keyboard
Version:
Number keyboard for mobile browsers For Angular
1,103 lines (1,092 loc) • 39.5 kB
JavaScript
import { EventEmitter, Component, Input, Output, forwardRef, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/keys.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ZERO = '0';
/** @type {?} */
var ONE = '1';
/** @type {?} */
var TWO = '2';
/** @type {?} */
var THREE = '3';
/** @type {?} */
var FOUR = '4';
/** @type {?} */
var FIVE = '5';
/** @type {?} */
var SIX = '6';
/** @type {?} */
var SEVEN = '7';
/** @type {?} */
var EIGHT = '8';
/** @type {?} */
var NINE = '9';
/** @type {?} */
var DOT = '.';
/** @type {?} */
var DEL = 'del';
/** @type {?} */
var ENTER = 'enter';
/** @type {?} */
var ESC = 'esc';
/** @type {?} */
var BLANK = '';
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/layouts.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var NumberLayout = [
[
{ key: ONE },
{ key: TWO },
{ key: THREE },
{ key: DEL, rowspan: 2, },
], [
{ key: FOUR },
{ key: FIVE },
{ key: SIX },
], [
{ key: SEVEN },
{ key: EIGHT },
{ key: NINE },
{ key: ENTER, rowspan: 2, },
], [
{ key: DOT },
{ key: ZERO },
{ key: ESC },
],
];
/** @type {?} */
var TelLayout = [
[
{ key: ONE },
{ key: TWO },
{ key: THREE },
], [
{ key: FOUR },
{ key: FIVE },
{ key: SIX },
], [
{ key: SEVEN },
{ key: EIGHT },
{ key: NINE },
], [
{ key: DEL },
{ key: ZERO },
{ key: ENTER },
],
];
/** @type {?} */
var PhoneLayout = [
[
{ key: ONE },
{ key: TWO },
{ key: THREE },
{ key: DEL, },
], [
{ key: FOUR },
{ key: FIVE },
{ key: SIX },
{ key: ENTER, },
], [
{ key: SEVEN },
{ key: EIGHT },
{ key: NINE },
{ key: DOT },
], [
{ key: BLANK },
{ key: ZERO },
{ key: BLANK },
{ key: ESC },
],
];
var Layouts = {
number: NumberLayout,
tel: TelLayout,
phone: PhoneLayout,
};
/**
* @fileoverview added by tsickle
* Generated from: lib/keyboard/keyboard.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var KeyboardOptions = {
layout: 'number',
entertext: 'Enter'
};
var NumericKeyboardComponent = /** @class */ (function () {
function NumericKeyboardComponent() {
this.layout = KeyboardOptions.layout;
this.entertext = KeyboardOptions.entertext;
this.press = new EventEmitter();
this.enterpress = new EventEmitter();
this.ENTER = ENTER;
this.DEL = DEL;
this.ESC = ESC;
}
/**
* @return {?}
*/
NumericKeyboardComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var options = { layout: this.layout, entertext: this.entertext };
this.init(options);
};
/**
* @param {?} event
* @param {?=} payload
* @return {?}
*/
NumericKeyboardComponent.prototype.dispatch = /**
* @param {?} event
* @param {?=} payload
* @return {?}
*/
function (event, payload) {
switch (event) {
case 'press':
this.press.emit(payload);
break;
case 'enterpress':
this.enterpress.emit();
break;
}
};
/**
* @param {?} key
* @return {?}
*/
NumericKeyboardComponent.prototype.onTouchend = /**
* @param {?} key
* @return {?}
*/
function (key) {
this.dispatch('press', key);
if (key === ENTER) {
this.dispatch('enterpress');
}
};
/**
* @private
* @param {?} options
* @return {?}
*/
NumericKeyboardComponent.prototype.init = /**
* @private
* @param {?} options
* @return {?}
*/
function (options) {
var layout = options.layout;
/** @type {?} */
var resolvedLayout;
if (typeof layout === 'string') {
resolvedLayout = Layouts[layout];
if (!Array.isArray(resolvedLayout)) {
throw new Error(layout + " is not a build-in layout.");
}
}
else {
resolvedLayout = layout;
if (!Array.isArray(resolvedLayout) || !resolvedLayout.every((/**
* @param {?} i
* @return {?}
*/
function (i) { return Array.isArray(i); }))) {
throw new Error("custom layout must be a two-dimensional array.");
}
}
this.kp = options;
this.ks = { resolvedLayout: resolvedLayout };
};
NumericKeyboardComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-numeric-keyboard',
template: "<table class=\"numeric-keyboard\">\n <tr *ngFor=\"let r of ks.resolvedLayout\">\n <td *ngFor=\"let c of r\"\n [attr.rowspan]=\"c.rowspan\"\n [attr.colspan]=\"c.colspan\"\n [attr.data-key]=\"c.key\"\n [attr.data-icon]=\"c.key === ENTER ? kp.entertext : c.key\"\n class=\"numeric-keyboard-key\"\n (touchend)=\"onTouchend(c.key)\"\n >\n <div *ngIf=\"c.key === DEL\" class=\"del-icon\" [ngClass]=\"c.rowspan === 2 ? 'half' : ''\"> </div>\n <div *ngIf=\"c.key === ESC\" class=\"down-icon\"> </div>\n </td>\n </tr>\n</table>\n",
styles: [".del-icon{background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.1.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg version%3D%221.1%22 id%3D%22%EB%A0%88%EC%9D%B4%EC%96%B4_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22%09 y%3D%220px%22 viewBox%3D%220 0 96 96%22 style%3D%22enable-background%3Anew 0 0 96 96%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%235D5D5D%3B%7D%09.st1%7Bfill%3A%233F3A3B%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M77.2%2C28L77.2%2C28H38.1c-1.8%2C0-3.5%2C0.7-4.8%2C1.9L16.8%2C46c-1.1%2C1.1-1.1%2C2.8-0.1%2C4c0%2C0%2C0%2C0%2C0.1%2C0.1l16.3%2C16.1%09%09c1.3%2C1.2%2C3%2C1.9%2C4.8%2C1.9h39.1c1.6%2C0%2C2.9-1.3%2C2.9-2.8l0%2C0V31C80.1%2C29.3%2C78.8%2C28%2C77.2%2C28z M67.5%2C56.6c-0.3%2C0.3-0.8%2C0.5-1.2%2C0.5%09%09c0%2C0%2C0%2C0-0.1%2C0c-0.5%2C0-0.9-0.2-1.3-0.6l-6.2-6.2l-6.2%2C6.2c-0.7%2C0.7-1.8%2C0.7-2.5%2C0c-0.4-0.3-0.6-0.8-0.6-1.3c0-0.5%2C0.2-0.9%2C0.5-1.3%09%09l6.2-6.2l-6.2-6.2c-0.7-0.7-0.7-1.8%2C0-2.5c0.7-0.7%2C1.8-0.8%2C2.6-0.1l6.2%2C6.2l6.2-6.2c0.8-0.7%2C1.9-0.7%2C2.6%2C0l0%2C0l-0.4%2C0.4l0.4-0.3%09%09c0.7%2C0.7%2C0.7%2C1.9%2C0%2C2.5L61.4%2C48l6.2%2C6.2c0.4%2C0.4%2C0.6%2C0.9%2C0.6%2C1.4C68.1%2C55.8%2C67.9%2C56.3%2C67.5%2C56.6z%22%2F%3E%09%3Cpath class%3D%22st1%22 d%3D%22M67.2%2C39.6L67.2%2C39.6L67.2%2C39.6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");width:100%;height:100%;margin-left:-1px}.half{height:50%}.down-icon{background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.1.1%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3Csvg version%3D%221.1%22 id%3D%22%EB%A0%88%EC%9D%B4%EC%96%B4_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22%09 y%3D%220px%22 viewBox%3D%220 0 512 512%22 style%3D%22enable-background%3Anew 0 0 512 512%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3A%235D5D5D%3B%7D%3C%2Fstyle%3E%3Cg%3E%09%3Cpath class%3D%22st0%22 d%3D%22M255.9%2C468.6c-27.5-27.5-55.4-55.5-83.2-83.4c55.4%2C0%2C111.2%2C0%2C166.6%2C0C311.4%2C413%2C283.5%2C440.9%2C255.9%2C468.6z%22%2F%3E%09%3Cpath class%3D%22st0%22 d%3D%22M468.8%2C88.2c0-26.8-18-44.7-44.8-44.7c-55.9%2C0-111.8%2C0-167.7%2C0c-56.2%2C0-112.5%2C0-168.7%2C0%09%09c-26.2%2C0-44.3%2C18-44.3%2C44.3c-0.1%2C70-0.2%2C140-0.2%2C210.1c0%2C26.2%2C18.1%2C44.5%2C44.2%2C44.5c112.5%2C0.1%2C224.9%2C0.1%2C337.4%2C0%09%09c26.1%2C0%2C44.1-18.3%2C44.2-44.5C468.9%2C227.9%2C468.9%2C158%2C468.8%2C88.2z M362.9%2C107.8c13.8%2C0%2C27.6%2C0%2C41.8%2C0c0%2C14.3%2C0%2C28%2C0%2C42.1%09%09c-14%2C0-27.7%2C0-41.8%2C0C362.9%2C135.9%2C362.9%2C122%2C362.9%2C107.8z M299%2C107.7c13.8%2C0%2C27.5%2C0%2C41.8%2C0c0%2C14.2%2C0%2C28.1%2C0%2C42.2%09%09c-14%2C0-27.7%2C0-41.8%2C0C299%2C135.8%2C299%2C121.9%2C299%2C107.7z M235.1%2C107.7c14.1%2C0%2C27.8%2C0%2C41.8%2C0c0%2C14.1%2C0%2C28%2C0%2C42.2c-14%2C0-27.7%2C0-41.8%2C0%09%09C235.1%2C135.8%2C235.1%2C122%2C235.1%2C107.7z M235.1%2C171.7c14.1%2C0%2C27.8%2C0%2C41.8%2C0c0%2C14.1%2C0%2C28%2C0%2C42.2c-14%2C0-27.7%2C0-41.8%2C0%09%09C235.1%2C199.9%2C235.1%2C186%2C235.1%2C171.7z M107.4%2C107.7c14.1%2C0%2C27.8%2C0%2C41.8%2C0c0%2C14.1%2C0%2C28%2C0%2C42.2c-14%2C0-27.7%2C0-41.8%2C0%09%09C107.4%2C135.8%2C107.4%2C122%2C107.4%2C107.7z M149.1%2C213.9c-14%2C0-27.9%2C0-42%2C0c0-14.5%2C0-28.1%2C0-42c14%2C0%2C27.8%2C0%2C42%2C0%09%09C149.1%2C185.8%2C149.1%2C199.7%2C149.1%2C213.9z M171.1%2C107.8c13.9%2C0%2C27.7%2C0%2C41.9%2C0c0%2C13.9%2C0%2C27.8%2C0%2C42c-13.8%2C0-27.5%2C0-41.9%2C0%09%09C171.1%2C135.8%2C171.1%2C122%2C171.1%2C107.8z M171.3%2C171.8c13.7%2C0%2C27.6%2C0%2C41.8%2C0c0%2C14.2%2C0%2C28%2C0%2C42.1c-13.9%2C0-27.6%2C0-41.8%2C0%09%09C171.3%2C199.9%2C171.3%2C186.1%2C171.3%2C171.8z M340.7%2C299.3c-56.4%2C0-112.7%2C0-169.4%2C0c0-13.8%2C0-27.7%2C0-42.2c56.5%2C0%2C112.8%2C0%2C169.4%2C0%09%09C340.7%2C271.2%2C340.7%2C285.1%2C340.7%2C299.3z M340.9%2C213.8c-13.9%2C0-27.7%2C0-41.9%2C0c0-14%2C0-27.9%2C0-42c13.8%2C0%2C27.6%2C0%2C41.9%2C0%09%09C340.9%2C185.8%2C340.9%2C199.6%2C340.9%2C213.8z M404.8%2C213.8c-13.9%2C0-27.7%2C0-41.9%2C0c0-14%2C0-27.9%2C0-42c13.8%2C0%2C27.6%2C0%2C41.9%2C0%09%09C404.8%2C185.8%2C404.8%2C199.6%2C404.8%2C213.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");width:70%;height:70%;margin:auto}.numeric-keyboard{width:100%;height:100%;background:#e0e0e0;table-layout:fixed;border-collapse:separate;border-spacing:7px;font-size:2em;text-align:center}.numeric-keyboard-key{touch-action:manipulation;-webkit-transition:background .3s;transition:background .3s;color:#3b3b3b;background:#fafafa;padding:5px 0;border-radius:5px}.numeric-keyboard-key:active{background:#e1e1e1}.numeric-keyboard-key[data-key=\"\"]{pointer-events:none;background:#edeef1}.numeric-keyboard-key[data-key=esc]{background:#edeef1}.numeric-keyboard-key[data-key=enter]{color:#5695e8;background:#ededed;font-size:20px;letter-spacing:-.5px!important}.numeric-keyboard-key[data-key=\".\"],.numeric-keyboard-key[data-key=del]{background:#ededed;color:#4c4c4c}.numeric-keyboard-key[data-key=\".\"]:active,.numeric-keyboard-key[data-key=del]:active,.numeric-keyboard-key[data-key=enter]:active{background:#d5d5d5}.numeric-keyboard-key[data-icon]::before{content:attr(data-icon)}.numeric-keyboard-key[data-icon=del]::before,.numeric-keyboard-key[data-icon=esc]::before{display:block;content:\" \"}"]
}] }
];
NumericKeyboardComponent.propDecorators = {
layout: [{ type: Input }],
entertext: [{ type: Input }],
press: [{ type: Output }],
enterpress: [{ type: Output }]
};
return NumericKeyboardComponent;
}());
if (false) {
/** @type {?} */
NumericKeyboardComponent.prototype.layout;
/** @type {?} */
NumericKeyboardComponent.prototype.entertext;
/** @type {?} */
NumericKeyboardComponent.prototype.press;
/** @type {?} */
NumericKeyboardComponent.prototype.enterpress;
/** @type {?} */
NumericKeyboardComponent.prototype.kp;
/** @type {?} */
NumericKeyboardComponent.prototype.ks;
/** @type {?} */
NumericKeyboardComponent.prototype.ENTER;
/** @type {?} */
NumericKeyboardComponent.prototype.DEL;
/** @type {?} */
NumericKeyboardComponent.prototype.ESC;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/utils/utils.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
/** @type {?} */
var animate = (/**
* @param {?} iterable
* @param {?=} done
* @param {?=} frames
* @return {?}
*/
function (iterable, done, frames) {
if (done === void 0) { done = (/**
* @return {?}
*/
function () { }); }
if (frames === void 0) { frames = 60; }
/** @type {?} */
var running = true;
/** @type {?} */
var frame = 0;
/** @type {?} */
var closure = (/**
* @param {?} timestamp
* @return {?}
*/
function (timestamp) {
if (!running) {
return;
}
iterable(timestamp, ++frame, frames);
if (frame < frames) {
requestAnimationFrame(closure, 0);
}
else {
done();
}
});
requestAnimationFrame(closure, 0);
return (/**
* @return {?}
*/
function () {
running = false;
});
});
/** @type {?} */
var coerceBooleanProperty = (/**
* @param {?} value
* @return {?}
*/
function (value) {
return value != null && "" + value !== 'false';
});
/**
* @fileoverview added by tsickle
* Generated from: lib/input/input.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var RNumber = /^\d*(?:\.\d*)?$/;
/** @type {?} */
var RTel = /^\d*$/;
var ɵ0 = /**
* @return {?}
*/
function () {
/** @type {?} */
var activeInput;
return {
register: /**
* @param {?} input
* @return {?}
*/
function (input) {
this.unregister();
activeInput = input;
document.addEventListener('touchend', this.unregister, false);
},
unregister: /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!activeInput) {
return;
}
if (e && (activeInput.ks.inputElement.contains(e.target) || activeInput.ks.keyboardElement.contains(e.target))) {
return;
}
activeInput.closeKeyboard();
activeInput = null;
document.removeEventListener('touchend', this.unregister, false);
}
};
};
/** @type {?} */
var KeyboardCenter = ((ɵ0))();
/** @type {?} */
var Options = {
type: 'number',
value: '',
autofocus: false,
disabled: false,
readonly: false,
maxlength: 255,
name: '',
placeholder: '',
format: '^',
layout: 'number',
entertext: 'Enter'
};
var NumericInputComponent = /** @class */ (function () {
function NumericInputComponent(element, appRef, componentFactoryResolver, injector) {
this.element = element;
this.appRef = appRef;
this.componentFactoryResolver = componentFactoryResolver;
this.injector = injector;
this._autofocus = Options.autofocus;
this._disabled = Options.disabled;
this._readonly = Options.readonly;
this._value = Options.value;
this.activeColor = '#3B3B3B';
this.isFocus = false;
this.type = Options.type;
this.value = Options.value;
this.maxlength = Options.maxlength;
this.name = Options.name;
this.placeholder = Options.placeholder;
this.format = Options.format;
this.layout = Options.layout;
this.entertext = Options.entertext;
this.focus = new EventEmitter();
this.blur = new EventEmitter();
this.enterpress = new EventEmitter();
this.ngModelChange = new EventEmitter();
this._onChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
}
Object.defineProperty(NumericInputComponent.prototype, "autofocus", {
get: /**
* @return {?}
*/
function () { return this._autofocus; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._autofocus = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(NumericInputComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () { return this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._disabled = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(NumericInputComponent.prototype, "readonly", {
get: /**
* @return {?}
*/
function () { return this._readonly; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._readonly = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(NumericInputComponent.prototype, "ngModel", {
get: /**
* @return {?}
*/
function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.ks && this.ks.value !== value) {
/** @type {?} */
var rawValue = value.toString().split('');
/** @type {?} */
var cursorPos = rawValue.length;
this.set('rawValue', rawValue);
this.set('cursorPos', cursorPos);
}
this._value = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NumericInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var resolvedOptions = {};
for (var key in Options) {
resolvedOptions[key] = this[key];
}
this.init(resolvedOptions);
};
/**
* @return {?}
*/
NumericInputComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
KeyboardCenter.unregister(null);
};
/**
* @return {?}
*/
NumericInputComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.onMounted(this.element.nativeElement.querySelector('.numeric-input'));
};
/**
* @return {?}
*/
NumericInputComponent.prototype.ngAfterViewChecked = /**
* @return {?}
*/
function () {
this.onUpdated();
};
/**
* @param {?} index
* @return {?}
*/
NumericInputComponent.prototype.trackByIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
return index;
};
/**
* @param {?} value
* @return {?}
*/
NumericInputComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (typeof value === undefined || value === null) {
this._value = '';
}
else {
this._value = value;
}
};
/**
* @param {?} fn
* @return {?}
*/
NumericInputComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
NumericInputComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) { };
/**
* @param {?} e
* @return {?}
*/
NumericInputComponent.prototype.onFocus = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.stopPropagation();
this.openKeyboard();
/** @type {?} */
var cursorPos = +e.target.dataset.index;
this.set('cursorPos', isNaN(cursorPos) ? this.ks.rawValue.length : cursorPos);
};
/**
* @param {?} event
* @param {?=} payload
* @return {?}
*/
NumericInputComponent.prototype.dispatch = /**
* @param {?} event
* @param {?=} payload
* @return {?}
*/
function (event, payload) {
switch (event) {
case 'focus':
this.focus.emit();
break;
case 'blur':
this.blur.emit();
break;
case 'enterpress':
this.enterpress.emit();
break;
case 'input':
this.ngModelChange.emit(payload);
break;
}
};
/**
* @param {?} el
* @param {?} options
* @param {?} events
* @param {?} callback
* @return {?}
*/
NumericInputComponent.prototype.createKeyboard = /**
* @param {?} el
* @param {?} options
* @param {?} events
* @param {?} callback
* @return {?}
*/
function (el, options, events, callback) {
/** @type {?} */
var componentRef = this.componentFactoryResolver
.resolveComponentFactory(NumericKeyboardComponent)
.create(this.injector);
Object.assign(componentRef.instance, options);
componentRef.instance.ngOnInit();
for (var event_1 in events) {
componentRef.instance[event_1].subscribe(events[event_1]);
}
this.appRef.attachView(componentRef.hostView);
el.appendChild((/** @type {?} */ (((/** @type {?} */ (componentRef.hostView))).rootNodes[0])));
callback(componentRef);
};
/**
* @param {?} el
* @param {?} keyboard
* @return {?}
*/
NumericInputComponent.prototype.destroyKeyboard = /**
* @param {?} el
* @param {?} keyboard
* @return {?}
*/
function (el, keyboard) {
keyboard.destroy();
this.appRef.detachView(keyboard.hostView);
};
/**
* @private
* @param {?} options
* @return {?}
*/
NumericInputComponent.prototype.init = /**
* @private
* @param {?} options
* @return {?}
*/
function (options) {
/** @type {?} */
var formatFn = options.format;
if (typeof formatFn === 'string') {
formatFn = ((/**
* @param {?} rformat
* @return {?}
*/
function (rformat) { return ((/**
* @param {?} val
* @return {?}
*/
function (val) { return rformat.test(val); })); }))(new RegExp(options.format));
}
/** @type {?} */
var value = options.value;
/** @type {?} */
var rawValue = value.toString().split('');
/** @type {?} */
var cursorPos = rawValue.length;
this.kp = options;
this.ks = {
formatFn: formatFn,
value: value,
rawValue: rawValue,
cursorPos: cursorPos,
cursorColor: null,
cursorActive: false,
keyboard: null,
inputElement: null,
keyboardElement: null
};
};
/**
* @private
* @param {?} key
* @param {?} value
* @return {?}
*/
NumericInputComponent.prototype.set = /**
* @private
* @param {?} key
* @param {?} value
* @return {?}
*/
function (key, value) {
this.ks[key] = value;
};
/**
* @param {?} el
* @return {?}
*/
NumericInputComponent.prototype.onMounted = /**
* @param {?} el
* @return {?}
*/
function (el) {
var _this = this;
this.set('inputElement', el);
this.set('cursorColor', this.activeColor);
if (this.kp.autofocus && !this.kp.readonly && !this.kp.disabled) {
setTimeout((/**
* @return {?}
*/
function () { return _this.openKeyboard(); }), 500);
}
};
/**
* @return {?}
*/
NumericInputComponent.prototype.onUpdated = /**
* @return {?}
*/
function () {
this.moveCursor();
};
/**
* @param {?} key
* @return {?}
*/
NumericInputComponent.prototype.input = /**
* @param {?} key
* @return {?}
*/
function (key) {
var _this = this;
var _a = this.kp, type = _a.type, maxlength = _a.maxlength;
var _b = this.ks, rawValue = _b.rawValue, cursorPos = _b.cursorPos, formatFn = _b.formatFn;
/** @type {?} */
var input = (/**
* @param {?} inputKey
* @return {?}
*/
function (inputKey) {
/** @type {?} */
var isAdd = typeof inputKey !== 'undefined';
/** @type {?} */
var newRawValue = rawValue.slice();
if (isAdd) {
newRawValue.splice(cursorPos, 0, inputKey);
}
else {
newRawValue.splice(cursorPos - 1, 1);
}
/** @type {?} */
var newValue = newRawValue.join('');
if (formatFn(newValue)) {
if (type === 'number') {
if (!RNumber.test(newValue)) {
return;
}
newValue = parseFloat(newValue);
if (isNaN(newValue)) {
newValue = '';
}
}
else if (newValue.length > maxlength || type === 'tel' && !RTel.test(newValue)) {
return;
}
_this.set('value', newValue);
_this.set('rawValue', newRawValue);
_this.set('cursorPos', isAdd ? cursorPos + 1 : cursorPos - 1);
_this.dispatch('input', newValue);
}
});
switch (key) {
case BLANK:
break;
case ESC:
this.closeKeyboard();
break;
case ENTER:
this.closeKeyboard();
this.dispatch('enterpress');
break;
case DEL:
if (cursorPos > 0) {
input(undefined);
}
break;
case DOT:
case ZERO:
case ONE:
case TWO:
case THREE:
case FOUR:
case FIVE:
case SIX:
case SEVEN:
case EIGHT:
case NINE:
default:
input(key);
break;
}
};
/**
* @return {?}
*/
NumericInputComponent.prototype.moveCursor = /**
* @return {?}
*/
function () {
if (!this.ks.cursorActive) {
return;
}
/** @type {?} */
var elCursor = this.ks.inputElement.querySelector('.numeric-input-cursor');
/** @type {?} */
var elText = this.ks.inputElement.querySelector('.numeric-input-text');
/** @type {?} */
var elCharactor = elText.querySelector("span:nth-child(" + this.ks.cursorPos + ")");
if (!elCharactor) {
elCursor.style.transform = 'translateX(0)';
elText.style.transform = 'translateX(0)';
return;
}
/** @type {?} */
var cursorOffset = elCharactor.offsetLeft + elCharactor.offsetWidth;
/** @type {?} */
var maxVisibleWidth = elText.parentNode.offsetWidth;
elCursor.style.transform = "translateX(" + Math.min(maxVisibleWidth - 1, cursorOffset) + "px)";
elText.style.transform = "translateX(" + Math.min(0, maxVisibleWidth - cursorOffset) + "px)";
};
/**
* @return {?}
*/
NumericInputComponent.prototype.openKeyboard = /**
* @return {?}
*/
function () {
var _this = this;
if (this.ks.keyboard) {
return;
}
/** @type {?} */
var elContainer = document.createElement('div');
/** @type {?} */
var elShadow = document.createElement('div');
/** @type {?} */
var elKeyboard = document.createElement('div');
elContainer.className = 'numeric-keyboard-actionsheet';
elContainer.appendChild(elShadow);
elContainer.appendChild(elKeyboard);
document.body.appendChild(elContainer);
this.createKeyboard(elKeyboard, {
layout: this.kp.layout || this.kp.type,
entertext: this.kp.entertext
}, {
press: this.input.bind(this)
}, (/**
* @param {?} keyboard
* @return {?}
*/
function (keyboard) { return _this.set('keyboard', keyboard); }));
animate((/**
* @param {?} timestamp
* @param {?} frame
* @param {?} frames
* @return {?}
*/
function (timestamp, frame, frames) {
elKeyboard.style.position = 'fixed';
elKeyboard.style.bottom = '0';
elKeyboard.style.left = '0';
elKeyboard.style.transform = "translateY(" + (frames - frame) / frames * 100 + "%)";
}), (/**
* @return {?}
*/
function () { }), 10);
this.set('keyboardElement', elKeyboard);
this.set('cursorActive', true);
this.set('cursorPos', this.ks.rawValue.length);
this.isFocus = true;
this.dispatch('focus');
KeyboardCenter.register(this);
};
/**
* @return {?}
*/
NumericInputComponent.prototype.closeKeyboard = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.ks.keyboard) {
return;
}
/** @type {?} */
var keyboard = this.ks.keyboard;
/** @type {?} */
var elKeyboard = this.ks.keyboardElement;
animate((/**
* @param {?} timestamp
* @param {?} frame
* @param {?} frames
* @return {?}
*/
function (timestamp, frame, frames) {
elKeyboard.style.transform = "translateY(" + frame / frames * 100 + "%)";
}), (/**
* @return {?}
*/
function () {
setTimeout((/**
* @return {?}
*/
function () {
_this.destroyKeyboard(elKeyboard, keyboard);
document.body.removeChild(elKeyboard.parentNode);
}), 50);
}), 10);
this.set('keyboard', null);
this.set('keyboardElement', null);
this.set('cursorActive', false);
this.set('cursorPos', 0);
this.isFocus = false;
this.dispatch('blur');
KeyboardCenter.unregister(null);
};
NumericInputComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-numeric-input',
template: "<div class=\"numeric-input-container\">\n <div class=\"numeric-input\" [class.readonly]=\"kp.readonly\" [class.disabled]=\"kp.disabled\" (touchend)=\"onFocus($event)\">\n <div>\n <div class=\"numeric-input-text\">\n <span class=\"input-text\" *ngFor=\"let value of ks.rawValue; let i = index; trackBy: trackByIndex\"\n [attr.data-index]=\"i\">\n {{ value }}\n </span>\n </div>\n <div *ngIf=\"ks.rawValue.length === 0\" class=\"numeric-input-placeholder\">\n <span class=\"typo-placeholder\">\n {{ kp.placeholder }}\n </span>\n </div>\n <div *ngIf=\"ks.cursorActive\" class=\"numeric-input-cursor blinking-cursor\"\n [style.background]=\"ks.cursorColor\">\n </div>\n </div>\n </div>\n</div>\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return NumericInputComponent; })),
multi: true
}
],
styles: [".numeric-input-container{display:-webkit-box;display:flex;text-align:left}.numeric-input-container .numeric-input{display:block;background:0 0;width:100%;height:100%;padding:0;text-align:inherit}.numeric-input-container .numeric-input.disabled,.numeric-input-container .numeric-input.readonly{opacity:.5;pointer-events:none}.numeric-input-container .numeric-input>div{position:relative;overflow:hidden;height:100%}.numeric-input-container .numeric-input-placeholder{color:#757575}.numeric-input-container .numeric-input-text{width:10000%}.numeric-input-container .numeric-input-text .input-text{letter-spacing:-1.8px}.numeric-input-container .numeric-input-cursor{pointer-events:none;position:absolute;left:1px;top:1px;width:1px;height:90%;-webkit-animation:1s steps(1) infinite numeric-input-cursor;animation:1s steps(1) infinite numeric-input-cursor}.numeric-input-container .numeric-keyboard-actionsheet{position:fixed;bottom:0;left:0;width:100%;height:40%}.numeric-input-container .numeric-keyboard-actionsheet>div:first-child{height:100%}.numeric-input-container .numeric-keyboard-actionsheet>div:last-child{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translateY(100%);transform:translateY(100%);box-shadow:0 -2px 4px 0 #cfd4da}@-webkit-keyframes numeric-input-cursor{50%{background-color:transparent}}@keyframes numeric-input-cursor{50%{background-color:transparent}}"]
}] }
];
/** @nocollapse */
NumericInputComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: ApplicationRef },
{ type: ComponentFactoryResolver },
{ type: Injector }
]; };
NumericInputComponent.propDecorators = {
activeColor: [{ type: Input }],
autofocus: [{ type: Input }],
disabled: [{ type: Input }],
readonly: [{ type: Input }],
ngModel: [{ type: Input }],
type: [{ type: Input }],
value: [{ type: Input }],
maxlength: [{ type: Input }],
name: [{ type: Input }],
placeholder: [{ type: Input }],
format: [{ type: Input }],
layout: [{ type: Input }],
entertext: [{ type: Input }],
focus: [{ type: Output }],
blur: [{ type: Output }],
enterpress: [{ type: Output }],
ngModelChange: [{ type: Output }]
};
return NumericInputComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype._autofocus;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype._disabled;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype._readonly;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype._value;
/** @type {?} */
NumericInputComponent.prototype.activeColor;
/** @type {?} */
NumericInputComponent.prototype.isFocus;
/** @type {?} */
NumericInputComponent.prototype.type;
/** @type {?} */
NumericInputComponent.prototype.value;
/** @type {?} */
NumericInputComponent.prototype.maxlength;
/** @type {?} */
NumericInputComponent.prototype.name;
/** @type {?} */
NumericInputComponent.prototype.placeholder;
/** @type {?} */
NumericInputComponent.prototype.format;
/** @type {?} */
NumericInputComponent.prototype.layout;
/** @type {?} */
NumericInputComponent.prototype.entertext;
/** @type {?} */
NumericInputComponent.prototype.focus;
/** @type {?} */
NumericInputComponent.prototype.blur;
/** @type {?} */
NumericInputComponent.prototype.enterpress;
/** @type {?} */
NumericInputComponent.prototype.ngModelChange;
/** @type {?} */
NumericInputComponent.prototype.kp;
/** @type {?} */
NumericInputComponent.prototype.ks;
/** @type {?} */
NumericInputComponent.prototype._onChange;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype.element;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype.appRef;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype.componentFactoryResolver;
/**
* @type {?}
* @private
*/
NumericInputComponent.prototype.injector;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/numeric-input.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NumericInputModule = /** @class */ (function () {
function NumericInputModule() {
}
NumericInputModule.decorators = [
{ type: NgModule, args: [{
exports: [
NumericInputComponent,
NumericKeyboardComponent
],
declarations: [
NumericInputComponent,
NumericKeyboardComponent
],
entryComponents: [
NumericKeyboardComponent
],
imports: [
CommonModule,
FormsModule
]
},] }
];
return NumericInputModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/ng-numeric-keyboard.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgNumericKeyboardModule = /** @class */ (function () {
function NgNumericKeyboardModule() {
}
NgNumericKeyboardModule.decorators = [
{ type: NgModule, args: [{
exports: [NumericInputModule]
},] }
];
return NgNumericKeyboardModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-numeric-keyboard.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgNumericKeyboardModule, NumericInputComponent, NumericInputModule, NumericKeyboardComponent };
//# sourceMappingURL=ng-numeric-keyboard.js.map