feat: update Taiga UI to 4 release candidate

web/projects/ui/src/app/components/notifications-toast.component.ts

@@ -1,9 +1,9 @@
 import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { TuiAlertModule } from '@taiga-ui/core'
+import { TuiAlert } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
-import { Observable, Subject, merge, pairwise, map, endWith } from 'rxjs'
+import { endWith, map, merge, Observable, pairwise, Subject } from 'rxjs'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
 @Component({
@@ -20,7 +20,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
     </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiAlertModule, RouterLink, AsyncPipe],
+  imports: [TuiAlert, RouterLink, AsyncPipe],
 })
 export class NotificationsToastComponent {
   private readonly dismiss$ = new Subject<boolean>()

web/projects/ui/src/app/components/refresh-alert.component.ts

@@ -2,9 +2,8 @@ import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { SwUpdate } from '@angular/service-worker'
 import { Emver, LoadingService } from '@start9labs/shared'
-import { TuiAutoFocusModule } from '@taiga-ui/cdk'
-import { TuiDialogModule } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiAutoFocus } from '@taiga-ui/cdk'
+import { TuiButton, TuiDialog } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import { debounceTime, endWith, map, merge, Subject } from 'rxjs'
 import { ConfigService } from 'src/app/services/config.service'
@@ -43,7 +42,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
     <!--    </ng-template>-->
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiDialogModule, AsyncPipe, TuiButtonModule, TuiAutoFocusModule],
+  imports: [TuiDialog, AsyncPipe, TuiButton, TuiAutoFocus],
 })
 export class RefreshAlertComponent {
   private readonly updates = inject(SwUpdate)

web/projects/ui/src/app/components/report.component.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TuiDialogContext, TuiSvgModule } from '@taiga-ui/core'
+import { TuiDialogContext, TuiIcon } from '@taiga-ui/core'
 import {
   POLYMORPHEUS_CONTEXT,
   PolymorpheusComponent,
-} from '@tinkoff/ng-polymorpheus'
+} from '@taiga-ui/polymorpheus'
 import { BackupReport } from 'src/app/services/api/api.types'
 
 @Component({
@@ -15,7 +15,7 @@ import { BackupReport } from 'src/app/services/api/api.types'
         <strong>System data</strong>
         <div [style.color]="system.color">{{ system.result }}</div>
       </div>
-      <tui-svg [src]="system.icon" [style.color]="system.color"></tui-svg>
+      <tui-icon [icon]="system.icon" [style.color]="system.color" />
     </div>
     <div *ngFor="let pkg of report?.packages | keyvalue" class="g-action">
       <div [style.flex]="1">
@@ -24,15 +24,15 @@ import { BackupReport } from 'src/app/services/api/api.types'
           {{ pkg.value.error ? 'Failed: ' + pkg.value.error : 'Succeeded' }}
         </div>
       </div>
-      <tui-svg
-        [src]="getIcon(pkg.value.error)"
+      <tui-icon
+        [icon]="getIcon(pkg.value.error)"
         [style.color]="getColor(pkg.value.error)"
-      ></tui-svg>
+      />
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TuiSvgModule],
+  imports: [CommonModule, TuiIcon],
 })
 export class BackupsReportModal {
   private readonly context =
@@ -51,34 +51,34 @@ export class BackupsReportModal {
   }
 
   getColor(error: unknown) {
-    return error ? 'var(--tui-negative)' : 'var(--tui-positive)'
+    return error ? 'var(--tui-text-negative)' : 'var(--tui-text-positive)'
   }
 
   getIcon(error: unknown) {
-    return error ? 'tuiIconMinusCircleLarge' : 'tuiIconCheckLarge'
+    return error ? '@tui.circle-minus' : '@tui.check'
   }
 
   private getSystem() {
     if (!this.report.server.attempted) {
       return {
         result: 'Not Attempted',
-        icon: 'tuiIconMinusLarge',
-        color: 'var(--tui-text-02)',
+        icon: '@tui.minus',
+        color: 'var(--tui-text-secondary)',
       }
     }
 
     if (this.report.server.error) {
       return {
         result: `Failed: ${this.report.server.error}`,
-        icon: 'tuiIconMinusCircleLarge',
-        color: 'var(--tui-negative)',
+        icon: '@tui.circle-minus',
+        color: 'var(--tui-text-negative)',
       }
     }
 
     return {
       result: 'Succeeded',
-      icon: 'tuiIconCheckLarge',
-      color: 'var(--tui-positive)',
+      icon: '@tui.check',
+      color: 'var(--tui-text-positive)',
     }
   }
 }

web/projects/ui/src/app/components/sidebar-host.component.ts

@@ -1,24 +1,19 @@
+import { TuiDropdownService } from '@taiga-ui/core'
 import {
   ChangeDetectionStrategy,
   Component,
   Directive,
   Injectable,
 } from '@angular/core'
-import {
-  AbstractTuiPortalHostComponent,
-  AbstractTuiPortalService,
-  TuiDropdownPortalService,
-} from '@taiga-ui/cdk'
+import { TuiPortals, TuiPortalService } from '@taiga-ui/cdk'
 
 @Injectable({ providedIn: `root` })
-export class SidebarService extends AbstractTuiPortalService {}
+export class SidebarService extends TuiPortalService {}
 
 @Directive({
   selector: '[tuiSidebar]',
   standalone: true,
-  providers: [
-    { provide: TuiDropdownPortalService, useExisting: SidebarService },
-  ],
+  providers: [{ provide: TuiDropdownService, useExisting: SidebarService }],
 })
 export class SidebarDirective {}
 
@@ -28,8 +23,6 @@ export class SidebarDirective {}
   styles: [':host { position: fixed; top: 0; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  providers: [
-    { provide: AbstractTuiPortalService, useExisting: SidebarService },
-  ],
+  providers: [{ provide: TuiPortalService, useExisting: SidebarService }],
 })
-export class SidebarHostComponent extends AbstractTuiPortalHostComponent {}
+export class SidebarHostComponent extends TuiPortals {}

web/projects/ui/src/app/components/update-toast.component.ts

@@ -1,8 +1,7 @@
 import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { ErrorService, LoadingService } from '@start9labs/shared'
-import { TuiAlertModule } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiAlert, TuiButton } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import {
   distinctUntilChanged,
@@ -24,7 +23,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
       [tuiAlertOptions]="{
         label: 'StartOS download complete!',
         status: 'success',
-        autoClose: false
+        autoClose: 0
       }"
       (tuiAlertChange)="onDismiss()"
     >
@@ -44,7 +43,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
     </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButtonModule, TuiAlertModule, AsyncPipe],
+  imports: [TuiButton, TuiAlert, AsyncPipe],
 })
 export class UpdateToastComponent {
   private readonly api = inject(ApiService)

web/projects/ui/src/app/components/welcome.component.ts

@@ -1,7 +1,6 @@
 import { Component, inject, Inject } from '@angular/core'
-import { TuiDialogContext } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext, TuiButton } from '@taiga-ui/core'
+import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'
 
 @Component({
   standalone: true,
@@ -42,7 +41,7 @@ import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
     </p>
   `,
   styles: 'li { margin-bottom: 0.5rem }',
-  imports: [TuiButtonModule],
+  imports: [TuiButton],
 })
 export class WelcomeComponent {
   readonly context = inject<TuiDialogContext>(POLYMORPHEUS_CONTEXT)