feat: update Taiga UI to 4 release candidate

2026-04-04 06:19:44 +00:00 · 2024-07-15 11:16:19 +05:00
parent a2b1968d6e
commit c7a2e7ada1
219 changed files with 1977 additions and 2176 deletions
--- a/web/projects/setup-wizard/src/app/pages/attach.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/attach.page.ts
@@ -7,12 +7,8 @@ import {
  LoadingService,
  toGuid,
 } from '@start9labs/shared'
-import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-} from '@taiga-ui/experimental'
+import { TuiButton, TuiDialogService, TuiLoader } from '@taiga-ui/core'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { PASSWORD } from 'src/app/components/password.component'
 import { ApiService } from 'src/app/services/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -34,19 +30,13 @@ import { StateService } from 'src/app/services/state.service'
          valid StartOS data drive (not a backup) and is firmly connected, then
          refresh the page.
        }
-        <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+        <button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
          Refresh
        </button>
      }
    </section>
  `,
-  imports: [
-    TuiButtonModule,
-    TuiCardModule,
-    TuiCellModule,
-    TuiLoaderModule,
-    DriveComponent,
-  ],
+  imports: [TuiButton, TuiCardLarge, TuiCell, TuiLoader, DriveComponent],
 })
 export default class AttachPage {
  private readonly apiService = inject(ApiService)
--- a/web/projects/setup-wizard/src/app/pages/home.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/home.page.ts
@@ -2,14 +2,8 @@ import { CommonModule } from '@angular/common'
 import { Component, inject, OnInit } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { ErrorService } from '@start9labs/shared'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-  TuiIconModule,
-  TuiIconsModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
+import { TuiButton, TuiIcon, TuiTitle } from '@taiga-ui/core'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { RecoverComponent } from 'src/app/components/recover.component'
 import { ApiService } from 'src/app/services/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -26,7 +20,7 @@ import { StateService } from 'src/app/services/state.service'
              tuiIconButton
              appearance="flat"
              class="back"
-              iconLeft="tuiIconChevronLeft"
+              iconStart="@tui.chevron-left"
              (click)="recover = false"
            >
              Back
@@ -37,7 +31,7 @@ import { StateService } from 'src/app/services/state.service'
        <div class="pages">
          <div class="options" [class.options_recover]="recover">
            <a tuiCell [routerLink]="error || recover ? null : '/storage'">
-              <tui-icon icon="tuiIconPlus" />
+              <tui-icon icon="@tui.plus" />
              <span tuiTitle>
                <span class="g-success">Start Fresh</span>
                <span tuiSubtitle>
@@ -50,7 +44,7 @@ import { StateService } from 'src/app/services/state.service'
              [disabled]="error || recover"
              (click)="recover = true"
            >
-              <tui-icon icon="tuiIconRotateCw" />
+              <tui-icon icon="@tui.rotate-cw" />
              <span tuiTitle>
                <span class="g-warning">Recover</span>
                <span tuiSubtitle>
@@ -111,12 +105,11 @@ import { StateService } from 'src/app/services/state.service'
  imports: [
    CommonModule,
    RouterModule,
-    TuiCardModule,
-    TuiButtonModule,
-    TuiIconsModule,
-    TuiCellModule,
-    TuiIconModule,
-    TuiTitleModule,
+    TuiCardLarge,
+    TuiButton,
+    TuiCell,
+    TuiIcon,
+    TuiTitle,
    RecoverComponent,
  ],
 })
--- a/web/projects/setup-wizard/src/app/pages/recover.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/recover.page.ts
@@ -1,15 +1,15 @@
 import { Component, inject } from '@angular/core'
 import { Router } from '@angular/router'
 import { DriveComponent, ErrorService } from '@start9labs/shared'
-import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
 import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-  TuiIconModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+  TuiButton,
+  TuiDialogService,
+  TuiIcon,
+  TuiLoader,
+  TuiTitle,
+} from '@taiga-ui/core'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
+import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { filter } from 'rxjs'
 import { CifsComponent } from 'src/app/components/cifs.component'
 import { PASSWORD } from 'src/app/components/password.component'
@@ -33,7 +33,7 @@ import { StateService } from 'src/app/services/state.service'
        to the same network as your server.

        <button tuiCell (click)="onCifs()">
-          <tui-icon icon="tuiIconFolder" />
+          <tui-icon icon="@tui.folder" />
          <span tuiTitle>Open</span>
        </button>

@@ -51,29 +51,29 @@ import { StateService } from 'src/app/services/state.service'
          <button tuiCell [drive]="d" [disabled]="empty(d)" (click)="select(d)">
            <span tuiSubtitle>
              @if (empty(d)) {
-                <tui-icon icon="tuiIconCloudOff" class="g-error" />
+                <tui-icon icon="@tui.cloud-off" class="g-error" />
                <strong>No StartOS backup</strong>
              } @else {
-                <tui-icon icon="tuiIconCloud" class="g-success" />
+                <tui-icon icon="@tui.cloud" class="g-success" />
                <strong>StartOS backup detected</strong>
              }
            </span>
          </button>
        }

-        <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+        <button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
          Refresh
        </button>
      }
    </section>
  `,
  imports: [
-    TuiCardModule,
-    TuiLoaderModule,
-    TuiButtonModule,
-    TuiCellModule,
-    TuiIconModule,
-    TuiTitleModule,
+    TuiCardLarge,
+    TuiLoader,
+    TuiButton,
+    TuiCell,
+    TuiIcon,
+    TuiTitle,
    DriveComponent,
  ],
 })
