@maskito/angular
Version:
The Angular-specific Maskito's library
92 lines (86 loc) • 4.99 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, NgZone, effect, model, untracked, Directive, Pipe } from '@angular/core';
import { DefaultValueAccessor } from '@angular/forms';
import { Maskito, MASKITO_DEFAULT_ELEMENT_PREDICATE, maskitoTransform, MASKITO_DEFAULT_OPTIONS } from '@maskito/core';
class MaskitoDirective {
constructor() {
this.elementRef = inject(ElementRef).nativeElement;
this.ngZone = inject(NgZone);
this.maskedElement = null;
this.initEffect = effect(async () => {
const options = this.options();
const elementPredicate = this.elementPredicate();
const { maskedElement, elementRef, ngZone } = this;
maskedElement?.destroy();
if (!options) {
return;
}
const predicateResult = await elementPredicate(elementRef);
if (this.elementPredicate() !== elementPredicate || this.options() !== options) {
// Ignore the result of the predicate if the
// maskito element (or its options) has changed before the predicate was resolved.
return;
}
ngZone.runOutsideAngular(() => {
this.maskedElement = new Maskito(predicateResult, options);
});
});
this.options = model(null, { alias: 'maskito' });
this.elementPredicate = model(MASKITO_DEFAULT_ELEMENT_PREDICATE, { alias: 'maskitoElement' });
const accessor = inject(DefaultValueAccessor, { self: true, optional: true });
if (accessor) {
const original = accessor.writeValue.bind(accessor);
accessor.writeValue = (value) => {
const options = untracked(() => this.options());
original(options ? maskitoTransform(String(value ?? ''), options) : value);
};
}
}
ngOnDestroy() {
this.maskedElement?.destroy();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskitoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: MaskitoDirective, isStandalone: true, selector: "[maskito]", inputs: { options: { classPropertyName: "options", publicName: "maskito", isSignal: true, isRequired: false, transformFunction: null }, elementPredicate: { classPropertyName: "elementPredicate", publicName: "maskitoElement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { options: "maskitoChange", elementPredicate: "maskitoElementChange" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskitoDirective, decorators: [{
type: Directive,
args: [{ selector: '[maskito]' }]
}], ctorParameters: () => [] });
class MaskitoPipe {
transform(value, maskitoOptions) {
return maskitoTransform(String(value ?? ''), maskitoOptions ?? MASKITO_DEFAULT_OPTIONS);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskitoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: MaskitoPipe, isStandalone: true, name: "maskito" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskitoPipe, decorators: [{
type: Pipe,
args: [{
name: 'maskito',
}]
}] });
class MaskitoPattern {
constructor() {
this.maskitoDirective = inject(MaskitoDirective, { self: true });
}
set maskitoPattern(pattern) {
this.maskitoDirective.options.set({
mask: typeof pattern === 'string' ? new RegExp(`^${pattern}$`) : pattern,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskitoPattern, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: MaskitoPattern, isStandalone: true, selector: "[maskitoPattern]", inputs: { maskitoPattern: "maskitoPattern" }, hostDirectives: [{ directive: MaskitoDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MaskitoPattern, decorators: [{
type: Directive,
args: [{
selector: '[maskitoPattern]',
inputs: ['maskitoPattern'],
hostDirectives: [MaskitoDirective],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MaskitoDirective, MaskitoPattern, MaskitoPipe };
//# sourceMappingURL=maskito-angular.mjs.map