feat(kit): File add ability to customize icons (#6418)

Co-authored-by: taiga-family-bot <[email protected]>

projects/cdk/constants/used-icons.ts

@@ -54,9 +54,9 @@ export const TUI_USED_ICONS = [
     'tuiIconChevronDown',
     'tuiIconChevronDownLarge',
     'tuiIconFileLarge',
-    'tuiIconTrashLarge',
-    'tuiIconAlertCircleLarge',
     'tuiIconCheckCircleLarge',
+    'tuiIconAlertCircleLarge',
+    'tuiIconTrashLarge',
     'tuiIconCopy',
     'tuiIconEyeOffLarge',
     'tuiIconEyeLarge',

projects/cdk/constants/version.ts

@@ -1 +1 @@
-export const TUI_VERSION = `3.61.0`;
+export const TUI_VERSION = '3.61.0';

projects/kit/components/files/file/file-options.ts

@@ -1,15 +1,28 @@
-import {tuiCreateToken} from '@taiga-ui/cdk';
+import {TuiContextWithImplicit, tuiCreateToken} from '@taiga-ui/cdk';
+import {TuiSizeL} from '@taiga-ui/core';
+import {TuiFileState} from '@taiga-ui/kit/types';
 import {tuiFormatSize} from '@taiga-ui/kit/utils';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 export interface TuiFileOptions {
     readonly formatSize: (
         units: [string, string, string],
         size?: number,
     ) => string | null;
+    readonly icons: Record<
+        Exclude<TuiFileState, 'loading'>,
+        PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>
+    >;
 }
 
 export const TUI_FILE_DEFAULT_OPTIONS: TuiFileOptions = {
     formatSize: tuiFormatSize,
+    icons: {
+        normal: ({$implicit}) =>
+            $implicit === 'l' ? 'tuiIconFileLarge' : 'tuiIconCheckCircleLarge',
+        error: 'tuiIconAlertCircleLarge',
+        deleted: 'tuiIconTrashLarge',
+    },
 };
 
 /**

projects/kit/components/files/file/file.component.ts

@@ -8,7 +8,12 @@ import {
     Output,
 } from '@angular/core';
 import {DomSanitizer, SafeValue} from '@angular/platform-browser';
-import {TuiInjectionTokenType, tuiIsObserved, tuiPure} from '@taiga-ui/cdk';
+import {
+    TuiContextWithImplicit,
+    TuiInjectionTokenType,
+    tuiIsObserved,
+    tuiPure,
+} from '@taiga-ui/cdk';
 import {TUI_COMMON_ICONS, TuiCommonIcons, TuiSizeL} from '@taiga-ui/core';
 import {TuiLanguage} from '@taiga-ui/i18n';
 import {TuiFileLike} from '@taiga-ui/kit/interfaces';
@@ -89,19 +94,8 @@ export class TuiFileComponent {
         return this.showDelete && tuiIsObserved(this.removed);
     }
 
-    get icon(): string {
-        if (this.state === 'normal' && this.isBig) {
-            return 'tuiIconFileLarge';
-        }
-
-        switch (this.state) {
-            case 'deleted':
-                return 'tuiIconTrashLarge';
-            case 'error':
-                return 'tuiIconAlertCircleLarge';
-            default:
-                return 'tuiIconCheckCircleLarge';
-        }
+    get icon(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+        return this.state === 'loading' ? '' : this.options.icons[this.state];
     }
 
     @HostBinding('class._link')

projects/kit/components/files/file/file.template.html

@@ -92,11 +92,12 @@
     </ng-template>
     <ng-template #svg>
         <tui-svg
+            *polymorpheusOutlet="icon as src; context: {$implicit: size}"
             automation-id="tui-file__icon"
             class="t-icon"
             [class.t-icon_blank]="isBig || isDeleted"
             [class.t-icon_error]="isError"
-            [src]="icon"
+            [src]="src"
         ></tui-svg>
     </ng-template>
 </ng-template>