feat(kit)!: Tabs refactor and drop MobileTabs in favor of Segmented

projects/addon-mobile/directives/index.ts

@@ -1,5 +1,4 @@
 export * from '@taiga-ui/addon-mobile/directives/elastic-sticky';
-export * from '@taiga-ui/addon-mobile/directives/mobile-tabs';
 export * from '@taiga-ui/addon-mobile/directives/ripple';
 export * from '@taiga-ui/addon-mobile/directives/sidebar';
 export * from '@taiga-ui/addon-mobile/directives/touchable';

projects/cdk/services/directive-styles.service.ts

@@ -1,45 +1,20 @@
-import type {OnDestroy, Type} from '@angular/core';
-import {
-    ComponentFactoryResolver,
-    createComponent,
-    EnvironmentInjector,
-    inject,
-    Injectable,
-    INJECTOR,
-} from '@angular/core';
+import type {Type} from '@angular/core';
+import {createComponent, DestroyRef, EnvironmentInjector, inject} from '@angular/core';
+import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils';
+
+const MAP = tuiCreateTokenFromFactory(() => {
+    const map = new Map();
+
+    inject(DestroyRef).onDestroy(() => map.forEach(component => component.destroy()));
+
+    return map;
+});
 
-// TODO: Add cleanup with DestroyRef in Angular 16+ and replace service with just a map from a token
 export function tuiWithStyles(component: Type<unknown>): void {
-    const map = inject(TuiDirectiveStylesService).map;
+    const map = inject(MAP);
     const environmentInjector = inject(EnvironmentInjector);
 
     if (!map.has(component)) {
         map.set(component, createComponent(component, {environmentInjector}));
     }
 }
-
-/**
- * @deprecated use {@link tuiWithStyles} instead
- */
-@Injectable({
-    providedIn: 'root',
-})
-export class TuiDirectiveStylesService implements OnDestroy {
-    private readonly resolver = inject(ComponentFactoryResolver);
-    private readonly injector = inject(INJECTOR);
-
-    public readonly map = new Map();
-
-    public addComponent(component: Type<unknown>): void {
-        if (!this.map.has(component)) {
-            this.map.set(
-                component,
-                this.resolver.resolveComponentFactory(component).create(this.injector),
-            );
-        }
-    }
-
-    public ngOnDestroy(): void {
-        this.map.forEach(component => component.destroy());
-    }
-}

projects/core/components/root/root.style.less

@@ -3,7 +3,7 @@
 // Required by some Taiga UI components
 @keyframes tuiPresent {
     to {
-        content: '1';
+        content: '';
     }
 }
 

projects/core/styles/theme/variables.less

@@ -175,7 +175,7 @@
     --tui-base-07: #ededed;
     --tui-base-08: #f6f6f6;
     --tui-base-09: #fff;
-    --tui-focus: rgba(51, 51, 51, 0.64);
+    --tui-focus: rgba(255, 255, 255, 0.64);
     --tui-secondary: rgba(255, 255, 255, 0.16);
     --tui-secondary-hover: rgba(255, 255, 255, 0.24);
     --tui-secondary-active: rgba(255, 255, 255, 0.4);

projects/demo/src/modules/components/tabs/examples/1/index.html

@@ -1,18 +1,34 @@
-<tui-tabs
-    tuiMobileTabs
-    [(activeItemIndex)]="activeItemIndex"
->
+<tui-tabs [(activeItemIndex)]="activeItemIndex">
+    <button
+        tuiTab
+        (click)="onClick('Maps')"
+    >
+        <tui-svg
+            src="tuiIconCreditCard"
+            class="tui-space_right-2"
+        />
+        Maps
+    </button>
+    <button
+        disabled
+        tuiTab
+        (click)="onClick('Calls')"
+    >
+        <tui-svg
+            src="tuiIconPhone"
+            class="tui-space_right-2"
+        />
+        Calls
+    </button>
     <button
-        *ngFor="let item of items"
-        tuiRipple="var(--tui-text-01)"
         tuiTab
-        (click)="onClick(item.text)"
+        (click)="onClick('Settings')"
     >
         <tui-svg
+            src="tuiIconSettings"
             class="tui-space_right-2"
-            [src]="item.icon"
         />
-        {{ item.text }}
+        Settings
     </button>
 </tui-tabs>
 <tui-input-number

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

@@ -1,43 +1,17 @@
 import {Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TUI_IS_ANDROID, TUI_IS_IOS} from '@taiga-ui/cdk';
 import {TuiAlertService} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-tabs-example-1',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
-    providers: [
-        {
-            provide: TUI_IS_IOS,
-            useValue: false,
-        },
-        {
-            provide: TUI_IS_ANDROID,
-            useValue: true,
-        },
-    ],
 })
 export class TuiTabsExample1 {
     private readonly alerts = inject(TuiAlertService);
 
-    protected readonly items = [
-        {
-            text: 'Maps',
-            icon: 'tuiIconCreditCard',
-        },
-        {
-            text: 'Calls',
-            icon: 'tuiIconPhone',
-        },
-        {
-            text: 'Settings',
-            icon: 'tuiIconSettings',
-        },
-    ];
-
     protected activeItemIndex = 0;
 
     protected onClick(item: string): void {

projects/demo/src/modules/components/tabs/examples/2/index.html

@@ -1,23 +1,68 @@
-<tui-tabs
-    tuiMobileTabs
+<tui-tabs-with-more
+    [itemsLimit]="3"
     [(activeItemIndex)]="activeItemIndex"
 >
     <button
-        *ngFor="let item of items"
+        *tuiItem
         tuiTab
-        (click)="onClick(item.text)"
+        (click)="onClick('Maps')"
     >
         <tui-svg
+            src="tuiIconCreditCard"
             class="tui-space_right-2"
-            [src]="item.icon"
         />
-        {{ item.text }}
+        Maps
     </button>
-</tui-tabs>
+    <button
+        *tuiItem
+        disabled
+        tuiTab
+        (click)="onClick('Calls')"
+    >
+        <tui-svg
+            src="tuiIconPhone"
+            class="tui-space_right-2"
+        />
+        Calls
+    </button>
+    <button
+        *tuiItem
+        tuiTab
+        (click)="onClick('Settings')"
+    >
+        <tui-svg
+            src="tuiIconSettings"
+            class="tui-space_right-2"
+        />
+        Settings
+    </button>
+    <button
+        *tuiItem
+        tuiTab
+        (click)="onClick('Favorite')"
+    >
+        <tui-svg
+            src="tuiIconHeart"
+            class="tui-space_right-2"
+        />
+        Favorite
+    </button>
+    <button
+        *tuiItem
+        tuiTab
+        (click)="onClick('Trash')"
+    >
+        <tui-svg
+            src="tuiIconTrash"
+            class="tui-space_right-2"
+        />
+        Trash
+    </button>
+</tui-tabs-with-more>
 <tui-input-number
     decimal="never"
     class="tui-space_top-4"
-    [max]="2"
+    [max]="4"
     [min]="0"
     [step]="1"
     [(ngModel)]="activeItemIndex"