chore(demo): update Angular documentation page

projects/angular/src/index.ts

@@ -1,3 +1,4 @@
+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

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+
+import {MaskitoCVA} from './maskito.cva';
+import {Maskito} from './maskito.directive';
+import {MaskitoPipe} from './maskito.pipe';
+
+/**
+ * @deprecated
+ */
+@NgModule({
+    imports: [Maskito, MaskitoCVA, MaskitoPipe],
+    exports: [Maskito, MaskitoCVA, MaskitoPipe],
+})
+export class MaskitoModule {}
+
+/**
+ * @deprecated Use `Maskito` instead.
+ */
+export {Maskito as MaskitoDirective} from './maskito.directive';

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 {Maskito, MaskitoPipe} from '@maskito/angular';
+import {Maskito, MaskitoCVA, MaskitoPipe} from '@maskito/angular';
 import {MaskitoOptions} from '@maskito/core';
 
 describe('Maskito Angular package', () => {
     @Component({
         standalone: true,
-        imports: [Maskito, MaskitoPipe, ReactiveFormsModule],
+        imports: [Maskito, MaskitoCVA, MaskitoPipe, ReactiveFormsModule],
         template: `
             <div id="pipe">{{ control.value | maskito: options }}</div>
             <input

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

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

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

@@ -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 {Maskito, MaskitoCVA, MaskitoPipe} 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,25 +14,19 @@ import {PipeDocExample4} from './examples/4-pipe/component';
 @NgModule({
     imports: [
         CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
         Maskito,
         MaskitoCVA,
         MaskitoPipe,
-        TuiInputModule,
         TuiLinkModule,
         TuiNotificationModule,
-        TuiCheckboxLabeledModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(AngularDocPageComponent)),
-    ],
-    declarations: [
-        AngularDocPageComponent,
         NestedDocExample1,
         NestedDocExample2,
         CvaDocExample3,
         PipeDocExample4,
     ],
+    declarations: [AngularDocPageComponent],
     exports: [AngularDocPageComponent],
 })
 export class AngularDocPageModule {}

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

@@ -109,10 +109,15 @@ <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"
+            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>
 
@@ -138,10 +143,10 @@ <h2>Nested input element</h2>
                 <li class="tui-list__item tui-space_top-8">
                     Import
                     <code>Maskito</code>
-                    to your module
+                    to your component / module
 
                     <tui-doc-code
-                        filename="your.module.ts"
+                        filename="your.component.ts"
                         [code]="importMaskitoExample"
                     ></tui-doc-code>
                 </li>

projects/demo/src/pages/frameworks/angular/examples/1-nested/component.ts

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

projects/demo/src/pages/frameworks/angular/examples/2-nested/component.ts

@@ -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,
 })

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

@@ -1,9 +1,12 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {Maskito, MaskitoCVA} from '@maskito/angular';
 import {maskitoNumberOptionsGenerator} from '@maskito/kit';
 
 @Component({
+    standalone: true,
     selector: 'cva-doc-example-3',
+    imports: [Maskito, MaskitoCVA, ReactiveFormsModule],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

projects/demo/src/pages/frameworks/angular/examples/4-pipe/component.ts

@@ -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,
 })

projects/demo/src/pages/frameworks/angular/examples/basic-directive-approach.md

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

projects/demo/src/pages/frameworks/angular/examples/custom-input-example.md

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

projects/demo/src/pages/frameworks/angular/examples/import-maskito.md

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