ngx-cleave-directive
Version:
This directive integrates `cleave.js` into Angular Form.
100 lines (94 loc) • 4.69 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Optional, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import Cleave from 'cleave.js';
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']
}] } });
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