chore(demo): use new modern Angular routing approach for documentation section Recipes

projects/demo/src/app/app.routes.ts

@@ -182,16 +182,14 @@ export const appRoutes: Routes = [
     },
     {
         path: DemoPath.Card,
-        loadChildren: () =>
-            import('../pages/recipes/card/card-doc.module').then(m => m.CardDocModule),
+        loadComponent: () => import('../pages/recipes/card/card-doc.component'),
         data: {
             title: 'Card',
         },
     },
     {
         path: DemoPath.Phone,
-        loadChildren: () =>
-            import('../pages/recipes/phone/phone-doc.module').then(m => m.PhoneDocModule),
+        loadComponent: () => import('../pages/recipes/phone/phone-doc.component'),
         data: {
             title: 'Phone',
         },
@@ -206,40 +204,29 @@ export const appRoutes: Routes = [
     },
     {
         path: DemoPath.Textarea,
-        loadChildren: () =>
-            import('../pages/recipes/textarea/textarea-doc.module').then(
-                m => m.TextareaDocModule,
-            ),
+        loadComponent: () => import('../pages/recipes/textarea/textarea-doc.component'),
         data: {
             title: 'Textarea',
         },
     },
     {
         path: DemoPath.Prefix,
-        loadChildren: () =>
-            import('../pages/recipes/prefix/prefix-doc.module').then(
-                m => m.PrefixDocModule,
-            ),
+        loadComponent: () => import('../pages/recipes/prefix/prefix-doc.component'),
         data: {
             title: 'With prefix',
         },
     },
     {
         path: DemoPath.Postfix,
-        loadChildren: () =>
-            import('../pages/recipes/postfix/postfix-doc.module').then(
-                m => m.PostfixDocModule,
-            ),
+        loadComponent: () => import('../pages/recipes/postfix/postfix-doc.component'),
         data: {
             title: 'With postfix',
         },
     },
     {
         path: DemoPath.Placeholder,
-        loadChildren: () =>
-            import('../pages/recipes/placeholder/placeholder-doc.module').then(
-                m => m.PlaceholderDocModule,
-            ),
+        loadComponent: () =>
+            import('../pages/recipes/placeholder/placeholder-doc.component'),
         data: {
             title: 'With placeholder',
         },

projects/demo/src/pages/recipes/card/card-doc.component.ts

@@ -1,25 +1,19 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocExample, TuiDocExampleModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
 
 import {CardDocExample1} from './examples/1-basic/component';
 
 @Component({
     standalone: true,
     selector: 'card-doc',
-    imports: [
-        TuiDocPageModule,
-        TuiLinkModule,
-        RouterLink,
-        TuiDocExampleModule,
-        CardDocExample1,
-    ],
+    imports: [TuiAddonDocModule, TuiLinkModule, RouterLink, CardDocExample1],
     templateUrl: './card-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CardDocComponent {
+export default class CardDocComponent {
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
     readonly dateMaskDocPage = `/${DemoPath.Date}`;
 

projects/demo/src/pages/recipes/card/examples/1-basic/component.ts

@@ -3,19 +3,13 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {MaskitoOptions} from '@maskito/core';
 import {maskitoDateOptionsGenerator} from '@maskito/kit';
-import {TuiGroupModule, TuiPrimitiveTextfieldModule} from '@taiga-ui/core';
+import {TuiGroupModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'card-doc-example-1',
-    imports: [
-        ReactiveFormsModule,
-        TuiGroupModule,
-        TuiInputModule,
-        TuiPrimitiveTextfieldModule,
-        MaskitoDirective,
-    ],
+    imports: [ReactiveFormsModule, TuiGroupModule, TuiInputModule, MaskitoDirective],
     templateUrl: './template.html',
     styleUrls: ['./style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/demo/src/pages/recipes/phone/examples/1-us-phone/component.ts

@@ -1,11 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {
-    TuiFlagPipeModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiFlagPipeModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -14,13 +10,11 @@ import mask from './mask';
     standalone: true,
     selector: 'phone-doc-example-1',
     imports: [
-        TuiInputModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
         TuiFlagPipeModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-input

projects/demo/src/pages/recipes/phone/examples/2-kz-phone/component.ts

@@ -1,11 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {
-    TuiFlagPipeModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiFlagPipeModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -14,12 +10,11 @@ import mask from './mask';
     standalone: true,
     selector: 'phone-doc-example-2',
     imports: [
-        TuiInputModule,
-        ReactiveFormsModule,
-        TuiTextfieldControllerModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
+        ReactiveFormsModule,
         TuiFlagPipeModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/demo/src/pages/recipes/phone/phone-doc.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath, DocExamplePrimaryTab} from '@demo/constants';
-import {TuiDocExample, TuiDocExampleModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
 
 import {PhoneUSDocExample1} from './examples/1-us-phone/component';
@@ -11,17 +11,16 @@ import {PhoneKZDocExample2} from './examples/2-kz-phone/component';
     standalone: true,
     selector: 'phone-doc',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiLinkModule,
         RouterLink,
-        TuiDocExampleModule,
         PhoneUSDocExample1,
         PhoneKZDocExample2,
     ],
     templateUrl: './phone-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PhoneDocComponent {
+export default class PhoneDocComponent {
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
     readonly prefixDocPage = `/${DemoPath.Prefix}`;
 

projects/demo/src/pages/recipes/placeholder/examples/1-cvc-code/component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -10,12 +10,10 @@ import mask from './mask';
     standalone: true,
     selector: 'placeholder-doc-example-1',
     imports: [
-        TuiInputModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-input

projects/demo/src/pages/recipes/placeholder/examples/2-phone/component.ts

@@ -1,11 +1,7 @@
 import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {
-    TuiFlagPipeModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiFlagPipeModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask, {PLACEHOLDER, removePlaceholder} from './mask';
@@ -14,13 +10,11 @@ import mask, {PLACEHOLDER, removePlaceholder} from './mask';
     standalone: true,
     selector: 'placeholder-doc-example-2',
     imports: [
-        TuiInputModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
         TuiFlagPipeModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-input

projects/demo/src/pages/recipes/placeholder/examples/3-date/component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -10,12 +10,10 @@ import mask from './mask';
     standalone: true,
     selector: 'placeholder-doc-example-3',
     imports: [
-        TuiInputModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-input

projects/demo/src/pages/recipes/placeholder/placeholder-doc.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath, DocExamplePrimaryTab} from '@demo/constants';
-import {TuiDocExample, TuiDocExampleModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
 
 import {PlaceholderDocExample1} from './examples/1-cvc-code/component';
@@ -12,8 +12,7 @@ import {PlaceholderDocExample3} from './examples/3-date/component';
     standalone: true,
     selector: 'placeholder-doc',
     imports: [
-        TuiDocPageModule,
-        TuiDocExampleModule,
+        TuiAddonDocModule,
         TuiLinkModule,
         RouterLink,
         PlaceholderDocExample1,
@@ -23,7 +22,7 @@ import {PlaceholderDocExample3} from './examples/3-date/component';
     templateUrl: './placeholder-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PlaceholderDocComponent {
+export default class PlaceholderDocComponent {
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
     readonly processorsDocPage = `/${DemoPath.Processors}`;
     readonly pluginsDocPage = `/${DemoPath.Plugins}`;