feat: update Taiga UI to 4 release candidate

web/projects/shared/src/components/drive.component.ts

@@ -1,12 +1,12 @@
+import { TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { Component, Input } from '@angular/core'
-import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
 import { UnitConversionPipesModule } from '../pipes/unit-conversion/unit-conversion.module'
 
 @Component({
   standalone: true,
   selector: 'button[drive]',
   template: `
-    <tui-icon icon="tuiIconSave" />
+    <tui-icon icon="@tui.save" />
     <span tuiTitle>
       <strong>{{ drive.logicalname }}</strong>
       <span tuiSubtitle>
@@ -17,7 +17,7 @@ import { UnitConversionPipesModule } from '../pipes/unit-conversion/unit-convers
       <ng-content />
     </span>
   `,
-  imports: [TuiIconModule, TuiTitleModule, UnitConversionPipesModule],
+  imports: [TuiIcon, TuiTitle, UnitConversionPipesModule],
 })
 export class DriveComponent {
   @Input() drive!: {

web/projects/shared/src/components/initializing/initializing.component.ts

@@ -1,3 +1,4 @@
+import { TuiLet } from '@taiga-ui/cdk'
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
@@ -6,8 +7,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { TuiLetModule } from '@taiga-ui/cdk'
-import { TuiProgressModule } from '@taiga-ui/kit'
+import { TuiProgress } from '@taiga-ui/kit'
 import { delay, filter } from 'rxjs'
 import { LogsWindowComponent } from './logs-window.component'
 import { SetupService } from '../../services/setup.service'
@@ -44,7 +44,7 @@ import { SetupService } from '../../services/setup.service'
       /* TODO: Theme */
       background: #e0e0e0;
       color: #333;
-      --tui-clear-inverse: rgba(0, 0, 0, 0.1);
+      --tui-background-neutral-1: rgba(0, 0, 0, 0.1);
     }
 
     logs-window {
@@ -60,7 +60,7 @@ import { SetupService } from '../../services/setup.service'
       background: #181818;
     }
   `,
-  imports: [CommonModule, LogsWindowComponent, TuiLetModule, TuiProgressModule],
+  imports: [CommonModule, LogsWindowComponent, TuiLet, TuiProgress],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InitializingComponent {

web/projects/shared/src/components/initializing/logs-window.component.ts

@@ -1,11 +1,11 @@
+import { TuiScrollbar } from '@taiga-ui/core'
 import { AsyncPipe } from '@angular/common'
 import { Component, ElementRef, inject } from '@angular/core'
 import {
-  IntersectionObserverModule,
+  WaIntersectionObserver,
   INTERSECTION_ROOT,
 } from '@ng-web-apis/intersection-observer'
-import { MutationObserverModule } from '@ng-web-apis/mutation-observer'
-import { TuiScrollbarModule } from '@taiga-ui/core'
+import { WaMutationObserver } from '@ng-web-apis/mutation-observer'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { SetupLogsService } from '../../services/setup-logs.service'
 
@@ -27,10 +27,10 @@ import { SetupLogsService } from '../../services/setup-logs.service'
   `,
   imports: [
     AsyncPipe,
-    MutationObserverModule,
-    IntersectionObserverModule,
+    WaMutationObserver,
+    WaIntersectionObserver,
     NgDompurifyModule,
-    TuiScrollbarModule,
+    TuiScrollbar,
   ],
   providers: [
     {

web/projects/shared/src/components/loading/loading.component.scss

@@ -1,17 +1,16 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-  @include shadow(3);
-
   display: flex;
   align-items: center;
   max-width: 80%;
   margin: auto;
   padding: 1.5rem;
-  background: var(--tui-elevation-01);
+  background: var(--tui-background-elevation-1);
   border-radius: var(--tui-radius-m);
+  box-shadow: var(--tui-shadow-popup);
 
-  --tui-primary: var(--tui-warning-fill);
+  --tui-background-accent-1: var(--tui-status-warning);
 }
 
 tui-loader {

web/projects/shared/src/components/loading/loading.component.ts

@@ -1,15 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TuiLoader } from '@taiga-ui/core'
 import {
   POLYMORPHEUS_CONTEXT,
   PolymorpheusContent,
-} from '@tinkoff/ng-polymorpheus'
+} from '@taiga-ui/polymorpheus'
 
 @Component({
-  template: `
-    <tui-loader [textContent]="content"></tui-loader>
-  `,
+  standalone: true,
+  template: '<tui-loader [textContent]="content" />',
   styleUrls: ['./loading.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TuiLoader],
 })
 export class LoadingComponent {
   readonly content: PolymorpheusContent =

web/projects/shared/src/components/loading/loading.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core'
-import { TuiLoaderModule } from '@taiga-ui/core'
-import { tuiAsDialog } from '@taiga-ui/cdk'
-import { LoadingComponent } from './loading.component'
-import { LoadingService } from './loading.service'
-
-@NgModule({
-  imports: [TuiLoaderModule],
-  declarations: [LoadingComponent],
-  exports: [LoadingComponent],
-  providers: [tuiAsDialog(LoadingService)],
-})
-export class LoadingModule {}

web/projects/shared/src/components/loading/loading.service.ts

@@ -1,10 +1,11 @@
+import { TuiPopoverService } from '@taiga-ui/cdk'
 import { Injectable } from '@angular/core'
-import { AbstractTuiDialogService } from '@taiga-ui/cdk'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { TUI_DIALOGS } from '@taiga-ui/core'
+
 import { LoadingComponent } from './loading.component'
 
-@Injectable({ providedIn: `root` })
-export class LoadingService extends AbstractTuiDialogService<unknown> {
-  protected readonly component = new PolymorpheusComponent(LoadingComponent)
-  protected readonly defaultOptions = {}
-}
+@Injectable({
+  providedIn: `root`,
+  useFactory: () => new LoadingService(TUI_DIALOGS, LoadingComponent),
+})
+export class LoadingService extends TuiPopoverService<unknown> {}

web/projects/shared/src/components/markdown/markdown.component.module.ts

@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TuiLoaderModule, TuiNotificationModule } from '@taiga-ui/core'
+import { NgModule } from '@angular/core'
+import { TuiLoader, TuiNotification } from '@taiga-ui/core'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { SafeLinksDirective } from '../../directives/safe-links.directive'
 
 import { MarkdownPipeModule } from '../../pipes/markdown/markdown.module'
-import { SafeLinksDirective } from '../../directives/safe-links.directive'
 import { MarkdownComponent } from './markdown.component'
 
 @NgModule({
@@ -14,8 +14,8 @@ import { MarkdownComponent } from './markdown.component'
     MarkdownPipeModule,
     SafeLinksDirective,
     NgDompurifyModule,
-    TuiLoaderModule,
-    TuiNotificationModule,
+    TuiLoader,
+    TuiNotification,
   ],
   exports: [MarkdownComponent],
 })

web/projects/shared/src/components/markdown/markdown.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core'
 import { TuiDialogContext } from '@taiga-ui/core'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'
 import {
   catchError,
   ignoreElements,

web/projects/shared/src/components/ticker/ticker.component.ts

@@ -8,7 +8,7 @@ import {
 
 @Component({
   selector: '[ticker]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./ticker.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

web/projects/shared/src/public-api.ts

@@ -8,7 +8,6 @@ export * from './classes/rpc-error'
 export * from './components/initializing/logs-window.component'
 export * from './components/initializing/initializing.component'
 export * from './components/loading/loading.component'
-export * from './components/loading/loading.module'
 export * from './components/loading/loading.service'
 export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'

web/projects/shared/src/services/error.service.ts

@@ -1,5 +1,5 @@
 import { ErrorHandler, inject, Injectable } from '@angular/core'
-import { TuiAlertService, TuiNotification } from '@taiga-ui/core'
+import { TuiAlertService } from '@taiga-ui/core'
 import { HttpError } from '../classes/http-error'
 
 // TODO: Enable this as ErrorHandler
@@ -15,8 +15,7 @@ export class ErrorService extends ErrorHandler {
     this.alerts
       .open(getErrorMessage(error, link), {
         label: 'Error',
-        autoClose: false,
-        status: TuiNotification.Error,
+        status: 'error',
       })
       .subscribe()
   }