taiga-family · nsbarsukov · Dec 12, 2023 · Dec 11, 2023 · Dec 12, 2023
@@ -1,4 +1,4 @@
+export * from './lib/deprecated';
 export * from './lib/maskito.cva';
 export * from './lib/maskito.directive';
-export * from './lib/maskito.module';
 export * from './lib/maskito.pipe';
@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+
+import {MaskitoCVA} from './maskito.cva';
+import {MaskitoDirective} from './maskito.directive';
+import {MaskitoPipe} from './maskito.pipe';
+
+/**
+ * @deprecated Use standalone `MaskitoDirective`, `MaskitoCVA` 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).
+ * Taiga UI (3.x.x) uses Maskito (1.x.x) <=> Maskito (2.x.x) uses Taiga UI (3.x.x) to build demo application.
+ * Also, NPM workspaces create symlinks for `@maskito/*` inside `node_modules`.
+ * All this together don't allow us to build Maskito's demo without this legacy module.
+ * ___
+ * > nx build demo
+ * ```
+ * ./node_modules/@taiga-ui/kit/fesm2015/taiga-ui-kit-components-input-date.js:465:29-42 -
+ * Error: export 'MaskitoModule' (imported as 'MaskitoModule') was not found in '@maskito/angular'
+ * (possible exports: MaskitoCVA, MaskitoDirective, MaskitoPipe)
+ * ```
+ */
+@NgModule({
+    imports: [MaskitoDirective, MaskitoCVA, MaskitoPipe],
+    exports: [MaskitoDirective, MaskitoCVA, MaskitoPipe],
+})
+export class MaskitoModule {}
@@ -3,6 +3,7 @@ import {DefaultValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core';
 
 @Directive({
+    standalone: true,
     selector: 'input[maskito], textarea[maskito]',
     providers: [
         DefaultValueAccessor,
@@ -19,7 +20,7 @@ import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskit
         '(compositionend)': '$any(this.accessor)._compositionEnd($event.target.value)',
     },
 })
-export class MaskitoCva {
+export class MaskitoCVA {
     @Input()
     maskito: MaskitoOptions | null = MASKITO_DEFAULT_OPTIONS;
 

@@ -16,9 +16,7 @@ import {
     MaskitoOptions,
 } from '@maskito/core';
 
-@Directive({
-    selector: '[maskito]',
-})
+@Directive({standalone: true, selector: '[maskito]'})
 export class MaskitoDirective implements OnDestroy, OnChanges {
     private maskedElement: Maskito | null = null;
 

@@ -2,6 +2,7 @@ import {Pipe, PipeTransform} from '@angular/core';
 import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core';
 
 @Pipe({
+    standalone: true,
     name: 'maskito',
 })
 export class MaskitoPipe implements PipeTransform {

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

@@ -1,13 +1,13 @@
 export const ANGULAR_DEFAULT_TAB = `import {Component} from '@angular/core';
-import {MaskitoModule} from '@maskito/angular';
+import {MaskitoDirective} from '@maskito/angular';
 import type {MaskitoOptions} from '@maskito/core';
 
 import mask from './mask';
 
 @Component({
   selector: 'my-app',
   standalone: true,
-  imports: [MaskitoModule],
+  imports: [MaskitoDirective],
   template: '<input [maskito]="options" />',
 })
 export class App {

@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {MaskitoModule} from '@maskito/angular';
+import {MaskitoCVA, MaskitoDirective} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiGroupModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
@@ -19,7 +19,8 @@ import {TestDocExample6} from './examples/6-multi-character-prefix/component';
     imports: [
         CommonModule,
         FormsModule,
-        MaskitoModule,
+        MaskitoDirective,
+        MaskitoCVA,
         TuiInputModule,
         TuiGroupModule,
         TuiAddonDocModule,

@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {MaskitoModule} from '@maskito/angular';
+import {MaskitoDirective} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHintModule, TuiLinkModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule, TuiTextareaModule} from '@taiga-ui/kit';
@@ -17,7 +17,7 @@ import {OverwriteModeDocPageComponent} from './overwrite-mode.component';
     imports: [
         CommonModule,
         FormsModule,
-        MaskitoModule,
+        MaskitoDirective,
         TuiAddonDocModule,
         TuiLinkModule,
         TuiInputModule,

@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {MaskitoModule} from '@maskito/angular';
+import {MaskitoDirective} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
@@ -15,7 +15,7 @@ import {PluginsDocPageComponent} from './plugins.component';
     imports: [
         CommonModule,
         FormsModule,
-        MaskitoModule,
+        MaskitoDirective,
         TuiLinkModule,
         TuiInputModule,
         TuiNotificationModule,

@@ -11,9 +11,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc';
 export class AngularDocPageComponent {
     readonly coreConceptsOverviewDocPage = `/${DemoPath.CoreConceptsOverview}`;
 
-    readonly importMaskitoModuleExample = import(
-        './examples/import-maskito-module.md?raw'
-    );
+    readonly importMaskitoExample = import('./examples/import-maskito.md?raw');
 
     readonly basicDirectiveApproach = import(
         './examples/basic-directive-approach.md?raw'

@@ -1,11 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {MaskitoModule} from '@maskito/angular';
+import {MaskitoDirective} from '@maskito/angular';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-import {TuiCheckboxLabeledModule, TuiInputModule} from '@taiga-ui/kit';
 
 import {AngularDocPageComponent} from './angular-doc.component';
 import {NestedDocExample1} from './examples/1-nested/component';
@@ -16,23 +14,17 @@ import {PipeDocExample4} from './examples/4-pipe/component';
 @NgModule({
     imports: [
         CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MaskitoModule,
-        TuiInputModule,
+        MaskitoDirective,
         TuiLinkModule,
         TuiNotificationModule,
-        TuiCheckboxLabeledModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(AngularDocPageComponent)),
-    ],
-    declarations: [
-        AngularDocPageComponent,
         NestedDocExample1,
         NestedDocExample2,
         CvaDocExample3,
         PipeDocExample4,
     ],
+    declarations: [AngularDocPageComponent],
     exports: [AngularDocPageComponent],
 })
 export class AngularDocPageModule {}
@@ -77,6 +77,7 @@ <h2>Nested input element</h2>
         </section>
 
         <tui-doc-example
+            id="custom-input"
             description="See querying nested input in action"
             heading="Custom input"
             [content]="nestedInputExample"
@@ -109,14 +110,21 @@ <h2>Nested input element</h2>
         </tui-doc-example>
 
         <tui-doc-example
-            description="When directly on native input/textarea tag, maskito directive formats value set programmatically with Angular forms."
-            heading="Form controls"
+            id="cva"
+            heading="CVA"
             [content]="cvaExample"
+            [description]="cvaDescription"
         >
+            <ng-template #cvaDescription>
+                When directly on native input/textarea tag,
+                <code>MaskitoCVA</code>
+                formats value set programmatically with Angular forms.
+            </ng-template>
             <cva-doc-example-3></cva-doc-example-3>
         </tui-doc-example>
 
         <tui-doc-example
+            id="pipe"
             description="Format arbitrary value with the same options"
             heading="Pipe"
             [content]="pipeExample"
@@ -137,12 +145,12 @@ <h2>Nested input element</h2>
                 </li>
                 <li class="tui-list__item tui-space_top-8">
                     Import
-                    <code>MaskitoModule</code>
-                    to your module
+                    <code>MaskitoDirective</code>
+                    to your component / module
 
                     <tui-doc-code
-                        filename="your.module.ts"
-                        [code]="importMaskitoModuleExample"
+                        filename="your.component.ts"
+                        [code]="importMaskitoExample"
                     ></tui-doc-code>
                 </li>
             </ol>

@@ -1,8 +1,13 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
 import {MaskitoElementPredicate, MaskitoOptions} from '@maskito/core';
+import {TuiInputModule} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'nested-doc-example-1',
+    imports: [MaskitoDirective, FormsModule, TuiInputModule],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

@@ -1,7 +1,11 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiCheckboxLabeledModule, TuiInputModule} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'nested-doc-example-2',
+    imports: [FormsModule, TuiInputModule, TuiCheckboxLabeledModule],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

@@ -1,9 +1,16 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {MaskitoCVA, 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,
+    ],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

@@ -1,8 +1,11 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MaskitoPipe} from '@maskito/angular';
 import {maskitoNumberOptionsGenerator} from '@maskito/kit';
 
 @Component({
+    standalone: true,
     selector: 'pipe-doc-example-4',
+    imports: [MaskitoPipe],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

@@ -1,12 +1,14 @@
 ```ts
 import {Component} from '@angular/core';
+import {MaskitoDirective} from '@maskito/angular';
 import {MaskitoOptions} from '@maskito/core';
 
 @Component({
   selector: 'your-component',
   template: `
     <input [maskito]="maskitoOptions" />
   `,
+  imports: [MaskitoDirective],
 })
 export class YourComponent {
   readonly maskitoOptions: MaskitoOptions = {

@@ -1,5 +1,6 @@
 ```ts
 import {Component} from '@angular/core';
+import {MaskitoDirective} from '@maskito/angular';
 import {MaskitoOptions, MaskitoElementPredicate} from '@maskito/core';
 
 @Component({
@@ -12,6 +13,7 @@ import {MaskitoOptions, MaskitoElementPredicate} from '@maskito/core';
       Using maskito with another library
     </custom-input-wrapper>
   `,
+  imports: [MaskitoDirective],
 })
 export class YourComponent {
   readonly maskitoOptions: MaskitoOptions = {

@@ -0,0 +1,13 @@
+```ts
+import {Component} from '@angular/core';
+import {MaskitoDirective} from '@maskito/angular';
+
+@Component({
+  // ...
+  imports: [
+    MaskitoDirective,
+    // ...
+  ],
+})
+export class YourComponent {}
+```