refactor: use TuiFiles

projects/demo/src/modules/components/input-files/examples/1/index.ts

@@ -4,28 +4,13 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiFileLike} from '@taiga-ui/kit';
-import {
-    TuiFileComponent,
-    TuiFileRejectedPipe,
-    TuiFilesComponent,
-    TuiInputFilesComponent,
-    TuiInputFilesDirective,
-} from '@taiga-ui/kit';
+import {TuiFiles} from '@taiga-ui/kit';
 import type {Observable} from 'rxjs';
 import {finalize, map, of, Subject, switchMap, timer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [
-        NgIf,
-        TuiInputFilesComponent,
-        ReactiveFormsModule,
-        TuiInputFilesDirective,
-        TuiFilesComponent,
-        TuiFileComponent,
-        TuiFileRejectedPipe,
-        AsyncPipe,
-    ],
+    imports: [NgIf, TuiFiles, ReactiveFormsModule, AsyncPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/input-files/examples/2/index.ts

@@ -6,30 +6,18 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiValidationError} from '@taiga-ui/cdk';
 import {TuiError} from '@taiga-ui/core';
-import {
-    TuiFieldErrorPipe,
-    TuiFileComponent,
-    TuiFileRejectedPipe,
-    tuiFilesAccepted,
-    TuiFilesComponent,
-    TuiInputFilesComponent,
-    TuiInputFilesDirective,
-} from '@taiga-ui/kit';
+import {TuiFieldErrorPipe, TuiFiles, tuiFilesAccepted} from '@taiga-ui/kit';
 import {map} from 'rxjs';
 
 @Component({
     standalone: true,
     imports: [
-        TuiInputFilesComponent,
-        TuiInputFilesDirective,
         ReactiveFormsModule,
-        TuiFilesComponent,
-        TuiFileComponent,
+        TuiFiles,
         NgForOf,
         AsyncPipe,
         TuiError,
         TuiFieldErrorPipe,
-        TuiFileRejectedPipe,
     ],
     templateUrl: './index.html',
     encapsulation,

projects/demo/src/modules/components/input-files/examples/3/index.ts

@@ -6,19 +6,11 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TUI_IS_E2E, TuiItem} from '@taiga-ui/cdk';
 import {TuiIcon, TuiLink} from '@taiga-ui/core';
 import type {TuiFileLike} from '@taiga-ui/kit';
-import {TuiFileComponent, TuiFilesComponent} from '@taiga-ui/kit';
+import {TuiFiles} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiFilesComponent,
-        TuiFileComponent,
-        NgForOf,
-        NgIf,
-        TuiItem,
-        TuiLink,
-        TuiIcon,
-    ],
+    imports: [TuiFiles, NgForOf, NgIf, TuiItem, TuiLink, TuiIcon],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/input-files/examples/4/index.ts

@@ -4,11 +4,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiItem} from '@taiga-ui/cdk';
 import type {TuiFileLike} from '@taiga-ui/kit';
-import {TuiFileComponent, TuiFilesComponent} from '@taiga-ui/kit';
+import {TuiFiles} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiFilesComponent, TuiFileComponent, NgForOf, TuiItem],
+    imports: [TuiFiles, NgForOf, TuiItem],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/input-files/examples/5/index.ts

@@ -5,27 +5,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiIcon, TuiLink} from '@taiga-ui/core';
 import type {TuiFileLike} from '@taiga-ui/kit';
-import {
-    TuiAvatar,
-    TuiFileComponent,
-    TuiFilesComponent,
-    TuiInputFilesComponent,
-    TuiInputFilesDirective,
-} from '@taiga-ui/kit';
+import {TuiAvatar, TuiFiles} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiInputFilesComponent,
-        TuiInputFilesDirective,
-        ReactiveFormsModule,
-        NgIf,
-        TuiAvatar,
-        TuiLink,
-        TuiFilesComponent,
-        TuiFileComponent,
-        TuiIcon,
-    ],
+    imports: [ReactiveFormsModule, NgIf, TuiAvatar, TuiLink, TuiFiles, TuiIcon],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/components/input-files/examples/6/index.ts

@@ -4,24 +4,11 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiFileLike} from '@taiga-ui/kit';
-import {
-    TuiFileComponent,
-    TuiFilesComponent,
-    TuiInputFilesComponent,
-    TuiInputFilesDirective,
-} from '@taiga-ui/kit';
+import {TuiFiles} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [
-        NgIf,
-        TuiInputFilesComponent,
-        TuiInputFilesDirective,
-        ReactiveFormsModule,
-        TuiFilesComponent,
-        TuiFileComponent,
-        AsyncPipe,
-    ],
+    imports: [NgIf, ReactiveFormsModule, TuiFiles, AsyncPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/input-files/examples/7/index.ts

@@ -3,26 +3,11 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {
-    TuiFileComponent,
-    TuiFileRejectedPipe,
-    TuiFilesComponent,
-    TuiInputFilesComponent,
-    TuiInputFilesDirective,
-} from '@taiga-ui/kit';
+import {TuiFiles} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiInputFilesComponent,
-        TuiInputFilesDirective,
-        FormsModule,
-        TuiFilesComponent,
-        TuiFileComponent,
-        NgForOf,
-        TuiFileRejectedPipe,
-        AsyncPipe,
-    ],
+    imports: [TuiFiles, FormsModule, NgForOf, AsyncPipe],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/modules/components/input-files/index.ts

@@ -2,35 +2,18 @@ import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
-import {TuiItem, tuiProvide} from '@taiga-ui/cdk';
+import {tuiProvide} from '@taiga-ui/cdk';
 import type {TuiSizeL} from '@taiga-ui/core';
 import {TuiNotification} from '@taiga-ui/core';
