chore: remove directive (#5699)

projects/addon-commerce/components/thumbnail-card/index.ts

@@ -1,5 +1,3 @@
 export * from './deprecated';
 export * from './thumbnail-card.component';
-export * from './thumbnail-card.directive';
 export * from './thumbnail-card.module';
-export * from './thumbnail-card.providers';

projects/addon-commerce/components/thumbnail-card/thumbnail-card.module.ts

@@ -3,11 +3,10 @@ import {NgModule} from '@angular/core';
 import {TuiSvgModule} from '@taiga-ui/core';
 
 import {TuiThumbnailCardComponent} from './thumbnail-card.component';
-import {TuiThumbnailCardDirective} from './thumbnail-card.directive';
 
 @NgModule({
     imports: [CommonModule, TuiSvgModule],
-    declarations: [TuiThumbnailCardComponent, TuiThumbnailCardDirective],
-    exports: [TuiThumbnailCardComponent, TuiThumbnailCardDirective],
+    declarations: [TuiThumbnailCardComponent],
+    exports: [TuiThumbnailCardComponent],
 })
 export class TuiThumbnailCardModule {}

projects/addon-commerce/components/thumbnail-card/thumbnail-card.style.less

@@ -20,6 +20,14 @@
         height: 2rem;
     }
 
+    &:before {
+        .fullsize();
+        content: '';
+        box-shadow: inset 0 0 0 1px;
+        border-radius: inherit;
+        color: var(--tui-clear);
+    }
+
     &._active {
         box-shadow: 0 0 0 1px var(--tui-base-01);
     }

projects/demo/src/modules/components/thumbnail-card/examples/4/index.html

@@ -1,23 +1,23 @@
 <tui-thumbnail-card
     cardNumber="1234"
     paymentSystem="visa"
-    preset="star"
+    class="star"
 ></tui-thumbnail-card>
 
 <tui-thumbnail-card
     cardNumber="5678"
     paymentSystem="mastercard"
-    preset="gradient"
+    class="gradient"
 ></tui-thumbnail-card>
 
 <tui-thumbnail-card
     cardNumber="9000"
     paymentSystem="dinersclub"
-    preset="pink"
+    class="pink"
 ></tui-thumbnail-card>
 
 <tui-thumbnail-card
     cardNumber="9000"
     paymentSystem="amex"
-    preset="radial"
+    class="radial"
 ></tui-thumbnail-card>

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

@@ -2,3 +2,24 @@
     display: flex;
     gap: 1rem;
 }
+
+.star {
+    color: #000;
+    background: linear-gradient(45deg, #ffaa00d1, #ffaa00), url(/assets/taiga-ui/icons/tuiIconStarLarge.svg);
+    background-color: #fff;
+}
+
+.gradient {
+    color: #fff;
+    background: #2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%);
+}
+
+.pink {
+    color: #0079be;
+    background: #ffc0cb;
+}
+
+.radial {
+    color: #fff;
+    background: radial-gradient(#c900ff, #0079be);
+}

projects/demo/src/modules/components/thumbnail-card/examples/4/index.ts

@@ -1,35 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiThumbnailCardPresetsProvider} from '@taiga-ui/addon-commerce';
 
 @Component({
     selector: 'tui-thumbnail-card-example-4',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection,
     encapsulation,
-    providers: [
-        tuiThumbnailCardPresetsProvider({
-            star: {
-                color: 'black',
-                background:
-                    'linear-gradient(45deg, #ffaa00d1, #ffaa00), url(/assets/taiga-ui/icons/tuiIconStarLarge.svg)',
-            },
-            gradient: {
-                color: 'white',
-                background:
-                    '#2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%)',
-            },
-            pink: {
-                color: '#0079be',
-                background: 'pink',
-            },
-            radial: {
-                color: 'white',
-                background: 'radial-gradient(#c900ff, #0079be)',
-            },
-        }),
-    ],
 })
 export class TuiThumbnailCardExample4 {}

projects/demo/src/modules/components/thumbnail-card/thumbnail-card.component.ts

@@ -43,8 +43,8 @@ export class ExampleTuiThumbnailCardComponent {
     };
 
     readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
         HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
     };
 
     paymentSystemVariants: readonly TuiPaymentSystem[] = [

projects/demo/src/modules/components/thumbnail-card/thumbnail-card.module.ts

@@ -2,7 +2,6 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiThumbnailCardModule} from '@taiga-ui/addon-commerce';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiNotificationModule} from '@taiga-ui/core';
 
 import {TuiThumbnailCardExample1} from './examples/1';
 import {TuiThumbnailCardExample2} from './examples/2';
@@ -14,7 +13,6 @@ import {ExampleTuiThumbnailCardComponent} from './thumbnail-card.component';
     imports: [
         CommonModule,
         TuiThumbnailCardModule,
-        TuiNotificationModule,
         tuiGetDocModules(ExampleTuiThumbnailCardComponent),
     ],
     declarations: [

projects/demo/src/modules/components/thumbnail-card/thumbnail-card.template.html

@@ -31,15 +31,10 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="presets"
-            heading="Presets"
+            id="backgrounds"
+            heading="Backgrounds"
             [content]="example4"
         >
-            <tui-notification class="tui-space_bottom-4">
-                Provide your presets with
-                <code>TUI_THUMBNAIL_CARD_PRESETS</code>
-                token
-            </tui-notification>
             <tui-thumbnail-card-example-4></tui-thumbnail-card-example-4>
         </tui-doc-example>
     </ng-template>