--- a/web/projects/setup-wizard/src/app/pages/storage.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/storage.page.ts
@@ -7,13 +7,9 @@ import {
  LoadingService,
  toGuid,
 } from '@start9labs/shared'
-import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-} from '@taiga-ui/experimental'
-import { TUI_PROMPT } from '@taiga-ui/kit'
+import { TuiButton, TuiDialogService, TuiLoader } from '@taiga-ui/core'
+import { TUI_CONFIRM } from '@taiga-ui/kit'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { filter, of, switchMap } from 'rxjs'
 import { PASSWORD } from 'src/app/components/password.component'
 import {
@@ -48,18 +44,12 @@ import { StateService } from 'src/app/services/state.service'
        </button>
      }

-      <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="getDrives()">
+      <button tuiButton iconStart="@tui.rotate-cw" (click)="getDrives()">
        Refresh
      </button>
    </section>
  `,
-  imports: [
-    TuiCardModule,
-    TuiLoaderModule,
-    TuiCellModule,
-    TuiButtonModule,
-    DriveComponent,
-  ],
+  imports: [TuiCardLarge, TuiLoader, TuiCell, TuiButton, DriveComponent],
 })
 export default class StoragePage {
  private readonly api = inject(ApiService)
@@ -125,7 +115,7 @@ export default class StoragePage {
        switchMap(unused =>
          unused
            ? of(true)
-            : this.dialogs.open(TUI_PROMPT, {
+            : this.dialogs.open(TUI_CONFIRM, {
                label: 'Warning',
                size: 's',
                data: {
--- a/web/projects/setup-wizard/src/app/pages/success.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/success.page.ts
@@ -7,12 +7,8 @@ import {
  ViewChild,
 } from '@angular/core'
 import { DownloadHTMLService, ErrorService } from '@start9labs/shared'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiIconModule,
-  TuiSurfaceModule,
-} from '@taiga-ui/experimental'
+import { TuiButton, TuiIcon, TuiSurface } from '@taiga-ui/core'
+import { TuiCardLarge } from '@taiga-ui/layout'
 import { DocumentationComponent } from 'src/app/components/documentation.component'
 import { MatrixComponent } from 'src/app/components/matrix.component'
 import { ApiService } from 'src/app/services/api.service'
@@ -25,17 +21,17 @@ import { StateService } from 'src/app/services/state.service'
    @if (isKiosk) {
      <section tuiCardLarge>
        <h1 class="heading">
-          <tui-icon icon="tuiIconCheckSquare" class="g-success" />
+          <tui-icon icon="@tui.check-square" class="g-success" />
          Setup Complete!
        </h1>
-        <button tuiButton (click)="exitKiosk()" iconRight="tuiIconLogInLarge">
+        <button tuiButton (click)="exitKiosk()" iconEnd="@tui.log-in">
          Continue to Login
        </button>
      </section>
    } @else if (lanAddress) {
      <section tuiCardLarge>
        <h1 class="heading">
-          <tui-icon icon="tuiIconCheckSquare" class="g-success" />
+          <tui-icon icon="@tui.check-square" class="g-success" />
          Setup Complete!
        </h1>
        @if (stateService.setupType === 'restore') {
@@ -51,7 +47,7 @@ import { StateService } from 'src/app/services/state.service'
          </span>
          <strong class="caps">
            Download
-            <tui-icon icon="tuiIconDownload" />
+            <tui-icon icon="@tui.download" />
          </strong>
        </button>

@@ -68,7 +64,7 @@ import { StateService } from 'src/app/services/state.service'
          </span>
          <strong class="caps">
            Open
-            <tui-icon icon="tuiIconExternalLink" />
+            <tui-icon icon="@tui.external-link" />
          </strong>
        </a>
        <app-documentation hidden [lanAddress]="lanAddress" />
@@ -93,7 +89,7 @@ import { StateService } from 'src/app/services/state.service'
    }

    [tuiCardLarge] {
-      color: var(--tui-text-01);
+      color: var(--tui-text-primary);
      text-decoration: none;
      text-align: center;
    }
@@ -104,10 +100,10 @@ import { StateService } from 'src/app/services/state.service'
    }
  `,
  imports: [
-    TuiCardModule,
-    TuiIconModule,
-    TuiButtonModule,
-    TuiSurfaceModule,
+    TuiCardLarge,
+    TuiIcon,
+    TuiButton,
+    TuiSurface,
    MatrixComponent,
    DocumentationComponent,
  ],
