feat: update Taiga UI to 4 release candidate

web/projects/shared/assets/taiga-ui/icons/tuiIconBitcoinOutline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M410.47 279.2c-5-11.5-12.7-21.6-28.1-30.1a98.15 98.15 0 00-25.4-10 62.22 62.22 0 0016.3-11 56.37 56.37 0 0015.6-23.3 77.11 77.11 0 003.5-28.2c-1.1-16.8-4.4-33.1-13.2-44.8s-21.2-20.7-37.6-27c-12.6-4.8-25.5-7.8-45.5-8.9V32h-40v64h-32V32h-41v64H96v48h27.87c8.7 0 14.6.8 17.6 2.3a13.22 13.22 0 016.5 6c1.3 2.5 1.9 8.4 1.9 17.5V343c0 9-.6 14.8-1.9 17.4s-2 4.9-5.1 6.3-3.2 1.3-11.8 1.3h-26.4L96 416h87v64h41v-64h32v64h40v-64.4c26-1.3 44.5-4.7 59.4-10.3 19.3-7.2 34.1-17.7 44.7-31.5s14-34.9 14.93-51.2c.67-14.5-.03-33.2-4.56-43.4zM224 150h32v74h-32zm0 212v-90h32v90zm72-208.1c6 2.5 9.9 7.5 13.8 12.7 4.3 5.7 6.5 13.3 6.5 21.4 0 7.8-2.9 14.5-7.5 20.5-3.8 4.9-6.8 8.3-12.8 11.1zm28.8 186.7c-7.8 6.9-12.3 10.1-22.1 13.8a56.06 56.06 0 01-6.7 1.9v-82.8a40.74 40.74 0 0111.3 3.4c7.8 3.3 15.2 6.9 19.8 13.2a43.82 43.82 0 018 24.7c-.03 10.9-2.83 19.2-10.33 25.8z"/></svg>

web/projects/shared/assets/taiga-ui/icons/tuiIconCheckCircleOutline.svg

@@ -1,25 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable="false" height="1em" width="1em">
-    <g id="tuiIconCheckCircle" xmlns="http://www.w3.org/2000/svg">
-        <svg x="50%" y="50%" fill="none" height="1em" overflow="visible" viewBox="0 0 16 16" width="1em">
-            <svg
-                x="-8"
-                y="-8"
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <path
-                    vector-effect="non-scaling-stroke"
-                    d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-                />
-                <path vector-effect="non-scaling-stroke" d="M15.5 9.5l-4.5 5-2.5-2.273" />
-            </svg>
-        </svg>
-    </g>
-</svg>

web/projects/shared/assets/taiga-ui/icons/tuiIconRocketOutline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

web/projects/shared/package.json

@@ -5,12 +5,12 @@
     "@angular/common": "^17.0.6",
     "@angular/core": "^17.0.6",
     "@angular/router": "^17.0.6",
-    "@ng-web-apis/mutation-observer": ">=2.0.0",
-    "@ng-web-apis/resize-observer": ">=2.0.0",
+    "@ng-web-apis/mutation-observer": ">=4.0.0",
+    "@ng-web-apis/resize-observer": ">=4.0.0",
     "@start9labs/emver": "^0.1.5",
-    "@taiga-ui/cdk": ">=3.0.0",
-    "@taiga-ui/core": ">=3.0.0",
-    "@taiga-ui/experimental": ">=3.0.0",
+    "@taiga-ui/cdk": "4.0.0-rc.5",
+    "@taiga-ui/core": "4.0.0-rc.5",
+    "@taiga-ui/experimental": "4.0.0-rc.5",
     "@tinkoff/ng-dompurify": ">=4.0.0",
     "ansi-to-html": "^0.7.2"
   },

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()
   }

web/projects/shared/styles/taiga.scss

@@ -1,40 +1,40 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :root {
-  --tui-primary: #3880ff;
-  --tui-primary-hover: #4c8dff;
-  --tui-primary-active: #3171e0;
+  --tui-background-accent-1: #3880ff;
+  --tui-background-accent-1-hover: #4c8dff;
+  --tui-background-accent-1-pressed: #3171e0;
 }
 
 /* stylelint-disable order/order */
 [tuiAppearance][data-appearance='secondary-warning'] {
-  background: var(--tui-warning-bg);
-  color: var(--tui-text-01);
+  background: var(--tui-status-warning-pale);
+  color: var(--tui-text-primary);
 
   @include appearance-hover {
-    background: var(--tui-warning-bg-hover);
+    background: var(--tui-status-warning-pale-hover);
   }
 
   @include appearance-active {
-    background: var(--tui-warning-bg-hover);
+    background: var(--tui-status-warning-pale-hover);
   }
 }
 
 [tuiAppearance][data-appearance='icon-success'] {
-  color: var(--tui-success-fill);
+  color: var(--tui-status-positive);
 }
 
 [tuiAppearance][data-appearance='icon-warning'] {
-  color: var(--tui-warning-fill);
+  color: var(--tui-status-warning);
 }
 
 [tuiAppearance][data-appearance='icon-error'] {
-  color: var(--tui-error-fill);
+  color: var(--tui-status-negative);
 }
 
 [tuiAppearance][data-appearance='flat'],
 [tuiAppearance][data-appearance='outline'] {
-  color: var(--tui-text-01);
+  color: var(--tui-text-primary);
 }
 
 [tuiAppearance][data-appearance='primary'] {
@@ -134,7 +134,7 @@
   }
 }
 
-[tuiWrapper][data-appearance='input-file'] {
+[tuiAppearance][data-appearance='input-file'] {
   &:hover,
   &:active {
     background: transparent !important;
@@ -150,7 +150,7 @@ tui-dialog {
 }
 
 tui-opt-group[data-label^='⚠️']::before {
-  color: var(--tui-warning-fill);
+  color: var(--tui-status-warning);
 }
 
 tui-hint[data-appearance='onDark'] {
@@ -159,10 +159,10 @@ tui-hint[data-appearance='onDark'] {
 }
 
 [tuiLink] {
-  color: var(--tui-link) !important;
+  color: var(--tui-text-action) !important;
 
   &:hover {
-    color: var(--tui-link-hover) !important;
+    color: var(--tui-text-action-hover) !important;
   }
 }
 
@@ -172,7 +172,7 @@ tui-hint[data-appearance='onDark'] {
   border-radius: 10rem;
 
   &._focused::after {
-    color: var(--tui-primary);
+    color: var(--tui-background-accent-1);
   }
 }
 
@@ -182,12 +182,12 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
   backdrop-filter: blur(0.25rem);
   box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
   border-radius: 0.325rem;
-  // TODO: Replace --tui-elevation-02 when Taiga UI is updated
+  // TODO: Replace --tui-background-elevation-2 when Taiga UI is updated
   background: rgb(63 63 63 / 80%);
 
   tui-opt-group {
     &::before {
-      background: var(--tui-clear);
+      background: var(--tui-background-neutral-1);
       height: 1px;
     }