ngx-cleave-directive/fesm2015/ngx-cleave-directive.mjs

This directive integrates `cleave.js` into Angular Form.

import * as i0 from '@angular/core';
import { Directive, Optional, Input, NgModule } from '@angular/core';
import Cleave from 'cleave.js';
import * as i1 from '@angular/forms';

class NgxCleaveDirective {
    constructor(elementRef, ngControl) {
        var _a;
        this.elementRef = elementRef;
        this.ngControl = ngControl;
        this.rawValue = false;
        this.viewToModelUpdate = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.viewToModelUpdate;
        if (!this.ngControl) {
            throw new Error('NgxCleaveDirective: should be used with one of the following form directives — ngModel, formControl or formControlName.');
        }
    }
    set cleave(cleave) {
        this._cleave = cleave;
        this.setCleave();
    }
    get cleave() {
        return this._cleave;
    }
    ngOnInit() {
        if (this.ngControl) {
            // the parameter is not used in the patched method,
            this.ngControl.viewToModelUpdate = (_) => {
                var _a, _b, _c;
                (_a = this.viewToModelUpdate) === null || _a === void 0 ? void 0 : _a.call(this.ngControl, 
                // update model with the value got from the Cleave instance
                this.rawValue
                    ? (_b = this.cleaveInstance) === null || _b === void 0 ? void 0 : _b.getRawValue()
                    : (_c = this.cleaveInstance) === null || _c === void 0 ? void 0 : _c.getFormattedValue());
            };
        }
    }
    ngOnDestroy() {
        var _a;
        if (this.ngControl) {
            this.ngControl.viewToModelUpdate = this.viewToModelUpdate;
        }
        (_a = this.cleaveInstance) === null || _a === void 0 ? void 0 : _a.destroy();
    }
    setCleave() {
        var _a;
        (_a = this.cleaveInstance) === null || _a === void 0 ? void 0 : _a.destroy();
        this.cleaveInstance = new Cleave(this.elementRef.nativeElement, Object.assign(Object.assign({}, this.cleave), { onValueChanged: ({ target }) => {
                // trigger the update with an empty string
                this.ngControl.viewToModelUpdate('');
                if (this.cleave.onValueChanged && typeof this.cleave.onValueChanged === 'function') {
                    this.cleave.onValueChanged({ target });
                }
            } }));
        if (!this.rawValue) {
            // initially format the value, which will trigger onValueChanged to call viewToModelUpdate
            setTimeout(() => { var _a; return (_a = this.cleaveInstance) === null || _a === void 0 ? void 0 : _a.setRawValue(this.ngControl.value); }, 0);
        }
    }
}
/** @nocollapse */ /** @nocollapse */ NgxCleaveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NgxCleaveDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ /** @nocollapse */ NgxCleaveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: NgxCleaveDirective, selector: "input[cleave],textarea[cleave]", inputs: { rawValue: "rawValue", cleave: "cleave" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NgxCleaveDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[cleave],textarea[cleave]',
                }]
        }], ctorParameters: function () {
        return [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
                        type: Optional
                    }] }];
    }, propDecorators: { rawValue: [{
                type: Input,
                args: ['rawValue']
            }], cleave: [{
                type: Input,
                args: ['cleave']
            }] } });

class NgxCleaveDirectiveModule {
}
/** @nocollapse */ /** @nocollapse */ NgxCleaveDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NgxCleaveDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ /** @nocollapse */ NgxCleaveDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NgxCleaveDirectiveModule, declarations: [NgxCleaveDirective], exports: [NgxCleaveDirective] });
/** @nocollapse */ /** @nocollapse */ NgxCleaveDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NgxCleaveDirectiveModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NgxCleaveDirectiveModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [],
                    declarations: [NgxCleaveDirective],
                    exports: [NgxCleaveDirective],
                }]
        }] });

/*
 * Public API Surface of ngx-cleave-directive
 */

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

export { NgxCleaveDirective, NgxCleaveDirectiveModule };
//# sourceMappingURL=ngx-cleave-directive.mjs.map