chore(deps): update taiga-ui cdk to v4

apps/demo/src/app/app.component.ts

@@ -1,12 +1,12 @@
+import { TuiEditor, TuiEditorSocket } from "@taiga-ui/editor";
+import { TuiRoot } from "@taiga-ui/core";
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {RouterOutlet} from '@angular/router';
-import {TuiRootModule} from '@taiga-ui/core';
-import {TuiEditorModule} from '@tinkoff/tui-editor';
 
 @Component({
     standalone: true,
     selector: 'app',
-    imports: [RouterOutlet, TuiEditorModule, TuiRootModule],
+    imports: [RouterOutlet, TuiEditor, TuiEditorSocket, TuiRoot],
     templateUrl: './app.component.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,

apps/demo/src/app/app.config.ts

@@ -1,17 +1,15 @@
+import { TUI_EDITOR_DEFAULT_EXTENSIONS } from "@taiga-ui/editor";
+import { TUI_SANITIZER } from "@taiga-ui/legacy";
+import { TuiPush } from "@taiga-ui/kit";
+import { NG_EVENT_PLUGINS } from "@taiga-ui/event-plugins";
 import type {ApplicationConfig, Injector} from '@angular/core';
 import {importProvidersFrom, INJECTOR} from '@angular/core';
 import {provideClientHydration} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {provideRouter} from '@angular/router';
-import {
-    TUI_SANITIZER,
-    TuiAlertModule,
-    TuiDialogModule,
-    TuiRootModule,
-} from '@taiga-ui/core';
-import {TuiPushModule} from '@taiga-ui/kit';
-import {NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
-import {TUI_EDITOR_DEFAULT_EXTENSIONS, TUI_EDITOR_EXTENSIONS} from '@tinkoff/tui-editor';
+import { TuiRoot, TuiAlert, TuiDialog } from '@taiga-ui/core';
+import {NgDompurifySanitizer} from '@taiga-ui/dompurify';
+import {TUI_EDITOR_EXTENSIONS} from '@taiga-ui/editor';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -25,17 +23,16 @@ export const appConfig: ApplicationConfig = {
             },
         ]),
         importProvidersFrom(
-            TuiRootModule,
-            TuiAlertModule,
-            TuiDialogModule,
-            TuiPushModule,
+            TuiAlert,
+            TuiDialog,
+            TuiPush,
         ),
         {
             provide: TUI_EDITOR_EXTENSIONS,
             deps: [INJECTOR],
             useFactory: (injector: Injector) => [
                 ...TUI_EDITOR_DEFAULT_EXTENSIONS,
-                import('@tinkoff/tui-editor/extensions/image-editor').then(
+                import('@taiga-ui/editor/extensions/image-editor').then(
                     ({tuiCreateImageEditorExtension}) =>
                         tuiCreateImageEditorExtension({injector}),
                 ),
@@ -45,5 +42,6 @@ export const appConfig: ApplicationConfig = {
             provide: TUI_SANITIZER,
             useClass: NgDompurifySanitizer,
         },
+        NG_EVENT_PLUGINS
     ],
 };

apps/demo/src/app/home/home.component.html

@@ -34,19 +34,21 @@ <h2 class="title">
         />
     </div>
     <div>
-        <tui-checkbox-labeled
-            *ngFor="let label of labels"
-            size="l"
+       <label *ngFor="let label of labels" tuiLabel> <input tuiCheckbox type="checkbox"
+
+            size="m"
             class="tui-space_bottom-4"
             [ngModel]="label === labels[1]"
         >
             {{ label }}
-        </tui-checkbox-labeled>
+        </label>
     </div>
     <div class="controls">
         <label>
-            <tui-toggle
-                size="l"
+            <input
+                tuiSwitch
+                type="checkbox"
+                size="m"
                 class="tui-space_right-3"
                 [showIcons]="true"
                 [(ngModel)]="notification"
@@ -65,8 +67,8 @@ <h2 class="title">
         <div class="icons">
             <button
                 appearance=""
-                icon="tuiIconVolumeXLarge"
-                shape="rounded"
+                iconStart="@tui.volume-x"
+                [style.border-radius.%]="100"
                 title="Mute speaker"
                 tuiIconButton
                 type="button"
@@ -75,17 +77,17 @@ <h2 class="title">
             ></button>
             <button
                 appearance=""
-                icon="tuiIconMicOffLarge"
-                shape="rounded"
+                iconStart="@tui.mic-off"
+                [style.border-radius.%]="100"
                 title="Mute microphone"
                 tuiIconButton
                 type="button"
                 class="button"
             ></button>
             <button
                 appearance=""
-                icon="tuiIconPhoneForwardedLarge"
-                shape="rounded"
+                iconStart="@tui.phone-forwarded"
+                [style.border-radius.%]="100"
                 title="Forward call"
                 tuiIconButton
                 type="button"
@@ -120,15 +122,15 @@ <h3>Aleksandr Inkin</h3>
         <div class="buttons">
             <button
                 appearance="custom"
-                iconRight="tuiIconPhone"
+                iconEnd="@tui.phone"
                 size="m"
                 tuiIconButton
                 class="missed"
                 (click)="observer.complete()"
             ></button>
             <button
                 appearance="custom"
-                iconRight="tuiIconPhone"
+                iconEnd="@tui.phone"
                 size="m"
                 tuiIconButton
                 class="income"
@@ -144,7 +146,7 @@ <h3>Aleksandr Inkin</h3>
     type="Dr. Henry Walton Jones, Jr."
     (close)="toggle(false)"
 >
-    <tui-svg src="tuiIconMessageSquareLarge" />
+    <tui-icon  icon="@tui.message-square" />
     I have a bad feeling about this...
     <button
         tuiButton

apps/demo/src/app/home/home.component.less

@@ -21,9 +21,9 @@
 }
 
 .calendar {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-medium);
     border-radius: var(--tui-radius-m);
-    border: 0.0625rem solid var(--tui-base-03);
+    border: 0.0625rem solid var(--tui-background-neutral-1-hover);
     margin-top: 0.25rem;
     width: 18rem;
     box-sizing: border-box;
@@ -43,22 +43,22 @@
 .button[data-size][data-shape],
 .error[data-size][data-shape] {
     .transition(~'color, background');
-    background: var(--tui-base-02);
-    color: var(--tui-primary);
+    background: var(--tui-background-base-alt);
+    color: var(--tui-background-accent-1);
 
     &:hover,
     &:active {
-        background: var(--tui-base-03);
-        color: var(--tui-primary-hover);
+        background: var(--tui-background-neutral-1-hover);
+        color: var(--tui-background-accent-1-hover);
     }
 }
 
 .error[data-size][data-shape] {
-    color: var(--tui-negative);
+    color: var(--tui-text-negative);
 
     &:hover,
     &:active {
-        color: var(--tui-negative-hover);
+        color: var(--tui-text-negative-hover);
     }
 }
 
@@ -120,7 +120,7 @@ tui-dialog[data-appearance='call'][data-size] {
         img {
             width: 2.25rem;
             border-radius: 0.625rem;
-            border: 0.0625rem solid var(--tui-base-05);
+            border: 0.0625rem solid var(--tui-border-hover);
         }
     }
 

apps/demo/src/app/home/home.component.ts

@@ -1,3 +1,6 @@
+import { TuiEditor, TuiEditorSocket } from "@taiga-ui/editor";
+import { TuiTextfieldControllerModule, TuiInputDateModule, TuiInputTagModule } from "@taiga-ui/legacy";
+import { NgDompurifyPipe } from "@taiga-ui/dompurify";
 import {CommonModule} from '@angular/common';
 import type {TemplateRef} from '@angular/core';
 import {
@@ -10,51 +13,33 @@ import {
 } from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import type {TuiDay} from '@taiga-ui/cdk';
-import {
-    TuiButtonModule,
-    TuiCalendarModule,
-    TuiDialogService,
-    TuiDropdownModule,
-    TuiHintModule,
-    TuiLinkModule,
-    TuiSvgModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {
-    TuiAccordionModule,
-    TuiCheckboxLabeledModule,
-    TuiInputDateModule,
-    TuiInputTagModule,
-    TuiPushModule,
-    TuiSliderModule,
-    TuiToggleModule,
-} from '@taiga-ui/kit';
-import {NgDompurifyModule, NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
-import {TuiEditorModule, TuiEditorTool} from '@tinkoff/tui-editor';
+import { TuiDialogService, TuiCalendar, TuiLabel, TuiDropdown, TuiIcon, TuiLink, TuiButton, TuiHint } from '@taiga-ui/core';
+import { TuiAccordion, TuiPush, TuiSlider, TuiSwitch, TuiCheckbox } from '@taiga-ui/kit';
+import {NgDompurifySanitizer} from '@taiga-ui/dompurify';
+import {TuiEditorTool} from '@taiga-ui/editor';
 
 @Component({
     standalone: true,
     selector: 'home',
     imports: [
         CommonModule,
         FormsModule,
-        NgDompurifyModule,
-        TuiAccordionModule,
-        TuiButtonModule,
-        TuiCalendarModule,
-        TuiCheckboxLabeledModule,
-        TuiDropdownModule,
-        TuiEditorModule,
-        TuiHintModule,
+        NgDompurifyPipe,
+        TuiAccordion,
+        TuiButton,
+        TuiCalendar,
+        TuiLabel,
+        TuiDropdown,
+        TuiEditor, TuiEditorSocket,
+        TuiHint,
         TuiInputDateModule,
         TuiInputTagModule,
-        TuiLinkModule,
-        TuiPushModule,
-        TuiSliderModule,
-        TuiSvgModule,
+        TuiLink,
+        TuiPush,
+        TuiSlider,
+        TuiIcon,
         TuiTextfieldControllerModule,
-        TuiToggleModule,
-    ],
+        TuiSwitch, TuiCheckbox],
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.less'],
     encapsulation: ViewEncapsulation.None,

apps/demo/src/styles.less

@@ -8,7 +8,7 @@ html,
 body {
     margin: 0;
     padding: 0;
-    color: var(--tui-text-01);
+    color: var(--tui-text-primary);
 }
 
 app {