fix(kit): InputFiles fix validity and drag states (#8845)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Sep 9, 2024 · a7f1332 · a7f1332
1 parent f59b3cf
commit a7f1332
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/projects/demo/src/modules/components/input-files/examples/1/index.ts b/projects/demo/src/modules/components/input-files/examples/1/index.ts
@@ -1,6 +1,6 @@
 import {AsyncPipe, NgIf} from '@angular/common';
 import {Component} from '@angular/core';
-import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import type {TuiFileLike} from '@taiga-ui/kit';
@@ -16,7 +16,11 @@ import {finalize, map, of, Subject, switchMap, timer} from 'rxjs';
     changeDetection,
 })
 export default class Example {
-    protected readonly control = new FormControl<TuiFileLike | null>(null);
+    protected readonly control = new FormControl<TuiFileLike | null>(
+        null,
+        Validators.required,
+    );
+
     protected readonly failedFiles$ = new Subject<TuiFileLike | null>();
     protected readonly loadingFiles$ = new Subject<TuiFileLike | null>();
     protected readonly loadedFiles$ = this.control.valueChanges.pipe(

diff --git a/projects/demo/src/modules/components/input-files/examples/5/index.html b/projects/demo/src/modules/components/input-files/examples/5/index.html
@@ -12,7 +12,11 @@
                 appearance="secondary"
                 src="@tui.droplet"
             />
-            <div>Drop it like it's hot!</div>
+            <div>
+                Drop it like it's hot!
+                <br />
+                <br />
+            </div>
         </div>
         <ng-template #base>
             <div class="content">

diff --git a/projects/demo/src/modules/components/input-files/index.html b/projects/demo/src/modules/components/input-files/index.html
@@ -1,6 +1,7 @@
 <tui-doc-page
     header="InputFiles"
     package="KIT"
+    path="kit/components/files"
     type="components"
 >
     <ng-template pageTab>

diff --git a/projects/kit/components/files/input-files/input-files.component.ts b/projects/kit/components/files/input-files/input-files.component.ts
@@ -37,7 +37,7 @@ import {TuiInputFilesDirective} from './input-files.directive';
         '(dragover.prevent.silent)': '0',
         '(drop.prevent)': 'onDropped($event)',
         '(dragenter)': 'onDrag($event.dataTransfer)',
-        '(dragleave.self)': 'onDrag(null)',
+        '(dragleave)': 'onDrag(null)',
         '[class._dragged]': 'fileDragged',
         '(change)': 'onFilesSelected($event.target)',
     },

diff --git a/projects/kit/components/files/input-files/input-files.directive.ts b/projects/kit/components/files/input-files/input-files.directive.ts
@@ -2,6 +2,7 @@ import {coerceArray} from '@angular/cdk/coercion';
 import {Directive, forwardRef, inject, Output} from '@angular/core';
 import {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';
 import {EMPTY_ARRAY} from '@taiga-ui/cdk/constants';
+import {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator';
 import {tuiControlValue} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';
@@ -24,6 +25,7 @@ import {TuiInputFilesValidator} from './input-files-validator.directive';
         tuiAppearanceOptionsProvider(TuiInputFilesDirective),
     ],
     hostDirectives: [
+        TuiNativeValidator,
         TuiWithAppearance,
         {
             directive: TuiInputFilesValidator,

diff --git a/projects/kit/components/files/input-files/input-files.style.less b/projects/kit/components/files/input-files/input-files.style.less
@@ -38,9 +38,12 @@ label[tuiInputFiles] {
 }
 
 [tuiAppearance][data-appearance='file'] {
+    .transition(background);
+
     border-radius: inherit;
     box-sizing: border-box;
     border: 1px dashed var(--tui-text-action);
+    outline: none;
 
     tui-root._mobile & {
         border-style: solid;
@@ -68,4 +71,8 @@ label[tuiInputFiles] {
     .appearance-focus({
         border: 0.125rem solid var(--tui-border-focus);
     });
+
+    &:invalid {
+        border-color: var(--tui-status-negative) !important;
+    }
 }