1 | import { forwardRef, EventEmitter, Directive, ElementRef, Input, Output, HostListener, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { DomHandler } from 'primeng/dom';
|
4 | import { NG_VALIDATORS } from '@angular/forms';
|
5 |
|
6 | const KEYFILTER_VALIDATOR = {
|
7 | provide: NG_VALIDATORS,
|
8 | useExisting: forwardRef(() => KeyFilter),
|
9 | multi: true
|
10 | };
|
11 | const DEFAULT_MASKS = {
|
12 | pint: /[\d]/,
|
13 | 'int': /[\d\-]/,
|
14 | pnum: /[\d\.]/,
|
15 | money: /[\d\.\s,]/,
|
16 | num: /[\d\-\.]/,
|
17 | hex: /[0-9a-f]/i,
|
18 | email: /[a-z0-9_\.\-@]/i,
|
19 | alpha: /[a-z_]/i,
|
20 | alphanum: /[a-z0-9_]/i
|
21 | };
|
22 | const KEYS = {
|
23 | TAB: 9,
|
24 | RETURN: 13,
|
25 | ESC: 27,
|
26 | BACKSPACE: 8,
|
27 | DELETE: 46
|
28 | };
|
29 | const SAFARI_KEYS = {
|
30 | 63234: 37,
|
31 | 63235: 39,
|
32 | 63232: 38,
|
33 | 63233: 40,
|
34 | 63276: 33,
|
35 | 63277: 34,
|
36 | 63272: 46,
|
37 | 63273: 36,
|
38 | 63275: 35
|
39 | };
|
40 | class KeyFilter {
|
41 | constructor(el) {
|
42 | this.el = el;
|
43 | this.ngModelChange = new EventEmitter();
|
44 | this.isAndroid = DomHandler.isAndroid();
|
45 | }
|
46 | get pattern() {
|
47 | return this._pattern;
|
48 | }
|
49 | set pattern(_pattern) {
|
50 | this._pattern = _pattern;
|
51 | this.regex = DEFAULT_MASKS[this._pattern] || this._pattern;
|
52 | }
|
53 | isNavKeyPress(e) {
|
54 | let k = e.keyCode;
|
55 | k = DomHandler.getBrowser().safari ? (SAFARI_KEYS[k] || k) : k;
|
56 | return (k >= 33 && k <= 40) || k == KEYS.RETURN || k == KEYS.TAB || k == KEYS.ESC;
|
57 | }
|
58 | ;
|
59 | isSpecialKey(e) {
|
60 | let k = e.keyCode || e.charCode;
|
61 | return k == 9 || k == 13 || k == 27 || k == 16 || k == 17 || (k >= 18 && k <= 20) ||
|
62 | (DomHandler.getBrowser().opera && !e.shiftKey && (k == 8 || (k >= 33 && k <= 35) || (k >= 36 && k <= 39) || (k >= 44 && k <= 45)));
|
63 | }
|
64 | getKey(e) {
|
65 | let k = e.keyCode || e.charCode;
|
66 | return DomHandler.getBrowser().safari ? (SAFARI_KEYS[k] || k) : k;
|
67 | }
|
68 | getCharCode(e) {
|
69 | return e.charCode || e.keyCode || e.which;
|
70 | }
|
71 | findDelta(value, prevValue) {
|
72 | let delta = '';
|
73 | for (let i = 0; i < value.length; i++) {
|
74 | let str = value.substr(0, i) + value.substr(i + value.length - prevValue.length);
|
75 | if (str === prevValue)
|
76 | delta = value.substr(i, value.length - prevValue.length);
|
77 | }
|
78 | return delta;
|
79 | }
|
80 | isValidChar(c) {
|
81 | return this.regex.test(c);
|
82 | }
|
83 | isValidString(str) {
|
84 | for (let i = 0; i < str.length; i++) {
|
85 | if (!this.isValidChar(str.substr(i, 1))) {
|
86 | return false;
|
87 | }
|
88 | }
|
89 | return true;
|
90 | }
|
91 | onInput(e) {
|
92 | if (this.isAndroid && !this.pValidateOnly) {
|
93 | let val = this.el.nativeElement.value;
|
94 | let lastVal = this.lastValue || '';
|
95 | let inserted = this.findDelta(val, lastVal);
|
96 | let removed = this.findDelta(lastVal, val);
|
97 | let pasted = inserted.length > 1 || (!inserted && !removed);
|
98 | if (pasted) {
|
99 | if (!this.isValidString(val)) {
|
100 | this.el.nativeElement.value = lastVal;
|
101 | this.ngModelChange.emit(lastVal);
|
102 | }
|
103 | }
|
104 | else if (!removed) {
|
105 | if (!this.isValidChar(inserted)) {
|
106 | this.el.nativeElement.value = lastVal;
|
107 | this.ngModelChange.emit(lastVal);
|
108 | }
|
109 | }
|
110 | val = this.el.nativeElement.value;
|
111 | if (this.isValidString(val)) {
|
112 | this.lastValue = val;
|
113 | }
|
114 | }
|
115 | }
|
116 | onKeyPress(e) {
|
117 | if (this.isAndroid || this.pValidateOnly) {
|
118 | return;
|
119 | }
|
120 | let browser = DomHandler.getBrowser();
|
121 | let k = this.getKey(e);
|
122 | if (browser.mozilla && (e.ctrlKey || e.altKey)) {
|
123 | return;
|
124 | }
|
125 | else if (k == 17 || k == 18) {
|
126 | return;
|
127 | }
|
128 | let c = this.getCharCode(e);
|
129 | let cc = String.fromCharCode(c);
|
130 | let ok = true;
|
131 | if (!browser.mozilla && (this.isSpecialKey(e) || !cc)) {
|
132 | return;
|
133 | }
|
134 | ok = this.regex.test(cc);
|
135 | if (!ok) {
|
136 | e.preventDefault();
|
137 | }
|
138 | }
|
139 | onPaste(e) {
|
140 | const clipboardData = e.clipboardData || window.clipboardData.getData('text');
|
141 | if (clipboardData) {
|
142 | const pastedText = clipboardData.getData('text');
|
143 | for (let char of pastedText.toString()) {
|
144 | if (!this.regex.test(char)) {
|
145 | e.preventDefault();
|
146 | return;
|
147 | }
|
148 | }
|
149 | }
|
150 | }
|
151 | validate(c) {
|
152 | if (this.pValidateOnly) {
|
153 | let value = this.el.nativeElement.value;
|
154 | if (value && !this.regex.test(value)) {
|
155 | return {
|
156 | validatePattern: false
|
157 | };
|
158 | }
|
159 | }
|
160 | }
|
161 | }
|
162 | KeyFilter.decorators = [
|
163 | { type: Directive, args: [{
|
164 | selector: '[pKeyFilter]',
|
165 | providers: [KEYFILTER_VALIDATOR]
|
166 | },] }
|
167 | ];
|
168 | KeyFilter.ctorParameters = () => [
|
169 | { type: ElementRef }
|
170 | ];
|
171 | KeyFilter.propDecorators = {
|
172 | pValidateOnly: [{ type: Input }],
|
173 | ngModelChange: [{ type: Output }],
|
174 | pattern: [{ type: Input, args: ['pKeyFilter',] }],
|
175 | onInput: [{ type: HostListener, args: ['input', ['$event'],] }],
|
176 | onKeyPress: [{ type: HostListener, args: ['keypress', ['$event'],] }],
|
177 | onPaste: [{ type: HostListener, args: ['paste', ['$event'],] }]
|
178 | };
|
179 | class KeyFilterModule {
|
180 | }
|
181 | KeyFilterModule.decorators = [
|
182 | { type: NgModule, args: [{
|
183 | imports: [CommonModule],
|
184 | exports: [KeyFilter],
|
185 | declarations: [KeyFilter]
|
186 | },] }
|
187 | ];
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | export { KEYFILTER_VALIDATOR, KeyFilter, KeyFilterModule };
|
194 |
|