feat(kit): add tuiConnected directive for Stepper and Cell

projects/demo/src/modules/components/cell/examples/8/index.html

@@ -0,0 +1,106 @@
+<tui-notification>
+    tuiConnected directive can be attached as host directive:
+    <code>hostDirectives: [TuiConnected]</code>
+</tui-notification>
+
+<h3 tuiTitle="m">Labels</h3>
+
+<div tuiConnected>
+    <label tuiCell>
+        <tui-badged-content>
+            <tui-icon
+                appearance="error"
+                icon="@tui.arrow-down-left"
+                size="s"
+                tuiBadge
+                tuiSlot="top"
+            />
+            <tui-avatar
+                size="s"
+                src="@tui.phone"
+            />
+        </tui-badged-content>
+        <div
+            tuiTitle
+            [style.color]="'var(--tui-text-negative)'"
+        >
+            Allow incoming
+            <div tuiSubtitle>Why would you?</div>
+        </div>
+        <input
+            tuiSwitch
+            type="checkbox"
+            [(ngModel)]="incoming"
+        />
+    </label>
+    <label tuiCell>
+        <tui-badged-content>
+            <tui-icon
+                appearance="success"
+                icon="@tui.arrow-up-right"
+                size="s"
+                tuiBadge
+                tuiSlot="top"
+            />
+            <tui-avatar
+                size="s"
+                src="@tui.phone"
+            />
+        </tui-badged-content>
+        <div tuiTitle>Allow outgoing</div>
+        <input
+            tuiSwitch
+            type="checkbox"
+            [(ngModel)]="outgoing"
+        />
+    </label>
+    <label tuiCell>
+        <tui-badged-content>
+            <tui-icon
+                appearance="error"
+                icon="@tui.arrow-down-left"
+                size="s"
+                tuiBadge
+                tuiSlot="top"
+            />
+            <tui-avatar
+                size="s"
+                src="@tui.phone"
+            />
+        </tui-badged-content>
+        <div
+            tuiTitle
+            [style.color]="'var(--tui-text-negative)'"
+        >
+            Allow incoming
+            <div tuiSubtitle>Why would you?</div>
+        </div>
+        <input
+            tuiSwitch
+            type="checkbox"
+            [(ngModel)]="incoming"
+        />
+    </label>
+</div>
+
+<h3 tuiTitle="m">CardLarge</h3>
+
+<div
+    tuiCardLarge
+    tuiConnected
+    tuiSurface="elevated"
+>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        />
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
+</div>

projects/demo/src/modules/components/cell/examples/8/index.less

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    max-width: 20rem;
+    gap: 1rem;
+}

projects/demo/src/modules/components/cell/examples/8/index.ts

@@ -0,0 +1,65 @@
+import {NgFor} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIcon, TuiNotification, TuiSurface} from '@taiga-ui/core';
+import {
+    TuiAvatar,
+    TuiBadge,
+    TuiBadgedContent,
+    TuiConnected,
+    TuiDataListWrapper,
+    TuiSwitch,
+} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';
+import {TuiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiNotification,
+        TuiCell,
+        TuiAvatar,
+        TuiSelectModule,
+        TuiDataListWrapper,
+        TuiTextfieldControllerModule,
+        TuiCardLarge,
+        TuiSurface,
+        NgFor,
+        FormsModule,
+        TuiBadgedContent,
+        TuiIcon,
+        TuiConnected,
+        TuiBadge,
+        TuiSwitch,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly items = [
+        {
+            icon: '@tui.eye',
+            title: 'Show more',
+            subtitle: 'Ctrl + Shift + M',
+        },
+        {
+            icon: '@tui.mail',
+            title: 'Send message',
+            subtitle: 'Keep it short',
+        },
+        {
+            icon: '@tui.lock',
+            title: 'Access',
+            subtitle: 'Block your account',
+        },
+    ];
+
+    protected value = this.items[0];
+
+    protected incoming = false;
+    protected outgoing = true;
+}

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

@@ -22,5 +22,6 @@ export default class Example {
         'Long content',
         'Actions',
         'Combinations',
+        'Connected',
     ];
 }

