refactor(kit)!: InputFiles refactor API and get rid of built-in rejections

projects/cdk/directives/droppable/droppable.directive.ts

@@ -1,60 +1,38 @@
-import {Directive, ElementRef, Inject, Output, Self} from '@angular/core';
+import {Directive, ElementRef, inject, Output} from '@angular/core';
 import {tuiPreventDefault, tuiTypedFromEvent} from '@taiga-ui/cdk/observables';
-import {TuiDestroyService} from '@taiga-ui/cdk/services';
 import {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';
-import {
-    distinctUntilChanged,
-    filter,
-    map,
-    merge,
-    Observable,
-    startWith,
-    switchMap,
-    takeUntil,
-} from 'rxjs';
+import {distinctUntilChanged, filter, map, merge, startWith, switchMap} from 'rxjs';
 
 @Directive({
+    standalone: true,
     selector: '[tuiDroppableDropped], [tuiDroppableDragOverChange]',
-    providers: [TuiDestroyService],
+    host: {
+        '(dragover.prevent.silent)': '0',
+    },
 })
 export class TuiDroppableDirective {
-    @Output()
-    readonly tuiDroppableDropped: Observable<DataTransfer>;
+    private readonly el: HTMLElement = inject(ElementRef).nativeElement;
 
     @Output()
-    readonly tuiDroppableDragOverChange: Observable<DataTransfer | null>;
-
-    constructor(
-        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,
-        @Self() @Inject(TuiDestroyService) destroy$: Observable<void>,
-    ) {
-        this.tuiDroppableDropped = tuiTypedFromEvent(nativeElement, 'drop').pipe(
-            tuiPreventDefault(),
-            map(event => event.dataTransfer),
-            filter(tuiIsPresent),
-        );
+    readonly tuiDroppableDropped = tuiTypedFromEvent(this.el, 'drop').pipe(
+        tuiPreventDefault(),
+        map(event => event.dataTransfer),
+        filter(tuiIsPresent),
+    );
 
-        this.tuiDroppableDragOverChange = tuiTypedFromEvent(
-            nativeElement,
-            'dragenter',
-        ).pipe(
-            switchMap(({target, dataTransfer}) =>
-                merge(
-                    tuiTypedFromEvent(nativeElement, 'dragleave').pipe(
-                        filter(event => event.target === target),
-                    ),
-                    tuiTypedFromEvent(nativeElement, 'drop'),
-                ).pipe(
-                    map(() => null),
-                    startWith(dataTransfer),
+    @Output()
+    readonly tuiDroppableDragOverChange = tuiTypedFromEvent(this.el, 'dragenter').pipe(
+        switchMap(({target, dataTransfer}) =>
+            merge(
+                tuiTypedFromEvent(this.el, 'dragleave').pipe(
+                    filter(event => event.target === target),
                 ),
+                tuiTypedFromEvent(this.el, 'drop'),
+            ).pipe(
+                map(() => null),
+                startWith(dataTransfer),
             ),
-            distinctUntilChanged((a, b) => (!!a && !!b) || (!a && !b)),
-        );
-
-        // Required by Drag and Drop API to stop redirecting
-        tuiTypedFromEvent(nativeElement, 'dragover')
-            .pipe(tuiPreventDefault(), takeUntil(destroy$))
-            .subscribe();
-    }
+        ),
+        distinctUntilChanged((a, b) => (!!a && !!b) || (!a && !b)),
+    );
 }

projects/cdk/directives/droppable/index.ts

@@ -1,2 +1 @@
 export * from './droppable.directive';
-export * from './droppable.module';

projects/cdk/directives/droppable/test/droppable.directive.spec.ts

@@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {TuiDroppableDirective} from '@taiga-ui/cdk';
 import {TuiMockEvent} from '@taiga-ui/testing';
+import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins';
 
 describe('TuiDroppable Directive', () => {
     @Component({
@@ -26,8 +27,9 @@ describe('TuiDroppable Directive', () => {
 
     beforeEach(async () => {
         TestBed.configureTestingModule({
-            imports: [],
-            declarations: [TestComponent, TuiDroppableDirective],
+            imports: [TuiDroppableDirective],
+            declarations: [TestComponent],
+            providers: [NG_EVENT_PLUGINS],
         });
         await TestBed.compileComponents();
         fixture = TestBed.createComponent(TestComponent);

projects/cdk/directives/validator/index.ts

@@ -1,2 +1 @@
 export * from './validator.directive';
-export * from './validator.module';

projects/cdk/directives/validator/test/validator.directive.spec.ts

@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
-import {TuiValidatorModule} from '@taiga-ui/cdk';
+import {TuiValidatorDirective} from '@taiga-ui/cdk';
 
 describe('TuiValidator directive', () => {
     @Component({
@@ -27,7 +27,7 @@ describe('TuiValidator directive', () => {
 
     beforeEach(async () => {
         TestBed.configureTestingModule({
-            imports: [ReactiveFormsModule, CommonModule, TuiValidatorModule],
+            imports: [ReactiveFormsModule, CommonModule, TuiValidatorDirective],
             declarations: [TestComponent],
         });
         await TestBed.compileComponents();

projects/cdk/directives/validator/validator.directive.ts

@@ -10,6 +10,7 @@ import {
 import {EMPTY_FUNCTION} from '@taiga-ui/cdk/constants';
 
 @Directive({
+    standalone: true,
     selector: '[tuiValidator]',
     providers: [
         {

projects/cdk/observables/control-value.ts

@@ -6,10 +6,10 @@ import {Observable, startWith} from 'rxjs';
  * Turns AbstractControl/Abstract-control-directive valueChanges into ReplaySubject(1)
  */
 export function tuiControlValue<T>(
-    control: AbstractControl | AbstractControlDirective,
+    control: AbstractControl | AbstractControlDirective | null,
 ): Observable<T> {
     return new Observable(subscriber => {
-        if (!control.valueChanges) {
+        if (!control?.valueChanges) {
             throw new TuiValueChangesException();
         }
 

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -134,6 +134,14 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
         from: {name: 'TuiPortalModule', moduleSpecifier: '@taiga-ui/cdk'},
         to: {name: 'TuiDropdownPortalDirective', moduleSpecifier: '@taiga-ui/core'},
     },
+    {
+        from: {name: 'TuiDroppableModule', moduleSpecifier: '@taiga-ui/cdk'},
+        to: {name: 'TuiDroppableDirective', moduleSpecifier: '@taiga-ui/cdk'},
+    },
+    {
+        from: {name: 'TuiValidatorModule', moduleSpecifier: '@taiga-ui/cdk'},
+        to: {name: 'TuiValidatorDirective', moduleSpecifier: '@taiga-ui/cdk'},
+    },
     {
         from: {name: 'TuiAmountModule', moduleSpecifier: '@taiga-ui/experimental'},
         to: {name: 'TuiAmountPipe', moduleSpecifier: '@taiga-ui/addon-commerce'},

projects/core/components/group/group.style.less

@@ -104,23 +104,27 @@
     &_rounded.tui-group_orientation_horizontal {
         & > * {
             &:first-child {
-                border-radius: var(--t-radius) 0 0 var(--t-radius);
+                border-top-left-radius: var(--t-radius);
+                border-bottom-left-radius: var(--t-radius);
             }
 
             &:last-child {
-                border-radius: 0 var(--t-radius) var(--t-radius) 0;
+                border-top-right-radius: var(--t-radius);
+                border-bottom-right-radius: var(--t-radius);
             }
         }
     }
 
     &_rounded.tui-group_orientation_vertical {
         & > * {
             &:first-child {
-                border-radius: var(--t-radius) var(--t-radius) 0 0;
+                border-top-left-radius: var(--t-radius);
+                border-top-right-radius: var(--t-radius);
             }
 
             &:last-child {
-                border-radius: 0 0 var(--t-radius) var(--t-radius);
+                border-bottom-left-radius: var(--t-radius);
+                border-bottom-right-radius: var(--t-radius);
             }
         }
     }

projects/core/directives/appearance/appearance.options.ts

@@ -1,4 +1,4 @@
-import {InjectionToken, Provider} from '@angular/core';
+import {Provider, ProviderToken} from '@angular/core';
 import {tuiCreateToken} from '@taiga-ui/cdk';
 
 export interface TuiAppearanceOptions {
@@ -12,7 +12,7 @@ export const TUI_APPEARANCE_DEFAULT_OPTIONS: TuiAppearanceOptions = {
 export const TUI_APPEARANCE_OPTIONS = tuiCreateToken(TUI_APPEARANCE_DEFAULT_OPTIONS);
 
 export function tuiAppearanceOptionsProvider(
-    useExisting: InjectionToken<TuiAppearanceOptions>,
+    useExisting: ProviderToken<TuiAppearanceOptions>,
 ): Provider {
     return {provide: TUI_APPEARANCE_OPTIONS, useExisting};
 }

projects/core/styles/mixins/appearance.less

@@ -3,7 +3,7 @@
 .appearance-hover(@ruleset) {
     .interactive({
         @media (hover: hover) {
-            &:hover:not([data-state]) {
+            &:hover:not(:disabled):not([data-state]) {
                 @ruleset();
             }
         }
@@ -16,7 +16,7 @@
 
 .appearance-active(@ruleset) {
     .interactive({
-        &:active:not([data-state]) {
+        &:active:not(:disabled):not([data-state]) {
             @ruleset();
         }
     });
@@ -34,7 +34,10 @@
 }
 
 .appearance-focus(@ruleset) {
-    &:focus-visible:not([data-focus='false']),
+    &:focus-visible:not([data-focus='false']) {
+        @ruleset();
+    }
+
     &[data-focus='true'] {
         @ruleset();
     }

projects/core/styles/mixins/appearance.scss

@@ -34,7 +34,10 @@
 }
 
 @mixin appearance-focus {
-    &:focus-visible:not([data-focus='false']),
+    &:focus-visible:not([data-focus='false']) {
+        @content;
+    }
+
     &[data-focus='true'] {
         @content;
     }

projects/demo-playwright/tests/kit/input-files/input-files.spec.ts

@@ -16,35 +16,23 @@
             });
 
             await example
-                .locator('[tuiInputFiles]')
+                .locator('input[tuiInputFiles]')
                 .setInputFiles(join(__dirname, '../../../stubs/web-api.svg'));
             await expect(example).toHaveScreenshot(`01-${language}-input-files.png`);
         }),
     );
 
     ['english', 'dutch', 'russian'].forEach(language =>
-        test(`File is too large (i18n: ${language})`, async ({page}) => {
+        test(`File is bigger than (i18n: ${language})`, async ({page}) => {
             await tuiGoto(
                 page,
                 '/components/input-files/API?accept=image/*&maxFileSize=2000',
                 {language},
             );
             await example
-                .locator('[tuiInputFiles]')
+                .locator('input[tuiInputFiles]')
                 .setInputFiles(join(__dirname, '../../../stubs/web-api.svg'));
             await expect(example).toHaveScreenshot(`02-${language}-input-files.png`);
         }),
     );
-
-    test('Link text is too long', async ({page}) => {
-        await page.setViewportSize({width: 550, height: 500});
-        await tuiGoto(
-            page,
-            '/components/input-files/API?link=Select%20a%20file%20with%20a%20too%20long%20name.%20Long%20filename.%20Very%20long%20filename',
-        );
-        await example
-            .locator('[tuiInputFiles]')
-            .setInputFiles(join(__dirname, '../../../stubs/web-api.svg'));
-        await expect(example).toHaveScreenshot('03-input-files.png');
-    });
 });

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

@@ -1,30 +1,39 @@
-<tui-input-files
+<label
     *ngIf="!control.value"
-    accept="image/*"
-    [formControl]="control"
-    (reject)="onReject($event)"
-></tui-input-files>
+    tuiInputFiles
+>
+    <input
+        accept="image/*"
+        tuiInputFiles
+        [formControl]="control"
+    />
+</label>
 
 <tui-files class="tui-space_top-1">
+    <tui-file
+        *ngIf="control.value | tuiFileRejected: {accept: 'image/*'} | async as file"
+        state="error"
+        [file]="file"
+        (remove)="removeFile()"
+    ></tui-file>
+
     <tui-file
         *ngIf="loadedFiles$ | async as file"
         [file]="file"
-        [showDelete]="control.enabled"
-        (removed)="removeFile()"
+        (remove)="removeFile()"
     ></tui-file>
 
     <tui-file
-        *ngIf="rejectedFiles$ | async as file"
+        *ngIf="failedFiles$ | async as file"
         state="error"
         [file]="file"
-        [showDelete]="control.enabled"
-        (removed)="clearRejected()"
+        (remove)="removeFile()"
     ></tui-file>
 
     <tui-file
         *ngIf="loadingFiles$ | async as file"
         state="loading"
         [file]="file"
-        [showDelete]="control.enabled"
+        (remove)="removeFile()"
     ></tui-file>
 </tui-files>