refactor(kit): dump legacy controls to legacy package (#7538)

Signed-off-by: waterplea <[email protected]> Co-authored-by: taiga-family-bot <[email protected]> Co-authored-by: splincode <[email protected]>
taiga-family · May 24, 2024 · f1cfb16 · f1cfb16
1 parent 2aa95a8
commit f1cfb16
Show file tree

Hide file tree

Showing 406 changed files with 488 additions and 553 deletions.
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
@@ -43,14 +43,16 @@ import {
     TEXTFIELD_CONTROLLER_PROVIDER,
     TUI_COMMON_ICONS,
     TUI_TEXTFIELD_WATCHED_CONTROLLER,
+    TuiAppearanceDirective,
     tuiAsDataListHost,
     TuiDataListComponent,
     TuiDataListDirective,
     TuiDropdownModule,
+    TuiIconComponent,
     TuiSvgComponent,
     TuiWrapperModule,
 } from '@taiga-ui/core';
-import {TUI_ARROW_OPTIONS} from '@taiga-ui/kit';
+import {TuiChevronDirective} from '@taiga-ui/kit';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -78,6 +80,9 @@ const EXPIRE_COMPLETE_LENGTH = 5; // MM/YY
         ResizeObserverModule,
         TuiSvgComponent,
         PolymorpheusModule,
+        TuiIconComponent,
+        TuiAppearanceDirective,
+        TuiChevronDirective,
     ],
     templateUrl: './input-card-grouped.template.html',
     styleUrls: ['./input-card-grouped.style.less'],
@@ -154,7 +159,6 @@ export class TuiInputCardGroupedComponent
     protected readonly cardGroupedTexts$ = inject(TUI_INPUT_CARD_GROUPED_TEXTS);
     protected readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER);
     protected readonly icons = inject(TUI_COMMON_ICONS);
