Masked Input for Aurelia using jquery.mask

input-mask.ts

import {inject, customAttribute, bindable, bindingMode} from 'aurelia-framework';

@customAttribute('input-mask')
@inject(Element)
export class InputMaskCustomAttribute {
    
    @bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'onUnmaskedValueChanged'  })
    unmaskedValue: any;

    onUnmaskedValueChanged(newValue, oldValue) {
        console.log('unmaskedValue updated from inside the custom attribute');
    }

    @bindable
    mask: string;

    element: HTMLInputElement;
    
    isValidInputElement: boolean;
    // The maskedinput jquery pluggin does not allow the events that aurelia needs
    // for binding to get through.  So we will manually put them through.
    // This is the list of events we are going to look for.  "focusout" allows for the value
    // to be correct intime for "onblur".
    aureliaBindEvents: string = 'focusout';
    eventTarget: JQuery = undefined;

    constructor(element) {
        if (element instanceof HTMLInputElement) {
            this.element = element;
            this.isValidInputElement = true;
        } else
            this.isValidInputElement = false;
    }

    attached() {
        this.setupMask(this.mask);
    }

    detached() {
        this.tearDownMask();
    }

    maskChanged(newValue, oldValue) {
        this.tearDownMask();
        this.setupMask(newValue);
    }

    setupMask(mask: string) {
        if (this.isValidInputElement && mask) {
            this.eventTarget = (<any>$(this.element)).mask(this.mask, <any>{
                translation: {
                    // Used for user entered boxes
                    '1': {
                        pattern: /[1-6]/,
                        optional: false
                    },
                    // Used for system assinged boxes
                    '7': {
                        pattern: /[7-9]/,
                        optional: false
                    },
                    // Used for airbill
                    'Z': {
                        pattern: /[a-zA-Z0-9]/,
                        optional: true
                    },
                },
                clearIfNotMatch: true
            });
            this.eventTarget.on(this.aureliaBindEvents, (e: any) => {
                //this.unmasked((<any>$(this.element)).cleanVal());
                this.unmaskedValue = (<any>$(this.element)).cleanVal()
                this.fireEvent(e.target, 'input');
            });

        }
    }

    tearDownMask() {
        if (this.isValidInputElement) {
            if (this.eventTarget) {
                this.eventTarget.off(this.aureliaBindEvents);
            }

            (<any>$(this.element)).unmask();
        }
    }

    createEvent(name: string) {
        let event = document.createEvent('Event');
        event.initEvent(name, true, true);
        return event;
    }

    fireEvent(element: HTMLElement, name: string) {
        var event = this.createEvent(name);
        element.dispatchEvent(event);
    }

}

Great work! I was able to adapt this to jquery.maskedinput.