input-mask-angular/fesm2015/input-mask-angular.js

Angular directive using ts-input-mask library

import { EventEmitter, ɵɵdirectiveInject, ElementRef, Renderer2, ɵɵdefineDirective, ɵsetClassMetadata, Directive, Output, Input, ɵɵdefinePipe, Pipe, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
import { AffinityCalculation, AffinityCalculationStrategy, MaskedTextChangedListener, Mask, CaretString } from 'ts-input-mask';

class InputMaskOptions {
    constructor(affineFormats = [], customNotations = [], affinityCalculationStrategy = new AffinityCalculation(AffinityCalculationStrategy.WHOLE_STRING), autocomplete = true) {
        this.affineFormats = affineFormats;
        this.customNotations = customNotations;
        this.affinityCalculationStrategy = affinityCalculationStrategy;
        this.autocomplete = autocomplete;
    }
}

class InputMaskAngularDirective {
    constructor(elementRef, renderer) {
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.maskFilled = new EventEmitter();
        this.extractedValue = new EventEmitter();
        this.formattedText = new EventEmitter();
        this.placeholder = new EventEmitter();
        this._options = new InputMaskOptions();
    }
    set value(value) {
        this._value = value;
    }
    set primaryFormat(value) {
        this._primaryFormat = value;
    }
    set options(value) {
        this._options = value;
    }
    ngOnInit() {
        this.setupListener(this.elementRef.nativeElement);
    }
    setupListener(input) {
        if (!!this._primaryFormat) {
            const emitChanges = (maskFilled, extractedValue, formattedText) => {
                this.maskFilled.emit(maskFilled);
                this.extractedValue.emit(extractedValue);
                this.formattedText.emit(formattedText);
            };
            const listener = MaskedTextChangedListener.installOn(this._primaryFormat, input, new class {
                onTextChanged(maskFilled, extractedValue, formattedText) {
                    emitChanges(maskFilled, extractedValue, formattedText);
                }
            }(), this._options.affineFormats, this._options.customNotations, this._options.affinityCalculationStrategy, this._options.autocomplete);
            this.renderer.setProperty(input, 'placeholder', String(listener.placeholder()));
            if (!!this._value) {
                listener.setText(this._value);
            }
            this.placeholder.emit(String(listener.placeholder()));
        }
        else {
            input.addEventListener('input', () => {
                this.extractedValue.emit(input.value);
            });
        }
    }
}
/** @nocollapse */ InputMaskAngularDirective.ɵfac = function InputMaskAngularDirective_Factory(t) { return new (t || InputMaskAngularDirective)(ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(Renderer2)); };
/** @nocollapse */ InputMaskAngularDirective.ɵdir = ɵɵdefineDirective({ type: InputMaskAngularDirective, selectors: [["input", "mask", ""]], inputs: { value: "value", primaryFormat: ["mask", "primaryFormat"], options: "options" }, outputs: { maskFilled: "maskFilled", extractedValue: "extractedValue", formattedText: "formattedText", placeholder: "placeholder" } });
/*@__PURE__*/ (function () { ɵsetClassMetadata(InputMaskAngularDirective, [{
        type: Directive,
        args: [{
                selector: 'input[mask]'
            }]
    }], function () { return [{ type: ElementRef }, { type: Renderer2 }]; }, { maskFilled: [{
            type: Output
        }], extractedValue: [{
            type: Output
        }], formattedText: [{
            type: Output
        }], placeholder: [{
            type: Output
        }], value: [{
            type: Input,
            args: ['value']
        }], primaryFormat: [{
            type: Input,
            args: ['mask']
        }], options: [{
            type: Input,
            args: ['options']
        }] }); })();

class InputMaskAngularPipe {
    transform(value, primaryFormat, customNotations = []) {
        if (!!primaryFormat) {
            const mask = Mask.getOrCreate(primaryFormat, customNotations);
            const stringLength = value.length;
            const result = mask.apply(new CaretString(value, stringLength), false);
            return String(result.formattedText.string);
        }
        return value;
    }
}
/** @nocollapse */ InputMaskAngularPipe.ɵfac = function InputMaskAngularPipe_Factory(t) { return new (t || InputMaskAngularPipe)(); };
/** @nocollapse */ InputMaskAngularPipe.ɵpipe = ɵɵdefinePipe({ name: "mask", type: InputMaskAngularPipe, pure: true });
/*@__PURE__*/ (function () { ɵsetClassMetadata(InputMaskAngularPipe, [{
        type: Pipe,
        args: [{
                name: 'mask'
            }]
    }], null, null); })();

class InputMaskAngularModule {
}
/** @nocollapse */ InputMaskAngularModule.ɵmod = ɵɵdefineNgModule({ type: InputMaskAngularModule });
/** @nocollapse */ InputMaskAngularModule.ɵinj = ɵɵdefineInjector({ factory: function InputMaskAngularModule_Factory(t) { return new (t || InputMaskAngularModule)(); } });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(InputMaskAngularModule, { declarations: [InputMaskAngularDirective, InputMaskAngularPipe], exports: [InputMaskAngularDirective, InputMaskAngularPipe] }); })();
/*@__PURE__*/ (function () { ɵsetClassMetadata(InputMaskAngularModule, [{
        type: NgModule,
        args: [{
                declarations: [InputMaskAngularDirective, InputMaskAngularPipe],
                exports: [InputMaskAngularDirective, InputMaskAngularPipe]
            }]
    }], null, null); })();

/*
 * Public API Surface of input-mask-angular
 */

/**
 * Generated bundle index. Do not edit.
 */

export { InputMaskAngularDirective, InputMaskAngularModule, InputMaskAngularPipe, InputMaskOptions };
//# sourceMappingURL=input-mask-angular.js.map