From 3572edad75c9d7aa7a2f44615eaaec1d24182331 Mon Sep 17 00:00:00 2001
From: Nikita Barsukov <nikita.s.barsukov@gmail.com>
Date: Wed, 17 Jan 2024 17:47:05 +0300
Subject: [PATCH] chore(demo): use new modern Angular routing approach for all
 documentation (#915)

---
 projects/demo/src/app/app.routes.ts           | 90 +++++++------------
 .../src/pages/cypress/cypress.component.ts    |  6 +-
 .../demo/src/pages/cypress/cypress.module.ts  | 38 --------
 .../cypress/examples/1-predicate/component.ts | 10 +--
 .../browser-support.component.ts              |  6 +-
 .../browser-support/browser-support.module.ts | 17 ----
 .../changelog/changelog.component.ts          |  6 +-
 .../changelog/changelog.module.ts             | 19 ----
 .../core-concepts-overview.component.ts       |  7 +-
 .../core-concepts-overview.module.ts          | 23 -----
 .../element-state/element-state.component.ts  |  6 +-
 .../element-state/element-state.module.ts     | 19 ----
 .../mask-expression.component.ts              |  7 +-
 .../mask-expression/mask-expression.module.ts | 20 -----
 .../maskito-libraries.component.ts            | 12 +--
 .../maskito-libraries.module.ts               | 20 -----
 .../examples/dynamic/component.ts             | 10 +--
 .../examples/replace/component.ts             | 16 ++--
 .../examples/shift/component.ts               | 16 ++--
 .../overwrite-mode.component.ts               | 13 ++-
 .../overwrite-mode/overwrite-mode.module.ts   | 34 -------
 .../plugins/examples/1-reject/component.ts    | 11 +--
 .../2-initial-calibration/component.ts        | 11 +--
 .../3-strict-composition/component.ts         |  4 +-
 .../plugins/plugins.component.ts              | 13 ++-
 .../documentation/plugins/plugins.module.ts   | 32 -------
 .../processors/processors.component.ts        |  7 +-
 .../processors/processors.module.ts           | 20 -----
 .../transformer/transformer.component.ts      | 11 +--
 .../transformer/transformer.module.ts         | 20 -----
 .../what-is-maskito.component.ts              |  8 +-
 .../what-is-maskito/what-is-maskito.module.ts | 22 -----
 .../angular/angular-doc.component.ts          | 15 +---
 .../frameworks/angular/angular-doc.module.ts  | 30 -------
 .../src/pages/frameworks/angular/index.ts     |  5 ++
 .../frameworks/react/react-doc.component.ts   | 13 +--
 .../frameworks/react/react-doc.module.ts      | 29 ------
 .../pages/frameworks/vue/vue-doc.component.ts | 12 +--
 .../pages/frameworks/vue/vue-doc.module.ts    | 27 ------
 .../pages/phone/examples/1-basic/component.ts |  6 +-
 .../phone/examples/2-validation/component.ts  |  7 +-
 .../phone/examples/3-non-strict/component.ts  | 10 +--
 .../examples/4-lazy-metadata/component.ts     |  6 +-
 projects/demo/src/pages/phone/index.ts        |  5 ++
 .../src/pages/phone/phone-doc.component.ts    | 28 ++----
 .../demo/src/pages/phone/phone-doc.module.ts  | 45 ----------
 .../stackblitz-starter.module.ts              | 15 ----
 projects/demo/src/pages/stackblitz/index.ts   |  1 -
 48 files changed, 129 insertions(+), 679 deletions(-)
 delete mode 100644 projects/demo/src/pages/cypress/cypress.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/browser-support/browser-support.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/changelog/changelog.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/element-state/element-state.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/mask-expression/mask-expression.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/plugins/plugins.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/processors/processors.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/transformer/transformer.module.ts
 delete mode 100644 projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.module.ts
 delete mode 100644 projects/demo/src/pages/frameworks/angular/angular-doc.module.ts
 create mode 100644 projects/demo/src/pages/frameworks/angular/index.ts
 delete mode 100644 projects/demo/src/pages/frameworks/react/react-doc.module.ts
 delete mode 100644 projects/demo/src/pages/frameworks/vue/vue-doc.module.ts
 create mode 100644 projects/demo/src/pages/phone/index.ts
 delete mode 100644 projects/demo/src/pages/phone/phone-doc.module.ts
 delete mode 100644 projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.module.ts

diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts
index a6833fb9c..a806de8c9 100644
--- a/projects/demo/src/app/app.routes.ts
+++ b/projects/demo/src/app/app.routes.ts
@@ -8,20 +8,18 @@ export const appRoutes: Routes = [
     // Getting started
     {
         path: DemoPath.WhatIsMaskito,
-        loadChildren: () =>
-            import('../pages/documentation/what-is-maskito/what-is-maskito.module').then(
-                m => m.WhatIsMaskitoDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/what-is-maskito/what-is-maskito.component'),
         data: {
             title: 'What is Maskito?',
         },
     },
     {
         path: DemoPath.MaskitoLibraries,
-        loadChildren: () =>
+        loadComponent: () =>
             import(
-                '../pages/documentation/maskito-libraries/maskito-libraries.module'
-            ).then(m => m.MaskitoLibrariesDocPageModule),
+                '../pages/documentation/maskito-libraries/maskito-libraries.component'
+            ),
         data: {
             title: 'Maskito libraries',
         },
@@ -29,70 +27,57 @@ export const appRoutes: Routes = [
     // Core concepts
     {
         path: DemoPath.CoreConceptsOverview,
-        loadChildren: () =>
+        loadComponent: () =>
             import(
-                '../pages/documentation/core-concepts-overview/core-concepts-overview.module'
-            ).then(m => m.CoreConceptsOverviewDocPageModule),
+                '../pages/documentation/core-concepts-overview/core-concepts-overview.component'
+            ),
         data: {
             title: 'Core concepts',
         },
     },
     {
         path: DemoPath.MaskExpression,
-        loadChildren: () =>
-            import('../pages/documentation/mask-expression/mask-expression.module').then(
-                m => m.MaskExpressionDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/mask-expression/mask-expression.component'),
         data: {
             title: 'Mask expression',
         },
     },
     {
         path: DemoPath.ElementState,
-        loadChildren: () =>
-            import('../pages/documentation/element-state/element-state.module').then(
-                m => m.ElementStateDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/element-state/element-state.component'),
         data: {
             title: 'Element state',
         },
     },
     {
         path: DemoPath.Processors,
-        loadChildren: () =>
-            import('../pages/documentation/processors/processors.module').then(
-                m => m.ProcessorsDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/processors/processors.component'),
         data: {
             title: 'Processors',
         },
     },
     {
         path: DemoPath.Plugins,
-        loadChildren: () =>
-            import('../pages/documentation/plugins/plugins.module').then(
-                m => m.PluginsDocPageModule,
-            ),
+        loadComponent: () => import('../pages/documentation/plugins/plugins.component'),
         data: {
             title: 'Plugins',
         },
     },
     {
         path: DemoPath.OverwriteMode,
-        loadChildren: () =>
-            import('../pages/documentation/overwrite-mode/overwrite-mode.module').then(
-                m => m.OverwriteModeDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/overwrite-mode/overwrite-mode.component'),
         data: {
             title: 'Overwrite mode',
         },
     },
     {
         path: DemoPath.Transformer,
-        loadChildren: () =>
-            import('../pages/documentation/transformer/transformer.module').then(
-                m => m.TransformerDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/transformer/transformer.component'),
         data: {
             title: 'Transformer',
         },
@@ -100,30 +85,21 @@ export const appRoutes: Routes = [
     // Frameworks
     {
         path: DemoPath.Angular,
-        loadChildren: () =>
-            import('../pages/frameworks/angular/angular-doc.module').then(
-                m => m.AngularDocPageModule,
-            ),
+        loadChildren: () => import('../pages/frameworks/angular'),
         data: {
             title: 'Angular',
         },
     },
     {
         path: DemoPath.React,
-        loadChildren: () =>
-            import('../pages/frameworks/react/react-doc.module').then(
-                m => m.ReactDocPageModule,
-            ),
+        loadComponent: () => import('../pages/frameworks/react/react-doc.component'),
         data: {
             title: 'React',
         },
     },
     {
         path: DemoPath.Vue,
-        loadChildren: () =>
-            import('../pages/frameworks/vue/vue-doc.module').then(
-                m => m.VueDocPageModule,
-            ),
+        loadComponent: () => import('../pages/frameworks/vue/vue-doc.component'),
         data: {
             title: 'Vue',
         },
@@ -181,8 +157,7 @@ export const appRoutes: Routes = [
     },
     {
         path: DemoPath.PhonePackage,
-        loadChildren: () =>
-            import('../pages/phone/phone-doc.module').then(m => m.PhoneDocModule),
+        loadChildren: () => import('../pages/phone'),
         data: {
             title: 'Phone',
         },
@@ -219,28 +194,24 @@ export const appRoutes: Routes = [
     // Other
     {
         path: DemoPath.BrowserSupport,
-        loadChildren: () =>
-            import('../pages/documentation/browser-support/browser-support.module').then(
-                m => m.BrowserSupportModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/browser-support/browser-support.component'),
         data: {
             title: 'Browser support',
         },
     },
     {
         path: DemoPath.Changelog,
-        loadChildren: () =>
-            import('../pages/documentation/changelog/changelog.module').then(
-                m => m.ChangelogModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/changelog/changelog.component'),
         data: {
             title: 'Changelog',
         },
     },
     {
         path: DemoPath.Stackblitz,
-        loadChildren: () =>
-            import('../pages/stackblitz').then(m => m.StackblitzStarterModule),
+        loadComponent: () =>
+            import('../pages/stackblitz').then(m => m.StackblitzStarterComponent),
         data: {
             title: 'Stackblitz Starter',
         },
@@ -248,8 +219,7 @@ export const appRoutes: Routes = [
     // TODO: replace this page with Cypress Component Testing after angular13+ update
     {
         path: DemoPath.Cypress,
-        loadChildren: () =>
-            import('../pages/cypress/cypress.module').then(m => m.CypressDocPageModule),
+        loadComponent: () => import('../pages/cypress/cypress.component'),
         data: {
             title: 'Cypress tests 🤫',
         },
diff --git a/projects/demo/src/pages/cypress/cypress.component.ts b/projects/demo/src/pages/cypress/cypress.component.ts
index af5a26e96..7706330db 100644
--- a/projects/demo/src/pages/cypress/cypress.component.ts
+++ b/projects/demo/src/pages/cypress/cypress.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 
 import {TestDocExample1} from './examples/1-predicate/component';
 import {TestDocExample2} from './examples/2-native-max-length/component';
@@ -12,7 +12,7 @@ import {TestDocExample6} from './examples/6-multi-character-prefix/component';
     standalone: true,
     selector: 'cypress-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TestDocExample1,
         TestDocExample2,
         TestDocExample3,
@@ -24,4 +24,4 @@ import {TestDocExample6} from './examples/6-multi-character-prefix/component';
     styleUrls: ['./cypress.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CypressDocPageComponent {}
+export default class CypressDocPageComponent {}
diff --git a/projects/demo/src/pages/cypress/cypress.module.ts b/projects/demo/src/pages/cypress/cypress.module.ts
deleted file mode 100644
index bb7431515..000000000
--- a/projects/demo/src/pages/cypress/cypress.module.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-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';
-
-import {CypressDocPageComponent} from './cypress.component';
-import {TestDocExample1} from './examples/1-predicate/component';
-import {TestDocExample2} from './examples/2-native-max-length/component';
-import {TestDocExample3} from './examples/3-mirrored-prefix-postfix/component';
-import {TestDocExample4} from './examples/4-runtime-postfix-changes/component';
-import {TestDocExample5} from './examples/5-react-async-predicate/angular-wrapper';
-import {TestDocExample6} from './examples/6-multi-character-prefix/component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        MaskitoDirective,
-        MaskitoCVA,
-        TuiInputModule,
-        TuiGroupModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(CypressDocPageComponent)),
-        TestDocExample4,
-        CypressDocPageComponent,
-        TestDocExample1,
-        TestDocExample2,
-        TestDocExample3,
-        TestDocExample5,
-        TestDocExample6,
-    ],
-    exports: [CypressDocPageComponent],
-})
-export class CypressDocPageModule {}
diff --git a/projects/demo/src/pages/cypress/examples/1-predicate/component.ts b/projects/demo/src/pages/cypress/examples/1-predicate/component.ts
index f1a8ee31e..42ff77eaf 100644
--- a/projects/demo/src/pages/cypress/examples/1-predicate/component.ts
+++ b/projects/demo/src/pages/cypress/examples/1-predicate/component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {MaskitoElementPredicate, MaskitoOptions} from '@maskito/core';
 import {TuiGroupModule} from '@taiga-ui/core';
@@ -8,13 +8,7 @@ import {TuiInputModule} from '@taiga-ui/kit';
 @Component({
     standalone: true,
     selector: 'test-doc-example-1',
-    imports: [
-        TuiGroupModule,
-        MaskitoDirective,
-        TuiInputModule,
-        ReactiveFormsModule,
-        FormsModule,
-    ],
+    imports: [TuiGroupModule, MaskitoDirective, TuiInputModule, FormsModule],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/projects/demo/src/pages/documentation/browser-support/browser-support.component.ts b/projects/demo/src/pages/documentation/browser-support/browser-support.component.ts
index 821687ab2..50ef193b7 100644
--- a/projects/demo/src/pages/documentation/browser-support/browser-support.component.ts
+++ b/projects/demo/src/pages/documentation/browser-support/browser-support.component.ts
@@ -1,16 +1,16 @@
 import {NgFor, NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 
 @Component({
     standalone: true,
     selector: 'browser-support',
-    imports: [TuiDocPageModule, NgFor, NgIf],
+    imports: [TuiAddonDocModule, NgFor, NgIf],
     templateUrl: './browser-support.template.html',
     styles: ['td {width: 18.75rem}'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BrowserSupportComponent {
+export default class BrowserSupportComponent {
     readonly desktopBrowsers = [
         {name: 'Google Chrome', version: '74+'},
         {name: 'Mozilla Firefox', version: '87+'},
diff --git a/projects/demo/src/pages/documentation/browser-support/browser-support.module.ts b/projects/demo/src/pages/documentation/browser-support/browser-support.module.ts
deleted file mode 100644
index aec5de26c..000000000
--- a/projects/demo/src/pages/documentation/browser-support/browser-support.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-
-import {BrowserSupportComponent} from './browser-support.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(BrowserSupportComponent)),
-        BrowserSupportComponent,
-    ],
-    exports: [BrowserSupportComponent],
-})
-export class BrowserSupportModule {}
diff --git a/projects/demo/src/pages/documentation/changelog/changelog.component.ts b/projects/demo/src/pages/documentation/changelog/changelog.component.ts
index 06a02bad0..9d07eb48f 100644
--- a/projects/demo/src/pages/documentation/changelog/changelog.component.ts
+++ b/projects/demo/src/pages/documentation/changelog/changelog.component.ts
@@ -1,19 +1,19 @@
 import {AsyncPipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {TuiDocPageModule, tuiRawLoad} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, tuiRawLoad} from '@taiga-ui/addon-doc';
 import {MarkdownModule} from 'ngx-markdown';
 import {of, switchMap} from 'rxjs';
 
 @Component({
     standalone: true,
     selector: 'changelog',
-    imports: [TuiDocPageModule, MarkdownModule, AsyncPipe],
+    imports: [TuiAddonDocModule, MarkdownModule, AsyncPipe],
     templateUrl: './changelog.template.html',
     styleUrls: ['./changelog.style.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ChangelogComponent {
+export default class ChangelogComponent {
     readonly changelog$ = of(import('../../../../../../CHANGELOG.md?raw')).pipe(
         switchMap(tuiRawLoad),
     );
diff --git a/projects/demo/src/pages/documentation/changelog/changelog.module.ts b/projects/demo/src/pages/documentation/changelog/changelog.module.ts
deleted file mode 100644
index 2363e560d..000000000
--- a/projects/demo/src/pages/documentation/changelog/changelog.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {MarkdownModule} from 'ngx-markdown';
-
-import {ChangelogComponent} from './changelog.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        MarkdownModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ChangelogComponent)),
-        ChangelogComponent,
-    ],
-    exports: [ChangelogComponent],
-})
-export class ChangelogModule {}
diff --git a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts b/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts
index 1742bf486..b67fb8e2c 100644
--- a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts
+++ b/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts
@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 import {TuiIslandModule} from '@taiga-ui/kit';
 
@@ -9,9 +9,8 @@ import {TuiIslandModule} from '@taiga-ui/kit';
     standalone: true,
     selector: 'core-concepts-overview-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiLinkModule,
-        TuiDocCodeModule,
         TuiNotificationModule,
         TuiIslandModule,
         RouterLink,
@@ -20,7 +19,7 @@ import {TuiIslandModule} from '@taiga-ui/kit';
     styleUrls: ['./core-concepts-overview.styles.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CoreConceptsOverviewDocPageComponent {
+export default class CoreConceptsOverviewDocPageComponent {
     readonly maskitoPublicApiDemo = import('./examples/maskito-public-api-demo.md?raw');
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
     readonly processorsDocPage = `/${DemoPath.Processors}`;
diff --git a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.module.ts b/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.module.ts
deleted file mode 100644
index be8dc5847..000000000
--- a/projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-import {TuiIslandModule, TuiMarkerIconModule} from '@taiga-ui/kit';
-
-import {CoreConceptsOverviewDocPageComponent} from './core-concepts-overview.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiIslandModule,
-        TuiLinkModule,
-        TuiMarkerIconModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(CoreConceptsOverviewDocPageComponent)),
-        CoreConceptsOverviewDocPageComponent,
-    ],
-    exports: [CoreConceptsOverviewDocPageComponent],
-})
-export class CoreConceptsOverviewDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/element-state/element-state.component.ts b/projects/demo/src/pages/documentation/element-state/element-state.component.ts
index 1547fa7fb..b68fc904f 100644
--- a/projects/demo/src/pages/documentation/element-state/element-state.component.ts
+++ b/projects/demo/src/pages/documentation/element-state/element-state.component.ts
@@ -1,17 +1,17 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
     selector: 'element-state-doc-page',
-    imports: [TuiDocPageModule, TuiDocCodeModule, TuiLinkModule, RouterLink],
+    imports: [TuiAddonDocModule, TuiLinkModule, RouterLink],
     templateUrl: './element-state.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ElementStateDocPageComponent {
+export default class ElementStateDocPageComponent {
     readonly elementStateDemo = import('./examples/element-state-demo.md?raw');
 
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
diff --git a/projects/demo/src/pages/documentation/element-state/element-state.module.ts b/projects/demo/src/pages/documentation/element-state/element-state.module.ts
deleted file mode 100644
index 3b6406e13..000000000
--- a/projects/demo/src/pages/documentation/element-state/element-state.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule} from '@taiga-ui/core';
-
-import {ElementStateDocPageComponent} from './element-state.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        RouterModule.forChild(tuiGenerateRoutes(ElementStateDocPageComponent)),
-        ElementStateDocPageComponent,
-    ],
-    exports: [ElementStateDocPageComponent],
-})
-export class ElementStateDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/mask-expression/mask-expression.component.ts b/projects/demo/src/pages/documentation/mask-expression/mask-expression.component.ts
index 683025f5c..92ca37b63 100644
--- a/projects/demo/src/pages/documentation/mask-expression/mask-expression.component.ts
+++ b/projects/demo/src/pages/documentation/mask-expression/mask-expression.component.ts
@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 import {NextStepsComponent} from '../next-steps/next-steps.component';
@@ -10,9 +10,8 @@ import {NextStepsComponent} from '../next-steps/next-steps.component';
     standalone: true,
     selector: 'mask-expression-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiLinkModule,
-        TuiDocCodeModule,
         TuiNotificationModule,
         RouterLink,
         NextStepsComponent,
@@ -20,7 +19,7 @@ import {NextStepsComponent} from '../next-steps/next-steps.component';
     templateUrl: './mask-expression.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MaskExpressionDocPageComponent {
+export default class MaskExpressionDocPageComponent {
     readonly elementStateDocPage = `/${DemoPath.ElementState}`;
     readonly regExpMaskExpDemo = import('./examples/reg-exp-mask-expression-demo.md?raw');
     readonly basicTimeDemo = import('./examples/basic-time-example.md?raw');
diff --git a/projects/demo/src/pages/documentation/mask-expression/mask-expression.module.ts b/projects/demo/src/pages/documentation/mask-expression/mask-expression.module.ts
deleted file mode 100644
index 9343e6208..000000000
--- a/projects/demo/src/pages/documentation/mask-expression/mask-expression.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {MaskExpressionDocPageComponent} from './mask-expression.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(MaskExpressionDocPageComponent)),
-        MaskExpressionDocPageComponent,
-    ],
-    exports: [MaskExpressionDocPageComponent],
-})
-export class MaskExpressionDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.component.ts b/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.component.ts
index ab683a692..c21940d01 100644
--- a/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.component.ts
+++ b/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.component.ts
@@ -1,23 +1,17 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
     selector: 'maskito-libraries-doc-page',
-    imports: [
-        TuiDocPageModule,
-        TuiNotificationModule,
-        TuiDocCodeModule,
-        TuiLinkModule,
-        RouterLink,
-    ],
+    imports: [TuiAddonDocModule, TuiNotificationModule, TuiLinkModule, RouterLink],
     templateUrl: './maskito-libraries.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MaskitoLibrariesDocPageComponent {
+export default class MaskitoLibrariesDocPageComponent {
     readonly numberMaskDocPage = `/${DemoPath.Number}`;
     readonly phoneMaskDocPage = `/${DemoPath.PhonePackage}`;
     readonly timeMaskDocPage = `/${DemoPath.Time}`;
diff --git a/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.module.ts b/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.module.ts
deleted file mode 100644
index 6a89f0a6e..000000000
--- a/projects/demo/src/pages/documentation/maskito-libraries/maskito-libraries.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {MaskitoLibrariesDocPageComponent} from './maskito-libraries.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(MaskitoLibrariesDocPageComponent)),
-        MaskitoLibrariesDocPageComponent,
-    ],
-    exports: [MaskitoLibrariesDocPageComponent],
-})
-export class MaskitoLibrariesDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/overwrite-mode/examples/dynamic/component.ts b/projects/demo/src/pages/documentation/overwrite-mode/examples/dynamic/component.ts
index 1b51c14e7..0ad6948b6 100644
--- a/projects/demo/src/pages/documentation/overwrite-mode/examples/dynamic/component.ts
+++ b/projects/demo/src/pages/documentation/overwrite-mode/examples/dynamic/component.ts
@@ -1,7 +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 {TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiTextareaModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -10,12 +10,10 @@ import mask from './mask';
     standalone: true,
     selector: 'overwrite-mode-dynamic-doc-example-3',
     imports: [
-        TuiTextareaModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiTextfieldControllerModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
+        TuiTextareaModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-textarea
diff --git a/projects/demo/src/pages/documentation/overwrite-mode/examples/replace/component.ts b/projects/demo/src/pages/documentation/overwrite-mode/examples/replace/component.ts
index b519416e9..705851dcf 100644
--- a/projects/demo/src/pages/documentation/overwrite-mode/examples/replace/component.ts
+++ b/projects/demo/src/pages/documentation/overwrite-mode/examples/replace/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 {
-    TuiHintModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiHintModule, 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: 'overwrite-mode-replace-doc-example-2',
     imports: [
-        TuiInputModule,
-        TuiHintModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
+        TuiHintModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-input
diff --git a/projects/demo/src/pages/documentation/overwrite-mode/examples/shift/component.ts b/projects/demo/src/pages/documentation/overwrite-mode/examples/shift/component.ts
index 691f44934..9c9fcbc88 100644
--- a/projects/demo/src/pages/documentation/overwrite-mode/examples/shift/component.ts
+++ b/projects/demo/src/pages/documentation/overwrite-mode/examples/shift/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 {
-    TuiHintModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiHintModule, 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: 'overwrite-mode-shift-doc-example-1',
     imports: [
-        TuiInputModule,
-        TuiHintModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
+        TuiHintModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
     ],
     template: `
         <tui-input
diff --git a/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.component.ts b/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.component.ts
index 56257fd02..1e05c717f 100644
--- a/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.component.ts
+++ b/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.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 {NextStepsComponent} from '../next-steps/next-steps.component';
@@ -13,19 +13,18 @@ import {OverwriteModeDocExample1} from './examples/shift/component';
     standalone: true,
     selector: 'overwrite-mode-doc-page',
     imports: [
-        TuiDocPageModule,
-        TuiDocExampleModule,
+        RouterLink,
+        TuiAddonDocModule,
+        TuiLinkModule,
+        NextStepsComponent,
         OverwriteModeDocExample1,
         OverwriteModeDocExample2,
-        TuiLinkModule,
-        RouterLink,
         OverwriteModeDocExample3,
-        NextStepsComponent,
     ],
     templateUrl: './overwrite-mode.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OverwriteModeDocPageComponent {
+export default class OverwriteModeDocPageComponent {
     readonly shiftExample: TuiDocExample = {
         [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/shift/mask.ts?raw'),
     };
diff --git a/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.module.ts b/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.module.ts
deleted file mode 100644
index 1ea5238d5..000000000
--- a/projects/demo/src/pages/documentation/overwrite-mode/overwrite-mode.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-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';
-
-import {OverwriteModeDocExample3} from './examples/dynamic/component';
-import {OverwriteModeDocExample2} from './examples/replace/component';
-import {OverwriteModeDocExample1} from './examples/shift/component';
-import {OverwriteModeDocPageComponent} from './overwrite-mode.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        MaskitoDirective,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiInputModule,
-        TuiHintModule,
-        TuiTextareaModule,
-        TuiTextfieldControllerModule,
-        RouterModule.forChild(tuiGenerateRoutes(OverwriteModeDocPageComponent)),
-        OverwriteModeDocPageComponent,
-        OverwriteModeDocExample1,
-        OverwriteModeDocExample2,
-        OverwriteModeDocExample3,
-    ],
-    exports: [OverwriteModeDocPageComponent],
-})
-export class OverwriteModeDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/plugins/examples/1-reject/component.ts b/projects/demo/src/pages/documentation/plugins/examples/1-reject/component.ts
index c2387ed36..e63cd11da 100644
--- a/projects/demo/src/pages/documentation/plugins/examples/1-reject/component.ts
+++ b/projects/demo/src/pages/documentation/plugins/examples/1-reject/component.ts
@@ -1,8 +1,7 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {maskitoRejectEvent} from '@maskito/kit';
-import {TuiPrimitiveTextfieldModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -10,13 +9,7 @@ import mask from './mask';
 @Component({
     standalone: true,
     selector: 'plugins-reject-doc-example-1',
-    imports: [
-        TuiInputModule,
-        ReactiveFormsModule,
-        FormsModule,
-        TuiPrimitiveTextfieldModule,
-        MaskitoDirective,
-    ],
+    imports: [FormsModule, MaskitoDirective, TuiInputModule],
     template: `
         <tui-input
             [style.animation-duration.ms]="300"
diff --git a/projects/demo/src/pages/documentation/plugins/examples/2-initial-calibration/component.ts b/projects/demo/src/pages/documentation/plugins/examples/2-initial-calibration/component.ts
index d7542f46c..84427ade6 100644
--- a/projects/demo/src/pages/documentation/plugins/examples/2-initial-calibration/component.ts
+++ b/projects/demo/src/pages/documentation/plugins/examples/2-initial-calibration/component.ts
@@ -1,7 +1,6 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
-import {TuiPrimitiveTextfieldModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -9,13 +8,7 @@ import mask from './mask';
 @Component({
     standalone: true,
     selector: 'plugins-initial-calibration-doc-example-2',
-    imports: [
-        TuiInputModule,
-        ReactiveFormsModule,
-        FormsModule,
-        TuiPrimitiveTextfieldModule,
-        MaskitoDirective,
-    ],
+    imports: [FormsModule, MaskitoDirective, TuiInputModule],
     template: `
         <tui-input
             [style.max-width.rem]="20"
diff --git a/projects/demo/src/pages/documentation/plugins/examples/3-strict-composition/component.ts b/projects/demo/src/pages/documentation/plugins/examples/3-strict-composition/component.ts
index de6e346c7..0643be0c9 100644
--- a/projects/demo/src/pages/documentation/plugins/examples/3-strict-composition/component.ts
+++ b/projects/demo/src/pages/documentation/plugins/examples/3-strict-composition/component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {TuiInputModule} from '@taiga-ui/kit';
 
@@ -8,7 +8,7 @@ import mask from './mask';
 @Component({
     standalone: true,
     selector: 'plugins-strict-composition-doc-example-3',
-    imports: [TuiInputModule, MaskitoDirective, ReactiveFormsModule, FormsModule],
+    imports: [FormsModule, MaskitoDirective, TuiInputModule],
     template: `
         <tui-input
             [maskito]="maskitoOptions"
diff --git a/projects/demo/src/pages/documentation/plugins/plugins.component.ts b/projects/demo/src/pages/documentation/plugins/plugins.component.ts
index dd0436efe..ca98713aa 100644
--- a/projects/demo/src/pages/documentation/plugins/plugins.component.ts
+++ b/projects/demo/src/pages/documentation/plugins/plugins.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, TuiNotificationModule} from '@taiga-ui/core';
 
 import {NextStepsComponent} from '../next-steps/next-steps.component';
@@ -13,20 +13,19 @@ import {PluginsDocExample3} from './examples/3-strict-composition/component';
     standalone: true,
     selector: 'plugins-mode-doc-page',
     imports: [
-        TuiDocPageModule,
-        TuiDocExampleModule,
+        RouterLink,
+        TuiAddonDocModule,
         TuiNotificationModule,
-        PluginsDocExample1,
         TuiLinkModule,
-        RouterLink,
+        NextStepsComponent,
+        PluginsDocExample1,
         PluginsDocExample2,
         PluginsDocExample3,
-        NextStepsComponent,
     ],
     templateUrl: './plugins.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PluginsDocPageComponent {
+export default class PluginsDocPageComponent {
     readonly transformerDocPage = `/${DemoPath.Transformer}`;
 
     readonly rejectExample: TuiDocExample = {
diff --git a/projects/demo/src/pages/documentation/plugins/plugins.module.ts b/projects/demo/src/pages/documentation/plugins/plugins.module.ts
deleted file mode 100644
index 5d1e8ca99..000000000
--- a/projects/demo/src/pages/documentation/plugins/plugins.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-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';
-
-import {PluginsDocExample1} from './examples/1-reject/component';
-import {PluginsDocExample2} from './examples/2-initial-calibration/component';
-import {PluginsDocExample3} from './examples/3-strict-composition/component';
-import {PluginsDocPageComponent} from './plugins.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        MaskitoDirective,
-        TuiLinkModule,
-        TuiInputModule,
-        TuiNotificationModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(PluginsDocPageComponent)),
-        PluginsDocPageComponent,
-        PluginsDocExample1,
-        PluginsDocExample2,
-        PluginsDocExample3,
-    ],
-    exports: [PluginsDocPageComponent],
-})
-export class PluginsDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/processors/processors.component.ts b/projects/demo/src/pages/documentation/processors/processors.component.ts
index 82ddf0089..3a0de7f57 100644
--- a/projects/demo/src/pages/documentation/processors/processors.component.ts
+++ b/projects/demo/src/pages/documentation/processors/processors.component.ts
@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 import {NextStepsComponent} from '../next-steps/next-steps.component';
@@ -10,17 +10,16 @@ import {NextStepsComponent} from '../next-steps/next-steps.component';
     standalone: true,
     selector: 'processors-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiLinkModule,
         TuiNotificationModule,
         RouterLink,
-        TuiDocCodeModule,
         NextStepsComponent,
     ],
     templateUrl: './processors.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProcessorsDocPageComponent {
+export default class ProcessorsDocPageComponent {
     readonly preprocessorFirstArgDemo = import(
         './examples/preprocessor-first-arg-demo.md?raw'
     );
diff --git a/projects/demo/src/pages/documentation/processors/processors.module.ts b/projects/demo/src/pages/documentation/processors/processors.module.ts
deleted file mode 100644
index 4e7380966..000000000
--- a/projects/demo/src/pages/documentation/processors/processors.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {ProcessorsDocPageComponent} from './processors.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(ProcessorsDocPageComponent)),
-        ProcessorsDocPageComponent,
-    ],
-    exports: [ProcessorsDocPageComponent],
-})
-export class ProcessorsDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/transformer/transformer.component.ts b/projects/demo/src/pages/documentation/transformer/transformer.component.ts
index 5309cf343..f7bb9b124 100644
--- a/projects/demo/src/pages/documentation/transformer/transformer.component.ts
+++ b/projects/demo/src/pages/documentation/transformer/transformer.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule} from '@taiga-ui/core';
 
 import {NextStepsComponent} from '../next-steps/next-steps.component';
@@ -7,15 +7,10 @@ import {NextStepsComponent} from '../next-steps/next-steps.component';
 @Component({
     standalone: true,
     selector: 'transformer-doc-page',
-    imports: [
-        TuiDocPageModule,
-        TuiNotificationModule,
-        TuiDocCodeModule,
-        NextStepsComponent,
-    ],
+    imports: [TuiAddonDocModule, TuiNotificationModule, NextStepsComponent],
     templateUrl: './transformer.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TransformerDocPageComponent {
+export default class TransformerDocPageComponent {
     readonly utilityInActionDemo = import('./examples/utility-in-action-demo.md?raw');
 }
diff --git a/projects/demo/src/pages/documentation/transformer/transformer.module.ts b/projects/demo/src/pages/documentation/transformer/transformer.module.ts
deleted file mode 100644
index 30b9fffd9..000000000
--- a/projects/demo/src/pages/documentation/transformer/transformer.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {TransformerDocPageComponent} from './transformer.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(TransformerDocPageComponent)),
-        TransformerDocPageComponent,
-    ],
-    exports: [TransformerDocPageComponent],
-})
-export class TransformerDocPageModule {}
diff --git a/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.component.ts b/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.component.ts
index 733603210..20073dd54 100644
--- a/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.component.ts
+++ b/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.component.ts
@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule} from '@taiga-ui/core';
 import {TuiIslandModule, TuiMarkerIconModule} from '@taiga-ui/kit';
 
@@ -9,17 +9,17 @@ import {TuiIslandModule, TuiMarkerIconModule} from '@taiga-ui/kit';
     standalone: true,
     selector: 'what-is-maskito-doc-page',
     imports: [
-        TuiDocPageModule,
-        TuiLinkModule,
         RouterLink,
+        TuiAddonDocModule,
         TuiIslandModule,
+        TuiLinkModule,
         TuiMarkerIconModule,
     ],
     templateUrl: './what-is-maskito.template.html',
     styleUrls: ['./what-is-maskito.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class WhatIsMaskitoDocPageComponent {
+export default class WhatIsMaskitoDocPageComponent {
     readonly maskitoLibrariesDocPage = `/${DemoPath.MaskitoLibraries}`;
     readonly coreConceptsOverviewDocPage = `/${DemoPath.CoreConceptsOverview}`;
     readonly angularDocPage = `/${DemoPath.Angular}`;
diff --git a/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.module.ts b/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.module.ts
deleted file mode 100644
index e3937c2ad..000000000
--- a/projects/demo/src/pages/documentation/what-is-maskito/what-is-maskito.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule} from '@taiga-ui/core';
-import {TuiIslandModule, TuiMarkerIconModule} from '@taiga-ui/kit';
-
-import {WhatIsMaskitoDocPageComponent} from './what-is-maskito.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAddonDocModule,
-        TuiIslandModule,
-        TuiLinkModule,
-        TuiMarkerIconModule,
-        RouterModule.forChild(tuiGenerateRoutes(WhatIsMaskitoDocPageComponent)),
-        WhatIsMaskitoDocPageComponent,
-    ],
-    exports: [WhatIsMaskitoDocPageComponent],
-})
-export class WhatIsMaskitoDocPageModule {}
diff --git a/projects/demo/src/pages/frameworks/angular/angular-doc.component.ts b/projects/demo/src/pages/frameworks/angular/angular-doc.component.ts
index cf054faac..433c52b2b 100644
--- a/projects/demo/src/pages/frameworks/angular/angular-doc.component.ts
+++ b/projects/demo/src/pages/frameworks/angular/angular-doc.component.ts
@@ -2,12 +2,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
 import {MaskitoDirective} from '@maskito/angular';
-import {
-    TuiDocCodeModule,
-    TuiDocExample,
-    TuiDocExampleModule,
-    TuiDocPageModule,
-} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 import {NestedDocExample1} from './examples/1-nested/component';
@@ -19,15 +14,13 @@ import {PipeDocExample4} from './examples/4-pipe/component';
     standalone: true,
     selector: 'angular-doc-page',
     imports: [
-        TuiDocPageModule,
+        MaskitoDirective,
+        RouterLink,
+        TuiAddonDocModule,
         TuiNotificationModule,
         TuiLinkModule,
-        RouterLink,
-        TuiDocCodeModule,
-        TuiDocExampleModule,
         NestedDocExample1,
         NestedDocExample2,
-        MaskitoDirective,
         CvaDocExample3,
         PipeDocExample4,
     ],
diff --git a/projects/demo/src/pages/frameworks/angular/angular-doc.module.ts b/projects/demo/src/pages/frameworks/angular/angular-doc.module.ts
deleted file mode 100644
index 886d78d4f..000000000
--- a/projects/demo/src/pages/frameworks/angular/angular-doc.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {MaskitoDirective} from '@maskito/angular';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {AngularDocPageComponent} from './angular-doc.component';
-import {NestedDocExample1} from './examples/1-nested/component';
-import {NestedDocExample2} from './examples/2-nested/component';
-import {CvaDocExample3} from './examples/3-cva/component';
-import {PipeDocExample4} from './examples/4-pipe/component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        MaskitoDirective,
-        TuiLinkModule,
-        TuiNotificationModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(AngularDocPageComponent)),
-        NestedDocExample1,
-        NestedDocExample2,
-        CvaDocExample3,
-        PipeDocExample4,
-        AngularDocPageComponent,
-    ],
-    exports: [AngularDocPageComponent],
-})
-export class AngularDocPageModule {}
diff --git a/projects/demo/src/pages/frameworks/angular/index.ts b/projects/demo/src/pages/frameworks/angular/index.ts
new file mode 100644
index 000000000..9b66eb05d
--- /dev/null
+++ b/projects/demo/src/pages/frameworks/angular/index.ts
@@ -0,0 +1,5 @@
+import {tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+
+import {AngularDocPageComponent} from './angular-doc.component';
+
+export default tuiGenerateRoutes(AngularDocPageComponent);
diff --git a/projects/demo/src/pages/frameworks/react/react-doc.component.ts b/projects/demo/src/pages/frameworks/react/react-doc.component.ts
index 95e5f6a67..f17bbdb79 100644
--- a/projects/demo/src/pages/frameworks/react/react-doc.component.ts
+++ b/projects/demo/src/pages/frameworks/react/react-doc.component.ts
@@ -1,12 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {
-    TuiDocCodeModule,
-    TuiDocExampleModule,
-    TuiDocPageModule,
-    TuiRawLoaderContent,
-} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 import {ReactExample1} from './examples/1-use-maskito-basic-usage/example.component';
@@ -16,19 +11,17 @@ import {ReactExample2} from './examples/2-element-predicate/example.component';
     standalone: true,
     selector: 'react-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiNotificationModule,
         TuiLinkModule,
         RouterLink,
-        TuiDocCodeModule,
-        TuiDocExampleModule,
         ReactExample1,
         ReactExample2,
     ],
     templateUrl: './react-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ReactDocPageComponent {
+export default class ReactDocPageComponent {
     readonly coreConceptsOverviewDocPage = `/${DemoPath.CoreConceptsOverview}`;
     readonly useMaskitoBasicUsage = import(
         './examples/1-use-maskito-basic-usage/use-maskito-basic-usage.tsx?raw'
diff --git a/projects/demo/src/pages/frameworks/react/react-doc.module.ts b/projects/demo/src/pages/frameworks/react/react-doc.module.ts
deleted file mode 100644
index 7ae491bae..000000000
--- a/projects/demo/src/pages/frameworks/react/react-doc.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {MaskitoDirective} from '@maskito/angular';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {ReactExample1} from './examples/1-use-maskito-basic-usage/example.component';
-import {ReactExample2} from './examples/2-element-predicate/example.component';
-import {ReactDocPageComponent} from './react-doc.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MaskitoDirective,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(ReactDocPageComponent)),
-        ReactDocPageComponent,
-        ReactExample1,
-        ReactExample2,
-    ],
-    exports: [ReactDocPageComponent],
-})
-export class ReactDocPageModule {}
diff --git a/projects/demo/src/pages/frameworks/vue/vue-doc.component.ts b/projects/demo/src/pages/frameworks/vue/vue-doc.component.ts
index 4de311df0..1a39544b3 100644
--- a/projects/demo/src/pages/frameworks/vue/vue-doc.component.ts
+++ b/projects/demo/src/pages/frameworks/vue/vue-doc.component.ts
@@ -1,11 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {
-    TuiDocCodeModule,
-    TuiDocExampleModule,
-    TuiDocPageModule,
-} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 
 import {VueExample1} from './examples/vue-1/component';
@@ -14,18 +10,16 @@ import {VueExample1} from './examples/vue-1/component';
     standalone: true,
     selector: 'vue-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiNotificationModule,
         TuiLinkModule,
         RouterLink,
-        TuiDocCodeModule,
-        TuiDocExampleModule,
         VueExample1,
     ],
     templateUrl: './vue-doc.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class VueDocPageComponent {
+export default class VueDocPageComponent {
     readonly coreConceptsOverviewDocPage = `/${DemoPath.CoreConceptsOverview}`;
     readonly useMaskitoBasicUsage = import('./examples/use-maskito-basic-usage.md?raw');
     readonly queryNestedInputDemo = import('./examples/query-nested-input.md?raw');
diff --git a/projects/demo/src/pages/frameworks/vue/vue-doc.module.ts b/projects/demo/src/pages/frameworks/vue/vue-doc.module.ts
deleted file mode 100644
index ab128b1c8..000000000
--- a/projects/demo/src/pages/frameworks/vue/vue-doc.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {MaskitoDirective} from '@maskito/angular';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-
-import {VueExample1} from './examples/vue-1/component';
-import {VueDocPageComponent} from './vue-doc.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MaskitoDirective,
-        TuiAddonDocModule,
-        TuiLinkModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(VueDocPageComponent)),
-        VueDocPageComponent,
-        VueExample1,
-    ],
-    exports: [VueDocPageComponent],
-})
-export class VueDocPageModule {}
diff --git a/projects/demo/src/pages/phone/examples/1-basic/component.ts b/projects/demo/src/pages/phone/examples/1-basic/component.ts
index 6668bb72b..933c2a63a 100644
--- a/projects/demo/src/pages/phone/examples/1-basic/component.ts
+++ b/projects/demo/src/pages/phone/examples/1-basic/component.ts
@@ -1,7 +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 {TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 import mask from './mask';
@@ -12,9 +12,7 @@ import mask from './mask';
     imports: [
         TuiInputModule,
         TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
     ],
     template: `
diff --git a/projects/demo/src/pages/phone/examples/2-validation/component.ts b/projects/demo/src/pages/phone/examples/2-validation/component.ts
index e405be247..1e12ae4ca 100644
--- a/projects/demo/src/pages/phone/examples/2-validation/component.ts
+++ b/projects/demo/src/pages/phone/examples/2-validation/component.ts
@@ -9,11 +9,7 @@ import {
 } from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {TuiValidationError} from '@taiga-ui/cdk';
-import {
-    TuiErrorModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiErrorModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiFieldErrorPipeModule, TuiInputModule} from '@taiga-ui/kit';
 import {CountryCode, isValidPhoneNumber} from 'libphonenumber-js/max';
 
@@ -34,7 +30,6 @@ function phoneValidator(countryCode: CountryCode): ValidatorFn {
         TuiInputModule,
         TuiTextfieldControllerModule,
         ReactiveFormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
         TuiErrorModule,
         AsyncPipe,
diff --git a/projects/demo/src/pages/phone/examples/3-non-strict/component.ts b/projects/demo/src/pages/phone/examples/3-non-strict/component.ts
index 297beab57..0d51c487f 100644
--- a/projects/demo/src/pages/phone/examples/3-non-strict/component.ts
+++ b/projects/demo/src/pages/phone/examples/3-non-strict/component.ts
@@ -1,13 +1,9 @@
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {maskitoGetCountryFromNumber} from '@maskito/phone';
 import {TUI_IS_APPLE} from '@taiga-ui/cdk';
-import {
-    TuiFlagPipeModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiFlagPipeModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 import metadata from 'libphonenumber-js/min/metadata';
 
@@ -19,9 +15,7 @@ import mask from './mask';
     imports: [
         TuiInputModule,
         TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
         TuiFlagPipeModule,
     ],
diff --git a/projects/demo/src/pages/phone/examples/4-lazy-metadata/component.ts b/projects/demo/src/pages/phone/examples/4-lazy-metadata/component.ts
index b736b2f49..3fd49f7cf 100644
--- a/projects/demo/src/pages/phone/examples/4-lazy-metadata/component.ts
+++ b/projects/demo/src/pages/phone/examples/4-lazy-metadata/component.ts
@@ -1,9 +1,9 @@
 import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
 import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
-import {TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 
 @Component({
@@ -12,9 +12,7 @@ import {TuiInputModule} from '@taiga-ui/kit';
     imports: [
         TuiInputModule,
         TuiTextfieldControllerModule,
-        ReactiveFormsModule,
         FormsModule,
-        TuiPrimitiveTextfieldModule,
         MaskitoDirective,
     ],
     template: `
diff --git a/projects/demo/src/pages/phone/index.ts b/projects/demo/src/pages/phone/index.ts
new file mode 100644
index 000000000..369d9e9ec
--- /dev/null
+++ b/projects/demo/src/pages/phone/index.ts
@@ -0,0 +1,5 @@
+import {tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+
+import {PhoneDocComponent} from './phone-doc.component';
+
+export default tuiGenerateRoutes(PhoneDocComponent);
diff --git a/projects/demo/src/pages/phone/phone-doc.component.ts b/projects/demo/src/pages/phone/phone-doc.component.ts
index ee1dbdce8..49b3228bd 100644
--- a/projects/demo/src/pages/phone/phone-doc.component.ts
+++ b/projects/demo/src/pages/phone/phone-doc.component.ts
@@ -3,19 +3,9 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {DocExamplePrimaryTab} from '@demo/constants';
 import {MaskitoDirective} from '@maskito/angular';
 import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
-import {
-    TuiDocDemoModule,
-    TuiDocDocumentationModule,
-    TuiDocExample,
-    TuiDocExampleModule,
-    TuiDocPageModule,
-} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, TuiDocExample} from '@taiga-ui/addon-doc';
 import {TUI_IS_APPLE} from '@taiga-ui/cdk';
-import {
-    TuiLinkModule,
-    TuiPrimitiveTextfieldModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
+import {TuiLinkModule, TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiInputModule} from '@taiga-ui/kit';
 import {CountryCode, getCountries} from 'libphonenumber-js/core';
 import metadata from 'libphonenumber-js/min/metadata';
@@ -31,20 +21,16 @@ type GeneratorOptions = Required<Parameters<typeof maskitoPhoneOptionsGenerator>
     standalone: true,
     selector: 'phone-doc',
     imports: [
-        TuiDocPageModule,
+        MaskitoDirective,
+        ReactiveFormsModule,
+        TuiAddonDocModule,
+        TuiInputModule,
         TuiLinkModule,
-        TuiDocExampleModule,
+        TuiTextfieldControllerModule,
         PhoneMaskDocExample1,
         PhoneMaskDocExample2,
         PhoneMaskDocExample3,
         PhoneMaskDocExample4,
-        TuiDocDemoModule,
-        TuiInputModule,
-        TuiTextfieldControllerModule,
-        ReactiveFormsModule,
-        TuiPrimitiveTextfieldModule,
-        MaskitoDirective,
-        TuiDocDocumentationModule,
     ],
     templateUrl: './phone-doc.template.html',
     styleUrls: ['./phone-doc.style.less'],
diff --git a/projects/demo/src/pages/phone/phone-doc.module.ts b/projects/demo/src/pages/phone/phone-doc.module.ts
deleted file mode 100644
index 80d5b69c7..000000000
--- a/projects/demo/src/pages/phone/phone-doc.module.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {MaskitoDirective} from '@maskito/angular';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {
-    TuiErrorModule,
-    TuiFlagPipeModule,
-    TuiLinkModule,
-    TuiNotificationModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {TuiFieldErrorPipeModule, TuiInputModule} from '@taiga-ui/kit';
-
-import {PhoneMaskDocExample1} from './examples/1-basic/component';
-import {PhoneMaskDocExample2} from './examples/2-validation/component';
-import {PhoneMaskDocExample3} from './examples/3-non-strict/component';
-import {PhoneMaskDocExample4} from './examples/4-lazy-metadata/component';
-import {PhoneDocComponent} from './phone-doc.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MaskitoDirective,
-        TuiAddonDocModule,
-        TuiInputModule,
-        TuiFlagPipeModule,
-        TuiLinkModule,
-        TuiErrorModule,
-        TuiNotificationModule,
-        TuiFieldErrorPipeModule,
-        TuiTextfieldControllerModule,
-        RouterModule.forChild(tuiGenerateRoutes(PhoneDocComponent)),
-        PhoneDocComponent,
-        PhoneMaskDocExample1,
-        PhoneMaskDocExample2,
-        PhoneMaskDocExample3,
-        PhoneMaskDocExample4,
-    ],
-    exports: [PhoneDocComponent],
-})
-export class PhoneDocModule {}
diff --git a/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.module.ts b/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.module.ts
deleted file mode 100644
index f42933e36..000000000
--- a/projects/demo/src/pages/stackblitz/components/stackblitz-starter/stackblitz-starter.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiLoaderModule} from '@taiga-ui/core';
-
-import {StackblitzStarterComponent} from './stackblitz-starter.component';
-
-@NgModule({
-    imports: [
-        TuiLoaderModule,
-        RouterModule.forChild([{path: '', component: StackblitzStarterComponent}]),
-        StackblitzStarterComponent,
-    ],
-    exports: [StackblitzStarterComponent],
-})
-export class StackblitzStarterModule {}
diff --git a/projects/demo/src/pages/stackblitz/index.ts b/projects/demo/src/pages/stackblitz/index.ts
index 83a6e4c87..e639737b7 100644
--- a/projects/demo/src/pages/stackblitz/index.ts
+++ b/projects/demo/src/pages/stackblitz/index.ts
@@ -1,4 +1,3 @@
 export * from './components/stackblitz-edit-button/stackblitz-edit-button.component';
 export * from './components/stackblitz-starter/stackblitz-starter.component';
-export * from './components/stackblitz-starter/stackblitz-starter.module';
 export * from './stackblitz.service';