refactor!: Segmented move to kit package (#7192)

Co-authored-by: taiga-family-bot <[email protected]>

package.json

@@ -35,7 +35,7 @@
         "build:ssr": "nx build demo --baseHref=/ && nx run demo:server:production",
         "prerender": "nx run demo:prerender",
         "test": "nx run-many --target test --all --output-style=stream --parallel=1",
-        "test:e2e": "nx e2e-ui demo-cypress",
+        "test:e2e": "nx e2e-ui demo-playwright",
         "*** Workflow ***": "",
         "stylelint": "stylelint '**/*.{less,css}' --config package.json",
         "lint": "eslint .",

projects/demo/src/modules/app/app.routes.ts

@@ -229,15 +229,11 @@ export const ROUTES: Routes = [
         title: 'Label ',
         loadComponent: async () => import('../experimental/label'),
     }),
-    {
+    route({
         path: DemoRoute.Segmented,
-        loadChildren: async () =>
-            (await import('../experimental/segmented/segmented.module'))
-                .ExampleTuiSegmentedModule,
-        data: {
-            title: 'Segmented',
-        },
-    },
+        title: 'Segmented',
+        loadComponent: async () => import('../components/segmented'),
+    }),
     {
         path: DemoRoute.Surface,
         loadChildren: async () =>

projects/demo/src/modules/app/demo-routes.ts

@@ -36,7 +36,7 @@ export const DemoRoute = {
     Header: 'layout/header',
     Icon: 'components/icon',
     LabelExp: 'experimental/label',
-    Segmented: 'experimental/segmented',
+    Segmented: 'navigation/segmented',
     Surface: 'experimental/surface',
     SwipeActions: 'components/swipe-actions',
     Textfield: 'experimental/textfield',

projects/demo/src/modules/app/pages.ts

@@ -905,7 +905,7 @@ export const pages: TuiDocPages = [
         route: DemoRoute.LabelExp,
     },
     {
-        section: 'Experimental',
+        section: 'Navigation',
         title: 'Segmented',
         keywords: 'tabs, control, radio, navigation, навигация, вкладки, таб',
         route: DemoRoute.Segmented,

projects/demo/src/modules/components/segmented/examples/1/index.ts

@@ -0,0 +1,23 @@
+import {NgFor} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIconComponent} from '@taiga-ui/core';
+import {TuiBadgeNotificationComponent, TuiSegmentedComponent} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiSegmentedComponent,
+        NgFor,
+        TuiIconComponent,
+        TuiBadgeNotificationComponent,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected readonly sizes = ['s', 'm', 'l'] as const;
+}

projects/demo/src/modules/experimental/segmented/examples/1/index.ts → projects/demo/src/modules/components/segmented/examples/2/index.ts

@@ -1,14 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiFadeDirective, TuiSegmentedComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-segmented-example-1',
+    standalone: true,
+    imports: [TuiSegmentedComponent, TuiFadeDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiSegmentedExample1 {
-    protected readonly sizes = ['s', 'm', 'l'] as const;
-}
+export default class ExampleComponent {}

projects/demo/src/modules/experimental/segmented/examples/3/index.ts → projects/demo/src/modules/components/segmented/examples/3/index.ts

@@ -1,15 +1,18 @@
+import {NgFor} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiSegmentedComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-segmented-example-3',
+    standalone: true,
+    imports: [TuiSegmentedComponent, NgFor],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiSegmentedExample3 {
+export default class ExampleComponent {
     protected readonly buttons = ['Track active index', 'To color tabs', 'Differently'];
     protected active = 0;
 }

projects/demo/src/modules/experimental/segmented/examples/4/index.html → projects/demo/src/modules/components/segmented/examples/4/index.html

@@ -14,15 +14,15 @@
         Use routerLink
     </a>
     <a
-        routerLink="/experimental/segmented"
+        routerLink="/navigation/segmented"
         routerLinkActive
         [routerLinkActiveOptions]="options"
     >
         And routerLinkActive
     </a>
     <a
         fragment="content"
-        routerLink="/experimental/segmented"
+        routerLink="/navigation/segmented"
         routerLinkActive
         [routerLinkActiveOptions]="options"
     >

projects/demo/src/modules/experimental/segmented/examples/4/index.ts → projects/demo/src/modules/components/segmented/examples/4/index.ts

@@ -1,16 +1,27 @@
 import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import type {IsActiveMatchOptions} from '@angular/router';
+import {RouterLink, RouterLinkActive} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIconComponent} from '@taiga-ui/core';
+import {TuiSegmentedComponent} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-segmented-example-4',
+    standalone: true,
+    imports: [
+        TuiSegmentedComponent,
+        RouterLink,
+        FormsModule,
+        RouterLinkActive,
+        TuiIconComponent,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiSegmentedExample4 {
+export default class ExampleComponent {
     protected selected = 'a';
 
     protected readonly options: IsActiveMatchOptions = {

projects/demo/src/modules/components/segmented/index.html

@@ -0,0 +1,22 @@
+<tui-doc-page
+    header="Segmented"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p class="tui-space_vertial-4">
+            Segmented is used for links and buttons to navigate within the application. It can also work as a radio
+            button to toggle between different states.
+        </p>
+
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>

projects/demo/src/modules/components/segmented/index.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemoModule} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemoModule],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class ExampleComponent {
+    protected readonly examples = ['Sizes', 'Width', 'Customization', 'Content'];
+}

projects/demo/used-icons.ts

@@ -78,6 +78,8 @@ export const TUI_USED_ICONS = [
     'tuiIconFrownLarge',
     'tuiIconMehLarge',
     'tuiIconSmileLarge',
+    'tuiIconSun',
+    'tuiIconMoon',
     'tuiIconMastercard',
     'tuiIconPhoneForwardedLarge',
     'tuiIconMusicLarge',
@@ -123,8 +125,6 @@ export const TUI_USED_ICONS = [
     'tuiIconGrid',
     'tuiIconHome',
     'tuiIconGitlab',
-    'tuiIconSun',
-    'tuiIconMoon',
     'tuiIconThumbsDown',
     'tuiIconBellLarge',
     'tuiIconInfo',

projects/experimental/components/index.ts

@@ -1,6 +1,5 @@
 export * from '@taiga-ui/experimental/components/app-bar';
 export * from '@taiga-ui/experimental/components/chip';
 export * from '@taiga-ui/experimental/components/navigation';
-export * from '@taiga-ui/experimental/components/segmented';
 export * from '@taiga-ui/experimental/components/textfield';
 export * from '@taiga-ui/experimental/components/tooltip';

projects/kit/components/index.ts

@@ -51,6 +51,7 @@ export * from '@taiga-ui/kit/components/radio-list';
 export * from '@taiga-ui/kit/components/range';
 export * from '@taiga-ui/kit/components/rating';
 export * from '@taiga-ui/kit/components/routable-dialog';
+export * from '@taiga-ui/kit/components/segmented';
 export * from '@taiga-ui/kit/components/select';
 export * from '@taiga-ui/kit/components/select-option';
 export * from '@taiga-ui/kit/components/slider';