From 71f699cec9cda4ba0e4890f10620112e5a009320 Mon Sep 17 00:00:00 2001
From: German Panov <german.panov.2018@mail.ru>
Date: Mon, 16 Sep 2024 12:05:20 +0300
Subject: [PATCH] fix(kit): `Connected` work with `CardLarge` (#9040)

---
 .../components/cell/examples/8/index.html     | 36 +++++++++++++++----
 .../components/cell/examples/8/index.ts       |  3 +-
 .../directives/connected/connected.style.less |  4 +++
 .../layout/components/cell/cell.styles.less   |  3 ++
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/projects/demo/src/modules/components/cell/examples/8/index.html b/projects/demo/src/modules/components/cell/examples/8/index.html
index d27e6dc0d584..0bec34f13915 100644
--- a/projects/demo/src/modules/components/cell/examples/8/index.html
+++ b/projects/demo/src/modules/components/cell/examples/8/index.html
@@ -1,3 +1,32 @@
+<tui-notification>
+    <div>
+        Can be attached as host directive:
+        <code>hostDirectives: [TuiConnected]</code>
+    </div>
+</tui-notification>
+
+<div
+    tuiCardLarge
+    tuiConnected
+    tuiSurface="elevated"
+>
+    <h3 tuiTitle="m">Inside a block</h3>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+        type="button"
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        />
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
+</div>
+
 <div tuiConnected>
     <label tuiCell>
         <tui-badged-content>
@@ -68,10 +97,3 @@
         />
     </label>
 </div>
-
-<tui-notification>
-    <div>
-        Can be attached as host directive:
-        <code>hostDirectives: [TuiConnected]</code>
-    </div>
-</tui-notification>
diff --git a/projects/demo/src/modules/components/cell/examples/8/index.ts b/projects/demo/src/modules/components/cell/examples/8/index.ts
index deeaba5d8adb..87599491cd85 100644
--- a/projects/demo/src/modules/components/cell/examples/8/index.ts
+++ b/projects/demo/src/modules/components/cell/examples/8/index.ts
@@ -50,7 +50,8 @@ export default class Example {
         {
             icon: '@tui.mail',
             title: 'Send message',
-            subtitle: 'Keep it short',
+            subtitle:
+                'Allow outgoing unusual call that can change your life in an unusual way',
         },
         {
             icon: '@tui.lock',
diff --git a/projects/kit/directives/connected/connected.style.less b/projects/kit/directives/connected/connected.style.less
index a7543a79569a..5115b47a5743 100644
--- a/projects/kit/directives/connected/connected.style.less
+++ b/projects/kit/directives/connected/connected.style.less
@@ -4,6 +4,10 @@
     --t-image-size: 2.5rem;
     --t-connected-height: calc(100% - var(--t-image-size) - 0.5rem);
 
+    &[tuiCardLarge] {
+        --t-connected-height: calc(100% - var(--t-image-size) - 0.25rem);
+    }
+
     [tuiCell],
     [tuiStep] {
         &:not(:last-of-type)::after {
diff --git a/projects/layout/components/cell/cell.styles.less b/projects/layout/components/cell/cell.styles.less
index 236a4a1575b6..b4e40fbfcf72 100644
--- a/projects/layout/components/cell/cell.styles.less
+++ b/projects/layout/components/cell/cell.styles.less
@@ -134,6 +134,8 @@
         & > [tuiAccessories] tui-avatar,
         & > [tuiAccessories] tui-avatar-stack tui-avatar {
             --t-size: 2rem;
+
+            align-self: flex-start;
         }
     }
 
@@ -155,6 +157,7 @@
 
             font: var(--tui-font-text-m);
             font-weight: bold;
+            align-self: flex-start;
         }
     }