From 88297e911d5834cda1e362145a8036b44dcbd14d Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Tue, 17 Sep 2024 14:32:35 +0300
Subject: [PATCH] fix(core): do not override nested tui-icon styles

---
 .../core/styles/components/textfield.less     |  4 +--
 .../thumbnail-card/examples/5/index.html      | 29 ++++++++++++++++
 .../thumbnail-card/examples/5/index.less      |  5 +++
 .../thumbnail-card/examples/5/index.ts        | 33 +++++++++++++++++++
 .../components/thumbnail-card/index.ts        |  1 +
 5 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 projects/demo/src/modules/components/thumbnail-card/examples/5/index.html
 create mode 100644 projects/demo/src/modules/components/thumbnail-card/examples/5/index.less
 create mode 100644 projects/demo/src/modules/components/thumbnail-card/examples/5/index.ts

diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less
index 53eba2130887..0d1928b6c7e9 100644
--- a/projects/core/styles/components/textfield.less
+++ b/projects/core/styles/components/textfield.less
@@ -206,7 +206,7 @@ tui-textfield {
             & ~ .t-content {
                 opacity: var(--tui-disabled-opacity);
 
-                tui-icon {
+                > tui-icon {
                     display: none;
                 }
             }
@@ -286,7 +286,7 @@ tui-textfield {
         margin-inline-start: auto;
         isolation: isolate;
 
-        tui-icon {
+        > tui-icon {
             pointer-events: auto;
         }
     }
diff --git a/projects/demo/src/modules/components/thumbnail-card/examples/5/index.html b/projects/demo/src/modules/components/thumbnail-card/examples/5/index.html
new file mode 100644
index 000000000000..62fc0311697e
--- /dev/null
+++ b/projects/demo/src/modules/components/thumbnail-card/examples/5/index.html
@@ -0,0 +1,29 @@
+<tui-segmented>
+    <button
+        *ngFor="let state of statuses"
+        type="button"
+        (click)="status = state"
+    >
+        {{ state }}
+    </button>
+</tui-segmented>
+
+<tui-textfield>
+    <label tuiLabel>Card number</label>
+    <input
+        icon=""
+        tuiInputCard
+        tuiTextfield
+        [disabled]="status === 'disabled'"
+        [invalid]="status === 'invalid'"
+        [readOnly]="status === 'readOnly'"
+        [(ngModel)]="card"
+    />
+    <tui-thumbnail-card
+        *ngIf="card.startsWith('1234')"
+        iconStart="@tui.dollar-sign"
+        paymentSystem="visa"
+        size="s"
+        [style.background]="background"
+    />
+</tui-textfield>
diff --git a/projects/demo/src/modules/components/thumbnail-card/examples/5/index.less b/projects/demo/src/modules/components/thumbnail-card/examples/5/index.less
new file mode 100644
index 000000000000..23d25a3bb0a1
--- /dev/null
+++ b/projects/demo/src/modules/components/thumbnail-card/examples/5/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/components/thumbnail-card/examples/5/index.ts b/projects/demo/src/modules/components/thumbnail-card/examples/5/index.ts
new file mode 100644
index 000000000000..18acb6f6be82
--- /dev/null
+++ b/projects/demo/src/modules/components/thumbnail-card/examples/5/index.ts
@@ -0,0 +1,33 @@
+import {NgForOf, NgIf} 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 {TuiInputCard, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
+import {TuiButton, TuiTextfield} from '@taiga-ui/core';
+import {TuiSegmented} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        FormsModule,
+        NgForOf,
+        NgIf,
+        TuiButton,
+        TuiInputCard,
+        TuiSegmented,
+        TuiTextfield,
+        TuiThumbnailCard,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected statuses = ['normal', 'disabled', 'readOnly', 'invalid'] as const;
+    protected status: string = this.statuses[0];
+    protected card = '1234123412341234';
+    protected background =
+        '#2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%)';
+}
diff --git a/projects/demo/src/modules/components/thumbnail-card/index.ts b/projects/demo/src/modules/components/thumbnail-card/index.ts
index 1490e5671d6e..65688c3ffcf7 100644
--- a/projects/demo/src/modules/components/thumbnail-card/index.ts
+++ b/projects/demo/src/modules/components/thumbnail-card/index.ts
@@ -19,6 +19,7 @@ export default class Example {
         'A cool one',
         'Backgrounds',
         'External colored icon',
+        'Textfield',
     ];
 
     protected readonly iconVariants = ['', '@tui.lock', '@tui.cloud', '@tui.user'];