ngx-cleave-directive
Version:
This directive integrates `cleave.js` into Angular Form.
75 lines • 9.43 kB
JavaScript
import { Directive, ElementRef, Input, Optional, } from '@angular/core';
import { NgControl } from '@angular/forms';
import Cleave from 'cleave.js';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class NgxCleaveDirective {
constructor(elementRef, ngControl) {
this.elementRef = elementRef;
this.ngControl = ngControl;
this.rawValue = false;
this.viewToModelUpdate = this.ngControl?.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 = (_) => {
this.viewToModelUpdate?.call(this.ngControl,
// update model with the value got from the Cleave instance
this.rawValue
? this.cleaveInstance?.getRawValue()
: this.cleaveInstance?.getFormattedValue());
};
}
}
ngOnDestroy() {
if (this.ngControl) {
this.ngControl.viewToModelUpdate = this.viewToModelUpdate;
}
this.cleaveInstance?.destroy();
}
setCleave() {
this.cleaveInstance?.destroy();
this.cleaveInstance = new Cleave(this.elementRef.nativeElement, {
...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(() => this.cleaveInstance?.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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNsZWF2ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY2xlYXZlLWRpcmVjdGl2ZS9zcmMvbGliL25neC1jbGVhdmUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsVUFBVSxFQUNWLEtBQUssRUFHTCxRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTNDLE9BQU8sTUFBTSxNQUFNLFdBQVcsQ0FBQzs7O0FBTS9CLE1BQU0sT0FBTyxrQkFBa0I7SUFpQjdCLFlBQ1UsVUFBc0IsRUFDVixTQUFvQjtRQURoQyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ1YsY0FBUyxHQUFULFNBQVMsQ0FBVztRQWpCdkIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQWE1QixzQkFBaUIsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLGlCQUFpQixDQUFDO1FBTTVELElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ25CLE1BQU0sSUFBSSxLQUFLLENBQ2IseUhBQXlILENBQUMsQ0FBQztTQUM5SDtJQUNILENBQUM7SUFyQkQsSUFBcUIsTUFBTSxDQUFFLE1BQXFCO1FBQ2hELElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsSUFBSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFnQkQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixtREFBbUQ7WUFDbkQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxpQkFBaUIsR0FBRyxDQUFDLENBQU0sRUFBRSxFQUFFO2dCQUM1QyxJQUFJLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUMxQixJQUFJLENBQUMsU0FBUztnQkFDZCwyREFBMkQ7Z0JBQzNELElBQUksQ0FBQyxRQUFRO29CQUNYLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLFdBQVcsRUFBRTtvQkFDcEMsQ0FBQyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsaUJBQWlCLEVBQUUsQ0FDN0MsQ0FBQztZQUNKLENBQUMsQ0FBQztTQUNIO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7U0FDM0Q7UUFFRCxJQUFJLENBQUMsY0FBYyxFQUFFLE9BQU8sRUFBRSxDQUFDO0lBRWpDLENBQUM7SUFFTyxTQUFTO1FBQ2YsSUFBSSxDQUFDLGNBQWMsRUFBRSxPQUFPLEVBQUUsQ0FBQztRQUUvQixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksTUFBTSxDQUM5QixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFDN0I7WUFDQSxHQUFHLElBQUksQ0FBQyxNQUFNO1lBQ2QsY0FBYyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBRSxFQUFFO2dCQUM3QiwwQ0FBMEM7Z0JBQzFDLElBQUksQ0FBQyxTQUFTLENBQUMsaUJBQWlCLENBQUMsRUFBRSxDQUFDLENBQUM7Z0JBRXJDLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxjQUFjLElBQUksT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLGNBQWMsS0FBSyxVQUFVLEVBQUU7b0JBQ2xGLElBQUksQ0FBQyxNQUFNLENBQUMsY0FBYyxDQUFDLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztpQkFDeEM7WUFDSCxDQUFDO1NBQ0YsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsMEZBQTBGO1lBQzFGLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1NBQzdFO0lBQ0gsQ0FBQzs7cUpBeEVVLGtCQUFrQjt5SUFBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBSDlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdDQUFnQztpQkFDM0M7OzBCQW9CSSxRQUFROzRDQWpCUSxRQUFRO3NCQUExQixLQUFLO3VCQUFDLFVBQVU7Z0JBRUksTUFBTTtzQkFBMUIsS0FBSzt1QkFBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE9wdGlvbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IENsZWF2ZSBmcm9tICdjbGVhdmUuanMnO1xuaW1wb3J0IHsgQ2xlYXZlT3B0aW9ucyB9IGZyb20gJ2NsZWF2ZS5qcy9vcHRpb25zJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnaW5wdXRbY2xlYXZlXSx0ZXh0YXJlYVtjbGVhdmVdJyxcbn0pXG5leHBvcnQgY2xhc3MgTmd4Q2xlYXZlRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gIEBJbnB1dCgncmF3VmFsdWUnKSByYXdWYWx1ZSA9IGZhbHNlO1xuXG4gIEBJbnB1dCgnY2xlYXZlJykgc2V0IGNsZWF2ZSAoY2xlYXZlOiBDbGVhdmVPcHRpb25zKSB7XG4gICAgdGhpcy5fY2xlYXZlID0gY2xlYXZlO1xuICAgIHRoaXMuc2V0Q2xlYXZlKCk7XG4gIH1cblxuICBnZXQgY2xlYXZlICgpIHtcbiAgICByZXR1cm4gdGhpcy5fY2xlYXZlO1xuICB9XG5cbiAgcHJpdmF0ZSBfY2xlYXZlITogQ2xlYXZlT3B0aW9ucztcbiAgcHJpdmF0ZSBjbGVhdmVJbnN0YW5jZT86IENsZWF2ZTtcbiAgcHJpdmF0ZSB2aWV3VG9Nb2RlbFVwZGF0ZSA9IHRoaXMubmdDb250cm9sPy52aWV3VG9Nb2RlbFVwZGF0ZTtcblxuICBjb25zdHJ1Y3RvciAoXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIEBPcHRpb25hbCgpIHByaXZhdGUgbmdDb250cm9sOiBOZ0NvbnRyb2wsXG4gICkge1xuICAgIGlmICghdGhpcy5uZ0NvbnRyb2wpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihcbiAgICAgICAgJ05neENsZWF2ZURpcmVjdGl2ZTogc2hvdWxkIGJlIHVzZWQgd2l0aCBvbmUgb2YgdGhlIGZvbGxvd2luZyBmb3JtIGRpcmVjdGl2ZXMg4oCUIG5nTW9kZWwsIGZvcm1Db250cm9sIG9yIGZvcm1Db250cm9sTmFtZS4nKTtcbiAgICB9XG4gIH1cblxuICBuZ09uSW5pdCAoKSB7XG4gICAgaWYgKHRoaXMubmdDb250cm9sKSB7XG4gICAgICAvLyB0aGUgcGFyYW1ldGVyIGlzIG5vdCB1c2VkIGluIHRoZSBwYXRjaGVkIG1ldGhvZCxcbiAgICAgIHRoaXMubmdDb250cm9sLnZpZXdUb01vZGVsVXBkYXRlID0gKF86IGFueSkgPT4ge1xuICAgICAgICB0aGlzLnZpZXdUb01vZGVsVXBkYXRlPy5jYWxsKFxuICAgICAgICAgIHRoaXMubmdDb250cm9sLFxuICAgICAgICAgIC8vIHVwZGF0ZSBtb2RlbCB3aXRoIHRoZSB2YWx1ZSBnb3QgZnJvbSB0aGUgQ2xlYXZlIGluc3RhbmNlXG4gICAgICAgICAgdGhpcy5yYXdWYWx1ZVxuICAgICAgICAgICAgPyB0aGlzLmNsZWF2ZUluc3RhbmNlPy5nZXRSYXdWYWx1ZSgpXG4gICAgICAgICAgICA6IHRoaXMuY2xlYXZlSW5zdGFuY2U/LmdldEZvcm1hdHRlZFZhbHVlKCksXG4gICAgICAgICk7XG4gICAgICB9O1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95ICgpIHtcbiAgICBpZiAodGhpcy5uZ0NvbnRyb2wpIHtcbiAgICAgIHRoaXMubmdDb250cm9sLnZpZXdUb01vZGVsVXBkYXRlID0gdGhpcy52aWV3VG9Nb2RlbFVwZGF0ZTtcbiAgICB9XG5cbiAgICB0aGlzLmNsZWF2ZUluc3RhbmNlPy5kZXN0cm95KCk7XG5cbiAgfVxuXG4gIHByaXZhdGUgc2V0Q2xlYXZlICgpIHtcbiAgICB0aGlzLmNsZWF2ZUluc3RhbmNlPy5kZXN0cm95KCk7XG5cbiAgICB0aGlzLmNsZWF2ZUluc3RhbmNlID0gbmV3IENsZWF2ZShcbiAgICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LFxuICAgICAge1xuICAgICAgLi4udGhpcy5jbGVhdmUsXG4gICAgICBvblZhbHVlQ2hhbmdlZDogKHsgdGFyZ2V0IH0pID0+IHtcbiAgICAgICAgLy8gdHJpZ2dlciB0aGUgdXBkYXRlIHdpdGggYW4gZW1wdHkgc3RyaW5nXG4gICAgICAgIHRoaXMubmdDb250cm9sLnZpZXdUb01vZGVsVXBkYXRlKCcnKTtcblxuICAgICAgICBpZiAodGhpcy5jbGVhdmUub25WYWx1ZUNoYW5nZWQgJiYgdHlwZW9mIHRoaXMuY2xlYXZlLm9uVmFsdWVDaGFuZ2VkID09PSAnZnVuY3Rpb24nKSB7XG4gICAgICAgICAgdGhpcy5jbGVhdmUub25WYWx1ZUNoYW5nZWQoeyB0YXJnZXQgfSk7XG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgfSk7XG5cbiAgICBpZiAoIXRoaXMucmF3VmFsdWUpIHtcbiAgICAgIC8vIGluaXRpYWxseSBmb3JtYXQgdGhlIHZhbHVlLCB3aGljaCB3aWxsIHRyaWdnZXIgb25WYWx1ZUNoYW5nZWQgdG8gY2FsbCB2aWV3VG9Nb2RlbFVwZGF0ZVxuICAgICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLmNsZWF2ZUluc3RhbmNlPy5zZXRSYXdWYWx1ZSh0aGlzLm5nQ29udHJvbC52YWx1ZSksIDApO1xuICAgIH1cbiAgfVxuXG59XG4iXX0=