--- a/web/projects/setup-wizard/src/app/pages/transfer.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/transfer.page.ts
@@ -7,16 +7,13 @@ import {
  toGuid,
 } from '@start9labs/shared'
 import {
+  TuiButton,
  TuiDialogOptions,
  TuiDialogService,
-  TuiLoaderModule,
+  TuiLoader,
 } from '@taiga-ui/core'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-} from '@taiga-ui/experimental'
-import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
+import { TUI_CONFIRM, TuiConfirmData } from '@taiga-ui/kit'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -33,18 +30,12 @@ import { StateService } from 'src/app/services/state.service'
      @for (drive of drives; track drive) {
        <button tuiCell [drive]="drive" (click)="select(drive)"></button>
      }
-      <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+      <button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
        Refresh
      </button>
    </section>
  `,
-  imports: [
-    TuiCardModule,
-    TuiCellModule,
-    TuiButtonModule,
-    TuiLoaderModule,
-    DriveComponent,
-  ],
+  imports: [TuiCardLarge, TuiCell, TuiButton, TuiLoader, DriveComponent],
 })
 export default class TransferPage {
  private readonly apiService = inject(ApiService)
@@ -81,7 +72,7 @@ export default class TransferPage {

  select(drive: DiskInfo) {
    this.dialogs
-      .open(TUI_PROMPT, OPTIONS)
+      .open(TUI_CONFIRM, OPTIONS)
      .pipe(filter(Boolean))
      .subscribe(() => {
        this.stateService.recoverySource = {
@@ -93,7 +84,7 @@ export default class TransferPage {
  }
 }

-const OPTIONS: Partial<TuiDialogOptions<TuiPromptData>> = {
+const OPTIONS: Partial<TuiDialogOptions<TuiConfirmData>> = {
  label: 'Warning',
  size: 's',
  data: {