refactor: move tuiFade to @taiga-ui/kit (#6928)

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -197,4 +197,11 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
             moduleSpecifier: '@tinkoff/tui-editor',
         },
     },
+    {
+        from: {name: 'TuiFadeModule', moduleSpecifier: '@taiga-ui/experimental'},
+        to: {
+            name: 'TuiFadeDirective',
+            moduleSpecifier: '@taiga-ui/kit',
+        },
+    },
 ];

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

@@ -348,14 +348,6 @@ export const ROUTES: Routes = [
             title: 'Compass',
         },
     },
-    {
-        path: 'experimental/fade',
-        loadChildren: async () =>
-            (await import('../experimental/fade/fade.module')).ExampleTuiFadeModule,
-        data: {
-            title: 'Fade',
-        },
-    },
     {
         path: 'experimental/header',
         loadChildren: async () =>
@@ -662,6 +654,14 @@ export const ROUTES: Routes = [
             title: 'DropdownSelection',
         },
     },
+    {
+        path: 'directives/fade',
+        loadChildren: async () =>
+            (await import('../directives/fade/fade.module')).ExampleTuiFadeDirective,
+        data: {
+            title: 'Fade',
+        },
+    },
     {
         path: 'components/input-inline',
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -890,12 +890,6 @@ export const pages: TuiDocPages = [
         keywords: 'compass, user, point, dot, карта, точка',
         route: '/experimental/compass',
     },
-    {
-        section: 'Experimental',
-        title: 'Fade',
-        keywords: 'overflow, ellipsis, gradient, clamp, line',
-        route: '/experimental/fade',
-    },
     {
         section: 'Experimental',
         title: 'Header',
@@ -1387,6 +1381,12 @@ export const pages: TuiDocPages = [
                 keywords: 'zoom, scale, pinch, зум, масштаб',
                 route: '/directives/zoom',
             },
+            {
+                section: 'Tools',
+                title: 'Fade',
+                keywords: 'overflow, ellipsis, gradient, clamp, line',
+                route: '/directives/fade',
+            },
         ],
     },
     {

projects/demo/src/modules/components/avatar/avatar.template.html

@@ -23,7 +23,7 @@
         >
             <tui-notification class="tui-space_bottom-4">
                 This example requires import of
-                <code>TuiFadeModule</code>
+                <code>TuiFadeDirective</code>
             </tui-notification>
             <tui-avatar-example-2></tui-avatar-example-2>
         </tui-doc-example>

projects/demo/src/modules/components/avatar/examples/2/index.ts

@@ -1,13 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAutoColorModule, TuiFadeModule} from '@taiga-ui/experimental';
-import {TuiAvatarComponent} from '@taiga-ui/kit';
+import {TuiAutoColorModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiFadeDirective} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-avatar-example-2',
-    imports: [TuiAvatarComponent, TuiAutoColorModule, TuiFadeModule],
+    imports: [TuiAvatarComponent, TuiAutoColorModule, TuiFadeDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/components/avatar/examples/6/index.ts

@@ -2,8 +2,12 @@ import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiFadeModule, TuiFallbackSrcModule} from '@taiga-ui/experimental';
-import {TuiAvatarComponent, TuiAvatarLabeledComponent} from '@taiga-ui/kit';
+import {TuiFallbackSrcModule} from '@taiga-ui/experimental';
+import {
+    TuiAvatarComponent,
+    TuiAvatarLabeledComponent,
+    TuiFadeDirective,
+} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -13,7 +17,7 @@ import {TuiAvatarComponent, TuiAvatarLabeledComponent} from '@taiga-ui/kit';
         TuiFallbackSrcModule,
         TuiAvatarLabeledComponent,
         TuiAvatarComponent,
-        TuiFadeModule,
+        TuiFadeDirective,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],

projects/demo/src/modules/components/badge/badge.module.ts

@@ -10,8 +10,8 @@ import {
     TuiNotificationModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiFadeModule, TuiIconModule} from '@taiga-ui/experimental';
-import {TuiBadgeDirective, TuiRadioListModule} from '@taiga-ui/kit';
+import {TuiIconModule} from '@taiga-ui/experimental';
+import {TuiBadgeDirective, TuiFadeDirective, TuiRadioListModule} from '@taiga-ui/kit';
 
 import {ExampleTuiBadgeComponent} from './badge.component';
 import {TuiBadgeExample1} from './examples/1';
@@ -30,7 +30,7 @@ import {TuiBadgeExample6} from './examples/6';
         TuiRadioListModule,
         FormsModule,
         CommonModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiNotificationModule,
         TuiBadgeDirective,
         TuiTextfieldControllerModule,

