fix(core): do not override nested tui-icon styles (#9065)

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;
         }
     }

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>

projects/demo/src/modules/components/thumbnail-card/examples/5/index.less

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}

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%)';
+}

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'];