directive

import { Directive, ElementRef, HostListener } from '@angular/core';
import { FormatThousandsPipe,Constants } from '../';

@Directive({
    selector: '[tpo-currencyformatter]'
})

export class CurrencyFormatterDirective {

    el: HTMLInputElement;
    changedVal: string;
    DECIMAL_SEPARATOR: string;
    THOUSANDS_SEPARATOR: string;
    CURRENCY_MAXSCALELENGTH: number;
    CURRENCY_MAXDECIMALLENGTH: number;
    constructor(private elementRef: ElementRef, private _formatThousandsPipe: FormatThousandsPipe) {
        this.el = this.elementRef.nativeElement;
        this.DECIMAL_SEPARATOR = Constants.DECIMAL_SEPARATOR;
        this.THOUSANDS_SEPARATOR = Constants.THOUSANDS_SEPARATOR;
        this.CURRENCY_MAXDECIMALLENGTH = Constants.CURRENCY_MAXDECIMALLENGTH;
        this.CURRENCY_MAXSCALELENGTH = Constants.CURRENCY_MAXSCALELENGTH;
    }

    @HostListener('keyup', ['$event'])
    onKeyUp(event) {
        let currentCursorLocation: number = this.el.selectionStart;
        let charCode: number = event.which || event.keyCode;
        this.el.value = this.el.value.replace(/\s/g, '');
        if (this.el.value && this.el.value !== this.changedVal && !(charCode === 65 || charCode === 17)) {
            this.el.value = this._formatThousandsPipe.transform(this.el.value);
            // setting the new cursor location when value is changes and comma reduced or increased
            if (this.changedVal && (this.el.value.length - this.changedVal.length === 2)) {
                this.el.selectionEnd = currentCursorLocation + 1;
            }
            else if (this.changedVal && (this.changedVal.length - this.el.value.length === 2)) {
                this.el.selectionEnd = currentCursorLocation - 1;
            }
            else {
                this.el.selectionEnd = currentCursorLocation;
            }
            this.changedVal = this.el.value;
        }

    }
    @HostListener('keydown', ['$event'])
    onKeyDown(event) {
        let charCode: number = event.which || event.keyCode;
        let noOfSep: number;
        let ctrl: boolean = event.ctrlKey ? event.ctrlKey : false;
        let shift: boolean = event.shiftKey ? event.shiftKey : false;

        // restricting number if execedded max decimal and scale length
        if (((charCode > 47 && charCode < 58) || (charCode > 95 && charCode < 106))) {
            // find new cursor point after removing comma
            let value: string = event.target.value;
            let tempVal: string = value.slice(0, event.currentTarget.selectionStart);

            noOfSep = tempVal.split(this.THOUSANDS_SEPARATOR).length - 1;

            let newCursorlocation: number = event.currentTarget.selectionStart - noOfSep;
            // end

            let integer = '';
            let fraction = '';

            [integer, fraction] = (event.target.value || '').split(this.DECIMAL_SEPARATOR);
            integer = integer.replace(/\D/g, '');
            if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
                return true;
            }
            else if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd && newCursorlocation <= integer.length && integer.length >= this.CURRENCY_MAXSCALELENGTH) {
                return false;
            }
            else {
                return true;
            }

        }
        // NUMPAD DOT-110  Normal dot 190 BACKSPACE-8  ,  TAB-9, INSERT -45  ,  DEL-46  , HOME -35 END- 36 LEFT ARROW -37, RIGHT ARROW -39, CTR && 67 -COPY, CTRL &&  86 -PASTE
        else if ((charCode === 8 || charCode === 9 || charCode === 110 || charCode === 190 || charCode === 45
            || (ctrl && charCode === 67) || (ctrl && charCode === 86) || (ctrl && charCode === 65) || charCode === 46 || charCode === 32 || charCode === 35 || charCode === 36
            || charCode === 37 || charCode === 39) && !((charCode > 47 && charCode < 58) && shift)) {
            return true;
        }
        else {
            return false;
        }
    }
    @HostListener('blur', ['$event'])
    onBlur(event) {
        if (event.target.value) {
            this.el.value = this._formatThousandsPipe.transform(this.el.value, ['decimal']);
        }
    }
}