projects/demo/src/modules/components/block/block.module.ts

@@ -6,13 +6,12 @@ import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiGroupDirective, TuiTooltipModule} from '@taiga-ui/core';
 import {
     TuiCheckboxModule,
-    TuiFadeModule,
     TuiIconModule,
     TuiRadioModule,
     TuiTitleModule,
     TuiToggleModule,
 } from '@taiga-ui/experimental';
-import {TuiAvatarComponent, TuiBlockDirective} from '@taiga-ui/kit';
+import {TuiAvatarComponent, TuiBlockDirective, TuiFadeDirective} from '@taiga-ui/kit';
 
 import {ExampleTuiBlockComponent} from './block.component';
 import {TuiBlockExample1} from './examples/1';
@@ -30,7 +29,7 @@ import {TuiBlockExample3} from './examples/3';
         TuiTooltipModule,
         TuiCheckboxModule,
         TuiRadioModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiTitleModule,
         TuiToggleModule,
         TuiIconModule,

projects/demo/src/modules/experimental/fade/examples/import/import-module.md → projects/demo/src/modules/directives/fade/examples/import/import-module.md

@@ -1,12 +1,12 @@
 ```ts
 import {NgModule} from '@angular/core';
-import {TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiFadeDirective} from '@taiga-ui/kit';
 // ...
 
 @NgModule({
   imports: [
     // ...
-    TuiFadeModule,
+    TuiFadeDirective,
   ],
 })
 export class MyModule {}

projects/demo/src/modules/experimental/fade/fade.module.ts → projects/demo/src/modules/directives/fade/fade.module.ts

@@ -7,7 +7,7 @@ import {
     TuiScrollableDirective,
     TuiScrollbarComponent,
 } from '@taiga-ui/core';
-import {TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiFadeDirective} from '@taiga-ui/kit';
 
 import {TuiFadeExample1} from './examples/1';
 import {TuiFadeExample2} from './examples/2';
@@ -17,7 +17,7 @@ import {ExampleTuiFadeComponent} from './fade.component';
 @NgModule({
     imports: [
         CommonModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiNotificationModule,
         TuiScrollbarComponent,
         TuiLinkModule,
@@ -32,4 +32,4 @@ import {ExampleTuiFadeComponent} from './fade.component';
     ],
     exports: [ExampleTuiFadeComponent],
 })
-export class ExampleTuiFadeModule {}
+export class ExampleTuiFadeDirective {}

projects/demo/src/modules/experimental/fade/fade.template.html → projects/demo/src/modules/directives/fade/fade.template.html

@@ -1,15 +1,9 @@
 <tui-doc-page
     header="Fade"
-    package="EXPERIMENTAL"
+    package="KIT"
     type="directives"
 >
     <ng-template pageTab>
-        <tui-notification status="warning">
-            This code is
-            <strong>experimental</strong>
-            and is a subject to change. Expect final solution to be shipped in the next major version
-        </tui-notification>
-
         <p>Directive that uses masking to fade out overflown content</p>
 
         <tui-doc-example

projects/demo/src/modules/experimental/button-vertical/button-vertical.module.ts

@@ -2,12 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
-import {
-    TuiButtonModule,
-    TuiButtonVerticalModule,
-    TuiFadeModule,
-} from '@taiga-ui/experimental';
-import {TuiAvatarComponent} from '@taiga-ui/kit';
+import {TuiButtonModule, TuiButtonVerticalModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiFadeDirective} from '@taiga-ui/kit';
 
 import {ExampleTuiButtonVerticalComponent} from './button-vertical.component';
 import {TuiButtonVerticalExample1} from './examples/1';
@@ -18,7 +14,7 @@ import {TuiButtonVerticalExample2} from './examples/2';
         CommonModule,
         TuiButtonModule,
         TuiButtonVerticalModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiAvatarComponent,
         TuiNotificationModule,
         TuiSvgModule,

projects/demo/src/modules/experimental/card-large/card-large.module.ts

@@ -21,7 +21,6 @@ import {
     TuiButtonModule,
     TuiCardModule,
     TuiCellModule,
-    TuiFadeModule,
     TuiFallbackSrcModule,
     TuiHeaderDirective,
     TuiIconModule,
@@ -34,6 +33,7 @@ import {
     TuiAvatarComponent,
     TuiAvatarStackComponent,
     TuiBadgeDirective,
+    TuiFadeDirective,
 } from '@taiga-ui/kit';
 
 import {ExampleTuiCardLargeComponent} from './card-large.component';
@@ -59,7 +59,7 @@ import {TuiCardLargeExample12} from './examples/12';
         TuiInitialsModule,
         TuiNotificationModule,
         TuiFallbackSrcModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiCardModule,
         TuiSurfaceModule,
         TuiSvgModule,

projects/demo/src/modules/experimental/card-medium/card-medium.module.ts

@@ -20,7 +20,6 @@ import {
     TuiButtonModule,
     TuiCardModule,
     TuiCellModule,
-    TuiFadeModule,
     TuiFallbackSrcModule,
     TuiHeaderDirective,
     TuiIconModule,
@@ -33,6 +32,7 @@ import {
     TuiAvatarComponent,
     TuiAvatarStackComponent,
     TuiBadgeDirective,
+    TuiFadeDirective,
 } from '@taiga-ui/kit';
 
 import {ExampleTuiCardMediumComponent} from './card-medium.component';
@@ -51,7 +51,7 @@ import {TuiCardMediumExample7} from './examples/7';
         TuiInitialsModule,
         TuiNotificationModule,
         TuiFallbackSrcModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiCardModule,
         TuiSurfaceModule,
         TuiSvgModule,

projects/demo/src/modules/experimental/cell/cell.module.ts

@@ -18,7 +18,6 @@ import {
     TuiCardModule,
     TuiCellModule,
     TuiCheckboxModule,
-    TuiFadeModule,
     TuiIconModule,
     TuiSensitiveModule,
     TuiSurfaceModule,
@@ -32,6 +31,7 @@ import {
     TuiBadgedContentComponent,
     TuiBadgeDirective,
     TuiDataListWrapperModule,
+    TuiFadeDirective,
     TuiProgressModule,
     TuiSelectModule,
 } from '@taiga-ui/kit';
@@ -55,7 +55,7 @@ import {TuiCellExample7} from './examples/7';
         TuiBadgeNotificationModule,
         TuiBadgedContentComponent,
         TuiCellModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiLinkModule,
         TuiNotificationModule,
         TuiProgressModule,

projects/demo/src/modules/experimental/chip/chip.module.ts

@@ -10,9 +10,12 @@ import {
     TuiButtonModule,
     TuiCheckboxModule,
     TuiChipModule,
-    TuiFadeModule,
 } from '@taiga-ui/experimental';
-import {TuiAvatarComponent, TuiBadgedContentComponent} from '@taiga-ui/kit';
+import {
+    TuiAvatarComponent,
+    TuiBadgedContentComponent,
+    TuiFadeDirective,
+} from '@taiga-ui/kit';
 
 import {ExampleTuiChipComponent} from './chip.component';
 import {TuiChipExample1} from './examples/1';
@@ -27,7 +30,7 @@ import {TuiChipExample4} from './examples/4';
         TuiAmountPipe,
         TuiChipModule,
         TuiRepeatTimesModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiNotificationModule,
         TuiButtonModule,
         TuiAvatarComponent,

projects/demo/src/modules/experimental/navigation/navigation.module.ts

@@ -15,7 +15,6 @@ import {
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiCardModule,
-    TuiFadeModule,
     TuiHeaderDirective,
     TuiIconModule,
     TuiNavigationModule,
@@ -27,6 +26,7 @@ import {
     TuiAvatarComponent,
     TuiBadgeDirective,
     TuiBreadcrumbsModule,
+    TuiFadeDirective,
     TuiTabsModule,
 } from '@taiga-ui/kit';
 
@@ -49,7 +49,7 @@ import {ExampleTuiNavigationComponent} from './navigation.component';
         TuiBadgeNotificationModule,
         TuiDropdownModule,
         TuiDataListModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         TuiExpandModule,
         TuiTabsModule,
         TuiCardModule,

projects/demo/src/modules/experimental/segmented/segmented.module.ts

@@ -6,10 +6,10 @@ import {TuiNotificationModule} from '@taiga-ui/core';
 import {
     TuiBadgeNotificationModule,
     TuiButtonModule,
-    TuiFadeModule,
     TuiIconModule,
     TuiSegmentedComponent,
 } from '@taiga-ui/experimental';
+import {TuiFadeDirective} from '@taiga-ui/kit';
 
 import {TuiSegmentedExample1} from './examples/1';
 import {TuiSegmentedExample2} from './examples/2';
@@ -23,7 +23,7 @@ import {ExampleTuiSegmentedComponent} from './segmented.component';
         TuiSegmentedComponent,
         TuiNotificationModule,
         TuiBadgeNotificationModule,
-        TuiFadeModule,
+        TuiFadeDirective,
         tuiGetDocModules(ExampleTuiSegmentedComponent),
         FormsModule,
         TuiIconModule,