-    protected readonly arrowOptions = inject(TUI_ARROW_OPTIONS);
 
     constructor() {
         super(inject(TUI_INPUT_CARD_GROUPED_OPTIONS));

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -153,12 +153,7 @@
 }
 
 .t-icon {
-    .transition(transform);
-    .icon-button();
-
-    &_rotated {
-        transform: rotate(180deg);
-    }
+    border: 0.25rem solid transparent;
 }
 
 .t-placeholder {

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html
@@ -152,23 +152,19 @@
                 [src]="text"
             />
         </div>
-        <tui-svg
+        <tui-icon
             *ngIf="hasCleaner"
-            appearance="icon"
             automation-id="tui-input-card-grouped__cleaner"
-            tuiWrapper
+            tuiAppearance="icon"
             class="t-icon"
-            [src]="icons.close"
+            [icon]="icons.close"
             (click)="clear()"
         />
-        <tui-svg
+        <tui-icon
             *ngIf="hasDropdown"
-            appearance="icon"
             automation-id="tui-input-card-grouped__dropdown"
-            tuiWrapper
-            class="t-icon"
-            [class.t-icon_rotated]="open"
-            [src]="arrowOptions.iconLarge"
+            tuiAppearance="icon"
+            tuiChevron
             (click)="toggle()"
         />
     </div>

diff --git a/projects/addon-doc/components/demo/index.ts b/projects/addon-doc/components/demo/index.ts
@@ -38,9 +38,9 @@ import {
 import {
     TuiChevronDirective,
     TuiDataListWrapperModule,
-    TuiSelectModule,
     TuiSwitchComponent,
 } from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 const MIN_WIDTH = 160;
 

diff --git a/projects/addon-doc/components/documentation/documentation.component.ts b/projects/addon-doc/components/documentation/documentation.component.ts
@@ -43,10 +43,9 @@ import {
 import {
     TuiBadgeDirective,
     TuiDataListWrapperModule,
-    TuiInputNumberModule,
-    TuiSelectModule,
     TuiSwitchComponent,
 } from '@taiga-ui/kit';
+import {TuiInputNumberModule, TuiSelectModule} from '@taiga-ui/legacy';
 import {merge, switchMap} from 'rxjs';
 
 import {TuiInputOpacityDirective} from '../internal/input-opacity';

diff --git a/projects/addon-doc/components/language-switcher/index.ts b/projects/addon-doc/components/language-switcher/index.ts
@@ -4,7 +4,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {TuiDataList, TuiFlagPipe} from '@taiga-ui/core';
 import type {TuiCountryIsoCode, TuiLanguageName} from '@taiga-ui/i18n';
 import {TuiLanguageSwitcher} from '@taiga-ui/i18n';
-import {TuiSelectModule} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/addon-doc/components/language-switcher/tests/language-switcher.component.spec.ts b/projects/addon-doc/components/language-switcher/tests/language-switcher.component.spec.ts
@@ -4,7 +4,7 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {TuiLanguageSwitcherComponent} from '@taiga-ui/addon-doc';
 import {TuiDataList, TuiFlagPipe} from '@taiga-ui/core';
 import {TuiLanguageSwitcher} from '@taiga-ui/i18n';
-import {TuiSelectModule} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 describe('TuiLanguageSwitcherComponent', () => {
     let component: TuiLanguageSwitcherComponent;

diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -42,8 +42,9 @@ import {
     TuiTextfieldControllerModule,
     TuiTextfieldOptionsDirective,
 } from '@taiga-ui/core';
-import type {TuiInputComponent} from '@taiga-ui/kit';
-import {TuiAccordionModule, TuiInputModule} from '@taiga-ui/kit';
+import {TuiAccordionModule} from '@taiga-ui/kit';
+import type {TuiInputComponent} from '@taiga-ui/legacy';
+import {TuiInputModule} from '@taiga-ui/legacy';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 import {combineLatest, filter, map, switchMap, take} from 'rxjs';
 

diff --git a/...ts/addon-mobile/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.ts b/...ts/addon-mobile/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.ts
@@ -15,12 +15,12 @@ import {
     TuiHostedDropdownComponent,
     tuiSlideInTop,
 } from '@taiga-ui/core';
+import {TUI_MOBILE_CALENDAR} from '@taiga-ui/kit';
 import {
-    TUI_MOBILE_CALENDAR,
     TuiInputDateComponent,
     TuiInputDateMultiComponent,
     TuiInputDateRangeComponent,
-} from '@taiga-ui/kit';
+} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/addon-table/components/table/tbody/tbody.component.ts b/projects/addon-table/components/table/tbody/tbody.component.ts
@@ -12,8 +12,8 @@ import {
     Output,
 } from '@angular/core';
 import {EMPTY_QUERY, TuiMapperPipe} from '@taiga-ui/cdk';
-import {TuiSvgComponent} from '@taiga-ui/core';
-import {TUI_ARROW_OPTIONS} from '@taiga-ui/kit';
+import {TuiIconComponent} from '@taiga-ui/core';
+import {TuiChevronDirective} from '@taiga-ui/kit';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -31,9 +31,10 @@ import {TuiTrComponent} from '../tr/tr.component';
         NgForOf,
         NgIf,
         NgTemplateOutlet,
-        TuiSvgComponent,
         TuiMapperPipe,
         PolymorpheusModule,
+        TuiIconComponent,
+        TuiChevronDirective,
     ],
     templateUrl: './tbody.template.html',
     styleUrls: ['./tbody.style.less'],
@@ -62,7 +63,6 @@ export class TuiTbodyComponent<T extends Partial<Record<keyof T, any>>> {
     @ContentChild(forwardRef(() => TuiRowDirective))
     protected readonly row?: TuiRowDirective<T>;
 
-    protected readonly arrowOptions = inject(TUI_ARROW_OPTIONS);
     protected readonly table = inject<TuiTableDirective<T>>(
         forwardRef(() => TuiTableDirective),
     );

diff --git a/projects/addon-table/components/table/tbody/tbody.style.less b/projects/addon-table/components/table/tbody/tbody.style.less
@@ -74,13 +74,7 @@
 }
 
 .t-chevron {
-    .transition(transform);
-
     position: sticky;
     right: 0.75rem;
     margin: 0 0.6875rem 0 auto;
-
-    &_rotated {
-        transform: rotate(180deg);
-    }
 }
diff --git a/projects/addon-table/components/table/tbody/tbody.template.html b/projects/addon-table/components/table/tbody/tbody.template.html
@@ -13,10 +13,9 @@
                     {{ text }}
                 </ng-container>
             </span>
-            <tui-svg
+            <tui-icon
                 class="t-chevron"
-                [class.t-chevron_rotated]="open"
-                [src]="arrowOptions.iconLarge"
+                [tuiChevron]="open"
             />
         </button>
     </th>

diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts
@@ -44,24 +44,24 @@ export const TUI_USED_ICONS = [
     'tuiIconChevronRight',
     'tuiIconChevronLeft',
     'tuiIconCalendarLarge',
-    'tuiIconChevronDown',
-    'tuiIconChevronDownLarge',
     'tuiIconMinusLarge',
     'tuiIconMinus',
     'tuiIconFileLarge',
     'tuiIconCheckCircleLarge',
     'tuiIconAlertCircleLarge',
     'tuiIconTrashLarge',
-    'tuiIconCopy',
-    'tuiIconPlus',
-    'tuiIconEyeLarge',
-    'tuiIconEyeOffLarge',
-    'tuiIconClock',
-    'tuiIconClockLarge',
     'tuiIconStarLarge',
+    'tuiIconChevronDown',
     'tuiIconCalendar',
     'tuiIconRotate',
     'tuiIconArrowLeft',
     'tuiIconArrowRight',
+    'tuiIconPlus',
     'tuiIconMinimize',
+    'tuiIconChevronDownLarge',
+    'tuiIconCopy',
+    'tuiIconEyeLarge',
+    'tuiIconEyeOffLarge',
+    'tuiIconClock',
+    'tuiIconClockLarge',
 ] as const;
diff --git a/projects/core/components/data-list/option.component.ts b/projects/core/components/data-list/option.component.ts
@@ -90,7 +90,7 @@ export class TuiOptionComponent<T = unknown> implements OnDestroy {
 
     // @bad TODO: Consider aria-activedescendant for proper accessibility implementation
     protected onMouseMove(): void {
-        if (this.isMobile && !tuiIsNativeFocused(this.el)) {
+        if (!this.isMobile && !tuiIsNativeFocused(this.el)) {
             this.el.focus({preventScroll: true});
         }
     }

diff --git a/projects/core/components/icon/icon.style.less b/projects/core/components/icon/icon.style.less
@@ -8,6 +8,7 @@
     font-size: 1.5rem;
     flex-shrink: 0;
     vertical-align: middle;
+    box-sizing: border-box;
 
     &._duo {
         mask: var(--t-mask-bg) no-repeat center/contain;

diff --git a/projects/demo/src/modules/app/version-manager/version-manager.module.ts b/projects/demo/src/modules/app/version-manager/version-manager.module.ts
@@ -2,11 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {TuiDataList, TuiTextfieldControllerModule} from '@taiga-ui/core';
-import {
-    TuiSelectModule,
-    TuiStringifyContentPipeModule,
-    TuiStringifyPipe,
-} from '@taiga-ui/kit';
+import {TuiStringifyContentPipeModule, TuiStringifyPipe} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 import {VersionManagerComponent} from './version-manager.component';
 

diff --git a/projects/demo/src/modules/components/accordion/examples/2/index.ts b/projects/demo/src/modules/components/accordion/examples/2/index.ts
@@ -5,12 +5,8 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {TuiButtonDirective, TuiSvgComponent} from '@taiga-ui/core';
-import {
-    TuiAccordionModule,
-    TuiDataListWrapperModule,
-    TuiInputModule,
-    TuiSelectModule,
-} from '@taiga-ui/kit';
+import {TuiAccordionModule, TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiInputModule, TuiSelectModule} from '@taiga-ui/legacy';
 
 class Account {
     constructor(

diff --git a/projects/demo/src/modules/components/arc-chart/examples/1/index.ts b/projects/demo/src/modules/components/arc-chart/examples/1/index.ts
@@ -5,7 +5,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiArcChartComponent} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
-import {TuiInputNumberModule} from '@taiga-ui/kit';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/badged-content/examples/3/index.ts b/projects/demo/src/modules/components/badged-content/examples/3/index.ts
@@ -6,8 +6,8 @@ import {
     TuiBadgedContentComponent,
     TuiBadgeDirective,
     TuiBadgeNotificationComponent,
-    TuiInputModule,
 } from '@taiga-ui/kit';
+import {TuiInputModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/bar-chart/examples/2/index.ts b/projects/demo/src/modules/components/bar-chart/examples/2/index.ts
@@ -5,7 +5,8 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAxesComponent, TuiBarChartComponent} from '@taiga-ui/addon-charts';
 import type {TuiContext} from '@taiga-ui/cdk';
 import {tuiFormatNumber, TuiHint} from '@taiga-ui/core';
-import {TuiDataListWrapperModule, TuiSelectModule} from '@taiga-ui/kit';
+import {TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts
@@ -9,11 +9,8 @@ import {
     TuiDropdownModule,
     TuiLinkDirective,
 } from '@taiga-ui/core';
-import {
-    TuiBreadcrumbsModule,
-    tuiBreadcrumbsOptionsProvider,
-    TuiInputNumberModule,
-} from '@taiga-ui/kit';
+import {TuiBreadcrumbsModule, tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
+import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/calendar-month/index.ts b/projects/demo/src/modules/components/calendar-month/index.ts
@@ -13,7 +13,8 @@ import {
     TuiYear,
 } from '@taiga-ui/cdk';
 import {TuiLinkDirective} from '@taiga-ui/core';
-import {TuiCalendarMonthModule, TuiInputMonthRangeModule} from '@taiga-ui/kit';
+import {TuiCalendarMonthModule} from '@taiga-ui/kit';
+import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/cell/examples/7/index.ts b/projects/demo/src/modules/components/cell/examples/7/index.ts
@@ -8,12 +8,9 @@ import {
     TuiSurfaceDirective,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {
-    TuiAvatarComponent,
-    TuiDataListWrapperModule,
-    TuiSelectModule,
-} from '@taiga-ui/kit';
+import {TuiAvatarComponent, TuiDataListWrapperModule} from '@taiga-ui/kit';
 import {TuiCardLargeDirective, TuiCellDirective} from '@taiga-ui/layout';
+import {TuiSelectModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,

diff --git a/projects/demo/src/modules/components/combo-box/examples/1/index.ts b/projects/demo/src/modules/components/combo-box/examples/1/index.ts
@@ -6,11 +6,8 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {assets} from '@demo/utils';
 import {TUI_DEFAULT_MATCHER, TuiLetDirective} from '@taiga-ui/cdk';
 import {TuiInitialsPipe, TuiTextfieldControllerModule} from '@taiga-ui/core';
-import {
-    TuiAvatarComponent,
-    TuiComboBoxModule,
-    TuiDataListWrapperModule,
-} from '@taiga-ui/kit';
+import {TuiAvatarComponent, TuiDataListWrapperModule} from '@taiga-ui/kit';
+import {TuiComboBoxModule} from '@taiga-ui/legacy';
 import type {Observable} from 'rxjs';
 import {delay, filter, of, startWith, Subject, switchMap} from 'rxjs';
 

diff --git a/projects/demo/src/modules/components/combo-box/examples/2/index.ts b/projects/demo/src/modules/components/combo-box/examples/2/index.ts
@@ -9,7 +9,8 @@ import {
     TuiLoaderComponent,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiAvatarComponent, TuiComboBoxModule} from '@taiga-ui/kit';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
+import {TuiComboBoxModule} from '@taiga-ui/legacy';
 
 import {databaseMockData} from './database-mock-data';
 import {RequestService} from './request.service';

diff --git a/projects/demo/src/modules/components/combo-box/examples/3/index.ts b/projects/demo/src/modules/components/combo-box/examples/3/index.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {
-    TuiComboBoxModule,
-    TuiDataListWrapperModule,
-    TuiFilterByInputPipeModule,
-} from '@taiga-ui/kit';
+import {TuiDataListWrapperModule, TuiFilterByInputPipeModule} from '@taiga-ui/kit';
+import {TuiComboBoxModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,