@uiowa/digit-only
Version:
This package includes two Angular directives. The digitOnly directive only allows numbers in the input box when typing, pasting or drag/dropping. The mask directive checks the input pattern attribute.
68 lines • 9.76 kB
JavaScript
import { Directive, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
export class MaskDirective {
constructor(el) {
this.el = el;
this.navigationKeys = [
'Backspace',
'Delete',
'Tab',
'Escape',
'Enter',
'Home',
'End',
'ArrowLeft',
'ArrowRight',
'Clear',
'Copy',
'Paste',
];
this.regex = new RegExp('');
this.inputElement = el.nativeElement;
}
ngOnInit() {
this.regex = new RegExp(this.inputElement.pattern);
}
onKeyDown(e) {
if (this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
((e.key === 'a' || e.code === 'KeyA') && e.ctrlKey === true) || // Allow: Ctrl+A
((e.key === 'c' || e.code === 'KeyC') && e.ctrlKey === true) || // Allow: Ctrl+C
((e.key === 'v' || e.code === 'KeyV') && e.ctrlKey === true) || // Allow: Ctrl+V
((e.key === 'x' || e.code === 'KeyX') && e.ctrlKey === true) || // Allow: Ctrl+X
((e.key === 'a' || e.code === 'KeyA') && e.metaKey === true) || // Allow: Cmd+A (Mac)
((e.key === 'c' || e.code === 'KeyC') && e.metaKey === true) || // Allow: Cmd+C (Mac)
((e.key === 'v' || e.code === 'KeyV') && e.metaKey === true) || // Allow: Cmd+V (Mac)
((e.key === 'x' || e.code === 'KeyX') && e.metaKey === true) // Allow: Cmd+X (Mac)
) {
// let it happen, don't do anything
return;
}
const newValue = this.forecastValue(e.key);
if (!this.regex.test(newValue)) {
e.preventDefault();
}
}
forecastValue(key) {
const selectionStart = this.inputElement.selectionStart ?? 0;
const selectionEnd = this.inputElement.selectionEnd ?? 0;
const oldValue = this.inputElement.value;
const selection = oldValue.substring(selectionStart, selectionEnd);
return selection
? oldValue.replace(selection, key)
: oldValue.substring(0, selectionStart) +
key +
oldValue.substring(selectionStart);
}
}
MaskDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
MaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: MaskDirective, selector: "[mask]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: MaskDirective, decorators: [{
type: Directive,
args: [{
selector: '[mask]',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFzay5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aW93YS9kaWdpdC1vbmx5L3NyYy9saWIvbWFzay5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQVUsTUFBTSxlQUFlLENBQUM7O0FBSzVFLE1BQU0sT0FBTyxhQUFhO0lBa0J4QixZQUFtQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQWpCekIsbUJBQWMsR0FBRztZQUN2QixXQUFXO1lBQ1gsUUFBUTtZQUNSLEtBQUs7WUFDTCxRQUFRO1lBQ1IsT0FBTztZQUNQLE1BQU07WUFDTixLQUFLO1lBQ0wsV0FBVztZQUNYLFlBQVk7WUFDWixPQUFPO1lBQ1AsTUFBTTtZQUNOLE9BQU87U0FDUixDQUFDO1FBRUYsVUFBSyxHQUFXLElBQUksTUFBTSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBRzdCLElBQUksQ0FBQyxZQUFZLEdBQUcsRUFBRSxDQUFDLGFBQWEsQ0FBQztJQUN2QyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxNQUFNLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBR0QsU0FBUyxDQUFDLENBQWdCO1FBQ3hCLElBQ0UsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLHlEQUF5RDtZQUNwRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLGdCQUFnQjtZQUNoRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLGdCQUFnQjtZQUNoRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLGdCQUFnQjtZQUNoRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLGdCQUFnQjtZQUNoRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLHFCQUFxQjtZQUNyRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLHFCQUFxQjtZQUNyRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLHFCQUFxQjtZQUNyRixDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxDQUFDLHFCQUFxQjtVQUNsRjtZQUNBLG1DQUFtQztZQUNuQyxPQUFPO1NBQ1I7UUFFRCxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUMzQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDOUIsQ0FBQyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUVPLGFBQWEsQ0FBQyxHQUFXO1FBQy9CLE1BQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsY0FBYyxJQUFJLENBQUMsQ0FBQztRQUM3RCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksSUFBSSxDQUFDLENBQUM7UUFDekQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUM7UUFDekMsTUFBTSxTQUFTLEdBQUcsUUFBUSxDQUFDLFNBQVMsQ0FBQyxjQUFjLEVBQUUsWUFBWSxDQUFDLENBQUM7UUFDbkUsT0FBTyxTQUFTO1lBQ2QsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLEdBQUcsQ0FBQztZQUNsQyxDQUFDLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsY0FBYyxDQUFDO2dCQUNuQyxHQUFHO2dCQUNILFFBQVEsQ0FBQyxTQUFTLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDM0MsQ0FBQzs7MEdBM0RVLGFBQWE7OEZBQWIsYUFBYTsyRkFBYixhQUFhO2tCQUh6QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxRQUFRO2lCQUNuQjtpR0E0QkMsU0FBUztzQkFEUixZQUFZO3VCQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW21hc2tdJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIE1hc2tEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIHByaXZhdGUgbmF2aWdhdGlvbktleXMgPSBbXHJcbiAgICAnQmFja3NwYWNlJyxcclxuICAgICdEZWxldGUnLFxyXG4gICAgJ1RhYicsXHJcbiAgICAnRXNjYXBlJyxcclxuICAgICdFbnRlcicsXHJcbiAgICAnSG9tZScsXHJcbiAgICAnRW5kJyxcclxuICAgICdBcnJvd0xlZnQnLFxyXG4gICAgJ0Fycm93UmlnaHQnLFxyXG4gICAgJ0NsZWFyJyxcclxuICAgICdDb3B5JyxcclxuICAgICdQYXN0ZScsXHJcbiAgXTtcclxuICBpbnB1dEVsZW1lbnQ6IEhUTUxJbnB1dEVsZW1lbnQ7XHJcbiAgcmVnZXg6IFJlZ0V4cCA9IG5ldyBSZWdFeHAoJycpO1xyXG5cclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgZWw6IEVsZW1lbnRSZWYpIHtcclxuICAgIHRoaXMuaW5wdXRFbGVtZW50ID0gZWwubmF0aXZlRWxlbWVudDtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5yZWdleCA9IG5ldyBSZWdFeHAodGhpcy5pbnB1dEVsZW1lbnQucGF0dGVybik7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duJywgWyckZXZlbnQnXSlcclxuICBvbktleURvd24oZTogS2V5Ym9hcmRFdmVudCkge1xyXG4gICAgaWYgKFxyXG4gICAgICB0aGlzLm5hdmlnYXRpb25LZXlzLmluZGV4T2YoZS5rZXkpID4gLTEgfHwgLy8gQWxsb3c6IG5hdmlnYXRpb24ga2V5czogYmFja3NwYWNlLCBkZWxldGUsIGFycm93cyBldGMuXHJcbiAgICAgICgoZS5rZXkgPT09ICdhJyB8fCBlLmNvZGUgPT09ICdLZXlBJykgJiYgZS5jdHJsS2V5ID09PSB0cnVlKSB8fCAvLyBBbGxvdzogQ3RybCtBXHJcbiAgICAgICgoZS5rZXkgPT09ICdjJyB8fCBlLmNvZGUgPT09ICdLZXlDJykgJiYgZS5jdHJsS2V5ID09PSB0cnVlKSB8fCAvLyBBbGxvdzogQ3RybCtDXHJcbiAgICAgICgoZS5rZXkgPT09ICd2JyB8fCBlLmNvZGUgPT09ICdLZXlWJykgJiYgZS5jdHJsS2V5ID09PSB0cnVlKSB8fCAvLyBBbGxvdzogQ3RybCtWXHJcbiAgICAgICgoZS5rZXkgPT09ICd4JyB8fCBlLmNvZGUgPT09ICdLZXlYJykgJiYgZS5jdHJsS2V5ID09PSB0cnVlKSB8fCAvLyBBbGxvdzogQ3RybCtYXHJcbiAgICAgICgoZS5rZXkgPT09ICdhJyB8fCBlLmNvZGUgPT09ICdLZXlBJykgJiYgZS5tZXRhS2V5ID09PSB0cnVlKSB8fCAvLyBBbGxvdzogQ21kK0EgKE1hYylcclxuICAgICAgKChlLmtleSA9PT0gJ2MnIHx8IGUuY29kZSA9PT0gJ0tleUMnKSAmJiBlLm1ldGFLZXkgPT09IHRydWUpIHx8IC8vIEFsbG93OiBDbWQrQyAoTWFjKVxyXG4gICAgICAoKGUua2V5ID09PSAndicgfHwgZS5jb2RlID09PSAnS2V5VicpICYmIGUubWV0YUtleSA9PT0gdHJ1ZSkgfHwgLy8gQWxsb3c6IENtZCtWIChNYWMpXHJcbiAgICAgICgoZS5rZXkgPT09ICd4JyB8fCBlLmNvZGUgPT09ICdLZXlYJykgJiYgZS5tZXRhS2V5ID09PSB0cnVlKSAvLyBBbGxvdzogQ21kK1ggKE1hYylcclxuICAgICkge1xyXG4gICAgICAvLyBsZXQgaXQgaGFwcGVuLCBkb24ndCBkbyBhbnl0aGluZ1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgY29uc3QgbmV3VmFsdWUgPSB0aGlzLmZvcmVjYXN0VmFsdWUoZS5rZXkpO1xyXG4gICAgaWYgKCF0aGlzLnJlZ2V4LnRlc3QobmV3VmFsdWUpKSB7XHJcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgZm9yZWNhc3RWYWx1ZShrZXk6IHN0cmluZyk6IHN0cmluZyB7XHJcbiAgICBjb25zdCBzZWxlY3Rpb25TdGFydCA9IHRoaXMuaW5wdXRFbGVtZW50LnNlbGVjdGlvblN0YXJ0ID8/IDA7XHJcbiAgICBjb25zdCBzZWxlY3Rpb25FbmQgPSB0aGlzLmlucHV0RWxlbWVudC5zZWxlY3Rpb25FbmQgPz8gMDtcclxuICAgIGNvbnN0IG9sZFZhbHVlID0gdGhpcy5pbnB1dEVsZW1lbnQudmFsdWU7XHJcbiAgICBjb25zdCBzZWxlY3Rpb24gPSBvbGRWYWx1ZS5zdWJzdHJpbmcoc2VsZWN0aW9uU3RhcnQsIHNlbGVjdGlvbkVuZCk7XHJcbiAgICByZXR1cm4gc2VsZWN0aW9uXHJcbiAgICAgID8gb2xkVmFsdWUucmVwbGFjZShzZWxlY3Rpb24sIGtleSlcclxuICAgICAgOiBvbGRWYWx1ZS5zdWJzdHJpbmcoMCwgc2VsZWN0aW9uU3RhcnQpICtcclxuICAgICAgICAgIGtleSArXHJcbiAgICAgICAgICBvbGRWYWx1ZS5zdWJzdHJpbmcoc2VsZWN0aW9uU3RhcnQpO1xyXG4gIH1cclxufVxyXG4iXX0=