-import {
-    TuiFileComponent,
-    TuiFileRejectedPipe,
-    tuiFilesAccepted,
-    TuiFilesComponent,
-    TuiInputFilesComponent,
-    TuiInputFilesDirective,
-} from '@taiga-ui/kit';
+import {TuiFiles, tuiFilesAccepted} from '@taiga-ui/kit';
 import {map} from 'rxjs';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
 import {AbstractExampleTuiControl} from '../abstract/control';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiDemo,
-        TuiNotification,
-        TuiInputFilesComponent,
-        TuiInputFilesDirective,
-        ReactiveFormsModule,
-        TuiFilesComponent,
-        TuiFileComponent,
-        TuiItem,
-        TuiFileRejectedPipe,
-    ],
+    imports: [TuiDemo, TuiNotification, ReactiveFormsModule, TuiFiles],
     templateUrl: './index.html',
     changeDetection,
     providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],

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

@@ -49,7 +49,7 @@ import {TUI_FILE_OPTIONS} from './file.options';
     providers: [tuiAppearanceOptionsProvider(TUI_FILE_OPTIONS)],
     hostDirectives: [TuiAppearance],
 })
-export class TuiFileComponent {
+export class TuiFile {
     private readonly sanitizer = inject(DomSanitizer);
     private readonly options = inject(TUI_FILE_OPTIONS);
     private readonly units$ = inject(TUI_DIGITAL_INFORMATION_UNITS);

projects/kit/components/files/files.ts

@@ -0,0 +1,16 @@
+import {TuiItem} from '@taiga-ui/cdk';
+
+import {TuiFile} from './file/file.component';
+import {TuiFilesComponent} from './files/files.component';
+import {TuiInputFiles} from './input-files/input-files.component';
+import {TuiInputFilesDirective} from './input-files/input-files.directive';
+import {TuiFileRejectedPipe} from './pipes/file-rejected.pipe';
+
+export const TuiFiles = [
+    TuiItem,
+    TuiFile,
+    TuiInputFiles,
+    TuiFilesComponent,
+    TuiFileRejectedPipe,
+    TuiInputFilesDirective,
+] as const;

projects/kit/components/files/index.ts

@@ -1,6 +1,6 @@
 export * from './file/file.component';
 export * from './file/file.options';
-export * from './files.module';
+export * from './files';
 export * from './files.types';
 export * from './files.utils';
 export * from './files.validators';

projects/kit/components/files/input-files/input-files-validator.directive.ts

@@ -15,7 +15,7 @@ import {TUI_INPUT_FILES_OPTIONS} from './input-files.options';
     exportAs: 'tuiInputFilesValidator',
     hostDirectives: [TuiValidatorDirective],
 })
-export class TuiInputFilesValidatorDirective implements OnChanges, OnInit {
+export class TuiInputFilesValidator implements OnChanges, OnInit {
     private readonly options = inject(TUI_INPUT_FILES_OPTIONS);
     private readonly validator = inject(TuiValidatorDirective);
 

projects/kit/components/files/input-files/input-files.component.ts

@@ -42,7 +42,7 @@ import {TuiInputFilesDirective} from './input-files.directive';
         '[class._dragged]': 'fileDragged',
     },
 })
-export class TuiInputFilesComponent {
+export class TuiInputFiles {
     @ContentChild(TemplateRef)
     protected readonly template?: TemplateRef<TuiContext<boolean>>;
 

projects/kit/components/files/input-files/input-files.content.ts

@@ -8,7 +8,7 @@ import {POLYMORPHEUS_CONTEXT} from '@taiga-ui/polymorpheus';
 import type {Observable} from 'rxjs';
 import {combineLatest, map, of} from 'rxjs';
 
-import {TuiInputFilesComponent} from './input-files.component';
+import {TuiInputFiles} from './input-files.component';
 
 @Component({
     standalone: true,
@@ -23,7 +23,7 @@ export class TuiInputFilesContent {
     private readonly breakpoint$ = inject(TuiBreakpointService);
     private readonly text$ = inject(TUI_INPUT_FILE_TEXTS);
     private readonly context = inject(POLYMORPHEUS_CONTEXT) as TuiContext<boolean>;
-    private readonly component = inject(TuiInputFilesComponent);
+    private readonly component = inject(TuiInputFiles);
 
     protected get link$(): Observable<string> {
         return this.computeLink$(

projects/kit/components/files/input-files/input-files.directive.ts

@@ -13,8 +13,8 @@ import {filter, map, switchMap, timer} from 'rxjs';
 
 import type {TuiFileLike} from '../files.types';
 import {tuiFilesRejected} from '../files.utils';
-import {TuiInputFilesComponent} from './input-files.component';
-import {TuiInputFilesValidatorDirective} from './input-files-validator.directive';
+import {TuiInputFiles} from './input-files.component';
+import {TuiInputFilesValidator} from './input-files-validator.directive';
 
 @Directive({
     standalone: true,
@@ -39,7 +39,7 @@ import {TuiInputFilesValidatorDirective} from './input-files-validator.directive
             ],
         },
         {
-            directive: TuiInputFilesValidatorDirective,
+            directive: TuiInputFilesValidator,
             inputs: ['accept', 'maxFileSize'],
         },
     ],
@@ -48,7 +48,7 @@ export class TuiInputFilesDirective
     extends TuiControl<TuiFileLike | readonly TuiFileLike[]>
     implements TuiAppearanceOptions
 {
-    protected readonly host = inject(forwardRef(() => TuiInputFilesComponent));
+    protected readonly host = inject(forwardRef(() => TuiInputFiles));
 
     @Output()
     public readonly reject = timer(0).pipe(