chore(deps): update dependency @ng-web-apis/common to v4

apps/demo/src/app/app.component.html

@@ -1,10 +1,11 @@
 <tui-doc-main>
     <ng-container ngProjectAs="tuiDocHeader">
+        <!-- TODO: (Taiga UI migration) TuiMode has been removed. Please use tuiTheme attribute to set theme https://taiga-ui.dev/directives/theme -->
         <a
             href="https://github.com/taiga-family/microzord"
             target="_blank"
             tuiLink
-            tuiMode="onLight"
+            tuiTheme="light"
             class="link"
         >
             <img

apps/demo/src/app/app.module.ts

@@ -2,8 +2,8 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
-import {TUI_DOC_LOGO, TUI_DOC_PAGES, TuiDocMainModule} from '@taiga-ui/addon-doc';
-import {TuiLinkModule} from '@taiga-ui/core';
+import {TUI_DOC_LOGO, TUI_DOC_PAGES, TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 import {HIGHLIGHT_OPTIONS, HighlightOptions} from 'ngx-highlightjs';
 
 import {AppComponent} from './app.component';
@@ -26,8 +26,8 @@ export const HIGHLIGHT_OPTIONS_VALUE: HighlightOptions = {
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
-        TuiDocMainModule,
-        TuiLinkModule,
+        ...TuiAddonDoc,
+        TuiLink,
         GettingStartedModule,
         RouterModule.forRoot(ROUTES, {initialNavigation: 'enabledBlocking'}),
     ],

apps/demo/src/app/getting-started/getting-started.module.ts

@@ -1,22 +1,21 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-import {TuiIslandModule} from '@taiga-ui/kit';
+import {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink, TuiNotification} from '@taiga-ui/core';
+import {TuiIslandDirective} from '@taiga-ui/legacy';
 
 import {HostChildWarningModule} from '../shared/host-child-warning/host-child-warning.module';
 import {GettingStartedComponent} from './getting-started.component';
 
 @NgModule({
     imports: [
         CommonModule,
-        TuiDocPageModule,
-        TuiLinkModule,
-        TuiDocCodeModule,
+        ...TuiAddonDoc,
+        TuiLink,
         RouterModule,
-        TuiNotificationModule,
-        TuiIslandModule,
+        TuiNotification,
+        TuiIslandDirective,
         HostChildWarningModule,
     ],
     declarations: [GettingStartedComponent],

apps/demo/src/app/getting-started/getting-started.template.html

@@ -41,7 +41,10 @@ <h2>What it is about</h2>
             </li>
         </ul>
 
-        <tui-notification class="tui-space_top-4">
+        <tui-notification
+            size="m"
+            class="tui-space_top-4"
+        >
             Some application can host any amount of child apps and be a child for other app at the same time
         </tui-notification>
 

apps/demo/src/app/logo/logo.component.ts

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
+import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
 
 @Component({
     selector: 'logo',

apps/demo/src/app/modules/angular-child/angular-child.module.ts

@@ -1,16 +1,12 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 
 import {AngularChildComponent} from './angular-child.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(AngularChildComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, RouterModule],
     declarations: [AngularChildComponent],
     exports: [AngularChildComponent],
 })

apps/demo/src/app/modules/angular-host/angular-host.module.ts

@@ -1,16 +1,12 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 
 import {AngularHostComponent} from './angular-host.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(AngularHostComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, RouterModule],
     declarations: [AngularHostComponent],
     exports: [AngularHostComponent],
 })

apps/demo/src/app/modules/angular-installation/angular-installation.module.ts

@@ -1,18 +1,13 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 
 import {HostChildWarningModule} from '../../shared/host-child-warning/host-child-warning.module';
 import {AngularInstallationComponent} from './angular-installation.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        HostChildWarningModule,
-        RouterModule.forChild(tuiGenerateRoutes(AngularInstallationComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, HostChildWarningModule, RouterModule],
     declarations: [AngularInstallationComponent],
     exports: [AngularInstallationComponent],
 })

apps/demo/src/app/modules/application/application.module.ts

@@ -1,17 +1,12 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink, TuiNotification} from '@taiga-ui/core';
 
 import {ApplicationComponent} from './application.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        TuiNotificationModule,
-        RouterModule.forChild(tuiGenerateRoutes(ApplicationComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, TuiNotification, RouterModule],
     declarations: [ApplicationComponent],
     exports: [ApplicationComponent],
 })

apps/demo/src/app/modules/application/application.template.html

@@ -12,7 +12,8 @@
         <p>It can give you more flexability in interaction between complex apps if needed.</p>
 
         <tui-notification
