From 1f27d8aea3df179e64781045836da376dd1f8fec Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Fri, 6 Sep 2024 12:41:50 +0300
Subject: [PATCH] feat(experimental): `ThumbnailCard` add external `<img>`
 support

---
 .../thumbnail-card/examples/4/index.html             | 10 ++++++++++
 .../thumbnail-card/examples/4/index.less             |  4 ++++
 .../experimental/thumbnail-card/examples/4/index.ts  | 12 ++++++++++++
 .../thumbnail-card/thumbnail-card.component.ts       |  5 +++++
 .../thumbnail-card/thumbnail-card.module.ts          |  2 ++
 .../thumbnail-card/thumbnail-card.template.html      |  8 ++++++++
 .../thumbnail-card/thumbnail-card.template.html      |  3 +++
 7 files changed, 44 insertions(+)
 create mode 100644 projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.html
 create mode 100644 projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.less
 create mode 100644 projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.ts

diff --git a/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.html b/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.html
new file mode 100644
index 0000000000000..576e8579f2ba1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.html
@@ -0,0 +1,10 @@
+<tui-thumbnail-card
+    iconEnd="tuiIconUser"
+    paymentSystem="visa"
+>
+    <img
+        alt="external"
+        src="https://brands-prod.cdn-tinkoff.ru/general_logo/sber.png"
+    />
+    1234
+</tui-thumbnail-card>
diff --git a/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.less b/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.less
new file mode 100644
index 0000000000000..e8c357f08e0d2
--- /dev/null
+++ b/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.less
@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.ts b/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.ts
new file mode 100644
index 0000000000000..f92155fbd546c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/thumbnail-card/examples/4/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-thumbnail-card-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiThumbnailCardExample4 {}
diff --git a/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.component.ts b/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.component.ts
index 0e6d68065b725..82346cb549038 100644
--- a/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.component.ts
+++ b/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.component.ts
@@ -29,6 +29,11 @@ export class ExampleTuiThumbnailCardComponent {
         LESS: import('./examples/3/index.less?raw'),
     };
 
+    readonly example4: TuiDocExample = {
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
     iconVariants = ['', 'tuiIconLock', 'tuiIconCloud', 'tuiIconUser'];
     iconLeft = this.iconVariants[0];
     iconRight = this.iconVariants[0];
diff --git a/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.module.ts b/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.module.ts
index 37d14c923a43a..49fde2627703a 100644
--- a/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.module.ts
+++ b/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.module.ts
@@ -6,6 +6,7 @@ import {TuiThumbnailCardModule} from '@taiga-ui/experimental';
 import {TuiThumbnailCardExample1} from './examples/1';
 import {TuiThumbnailCardExample2} from './examples/2';
 import {TuiThumbnailCardExample3} from './examples/3';
+import {TuiThumbnailCardExample4} from './examples/4';
 import {ExampleTuiThumbnailCardComponent} from './thumbnail-card.component';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {ExampleTuiThumbnailCardComponent} from './thumbnail-card.component';
         TuiThumbnailCardExample1,
         TuiThumbnailCardExample2,
         TuiThumbnailCardExample3,
+        TuiThumbnailCardExample4,
     ],
     exports: [ExampleTuiThumbnailCardComponent],
 })
diff --git a/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.template.html b/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.template.html
index be51791f5d1c3..c22c69b56b4f0 100644
--- a/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.template.html
+++ b/projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.template.html
@@ -29,6 +29,14 @@
         >
             <tui-thumbnail-card-example-3></tui-thumbnail-card-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="external"
+            heading="External colored icon"
+            [content]="example4"
+        >
+            <tui-thumbnail-card-example-4></tui-thumbnail-card-example-4>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/experimental/components/thumbnail-card/thumbnail-card.template.html b/projects/experimental/components/thumbnail-card/thumbnail-card.template.html
index 38d77db4ce2a1..31f7faedb7d1b 100644
--- a/projects/experimental/components/thumbnail-card/thumbnail-card.template.html
+++ b/projects/experimental/components/thumbnail-card/thumbnail-card.template.html
@@ -17,6 +17,9 @@
             [icon]="iconRight"
         ></tui-icon>
     </div>
+    <div class="t-left t-icon">
+        <ng-content select="img"></ng-content>
+    </div>
     <ng-content></ng-content>
     <ng-container *ngIf="paymentSystem">
         <tui-icon