deprecate(angular): MaskitoCVA is no longer needed (just use MaskitoDirective)

projects/angular/src/index.ts

@@ -1,4 +1,3 @@
 export * from './lib/deprecated';
-export * from './lib/maskito.cva';
 export * from './lib/maskito.directive';
 export * from './lib/maskito.pipe';

projects/angular/src/lib/deprecated.ts

@@ -1,11 +1,23 @@
-import {NgModule} from '@angular/core';
+import {Directive, Input, NgModule} from '@angular/core';
+import {MaskitoOptions} from '@maskito/core';
 
-import {MaskitoCVA} from './maskito.cva';
 import {MaskitoDirective} from './maskito.directive';
 import {MaskitoPipe} from './maskito.pipe';
 
 /**
- * @deprecated Use standalone `MaskitoDirective`, `MaskitoCVA` and `MaskitoPipe` instead.
+ * @deprecated Just use `MaskitoDirective`, `MaskitoCVA` no longer needed.
+ */
+@Directive({
+    standalone: true,
+    selector: 'input[maskito], textarea[maskito]',
+})
+export class MaskitoCVA {
+    @Input()
+    maskito?: MaskitoOptions | null;
+}
+
+/**
+ * @deprecated Use standalone `MaskitoDirective` and `MaskitoPipe` instead.
  * Learn more: https://maskito.dev/frameworks/angular
  * ___
  * TODO: Delete it in v3.0 (after Taiga UI 4.0 will be released and bumped in this repository).

projects/angular/src/lib/maskito.directive.ts

@@ -6,29 +6,49 @@ import {
     NgZone,
     OnChanges,
     OnDestroy,
+    Optional,
+    Self,
 } from '@angular/core';
+import {DefaultValueAccessor} from '@angular/forms';
 import {
     Maskito,
     MASKITO_DEFAULT_ELEMENT_PREDICATE,
     MASKITO_DEFAULT_OPTIONS,
     MaskitoElementPredicate,
     MaskitoOptions,
+    maskitoTransform,
 } from '@maskito/core';
 
 @Directive({standalone: true, selector: '[maskito]'})
 export class MaskitoDirective implements OnDestroy, OnChanges {
     private maskedElement: Maskito | null = null;
 
     @Input()
-    maskito: MaskitoOptions | null = MASKITO_DEFAULT_OPTIONS;
+    maskito: MaskitoOptions | null = null;
 
     @Input()
     maskitoElement: MaskitoElementPredicate = MASKITO_DEFAULT_ELEMENT_PREDICATE;
 
     constructor(
         @Inject(NgZone) private readonly ngZone: NgZone,
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
-    ) {}
+        @Inject(DefaultValueAccessor)
+        @Self()
+        @Optional()
+        accessor: DefaultValueAccessor | null,
+    ) {
+        if (accessor !== null) {
+            const original = accessor.writeValue.bind(accessor);
+
+            accessor.writeValue = (value: unknown) => {
+                original(maskitoTransform(String(value ?? ''), this.options));
+            };
+        }
+    }
+
+    private get options(): MaskitoOptions {
+        return this.maskito ?? MASKITO_DEFAULT_OPTIONS;
+    }
 
     async ngOnChanges(): Promise<void> {
         this.maskedElement?.destroy();
@@ -43,10 +63,7 @@ export class MaskitoDirective implements OnDestroy, OnChanges {
         }
 
         this.ngZone.runOutsideAngular(() => {
-            this.maskedElement = new Maskito(
-                predicateResult,
-                this.maskito ?? MASKITO_DEFAULT_OPTIONS,
-            );
+            this.maskedElement = new Maskito(predicateResult, this.options);
         });
     }
 

projects/angular/src/lib/maskito.spec.ts

@@ -1,13 +1,13 @@
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {MaskitoCVA, MaskitoDirective, MaskitoPipe} from '@maskito/angular';
+import {MaskitoDirective, MaskitoPipe} from '@maskito/angular';
 import {MaskitoOptions} from '@maskito/core';
 
 describe('Maskito Angular package', () => {
     @Component({
         standalone: true,
-        imports: [MaskitoDirective, MaskitoCVA, MaskitoPipe, ReactiveFormsModule],
+        imports: [MaskitoDirective, MaskitoPipe, ReactiveFormsModule],
         template: `
             <div id="pipe">{{ control.value | maskito: options }}</div>
             <input

projects/demo/src/pages/frameworks/angular/angular-doc.component.ts

@@ -7,7 +7,7 @@ import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 import {NestedDocExample1} from './examples/1-nested/component';
 import {NestedDocExample2} from './examples/2-nested/component';
-import {CvaDocExample3} from './examples/3-cva/component';
+import {ProgrammaticallyDocExample3} from './examples/3-programmatically/component';
 import {PipeDocExample4} from './examples/4-pipe/component';
 
 @Component({
@@ -21,7 +21,7 @@ import {PipeDocExample4} from './examples/4-pipe/component';
         TuiLinkModule,
         NestedDocExample1,
         NestedDocExample2,
-        CvaDocExample3,
+        ProgrammaticallyDocExample3,
         PipeDocExample4,
     ],
     templateUrl: './angular-doc.template.html',
@@ -45,9 +45,9 @@ export class AngularDocPageComponent {
         Custom: import('./examples/2-nested/template.html?raw'),
     };
 
-    readonly cvaExample: TuiDocExample = {
-        TypeScript: import('./examples/3-cva/component.ts?raw'),
-        HTML: import('./examples/3-cva/template.html?raw'),
+    readonly programmaticallyExample: TuiDocExample = {
+        TypeScript: import('./examples/3-programmatically/component.ts?raw'),
+        HTML: import('./examples/3-programmatically/template.html?raw'),
     };
 
     readonly pipeExample: TuiDocExample = {

projects/demo/src/pages/frameworks/angular/angular-doc.template.html

@@ -110,17 +110,17 @@ <h2>Nested input element</h2>
         </tui-doc-example>
 
         <tui-doc-example
-            id="cva"
-            heading="CVA"
-            [content]="cvaExample"
-            [description]="cvaDescription"
+            id="programmatically"
+            heading="Set value programmatically"
+            [content]="programmaticallyExample"
+            [description]="programmaticallyDescription"
         >
-            <ng-template #cvaDescription>
+            <ng-template #programmaticallyDescription>
                 When directly on native input/textarea tag,
-                <code>MaskitoCVA</code>
+                <code>MaskitoDirective</code>
                 formats value set programmatically with Angular forms.
             </ng-template>
-            <cva-doc-example-3></cva-doc-example-3>
+            <programmatically-doc-example-3></programmatically-doc-example-3>
         </tui-doc-example>
 
         <tui-doc-example

projects/demo/src/pages/frameworks/angular/examples/3-cva/component.ts → projects/demo/src/pages/frameworks/angular/examples/3-programmatically/component.ts

@@ -1,20 +1,16 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {MaskitoCVA, MaskitoDirective} from '@maskito/angular';
+import {MaskitoDirective} from '@maskito/angular';
 import {maskitoNumberOptionsGenerator} from '@maskito/kit';
 
 @Component({
     standalone: true,
-    selector: 'cva-doc-example-3',
-    imports: [
-        MaskitoDirective,
-        MaskitoCVA, // <--- Don't forget to import it
-        ReactiveFormsModule,
-    ],
+    selector: 'programmatically-doc-example-3',
+    imports: [MaskitoDirective, ReactiveFormsModule],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CvaDocExample3 {
+export class ProgrammaticallyDocExample3 {
     readonly control = new FormControl('');
 
     readonly maskito = maskitoNumberOptionsGenerator({precision: 2});