feat: update Taiga UI to 4 release candidate

web/projects/install-wizard/src/app/app.component.html

@@ -9,7 +9,7 @@
             appearance="flat"
             size="m"
             class="back"
-            iconLeft="tuiIconChevronLeft"
+            iconStart="@tui.chevron-left"
             [style.border-radius.rem]="10"
             (click)="selected = null"
           >
@@ -17,7 +17,7 @@
           </button>
         }
         <h1>{{ selected ? 'Install Type' : 'Select Disk' }}</h1>
-        <div [style.color]="'var(--tui-negative)'">{{ error }}</div>
+        <div [style.color]="'var(--tui-text-negative)'">{{ error }}</div>
       </header>
       <div class="pages">
         <div class="options" [class.options_selected]="selected">
@@ -28,9 +28,9 @@
         <div class="options">
           @if (guid) {
             <button tuiCell (click)="install()">
-              <tui-icon icon="tuiIconLifeBuoyLarge" />
+              <tui-icon icon="@tui.life-buoy" />
               <span tuiTitle>
-                <strong [style.color]="'var(--tui-positive)'">
+                <strong [style.color]="'var(--tui-text-positive)'">
                   Re-Install StartOS
                 </strong>
                 <span tuiSubtitle>Will preserve existing StartOS data</span>
@@ -39,12 +39,14 @@
           }
 
           <button tuiCell [disabled]="!selected" (click)="warn()">
-            <tui-icon icon="tuiIconDownload" />
+            <tui-icon icon="@tui.download" />
             <span tuiTitle>
               @if (guid) {
-                <span [style.color]="'var(--tui-negative)'">Factory Reset</span>
+                <span [style.color]="'var(--tui-text-negative)'">
+                  Factory Reset
+                </span>
               } @else {
-                <span [style.color]="'var(--tui-positive)'">
+                <span [style.color]="'var(--tui-text-positive)'">
                   Install StartOS
                 </span>
               }

web/projects/install-wizard/src/app/app.component.scss

@@ -5,7 +5,7 @@
 tui-root {
   height: 100%;
   margin: 0;
-  color: var(--tui-text-01);
+  color: var(--tui-text-primary);
 }
 
 main {
@@ -14,7 +14,7 @@ main {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: var(--tui-base-08);
+  background: var(--tui-background-accent-opposite-hover);
 }
 
 .logo {

web/projects/install-wizard/src/app/app.component.ts

@@ -1,7 +1,7 @@
+import { TUI_CONFIRM } from '@taiga-ui/kit'
 import { Component, inject } from '@angular/core'
 import { DiskInfo, LoadingService, toGuid } from '@start9labs/shared'
 import { TuiDialogService } from '@taiga-ui/core'
-import { TUI_PROMPT } from '@taiga-ui/kit'
 import { filter, from } from 'rxjs'
 import { SUCCESS, toWarning } from 'src/app/app.utils'
 import { ApiService } from 'src/app/services/api.service'
@@ -40,7 +40,7 @@ export class AppComponent {
 
   warn() {
     this.dialogs
-      .open(TUI_PROMPT, toWarning(this.selected))
+      .open(TUI_CONFIRM, toWarning(this.selected))
       .pipe(filter(Boolean))
       .subscribe(() => {
         this.install(true)

web/projects/install-wizard/src/app/app.module.ts

@@ -3,19 +3,18 @@ import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import {
   DriveComponent,
-  LoadingModule,
   RELATIVE_URL,
   WorkspaceConfig,
 } from '@start9labs/shared'
-import { TuiDialogModule, TuiRootModule } from '@taiga-ui/core'
 import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-  TuiIconModule,
-  TuiSurfaceModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
+  TuiButton,
+  TuiIcon,
+  TuiRoot,
+  TuiSurface,
+  TuiTitle,
+} from '@taiga-ui/core'
+import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { ApiService } from 'src/app/services/api.service'
 import { LiveApiService } from 'src/app/services/live-api.service'
 import { MockApiService } from 'src/app/services/mock-api.service'
@@ -31,18 +30,17 @@ const {
   imports: [
     HttpClientModule,
     BrowserAnimationsModule,
-    TuiRootModule,
-    TuiDialogModule,
-    LoadingModule,
+    TuiRoot,
     DriveComponent,
-    TuiButtonModule,
-    TuiCardModule,
-    TuiCellModule,
-    TuiIconModule,
-    TuiSurfaceModule,
-    TuiTitleModule,
+    TuiButton,
+    TuiCardLarge,
+    TuiCell,
+    TuiIcon,
+    TuiSurface,
+    TuiTitle,
   ],
   providers: [
+    NG_EVENT_PLUGINS,
     {
       provide: ApiService,
       useClass: useMocks ? MockApiService : LiveApiService,

web/projects/install-wizard/src/app/app.utils.ts

@@ -1,6 +1,6 @@
 import { DiskInfo } from '@start9labs/shared'
 import { TuiDialogOptions } from '@taiga-ui/core'
-import { TuiPromptData } from '@taiga-ui/kit'
+import { TuiConfirmData } from '@taiga-ui/kit'
 
 export const SUCCESS: Partial<TuiDialogOptions<any>> = {
   label: 'Install Success',
@@ -12,7 +12,7 @@ export const SUCCESS: Partial<TuiDialogOptions<any>> = {
 
 export function toWarning(
   disk: DiskInfo | null,
-): Partial<TuiDialogOptions<TuiPromptData>> {
+): Partial<TuiDialogOptions<TuiConfirmData>> {
   return {
     label: 'Warning',
     size: 's',