refactor(kit): first iteration (#7547)

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

Hide file tree

Showing 83 changed files with 317 additions and 293 deletions.
diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts
@@ -42,7 +42,7 @@ import {
     TuiTextfieldControllerModule,
     TuiTextfieldOptionsDirective,
 } from '@taiga-ui/core';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 import type {TuiInputComponent} from '@taiga-ui/legacy';
 import {TuiInputModule} from '@taiga-ui/legacy';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -72,7 +72,7 @@ import {
         PolymorpheusModule,
         RouterLink,
         TuiScrollbarComponent,
-        TuiAccordionModule,
+        TuiAccordion,
         NgTemplateOutlet,
         TuiLinkDirective,
         TuiScrollIntoViewLinkDirective,

diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts
@@ -129,6 +129,36 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
         from: {name: 'TuiLoaderModule', moduleSpecifier: '@taiga-ui/core'},
         to: {name: 'TuiLoaderComponent', moduleSpecifier: '@taiga-ui/core'},
     },
+    {
+        from: {name: 'TuiAccordionComponent', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiAccordionDirective', moduleSpecifier: '@taiga-ui/kit'},
+    },
+    {
+        from: {name: 'TuiAccordionModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiAccordion', moduleSpecifier: '@taiga-ui/kit'},
+    },
+    {
+        from: {name: 'TuiBreadcrumbsModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: [
+            {name: 'TuiBreadcrumbsComponent', moduleSpecifier: '@taiga-ui/kit'},
+            {name: 'TuiItemDirective', moduleSpecifier: '@taiga-ui/cdk'},
+        ],
+    },
+    {
+        from: {name: 'TuiCalendarMonthModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiCalendarMonthComponent', moduleSpecifier: '@taiga-ui/kit'},
+    },
+    {
+        from: {name: 'TuiCalendarRangeModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: {name: 'TuiCalendarRangeComponent', moduleSpecifier: '@taiga-ui/kit'},
+    },
+    {
+        from: {name: 'TuiCarouselModule', moduleSpecifier: '@taiga-ui/kit'},
+        to: [
+            {name: 'TuiCarouselComponent', moduleSpecifier: '@taiga-ui/kit'},
+            {name: 'TuiItemDirective', moduleSpecifier: '@taiga-ui/cdk'},
+        ],
+    },
     {
         from: {name: 'TuiThumbnailCardModule', moduleSpecifier: '@taiga-ui/experimental'},
         to: {

diff --git a/projects/core/components/data-list/option.component.ts b/projects/core/components/data-list/option.component.ts
@@ -9,7 +9,6 @@ import {
 import {TUI_IS_MOBILE, tuiInjectElement, tuiIsNativeFocused} from '@taiga-ui/cdk';
 import {TuiDropdownDirective} from '@taiga-ui/core/directives/dropdown';
 import {TuiIconsDirective} from '@taiga-ui/core/directives/icons';
-import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiDataListComponent} from './data-list.component';
@@ -67,12 +66,6 @@ export class TuiOptionComponent<T = unknown> implements OnDestroy {
         optional: true,
     });
 
-    constructor() {
-        const icons = inject(TuiIconsDirective);
-
-        icons.iconRight = this.dropdown ? inject(TUI_COMMON_ICONS).more : icons.iconRight;
-    }
-
     // Preventing focus loss upon focused option removal
     public ngOnDestroy(): void {
         this.dataList?.handleFocusLossIfNecessary(this.el);

diff --git a/projects/core/components/group/group.style.less b/projects/core/components/group/group.style.less
@@ -7,6 +7,11 @@
 
     --t-radius: var(--tui-radius-m);
 
+    // TODO: Remove this hack after accordion redesign
+    tui-accordion& {
+        width: 100%;
+    }
+
     & > * {
         flex: 1 1 0;
         min-width: 0;

diff --git a/projects/demo/src/modules/app/home/home.component.ts b/projects/demo/src/modules/app/home/home.component.ts
@@ -5,7 +5,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDocCodeComponent, TuiDocTabComponent} from '@taiga-ui/addon-doc';
 import {TuiLinkDirective, TuiNotificationComponent} from '@taiga-ui/core';
-import {TuiAccordionModule, TuiTabsModule} from '@taiga-ui/kit';
+import {TuiAccordion, TuiTabsModule} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -17,7 +17,7 @@ import {TuiAccordionModule, TuiTabsModule} from '@taiga-ui/kit';
         TuiDocCodeComponent,
         TuiLinkDirective,
         RouterLink,
-        TuiAccordionModule,
+        TuiAccordion,
         TuiNotificationComponent,
     ],
     templateUrl: './home.template.html',

diff --git a/projects/demo/src/modules/components/accordion/examples/1/index.ts b/projects/demo/src/modules/components/accordion/examples/1/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-accordion-example-1',
-    imports: [TuiAccordionModule],
+    imports: [TuiAccordion],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

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,7 +5,7 @@ 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} from '@taiga-ui/kit';
+import {TuiAccordion, TuiDataListWrapperModule} from '@taiga-ui/kit';
 import {TuiInputModule, TuiSelectModule} from '@taiga-ui/legacy';
 
 class Account {
@@ -24,7 +24,7 @@ class Account {
     selector: 'tui-accordion-example-2',
     imports: [
         NgIf,
-        TuiAccordionModule,
+        TuiAccordion,
         AsyncPipe,
         TuiSvgComponent,
         TuiAmountPipe,

diff --git a/projects/demo/src/modules/components/accordion/examples/3/index.ts b/projects/demo/src/modules/components/accordion/examples/3/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-accordion-example-3',
-    imports: [TuiAccordionModule],
+    imports: [TuiAccordion],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/accordion/examples/4/index.ts b/projects/demo/src/modules/components/accordion/examples/4/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-accordion-example-4',
-    imports: [TuiAccordionModule],
+    imports: [TuiAccordion],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/accordion/examples/5/index.ts b/projects/demo/src/modules/components/accordion/examples/5/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-accordion-example-5',
-    imports: [TuiAccordionModule],
+    imports: [TuiAccordion],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/accordion/examples/import/import-module.md b/projects/demo/src/modules/components/accordion/examples/import/import-module.md
@@ -1,13 +1,13 @@
 ```ts
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 
 // ...
 
 @Component({
   standalone: true,
   imports: [
     // ...
-    TuiAccordionModule,
+    TuiAccordion,
   ],
   // ...
 })

diff --git a/projects/demo/src/modules/components/accordion/index.html b/projects/demo/src/modules/components/accordion/index.html
@@ -94,7 +94,7 @@
 
         <tui-accordion [closeOthers]="false">
             <tui-accordion-item [open]="true">
-                TuiAccordionComponent
+                TuiAccordionDirective
                 <ng-template tuiAccordionItemContent>
                     <tui-doc-documentation>
                         <ng-template

diff --git a/projects/demo/src/modules/components/accordion/index.ts b/projects/demo/src/modules/components/accordion/index.ts
@@ -4,7 +4,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiSetupComponent} from '@demo/utils';
 import {TuiAddonDoc, type TuiDocExample} from '@taiga-ui/addon-doc';
 import {TUI_EXPAND_LOADED, type TuiSizeS} from '@taiga-ui/core';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiAccordion} from '@taiga-ui/kit';
 import {timer} from 'rxjs';
 
 import {TuiAccordionExample1} from './examples/1';
@@ -17,7 +17,7 @@ import {TuiAccordionExample5} from './examples/5';
     standalone: true,
     imports: [
         TuiAddonDoc,
-        TuiAccordionModule,
+        TuiAccordion,
         TuiAccordionExample1,
         TuiAccordionExample2,
         TuiAccordionExample3,

diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/1/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/1/index.ts
@@ -3,12 +3,19 @@ import {Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiItemDirective} from '@taiga-ui/cdk';
 import {TuiLinkDirective} from '@taiga-ui/core';
-import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
+import {TuiBreadcrumbsComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [NgFor, RouterLink, TuiBreadcrumbsModule, TuiLinkDirective],
+    imports: [
+        NgFor,
+        RouterLink,
+        TuiBreadcrumbsComponent,
+        TuiLinkDirective,
+        TuiItemDirective,
+    ],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts b/projects/demo/src/modules/components/breadcrumbs/examples/2/index.ts
@@ -2,27 +2,28 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiRepeatTimesDirective} from '@taiga-ui/cdk';
+import {TuiItemDirective, TuiRepeatTimesDirective} from '@taiga-ui/cdk';
 import {
     TuiButtonDirective,
     TuiDataList,
     TuiDropdownModule,
     TuiLinkDirective,
 } from '@taiga-ui/core';
-import {TuiBreadcrumbsModule, tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
+import {TuiBreadcrumbsComponent, tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit';
 import {TuiInputNumberModule} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
     imports: [
         FormsModule,
-        TuiBreadcrumbsModule,
+        TuiBreadcrumbsComponent,
         TuiDropdownModule,
         TuiDataList,
         TuiInputNumberModule,
         TuiRepeatTimesDirective,
         TuiLinkDirective,
         TuiButtonDirective,
+        TuiItemDirective,
     ],
     templateUrl: './index.html',
     encapsulation,

diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/import.md b/projects/demo/src/modules/components/breadcrumbs/examples/import/import.md
@@ -1,13 +1,15 @@
 ```ts
-import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
+import {TuiItemDirective} from '@taiga-ui/cdk';
+import {TuiBreadcrumbsComponent} from '@taiga-ui/kit';
 
 // ...
 
 @Component({
   standalone: true,
   imports: [
     // ...
-    TuiBreadcrumbsModule,
+    TuiItemDirective,
+    TuiBreadcrumbsComponent,
   ],
   // ...
 })

diff --git a/projects/demo/src/modules/components/breadcrumbs/index.ts b/projects/demo/src/modules/components/breadcrumbs/index.ts
@@ -2,12 +2,19 @@ import {Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
+import {TuiItemDirective} from '@taiga-ui/cdk';
 import {TuiLinkDirective, type TuiSizeL} from '@taiga-ui/core';
-import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
+import {TuiBreadcrumbsComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [RouterLink, TuiDemo, TuiBreadcrumbsModule, TuiLinkDirective],
+    imports: [
+        RouterLink,
+        TuiDemo,
+        TuiBreadcrumbsComponent,
+        TuiItemDirective,
+        TuiLinkDirective,
+    ],
     templateUrl: './index.html',
     changeDetection,
 })

diff --git a/projects/demo/src/modules/components/calendar-month/examples/1/index.ts b/projects/demo/src/modules/components/calendar-month/examples/1/index.ts
@@ -2,11 +2,11 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiMonth} from '@taiga-ui/cdk';
-import {TuiCalendarMonthModule} from '@taiga-ui/kit';
+import {TuiCalendarMonthComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiCalendarMonthModule],
+    imports: [TuiCalendarMonthComponent],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/calendar-month/examples/2/index.ts b/projects/demo/src/modules/components/calendar-month/examples/2/index.ts
@@ -2,11 +2,11 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiMonth, TuiMonthRange} from '@taiga-ui/cdk';
-import {TuiCalendarMonthModule} from '@taiga-ui/kit';
+import {TuiCalendarMonthComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiCalendarMonthModule],
+    imports: [TuiCalendarMonthComponent],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/calendar-month/examples/import/import.md b/projects/demo/src/modules/components/calendar-month/examples/import/import.md
@@ -1,13 +1,13 @@
 ```ts
-import {TuiCalendarMonthModule} from '@taiga-ui/kit';
+import {TuiCalendarMonthComponent} from '@taiga-ui/kit';
 
 // ...
 
 @Component({
   standalone: true,
   imports: [
     // ...
-    TuiCalendarMonthModule,
+    TuiCalendarMonthComponent,
   ],
   // ...
 })

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

diff --git a/projects/demo/src/modules/components/calendar-range/examples/1/index.ts b/projects/demo/src/modules/components/calendar-range/examples/1/index.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiCalendarRangeModule} from '@taiga-ui/kit';
+import {TuiCalendarRangeComponent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiCalendarRangeModule],
+    imports: [TuiCalendarRangeComponent],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,