-            status="warning"
+            appearance="warning"
+            size="m"
             class="tui-space_top-8"
         >
             Be careful, if you need this in your not native application, something probably is going wrong.

apps/demo/src/app/modules/native-installation/native-installation.module.ts

@@ -1,16 +1,12 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 
 import {NativeInstallationComponent} from './native-installation.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(NativeInstallationComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, RouterModule],
     declarations: [NativeInstallationComponent],
     exports: [NativeInstallationComponent],
 })

apps/demo/src/app/modules/react-child/react-child.module.ts

@@ -1,16 +1,12 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 
 import {ReactChildComponent} from './react-child.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ReactChildComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, RouterModule],
     declarations: [ReactChildComponent],
     exports: [ReactChildComponent],
 })

apps/demo/src/app/modules/react-installation/react-installation.module.ts

@@ -1,16 +1,12 @@
 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 {TuiAddonDoc} from '@taiga-ui/addon-doc';
+import {TuiLink} from '@taiga-ui/core';
 
 import {ReactInstallationComponent} from './react-installation.component';
 
 @NgModule({
-    imports: [
-        TuiLinkModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ReactInstallationComponent)),
-    ],
+    imports: [TuiLink, ...TuiAddonDoc, RouterModule],
     declarations: [ReactInstallationComponent],
     exports: [ReactInstallationComponent],
 })

apps/demo/src/app/pages.ts

@@ -1,6 +1,6 @@
-import type {TuiDocPages} from '@taiga-ui/addon-doc';
+import type {TuiDocRoutePages} from '@taiga-ui/addon-doc';
 
-export const pages: TuiDocPages = [
+export const pages: TuiDocRoutePages = [
     {
         section: 'Starting',
         title: 'Getting started',

apps/demo/src/app/shared/host-child-warning/host-child-warning.module.ts

@@ -1,10 +1,10 @@
 import {NgModule} from '@angular/core';
-import {TuiNotificationModule} from '@taiga-ui/core';
+import {TuiNotification} from '@taiga-ui/core';
 
 import {HostChildWarningComponent} from './host-child-warning.component';
 
 @NgModule({
-    imports: [TuiNotificationModule],
+    imports: [TuiNotification],
     declarations: [HostChildWarningComponent],
     exports: [HostChildWarningComponent],
 })

apps/demo/src/app/shared/host-child-warning/host-child-warning.template.html

@@ -1 +1 @@
-<tui-notification>The application can be a host and a child at the same time</tui-notification>
+<tui-notification size="m">The application can be a host and a child at the same time</tui-notification>

apps/host/src/app/app.component.less

@@ -4,13 +4,13 @@
 }
 
 .embed-container {
-    border: 2px var(--tui-support-02) dashed;
+    border: 2px var(--tui-chart-categorical-02) dashed;
     padding: 0 1rem 1rem;
     margin-bottom: 1rem;
 }
 
 .embedded {
-    border: 2px var(--tui-support-05) dashed;
+    border: 2px var(--tui-chart-categorical-05) dashed;
 
     &:not(:last-child) {
         margin-bottom: 1rem;

apps/host/src/app/app.component.ts

@@ -30,9 +30,9 @@ export class AppComponent {
         console.log(`${event.target?.name}: ${event.type}`);
         this.alertService
             .open(event.type, {
-                hasIcon: false,
+                icon: '',
                 label: event.target?.name,
-                status: 'info',
+                appearance: 'info',
             })
             .subscribe();
         this.cdr.detectChanges();

apps/host/src/app/app.module.ts

@@ -4,7 +4,8 @@ import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
 import {MicrozordHostModule} from '@microzord/angular';
-import {TuiAlertModule, TuiRootModule} from '@taiga-ui/core';
+import {TuiAlert, TuiRoot} from '@taiga-ui/core';
+import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
 
 import {AppComponent} from './app.component';
 
@@ -14,8 +15,8 @@ import {AppComponent} from './app.component';
         BrowserAnimationsModule,
         RouterModule.forRoot([], {initialNavigation: 'enabledBlocking'}),
         HttpClientModule,
-        TuiRootModule,
-        TuiAlertModule,
+        TuiRoot,
+        TuiAlert,
         MicrozordHostModule.register({
             modules: [
                 {
@@ -42,7 +43,7 @@ import {AppComponent} from './app.component';
         }),
     ],
     declarations: [AppComponent],
-    providers: [{provide: 'some-token', useValue: 'true'}],
+    providers: [{provide: 'some-token', useValue: 'true'}, NG_EVENT_PLUGINS],
     bootstrap: [AppComponent],
 })
 export class AppModule {}