projects/demo/src/modules/components/stepper/examples/4/index.html

@@ -0,0 +1,12 @@
+<tui-stepper
+    orientation="vertical"
+    tuiConnected
+    [activeItemIndex]="1"
+>
+    <button
+        *ngFor="let step of steps"
+        tuiStep
+    >
+        {{ step }}
+    </button>
+</tui-stepper>

projects/demo/src/modules/components/stepper/examples/4/index.ts

@@ -0,0 +1,16 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiConnected, TuiStepper} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiStepper, TuiConnected, NgForOf],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly steps = ['Start Up', 'Cash In', 'Sell Out', 'Bro Down'];
+}

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

@@ -13,7 +13,12 @@ import {TuiStepper} from '@taiga-ui/kit';
 export default class Page {
     protected activeItemIndex = 0;
 
-    protected readonly examples = ['Basic', 'Vertical', 'Vertical autoscroll'];
+    protected readonly examples = [
+        'Basic',
+        'Vertical',
+        'Vertical autoscroll',
+        'Vertical connected',
+    ];
 
     protected readonly orientationVariants: readonly TuiOrientation[] = [
         'horizontal',

projects/kit/directives/connected/connected.directive.ts

@@ -0,0 +1,30 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    ViewEncapsulation,
+} from '@angular/core';
+import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./connected.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-connected-styles',
+    },
+})
+class TuiConnectedStyles {}
+
+@Directive({
+    standalone: true,
+    selector: '[tuiConnected]',
+    host: {
+        tuiConnected: '',
+    },
+})
+export class TuiConnected {
+    protected readonly nothing = tuiWithStyles(TuiConnectedStyles);
+}

projects/kit/directives/connected/connected.style.less

@@ -0,0 +1,42 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiConnected] {
+    --tui-connected-gap: 4px;
+    --tui-connected-width: 1px;
+    --tui-icon-height: 2rem;
+    --tui-icon-width: 2rem;
+    --tui-left-offset: 1rem;
+    --tui-vertical-offset: calc((100% + var(--tui-icon-height)) / 2 + var(--tui-connected-gap));
+    --tui-connected-height: calc(100% - var(--tui-vertical-offset));
+
+    &[tuiCardLarge] [tuiCell],
+    [tuiCell],
+    [tuiStep] {
+        &:not(:first-of-type):before,
+        &:not(:last-of-type):after {
+            content: '';
+            position: absolute;
+            bottom: var(--tui-vertical-offset);
+            left: calc(var(--tui-icon-width) / 2 + var(--tui-left-offset));
+            height: var(--tui-connected-height);
+            width: var(--tui-connected-width);
+            background-color: var(--tui-border-normal);
+        }
+
+        &:not(:last-of-type):after {
+            top: var(--tui-vertical-offset);
+        }
+    }
+
+    &[tuiCardLarge] [tuiCell] {
+        --tui-left-offset: 0.5rem;
+        --tui-icon-height: 2.5rem;
+        --tui-icon-width: 2.5rem;
+    }
+
+    [tuiStep] {
+        --tui-left-offset: 0rem;
+        --tui-vertical-margin: 1.25rem;
+        --tui-connected-height: calc(100% - var(--tui-vertical-offset) + var(--tui-vertical-margin) / 2);
+    }
+}

projects/kit/directives/connected/index.ts

@@ -0,0 +1 @@
+export * from './connected.directive';

projects/kit/directives/connected/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/kit/directives/index.ts

@@ -3,6 +3,7 @@ export * from '@taiga-ui/kit/directives/button-group';
 export * from '@taiga-ui/kit/directives/button-vertical';
 export * from '@taiga-ui/kit/directives/chevron';
 export * from '@taiga-ui/kit/directives/comment';
+export * from '@taiga-ui/kit/directives/connected';
 export * from '@taiga-ui/kit/directives/data-list-dropdown-manager';
 export * from '@taiga-ui/kit/directives/fade';
 export * from '@taiga-ui/kit/directives/highlight';