refactor!: Icon component move to core, make standalone

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

@@ -227,4 +227,8 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
         from: {name: 'tuiStringHashToHsl', moduleSpecifier: '@taiga-ui/kit'},
         to: {name: 'tuiStringHashToHsl', moduleSpecifier: '@taiga-ui/core'},
     },
+    {
+        from: {name: 'TuiIconModule', moduleSpecifier: '@taiga-ui/experimental'},
+        to: {name: 'TuiIconComponent', moduleSpecifier: '@taiga-ui/core'},
+    },
 ];

projects/experimental/components/icon/icon.component.ts → projects/core/components/icon/icon.component.ts

@@ -1,8 +1,9 @@
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import type {TuiStringHandler} from '@taiga-ui/cdk';
-import {TUI_ICON_RESOLVER} from '@taiga-ui/core';
+import {TUI_ICON_RESOLVER} from '@taiga-ui/core/tokens';
 
 @Component({
+    standalone: true,
     selector: 'tui-icon',
     template: '',
     host: {

projects/experimental/components/icon/index.ts → projects/core/components/icon/index.ts

@@ -1,2 +1 @@
 export * from './icon.component';
-export * from './icon.module';

projects/core/components/index.ts

@@ -8,6 +8,7 @@ export * from '@taiga-ui/core/components/expand';
 export * from '@taiga-ui/core/components/group';
 export * from '@taiga-ui/core/components/hints-host';
 export * from '@taiga-ui/core/components/hosted-dropdown';
+export * from '@taiga-ui/core/components/icon';
 export * from '@taiga-ui/core/components/label';
 export * from '@taiga-ui/core/components/link';
 export * from '@taiga-ui/core/components/loader';

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

@@ -312,9 +312,9 @@ export const ROUTES: Routes = [
         },
     },
     {
-        path: 'experimental/icon',
+        path: 'components/icon',
         loadChildren: async () =>
-            (await import('../experimental/icon/icon.module')).ExampleTuiIconModule,
+            (await import('../components/icon/icon.module')).ExampleTuiIconModule,
         data: {
             title: 'Icon',
         },
@@ -1756,11 +1756,14 @@ export const ROUTES: Routes = [
         },
     },
     // SERVICES
-    route({
+    {
         path: 'components/alert',
-        title: 'Alert',
-        loadComponent: async () => import('../components/alert/alert.component'),
-    }),
+        loadChildren: async () =>
+            (await import('../components/alert/alert.module')).ExampleTuiAlertModule,
+        data: {
+            title: 'Alert',
+        },
+    },
     {
         path: 'services/breakpoint-service',
         loadChildren: async () =>

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

@@ -891,10 +891,10 @@ export const pages: TuiDocPages = [
         route: '/experimental/header',
     },
     {
-        section: 'Experimental',
+        section: 'Components',
         title: 'Icon',
         keywords: 'icons, image, картинка, свг, svg, графика, иконка',
-        route: '/experimental/icon',
+        route: '/components/icon',
     },
     {
         section: 'Experimental',

projects/demo/src/modules/charts/arc-chart/examples/1/index.html

@@ -1,12 +1,11 @@
 <tui-input-number
     decimal="never"
-    class="index-controller"
+    class="b-form"
     [step]="1"
     [(ngModel)]="activeItemIndex"
 >
     activeItemIndex
 </tui-input-number>
-
 <div class="wrapper">
     <tui-arc-chart
         size="m"

projects/demo/src/modules/charts/arc-chart/examples/1/index.less

@@ -8,7 +8,3 @@
     --tui-chart-2: var(--tui-support-03);
     --tui-chart-3: var(--tui-support-09);
 }
-
-.index-controller {
-    max-width: 20rem;
-}

projects/demo/src/modules/charts/bar-chart/examples/2/index.html

@@ -28,7 +28,7 @@
 </div>
 
 <tui-select
-    class="select"
+    class="b-form"
     [(ngModel)]="appearance"
 >
     Hint appearance

projects/demo/src/modules/charts/bar-chart/examples/2/index.less

@@ -17,7 +17,3 @@
     display: flex;
     min-width: 31.25rem;
 }
-
-.select {
-    max-width: 20rem;
-}

projects/demo/src/modules/charts/line-days-chart/examples/1/index.html

@@ -1,4 +1,4 @@
-<p>
+<p class="b-form">
     <tui-input-date-range
         [maxLength]="maxLength"
         [(ngModel)]="range"

projects/demo/src/modules/charts/line-days-chart/examples/2/index.html

@@ -4,14 +4,15 @@
 </tui-notification>
 <p class="controls">
     <tui-input-date-range
+        class="b-form"
         [maxLength]="maxLength"
         [(ngModel)]="data"
         (ngModelChange)="onDataChange($event)"
     >
         Data
     </tui-input-date-range>
     <tui-input-date-range
-        class="tui-space_left-4"
+        class="b-form tui-space_left-4"
         [maxLength]="maxLength"
         [(ngModel)]="show"
     >

projects/demo/src/modules/charts/line-days-chart/examples/2/index.less

@@ -19,7 +19,7 @@
 .controls {
     display: flex;
 
-    tui-input-date-range {
+    .b-form {
         flex: 1;
     }
 }

projects/demo/src/modules/components/alert/alert.component.ts

@@ -1,52 +1,22 @@
 import {Component, inject, INJECTOR} from '@angular/core';
-import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {
-    TuiAddonDocModule,
-    type TuiDocExample,
-    TuiTextCodeModule,
-} from '@taiga-ui/addon-doc';
+import type {TuiDocExample} from '@taiga-ui/addon-doc';
 import type {TuiPopoverContext} from '@taiga-ui/cdk';
 import type {TuiAlertOptions, TuiNotification} from '@taiga-ui/core';
-import {
-    TUI_NOTIFICATION_OPTIONS,
-    TuiAlertService,
-    TuiButtonModule,
-    TuiLinkModule,
-} from '@taiga-ui/core';
+import {TUI_NOTIFICATION_OPTIONS, TuiAlertService} from '@taiga-ui/core';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {switchMap} from 'rxjs';
 
-import {TuiAlertExampleComponent1} from './examples/1';
-import {TuiAlertExampleComponent2} from './examples/2';
-import {TuiAlertExampleComponent3} from './examples/3';
-import {TuiAlertExampleComponent4} from './examples/4';
 import {AlertExampleWithDataComponent} from './examples/4/alert-example-with-data/alert-example-with-data.component';
-import {TuiAlertExampleComponent5} from './examples/5';
-import {TuiAlertExampleComponent6} from './examples/6';
 
 @Component({
-    standalone: true,
     selector: 'example-tui-alert',
-    imports: [
-        TuiTextCodeModule,
-        TuiButtonModule,
-        TuiLinkModule,
-        TuiAddonDocModule,
-        TuiAlertExampleComponent1,
-        TuiAlertExampleComponent2,
-        TuiAlertExampleComponent3,
-        TuiAlertExampleComponent4,
-        TuiAlertExampleComponent5,
-        TuiAlertExampleComponent6,
-        RouterLink,
-    ],
     templateUrl: './alert.template.html',
     styleUrls: ['./alert.style.less'],
     changeDetection,
 })
-export default class ExampleTuiAlertComponent {
+export class ExampleTuiAlertComponent {
     private readonly alerts = inject(TuiAlertService);
 
     private readonly defaultIcon = inject(TUI_NOTIFICATION_OPTIONS).icon;
@@ -87,6 +57,9 @@ export default class ExampleTuiAlertComponent {
         'alert-example/alert-example.template.html': import(
             './examples/3/alert-example/alert-example.template.html?raw'
         ),
+        'alert-example/alert-example.module.ts': import(
+            './examples/3/alert-example/alert-example.module.ts?raw'
+        ),
     };
 
     protected readonly example4: TuiDocExample = {
@@ -101,11 +74,17 @@ export default class ExampleTuiAlertComponent {
         'alert-example-with-data/alert-example-with-data.style.less': import(
             './examples/4/alert-example-with-data/alert-example-with-data.style.less?raw'
         ),
+        'alert-example-with-data/alert-example-with-data.module.ts': import(
+            './examples/4/alert-example-with-data/alert-example-with-data.module.ts?raw'
+        ),
     };
 
     protected readonly example5: TuiDocExample = {
         TypeScript: import('./examples/5/index.ts?raw'),
         HTML: import('./examples/5/index.html?raw'),
+        'custom-label/custom-label.module.ts': import(
+            './examples/5/custom-label/custom-label.module.ts?raw'
+        ),
         'custom-label/custom-label.component.ts': import(
             './examples/5/custom-label/custom-label.component.ts?raw'
         ),
@@ -115,6 +94,10 @@ export default class ExampleTuiAlertComponent {
         'custom-label/custom-label.template.html': import(
             './examples/5/custom-label/custom-label.template.html?raw'
         ),
+        'alert-example-with-custom-label/alert-example-with-custom-label.module.ts':
+            import(
+                './examples/5/alert-example-with-custom-label/alert-example-with-custom-label.module.ts?raw'
+            ),
         'alert-example-with-custom-label/alert-example-with-custom-label.component.ts':
             import(
                 './examples/5/alert-example-with-custom-label/alert-example-with-custom-label.component.ts?raw'

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

@@ -0,0 +1,63 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
+import {
+    TuiAddonDocModule,
+    tuiGenerateRoutes,
+    TuiTextCodeModule,
+} from '@taiga-ui/addon-doc';
+import {
+    TuiAlertModule,
+    TuiButtonModule,
+    TuiLinkModule,
+    TuiModeModule,
+} from '@taiga-ui/core';
+import {TuiInputModule, TuiRadioListModule} from '@taiga-ui/kit';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
+
+import {ExampleTuiAlertComponent} from './alert.component';
+import {TuiAlertExampleComponent1} from './examples/1';
+import {TuiAlertExampleComponent2} from './examples/2';
+import {TuiAlertExampleComponent3} from './examples/3';
+import {AlertExampleModule} from './examples/3/alert-example/alert-example.module';
+import {TuiAlertExampleComponent4} from './examples/4';
+import {AlertExampleWithDataModule} from './examples/4/alert-example-with-data/alert-example-with-data.module';
+import {TuiAlertExampleComponent5} from './examples/5';
+import {AlertExampleWithCustomLabelModule} from './examples/5/alert-example-with-custom-label/alert-example-with-custom-label.module';
+import {CustomLabelModule} from './examples/5/custom-label/custom-label.module';
+import {TuiAlertExampleComponent6} from './examples/6';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        PolymorpheusModule,
+        TuiTextCodeModule,
+        TuiAlertModule,
+        TuiButtonModule,
+        TuiModeModule,
+        TuiAmountPipe,
+        AlertExampleWithCustomLabelModule,
+        AlertExampleWithDataModule,
+        AlertExampleModule,
+        CustomLabelModule,
+        TuiRadioListModule,
+        TuiInputModule,
+        TuiLinkModule,
+        TuiAddonDocModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAlertComponent)),
+    ],
+    declarations: [
+        ExampleTuiAlertComponent,
+        TuiAlertExampleComponent1,
+        TuiAlertExampleComponent2,
+        TuiAlertExampleComponent3,
+        TuiAlertExampleComponent4,
+        TuiAlertExampleComponent5,
+        TuiAlertExampleComponent6,
+    ],
+    exports: [ExampleTuiAlertComponent],
+})
+export class ExampleTuiAlertModule {}

projects/demo/src/modules/components/alert/examples/1/index.ts

@@ -1,12 +1,10 @@
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAlertService, TuiButtonModule} from '@taiga-ui/core';
+import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
-    standalone: true,
     selector: 'tui-alerts-example-1',
-    imports: [TuiButtonModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

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

@@ -1,17 +1,12 @@
-import {AsyncPipe} from '@angular/common';
 import type {TemplateRef} from '@angular/core';
 import {Component, inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import type {TuiAlertContext} from '@taiga-ui/core';
-import {TuiAlertService, TuiButtonModule} from '@taiga-ui/core';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
+import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
-    standalone: true,
     selector: 'tui-alerts-example-2',
-    imports: [AsyncPipe, TuiButtonModule, TuiAmountPipe, PolymorpheusModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts

@@ -1,13 +1,11 @@
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import type {TuiPopover} from '@taiga-ui/cdk';
-import {type TuiAlertOptions, TuiButtonModule, TuiModeModule} from '@taiga-ui/core';
+import type {TuiAlertOptions} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
-    standalone: true,
     selector: 'tui-notifications-service-example',
-    imports: [TuiButtonModule, TuiModeModule],
     templateUrl: './alert-example.template.html',
     changeDetection,
 })

projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.module.ts

@@ -0,0 +1,22 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
+import {TuiButtonModule, TuiModeModule} from '@taiga-ui/core';
+import {TuiSelectModule} from '@taiga-ui/kit';
+
+import {AlertExampleComponent} from './alert-example.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        TuiButtonModule,
+        TuiModeModule,
+        TuiSelectModule,
+        TuiAmountPipe,
+    ],
+    declarations: [AlertExampleComponent],
+    exports: [AlertExampleComponent],
+})
+export class AlertExampleModule {}

projects/demo/src/modules/components/alert/examples/3/index.ts

@@ -2,16 +2,14 @@ import {Component, inject} from '@angular/core';
 import {Router} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAlertService, TuiButtonModule} from '@taiga-ui/core';
+import {TuiAlertService} from '@taiga-ui/core';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 import {switchMap, takeUntil} from 'rxjs';
 
 import {AlertExampleComponent} from './alert-example/alert-example.component';
 
 @Component({
-    standalone: true,
     selector: 'tui-alerts-example-3',
-    imports: [AlertExampleComponent, TuiButtonModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,