chore: update Taiga to 5 (#3136)

* chore: update Taiga to 5

* chore: fix

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

@@ -11,7 +11,12 @@ import { getErrorMessage } from '../services/error.service'
 @Component({
   template: `
     @if (error()) {
-      <tui-notification appearance="negative" safeLinks [innerHTML]="error()" />
+      <div
+        tuiNotification
+        appearance="negative"
+        safeLinks
+        [innerHTML]="error()"
+      ></div>
     }
 
     @if (content(); as result) {

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { TuiAutoFocus } from '@taiga-ui/cdk'
-import { TuiButton, TuiDialogContext, TuiTextfield } from '@taiga-ui/core'
+import { TuiButton, TuiDialogContext, TuiInput } from '@taiga-ui/core'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { i18nPipe } from '../i18n/i18n.pipe'
 import { i18nKey } from '../i18n/i18n.providers'
@@ -23,7 +23,7 @@ import { i18nKey } from '../i18n/i18n.providers'
           </label>
         }
         <input
-          tuiTextfield
+          tuiInput
           tuiAutoFocus
           [ngModelOptions]="{ standalone: true }"
           [(ngModel)]="value"
@@ -81,7 +81,7 @@ import { i18nKey } from '../i18n/i18n.providers'
       -webkit-text-security: disc;
     }
   `,
-  imports: [FormsModule, TuiButton, TuiTextfield, TuiAutoFocus, i18nPipe],
+  imports: [FormsModule, TuiButton, TuiInput, TuiAutoFocus, i18nPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PromptModal {

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

@@ -1,7 +1,6 @@
 import { DatePipe } from '@angular/common'
 import { Component, input } from '@angular/core'
-import { TuiIcon, TuiTitle } from '@taiga-ui/core'
-import { TuiCell } from '@taiga-ui/layout'
+import { TuiIcon, TuiTitle, TuiCell } from '@taiga-ui/core'
 import { StartOSDiskInfo } from '../types/api'
 
 @Component({

web/projects/shared/src/directives/docs-link.directive.ts

@@ -5,6 +5,7 @@ import {
   InjectionToken,
   input,
 } from '@angular/core'
+import { tuiSetSignal } from '@taiga-ui/cdk'
 import { TuiHintDirective } from '@taiga-ui/core'
 import { i18nPipe } from '../i18n/i18n.pipe'
 
@@ -33,7 +34,8 @@ export class DocsLinkDirective {
   })
 
   constructor() {
-    inject(TuiHintDirective).content.set(
+    tuiSetSignal(
+      inject(TuiHintDirective).content,
       inject(i18nPipe).transform('Documentation'),
     )
   }

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

@@ -32,7 +32,6 @@ export * from './services/download-html.service'
 export * from './services/exver.service'
 export * from './services/error.service'
 export * from './services/http.service'
-export * from './services/loading.service'
 export * from './services/setup-logs.service'
 
 export * from './types/api'

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

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core'
 import { Clipboard } from '@angular/cdk/clipboard'
-import { TuiAlertService } from '@taiga-ui/core'
+import { TuiNotificationService } from '@taiga-ui/core'
 
 import { i18nPipe } from '../i18n/i18n.pipe'
 
@@ -8,7 +8,7 @@ import { i18nPipe } from '../i18n/i18n.pipe'
 export class CopyService {
   private readonly clipboard = inject(Clipboard)
   private readonly i18n = inject(i18nPipe)
-  private readonly alerts = inject(TuiAlertService)
+  private readonly alerts = inject(TuiNotificationService)
 
   async copy(text: string) {
     const success = this.clipboard.copy(text)

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

@@ -1,12 +1,12 @@
 import { ErrorHandler, inject, Injectable } from '@angular/core'
-import { TuiAlertService } from '@taiga-ui/core'
+import { TuiNotificationService } from '@taiga-ui/core'
 import { HttpError } from '../classes/http-error'
 
 @Injectable({
   providedIn: 'root',
 })
 export class ErrorService extends ErrorHandler {
-  private readonly alerts = inject(TuiAlertService)
+  private readonly alerts = inject(TuiNotificationService)
 
   override handleError(error: HttpError | string, link?: string) {
     console.error(error)

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

@@ -1,44 +0,0 @@
-import { ChangeDetectionStrategy, Component, Injectable } from '@angular/core'
-import { TuiPopoverService } from '@taiga-ui/cdk'
-import { TUI_DIALOGS, TuiLoader } from '@taiga-ui/core'
-import { injectContext } from '@taiga-ui/polymorpheus'
-import { i18nPipe } from '../i18n/i18n.pipe'
-import { i18nKey } from '../i18n/i18n.providers'
-
-@Component({
-  template: '<tui-loader [textContent]="content | i18n" />',
-  styles: `
-    :host {
-      display: flex;
-      align-items: center;
-      max-width: 80%;
-      margin: auto;
-      padding: 1.5rem;
-      background: var(--tui-background-elevation-1);
-      border-radius: var(--tui-radius-m);
-      box-shadow: var(--tui-shadow-popup);
-
-      --tui-background-accent-1: var(--tui-status-warning);
-    }
-
-    tui-loader {
-      flex-shrink: 0;
-      min-width: 2rem;
-    }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiLoader, i18nPipe],
-})
-class LoadingComponent {
-  readonly content = injectContext<{ content: i18nKey }>().content
-}
-
-@Injectable({
-  providedIn: `root`,
-  useFactory: () => new LoadingService(TUI_DIALOGS, LoadingComponent),
-})
-export class LoadingService extends TuiPopoverService<unknown> {
-  override open<G = void>(textContent: i18nKey | '' = '') {
-    return super.open<G>(textContent)
-  }
-}

web/projects/shared/styles/shared.scss

@@ -95,9 +95,6 @@ $wide-modal: 900px;
   --tw-color-zinc-800: 39 39 42;
   --tw-color-zinc-900: 24 24 27;
   --tw-color-zinc-950: 9 9 11;
-
-  --tui-font-text: 'Proxima Nova', system-ui;
-  --tui-font-heading: 'Proxima Nova', system-ui;
 }
 
 body {

web/projects/shared/styles/taiga.scss

@@ -1,4 +1,4 @@
-@use '@taiga-ui/core/styles/taiga-ui-local' as taiga;
+@use '@taiga-ui/styles/utils' as taiga;
 
 [tuiTheme='dark'] {
   --tui-background-base: rgba(23, 23, 23, 1);
@@ -135,13 +135,13 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
     inset 0 0 1rem rgba(0, 0, 0, 0.25),
     var(--tui-shadow-medium);
 
-  [tuiOption] {
-    justify-content: flex-start;
-    gap: 0.5rem;
+  input {
+    // Checkmark
+    --tui-text-action: var(--tui-text-primary);
   }
 }
 
-// @TODO Alex: Move to Taiga UI
+// TODO: Remove in Taiga v5.0
 a[tuiIconButton]:not([href]) {
   pointer-events: none;
   opacity: var(--tui-disabled-opacity);
@@ -160,7 +160,7 @@ tui-textfield [tuiTooltip] {
     padding-block: 0.75rem;
 
     [tuiTitle] {
-      font: var(--tui-font-text-l);
+      font: var(--tui-typography-body-l);
     }
   }
 
@@ -169,7 +169,16 @@ tui-textfield [tuiTooltip] {
   }
 }
 
-// TODO: Remove after migrating to v5
-[tuiOption] {
-  word-break: break-word;
+:root {
+  --tui-typography-family-text: 'Proxima Nova', system-ui;
+  --tui-typography-family-display: 'Proxima Nova', system-ui;
+}
+
+tui-notification-middle {
+  --tui-background-accent-1: var(--tui-status-warning);
+}
+
+// TODO: Remove in Taiga v5.0
+[tuiButton] {
+  min-block-size: var(--t-size);
 }