From 09505acd9fd3a5c4a9a5fe7a88779b68328ae0f4 Mon Sep 17 00:00:00 2001 From: tinkoff-bot Date: Mon, 11 Jul 2022 14:29:10 +0300 Subject: [PATCH] refactor(kit,cdk)!: remove deprecated enums, input-file (#2087) --- .../table/directives/table.directive.ts | 4 +- projects/cdk/abstract/controller.ts | 10 +- .../input-mode/input-mode.directive.ts | 4 +- .../test/input-mode.directive.spec.ts | 4 +- .../overscroll/overscroll.directive.ts | 4 +- projects/cdk/enums/autocomplete.ts | 10 - projects/cdk/enums/index.ts | 3 - projects/cdk/enums/input-mode.ts | 13 - projects/cdk/enums/input-type.ts | 10 - projects/cdk/enums/overscroll-mode.ts | 13 - .../ng-update/steps/miscellaneous.ts | 10 + projects/cdk/types/input-mode.ts | 2 +- projects/cdk/types/input-type.ts | 2 +- projects/cdk/types/overscroll-mode.ts | 2 +- .../dropdown-box/dropdown-box.component.ts | 4 +- .../dropdown-controller.directive.ts | 4 +- .../hint-controller.directive.ts | 4 +- .../core/directives/mode/mode.directive.ts | 4 +- .../textfield-autocomplete.directive.ts | 4 +- .../textfield-cleaner.directive.ts | 4 +- .../textfield-custom-content.directive.ts | 4 +- .../textfield-example-text.directive.ts | 4 +- .../textfield-input-mode.directive.ts | 6 +- .../textfield-label-outside.directive.ts | 4 +- .../textfield-max-length.directive.ts | 4 +- .../textfield-size.directive.ts | 4 +- .../textfield-type.directive.ts | 6 +- .../textfield.controller.ts | 8 +- .../watched-controller-provider-factory.ts | 6 +- projects/demo/src/modules/app/app.routes.ts | 9 - projects/demo/src/modules/app/pages.ts | 7 - .../modules/components/abstract/control.ts | 8 +- .../components/badge/badge.component.ts | 4 +- .../input-file/examples/1/index.html | 8 - .../input-file/examples/1/index.less | 7 - .../components/input-file/examples/1/index.ts | 73 ---- .../input-file/examples/2/index.html | 20 - .../input-file/examples/2/index.less | 7 - .../components/input-file/examples/2/index.ts | 149 ------- .../input-file/examples/3/index.html | 16 - .../input-file/examples/3/index.less | 7 - .../components/input-file/examples/3/index.ts | 141 ------- .../input-file/examples/4/index.html | 13 - .../input-file/examples/4/index.less | 7 - .../components/input-file/examples/4/index.ts | 14 - .../examples/import/import-module.md | 14 - .../examples/import/insert-template.md | 3 - .../input-file/input-file.component.ts | 74 ---- .../input-file/input-file.module.ts | 36 -- .../input-file/input-file.template.html | 203 ---------- .../marker-icon/marker-icon.component.ts | 6 +- .../primitive-textfield.component.ts | 10 +- .../components/stepper/stepper.component.ts | 6 +- .../modules/components/tag/tag.component.ts | 4 +- .../dropdown-selection.component.ts | 4 +- .../textfield-controller.component.ts | 8 +- .../kit/components/badge/badge.component.ts | 4 +- .../badge/test/badge.component.spec.ts | 4 +- .../badged-content.component.ts | 4 +- .../components/files/file/file.component.ts | 20 +- projects/kit/components/index.ts | 1 - .../input-file/file/file.component.ts | 162 -------- .../input-file/file/file.style.less | 133 ------- .../input-file/file/file.template.html | 92 ----- projects/kit/components/input-file/index.ts | 3 - .../input-file/input-file.component.ts | 373 ------------------ .../input-file/input-file.module.ts | 48 --- .../input-file/input-file.style.less | 85 ---- .../input-file/input-file.template.html | 93 ----- .../kit/components/input-file/package.json | 10 - .../test/input-file.component.spec.ts | 246 ------------ .../input-number/input-number.component.ts | 4 +- .../input-password.component.ts | 4 +- .../input-phone/input-phone.component.ts | 4 +- .../input-tag/input-tag.component.ts | 8 +- .../marker-icon/marker-icon.component.ts | 4 +- projects/kit/components/tag/tag-options.ts | 4 +- projects/kit/components/tag/tag.component.ts | 4 +- projects/kit/enums/borders.ts | 7 - projects/kit/enums/dropdown-position.ts | 10 - projects/kit/enums/file-state.ts | 11 - projects/kit/enums/index.ts | 7 - projects/kit/enums/marker-icon-mode.ts | 13 - projects/kit/enums/package.json | 7 - projects/kit/enums/status.ts | 11 - projects/kit/enums/step-state.ts | 10 - projects/kit/enums/text-align.ts | 8 - projects/kit/index.ts | 1 - projects/kit/tokens/tag-status.ts | 4 +- projects/kit/types/dropdown-position.ts | 1 + projects/kit/types/file-state.ts | 4 + projects/kit/types/index.ts | 3 + projects/kit/types/marker-icon-mode.ts | 2 +- projects/kit/types/status.ts | 2 +- projects/kit/types/step-state.ts | 1 + 95 files changed, 127 insertions(+), 2304 deletions(-) delete mode 100644 projects/cdk/enums/input-mode.ts delete mode 100644 projects/cdk/enums/input-type.ts delete mode 100644 projects/cdk/enums/overscroll-mode.ts delete mode 100644 projects/demo/src/modules/components/input-file/examples/1/index.html delete mode 100644 projects/demo/src/modules/components/input-file/examples/1/index.less delete mode 100644 projects/demo/src/modules/components/input-file/examples/1/index.ts delete mode 100644 projects/demo/src/modules/components/input-file/examples/2/index.html delete mode 100644 projects/demo/src/modules/components/input-file/examples/2/index.less delete mode 100644 projects/demo/src/modules/components/input-file/examples/2/index.ts delete mode 100644 projects/demo/src/modules/components/input-file/examples/3/index.html delete mode 100644 projects/demo/src/modules/components/input-file/examples/3/index.less delete mode 100644 projects/demo/src/modules/components/input-file/examples/3/index.ts delete mode 100644 projects/demo/src/modules/components/input-file/examples/4/index.html delete mode 100644 projects/demo/src/modules/components/input-file/examples/4/index.less delete mode 100644 projects/demo/src/modules/components/input-file/examples/4/index.ts delete mode 100644 projects/demo/src/modules/components/input-file/examples/import/import-module.md delete mode 100644 projects/demo/src/modules/components/input-file/examples/import/insert-template.md delete mode 100644 projects/demo/src/modules/components/input-file/input-file.component.ts delete mode 100644 projects/demo/src/modules/components/input-file/input-file.module.ts delete mode 100644 projects/demo/src/modules/components/input-file/input-file.template.html delete mode 100644 projects/kit/components/input-file/file/file.component.ts delete mode 100644 projects/kit/components/input-file/file/file.style.less delete mode 100644 projects/kit/components/input-file/file/file.template.html delete mode 100644 projects/kit/components/input-file/index.ts delete mode 100644 projects/kit/components/input-file/input-file.component.ts delete mode 100644 projects/kit/components/input-file/input-file.module.ts delete mode 100644 projects/kit/components/input-file/input-file.style.less delete mode 100644 projects/kit/components/input-file/input-file.template.html delete mode 100644 projects/kit/components/input-file/package.json delete mode 100644 projects/kit/components/input-file/test/input-file.component.spec.ts delete mode 100644 projects/kit/enums/borders.ts delete mode 100644 projects/kit/enums/dropdown-position.ts delete mode 100644 projects/kit/enums/file-state.ts delete mode 100644 projects/kit/enums/index.ts delete mode 100644 projects/kit/enums/marker-icon-mode.ts delete mode 100644 projects/kit/enums/package.json delete mode 100644 projects/kit/enums/status.ts delete mode 100644 projects/kit/enums/step-state.ts delete mode 100644 projects/kit/enums/text-align.ts create mode 100644 projects/kit/types/dropdown-position.ts create mode 100644 projects/kit/types/file-state.ts create mode 100644 projects/kit/types/step-state.ts diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts index 76a553356939..90b27c83e5c2 100644 --- a/projects/addon-table/components/table/directives/table.directive.ts +++ b/projects/addon-table/components/table/directives/table.directive.ts @@ -9,7 +9,7 @@ import { } from '@angular/core'; import {IntersectionObserverService} from '@ng-web-apis/intersection-observer'; import {TuiComparator} from '@taiga-ui/addon-table/types'; -import {TuiController, tuiDefaultProp} from '@taiga-ui/cdk'; +import {AbstractTuiController, tuiDefaultProp} from '@taiga-ui/cdk'; import {TUI_MODE, TuiBrightness, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {Observable} from 'rxjs'; @@ -25,7 +25,7 @@ import {TUI_TABLE_PROVIDERS} from '../providers/table.providers'; style: 'border-collapse: separate', }, }) -export class TuiTableDirective extends TuiController { +export class TuiTableDirective extends AbstractTuiController { @Input() @tuiDefaultProp() columns: ReadonlyArray = []; diff --git a/projects/cdk/abstract/controller.ts b/projects/cdk/abstract/controller.ts index 59acd8f9d899..fb1c6864daa3 100644 --- a/projects/cdk/abstract/controller.ts +++ b/projects/cdk/abstract/controller.ts @@ -1,19 +1,11 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import {Directive, OnChanges} from '@angular/core'; import {Subject} from 'rxjs'; -/** - * @deprecated - * TODO: 3.0 replace with {@link AbstractTuiController} - */ @Directive() -export abstract class TuiController implements OnChanges { +export abstract class AbstractTuiController implements OnChanges { readonly change$ = new Subject(); ngOnChanges(): void { this.change$.next(); } } - -@Directive() -export abstract class AbstractTuiController extends TuiController {} diff --git a/projects/cdk/directives/input-mode/input-mode.directive.ts b/projects/cdk/directives/input-mode/input-mode.directive.ts index f818110d3e51..60ba7db6b059 100644 --- a/projects/cdk/directives/input-mode/input-mode.directive.ts +++ b/projects/cdk/directives/input-mode/input-mode.directive.ts @@ -1,6 +1,6 @@ import {Attribute, Directive, HostBinding, Inject, Input} from '@angular/core'; import {TUI_IS_IOS} from '@taiga-ui/cdk/tokens'; -import {TuiInputModeT} from '@taiga-ui/cdk/types'; +import {TuiInputMode} from '@taiga-ui/cdk/types'; /** * Abstraction over `inputMode` attribute @@ -12,7 +12,7 @@ export class TuiInputModeDirective { @Input('tuiInputMode') @HostBinding('attr.inputmode') @HostBinding('attr.x-inputmode') - mode: TuiInputModeT = 'text'; + mode: TuiInputMode = 'text'; constructor( @Attribute('pattern') private readonly pattern: string | null, diff --git a/projects/cdk/directives/input-mode/test/input-mode.directive.spec.ts b/projects/cdk/directives/input-mode/test/input-mode.directive.spec.ts index 48bf41f9c8fd..b76befcd1815 100644 --- a/projects/cdk/directives/input-mode/test/input-mode.directive.spec.ts +++ b/projects/cdk/directives/input-mode/test/input-mode.directive.spec.ts @@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {configureTestSuite} from '@taiga-ui/testing'; -import {TuiInputModeT} from '../../../types/input-mode'; +import {TuiInputMode} from '../../../types/input-mode'; import {TuiInputModeModule} from '../input-mode.module'; describe('TuiInputMode directive', () => { @@ -34,7 +34,7 @@ describe('TuiInputMode directive', () => { @ViewChild('inputWithPattern') inputWithPattern!: ElementRef; - inputMode: TuiInputModeT = 'decimal'; + inputMode: TuiInputMode = 'decimal'; default = true; } diff --git a/projects/cdk/directives/overscroll/overscroll.directive.ts b/projects/cdk/directives/overscroll/overscroll.directive.ts index b644d5f1cee2..e0cd3e1fc0f8 100644 --- a/projects/cdk/directives/overscroll/overscroll.directive.ts +++ b/projects/cdk/directives/overscroll/overscroll.directive.ts @@ -1,7 +1,7 @@ import {Directive, ElementRef, HostBinding, Inject, Input, NgZone} from '@angular/core'; import {tuiZonefree, typedFromEvent} from '@taiga-ui/cdk/observables'; import {TuiDestroyService} from '@taiga-ui/cdk/services'; -import {TuiEventWith, TuiOverscrollModeT} from '@taiga-ui/cdk/types'; +import {TuiEventWith, TuiOverscrollMode} from '@taiga-ui/cdk/types'; import {canScroll, getScrollParent} from '@taiga-ui/cdk/utils/dom'; import {Observable} from 'rxjs'; import {filter, switchMap, takeUntil, tap} from 'rxjs/operators'; @@ -16,7 +16,7 @@ import {filter, switchMap, takeUntil, tap} from 'rxjs/operators'; }) export class TuiOverscrollDirective { @Input('tuiOverscroll') - mode: TuiOverscrollModeT | '' = 'scroll'; + mode: TuiOverscrollMode | '' = 'scroll'; constructor( @Inject(ElementRef) {nativeElement}: ElementRef, diff --git a/projects/cdk/enums/autocomplete.ts b/projects/cdk/enums/autocomplete.ts index bacf70da4361..c1dbf9f77c51 100644 --- a/projects/cdk/enums/autocomplete.ts +++ b/projects/cdk/enums/autocomplete.ts @@ -5,17 +5,7 @@ export const enum TuiCreditCardAutofillName { CcNumber = 'cc-number', CcCsc = 'cc-csc', CcExpMonth = 'cc-exp-month', - /** - * @deprecated - * TODO: 3.0 replace with {@link CcExpMonth} - */ - CcExp_mounth = 'cc-exp-month', CcExpYear = 'cc-exp-year', - /** - * @deprecated - * TODO: 3.0 replace with {@link CcExpYear} - */ - CcExp_year = 'cc-exp-year', CcExp = 'cc-exp', CcType = 'cc-type', } diff --git a/projects/cdk/enums/index.ts b/projects/cdk/enums/index.ts index 8485529bffaa..33ceb297a486 100644 --- a/projects/cdk/enums/index.ts +++ b/projects/cdk/enums/index.ts @@ -1,6 +1,3 @@ export * from './autocomplete'; export * from './day-of-week'; -export * from './input-mode'; -export * from './input-type'; export * from './month-number'; -export * from './overscroll-mode'; diff --git a/projects/cdk/enums/input-mode.ts b/projects/cdk/enums/input-mode.ts deleted file mode 100644 index 4fb69ac9c39a..000000000000 --- a/projects/cdk/enums/input-mode.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @deprecated use join type {@link TuiInputModeT} - */ -export const enum TuiInputMode { - None = 'none', - Text = 'text', - Decimal = 'decimal', - Numeric = 'numeric', - Tel = 'tel', - Email = 'email', - Url = 'url', - Search = 'search', -} diff --git a/projects/cdk/enums/input-type.ts b/projects/cdk/enums/input-type.ts deleted file mode 100644 index 6b18f918ba62..000000000000 --- a/projects/cdk/enums/input-type.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @deprecated use join type {@link TuiInputTypeT} - */ -export const enum TuiInputType { - Text = 'text', - Tel = 'tel', - Email = 'email', - Url = 'url', - Password = 'password', -} diff --git a/projects/cdk/enums/overscroll-mode.ts b/projects/cdk/enums/overscroll-mode.ts deleted file mode 100644 index 6be8da55a8ac..000000000000 --- a/projects/cdk/enums/overscroll-mode.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Modes for {@link TuiOverscrollDirective}: - * - * All — blocks all scroll actions - * Scroll — blocks scroll actions only if content is scrollable (equivalent to overscroll-behavior: contain) - * None — blocking is disabled - * @deprecated use join type {@link TuiOverscrollModeT} - */ -export const enum TuiOverscrollMode { - All = 'all', - Scroll = 'scroll', - None = 'none', -} diff --git a/projects/cdk/schematics/ng-update/steps/miscellaneous.ts b/projects/cdk/schematics/ng-update/steps/miscellaneous.ts index b38ec7c4900d..f53a908183f0 100644 --- a/projects/cdk/schematics/ng-update/steps/miscellaneous.ts +++ b/projects/cdk/schematics/ng-update/steps/miscellaneous.ts @@ -13,6 +13,16 @@ export function miscellaneousMigrations() { from: 'HongKong_dollar', to: 'HongKongDollar', }); + replaceEnumProperty({ + enumName: 'TuiCreditCardAutofillName', + from: 'CcExp_mounth', + to: 'CcExpMonth', + }); + replaceEnumProperty({ + enumName: 'TuiCreditCardAutofillName', + from: 'CcExp_year', + to: 'CcExpYear', + }); addWarningToMethod( 'TuiDirectiveStylesService', diff --git a/projects/cdk/types/input-mode.ts b/projects/cdk/types/input-mode.ts index 8f484bcae624..5c28ebcc1485 100644 --- a/projects/cdk/types/input-mode.ts +++ b/projects/cdk/types/input-mode.ts @@ -1,4 +1,4 @@ -export type TuiInputModeT = +export type TuiInputMode = | 'none' | 'text' | 'decimal' diff --git a/projects/cdk/types/input-type.ts b/projects/cdk/types/input-type.ts index fcb48464a562..11b71f89ab7d 100644 --- a/projects/cdk/types/input-type.ts +++ b/projects/cdk/types/input-type.ts @@ -1 +1 @@ -export type TuiInputTypeT = 'text' | 'tel' | 'email' | 'url' | 'password'; +export type TuiInputType = 'text' | 'tel' | 'email' | 'url' | 'password'; diff --git a/projects/cdk/types/overscroll-mode.ts b/projects/cdk/types/overscroll-mode.ts index 7f87c15ff5f6..6d601d54138c 100644 --- a/projects/cdk/types/overscroll-mode.ts +++ b/projects/cdk/types/overscroll-mode.ts @@ -1 +1 @@ -export type TuiOverscrollModeT = 'all' | 'scroll' | 'none'; +export type TuiOverscrollMode = 'all' | 'scroll' | 'none'; diff --git a/projects/core/components/dropdown-box/dropdown-box.component.ts b/projects/core/components/dropdown-box/dropdown-box.component.ts index 8eb6e6a75f70..c09c92bed235 100644 --- a/projects/core/components/dropdown-box/dropdown-box.component.ts +++ b/projects/core/components/dropdown-box/dropdown-box.component.ts @@ -20,7 +20,7 @@ import { tuiAssertIsHTMLElement, TuiDestroyService, TuiDropdownHostComponent, - TuiOverscrollModeT, + TuiOverscrollMode, tuiPure, tuiZonefree, } from '@taiga-ui/cdk'; @@ -93,7 +93,7 @@ export class TuiDropdownBoxComponent implements AfterViewChecked { }); } - get overscroll(): TuiOverscrollModeT { + get overscroll(): TuiOverscrollMode { return this.inModal ? 'all' : 'scroll'; } diff --git a/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts b/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts index d4fdffd1b744..6fb55e1693c1 100644 --- a/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts +++ b/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, Input} from '@angular/core'; -import {TuiController, tuiDefaultProp} from '@taiga-ui/cdk'; +import {AbstractTuiController, tuiDefaultProp} from '@taiga-ui/cdk'; import {DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT} from '@taiga-ui/core/constants'; import { TuiDropdownWidthT, @@ -19,7 +19,7 @@ import {TUI_DROPDOWN_CONTROLLER} from './dropdown-controller.token'; }, ], }) -export class TuiDropdownControllerDirective extends TuiController { +export class TuiDropdownControllerDirective extends AbstractTuiController { @Input('tuiDropdownAlign') @tuiDefaultProp() align: TuiHorizontalDirection = 'right'; diff --git a/projects/core/directives/hint-controller/hint-controller.directive.ts b/projects/core/directives/hint-controller/hint-controller.directive.ts index c5573f3ec5b0..74a43fb6d943 100644 --- a/projects/core/directives/hint-controller/hint-controller.directive.ts +++ b/projects/core/directives/hint-controller/hint-controller.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, Inject, Input} from '@angular/core'; -import {TuiController, tuiDefaultProp} from '@taiga-ui/cdk'; +import {AbstractTuiController, tuiDefaultProp} from '@taiga-ui/cdk'; import {TUI_HINT_OPTIONS, TuiHintOptions} from '@taiga-ui/core/directives/hint'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -15,7 +15,7 @@ import {TUI_HINT_CONTROLLER} from './hint-controller.token'; }, ], }) -export class TuiHintControllerDirective extends TuiController { +export class TuiHintControllerDirective extends AbstractTuiController { // TODO: 3.0 Remove null @Input('tuiHintContent') @tuiDefaultProp() diff --git a/projects/core/directives/mode/mode.directive.ts b/projects/core/directives/mode/mode.directive.ts index bad816264248..b94a21337d32 100644 --- a/projects/core/directives/mode/mode.directive.ts +++ b/projects/core/directives/mode/mode.directive.ts @@ -1,11 +1,11 @@ import {Directive, Input} from '@angular/core'; -import {TuiController} from '@taiga-ui/cdk'; +import {AbstractTuiController} from '@taiga-ui/cdk'; import {TuiBrightness} from '@taiga-ui/core/types'; @Directive({ selector: '[tuiMode]', }) -export class TuiModeDirective extends TuiController { +export class TuiModeDirective extends AbstractTuiController { @Input('tuiMode') mode: TuiBrightness | null = null; } diff --git a/projects/core/directives/textfield-controller/textfield-autocomplete.directive.ts b/projects/core/directives/textfield-controller/textfield-autocomplete.directive.ts index f10b60163b59..fdbee8ffa3ad 100644 --- a/projects/core/directives/textfield-controller/textfield-autocomplete.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-autocomplete.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiAutofillFieldName, TuiController} from '@taiga-ui/cdk'; +import {AbstractTuiController, TuiAutofillFieldName} from '@taiga-ui/cdk'; export const TUI_TEXTFIELD_AUTOCOMPLETE = new InjectionToken('tuiTextfieldAutocomplete', { @@ -15,7 +15,7 @@ export const TUI_TEXTFIELD_AUTOCOMPLETE = }, ], }) -export class TuiTextfieldAutocompleteDirective extends TuiController { +export class TuiTextfieldAutocompleteDirective extends AbstractTuiController { @Input('tuiTextfieldAutocomplete') autocomplete: TuiAutofillFieldName | '' = ''; } diff --git a/projects/core/directives/textfield-controller/textfield-cleaner.directive.ts b/projects/core/directives/textfield-controller/textfield-cleaner.directive.ts index 02e4d5c8e908..c8e9297a1c07 100644 --- a/projects/core/directives/textfield-controller/textfield-cleaner.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-cleaner.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiController} from '@taiga-ui/cdk'; +import {AbstractTuiController} from '@taiga-ui/cdk'; export const TUI_TEXTFIELD_CLEANER = new InjectionToken( 'tuiTextfieldCleaner', @@ -17,7 +17,7 @@ export const TUI_TEXTFIELD_CLEANER = new InjectionToken('tuiTextfieldExampleText', { @@ -15,7 +15,7 @@ export const TUI_TEXTFIELD_EXAMPLE_TEXT = }, ], }) -export class TuiTextfieldExampleTextDirective extends TuiController { +export class TuiTextfieldExampleTextDirective extends AbstractTuiController { @Input('tuiTextfieldExampleText') exampleText = ''; } diff --git a/projects/core/directives/textfield-controller/textfield-input-mode.directive.ts b/projects/core/directives/textfield-controller/textfield-input-mode.directive.ts index 997e294c696b..b640fe4e6426 100644 --- a/projects/core/directives/textfield-controller/textfield-input-mode.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-input-mode.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiController, TuiInputModeT} from '@taiga-ui/cdk'; +import {AbstractTuiController, TuiInputMode} from '@taiga-ui/cdk'; export const TUI_TEXTFIELD_INPUT_MODE = new InjectionToken('tuiTextfieldInputMode', { @@ -15,9 +15,9 @@ export const TUI_TEXTFIELD_INPUT_MODE = }, ], }) -export class TuiTextfieldInputModeDirective extends TuiController { +export class TuiTextfieldInputModeDirective extends AbstractTuiController { @Input('tuiTextfieldInputMode') - inputMode: TuiInputModeT = 'text'; + inputMode: TuiInputMode = 'text'; } // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/projects/core/directives/textfield-controller/textfield-label-outside.directive.ts b/projects/core/directives/textfield-controller/textfield-label-outside.directive.ts index 7c8e24654288..ce1785c6c605 100644 --- a/projects/core/directives/textfield-controller/textfield-label-outside.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-label-outside.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiController} from '@taiga-ui/cdk'; +import {AbstractTuiController} from '@taiga-ui/cdk'; export const TUI_TEXTFIELD_LABEL_OUTSIDE = new InjectionToken('tuiTextfieldLabelOutside', { @@ -15,7 +15,7 @@ export const TUI_TEXTFIELD_LABEL_OUTSIDE = }, ], }) -export class TuiTextfieldLabelOutsideDirective extends TuiController { +export class TuiTextfieldLabelOutsideDirective extends AbstractTuiController { @Input('tuiTextfieldLabelOutside') labelOutside = false; } diff --git a/projects/core/directives/textfield-controller/textfield-max-length.directive.ts b/projects/core/directives/textfield-controller/textfield-max-length.directive.ts index 16ee448d2490..770f79eca061 100644 --- a/projects/core/directives/textfield-controller/textfield-max-length.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-max-length.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiController} from '@taiga-ui/cdk'; +import {AbstractTuiController} from '@taiga-ui/cdk'; export const TUI_TEXTFIELD_MAX_LENGTH = new InjectionToken('tuiTextfieldMaxLength', { @@ -15,7 +15,7 @@ export const TUI_TEXTFIELD_MAX_LENGTH = }, ], }) -export class TuiTextfieldMaxLengthDirective extends TuiController { +export class TuiTextfieldMaxLengthDirective extends AbstractTuiController { @Input('tuiTextfieldMaxLength') maxLength: number | null = null; } diff --git a/projects/core/directives/textfield-controller/textfield-size.directive.ts b/projects/core/directives/textfield-controller/textfield-size.directive.ts index a53ee7d63a6b..bf2a89470ef1 100644 --- a/projects/core/directives/textfield-controller/textfield-size.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-size.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiController} from '@taiga-ui/cdk'; +import {AbstractTuiController} from '@taiga-ui/cdk'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; export const TUI_TEXTFIELD_SIZE = new InjectionToken( @@ -18,7 +18,7 @@ export const TUI_TEXTFIELD_SIZE = new InjectionToken( }, ], }) -export class TuiTextfieldSizeDirective extends TuiController { +export class TuiTextfieldSizeDirective extends AbstractTuiController { @Input('tuiTextfieldSize') size: TuiSizeS | TuiSizeL = 'l'; } diff --git a/projects/core/directives/textfield-controller/textfield-type.directive.ts b/projects/core/directives/textfield-controller/textfield-type.directive.ts index 5fa9b8b11dc8..5d84292e9492 100644 --- a/projects/core/directives/textfield-controller/textfield-type.directive.ts +++ b/projects/core/directives/textfield-controller/textfield-type.directive.ts @@ -1,5 +1,5 @@ import {Directive, forwardRef, InjectionToken, Input} from '@angular/core'; -import {TuiController, TuiInputTypeT} from '@taiga-ui/cdk'; +import {AbstractTuiController, TuiInputType} from '@taiga-ui/cdk'; export const TUI_TEXTFIELD_TYPE = new InjectionToken( 'tuiTextfieldType', @@ -17,9 +17,9 @@ export const TUI_TEXTFIELD_TYPE = new InjectionToken( }, ], }) -export class TuiTextfieldTypeDirective extends TuiController { +export class TuiTextfieldTypeDirective extends AbstractTuiController { @Input('tuiTextfieldType') - type: TuiInputTypeT = 'text'; + type: TuiInputType = 'text'; } // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/projects/core/directives/textfield-controller/textfield.controller.ts b/projects/core/directives/textfield-controller/textfield.controller.ts index 71b3a933c21e..d1c05ca0b1ad 100644 --- a/projects/core/directives/textfield-controller/textfield.controller.ts +++ b/projects/core/directives/textfield-controller/textfield.controller.ts @@ -1,8 +1,8 @@ import { TuiAutofillFieldName, TuiContextWithImplicit, - TuiInputModeT, - TuiInputTypeT, + TuiInputMode, + TuiInputType, } from '@taiga-ui/cdk'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -60,7 +60,7 @@ export class TuiTextfieldController { return this.iconLeftDirective.iconLeft; } - get inputMode(): TuiInputModeT { + get inputMode(): TuiInputMode { return this.inputModeDirective.inputMode; } @@ -76,7 +76,7 @@ export class TuiTextfieldController { return this.sizeDirective.size; } - get type(): TuiInputTypeT { + get type(): TuiInputType { return this.typeDirective.type; } } diff --git a/projects/core/providers/watched-controller-provider-factory.ts b/projects/core/providers/watched-controller-provider-factory.ts index dc4fd61e08da..44cef4c05071 100644 --- a/projects/core/providers/watched-controller-provider-factory.ts +++ b/projects/core/providers/watched-controller-provider-factory.ts @@ -1,5 +1,5 @@ import {ChangeDetectorRef} from '@angular/core'; -import {TuiController, watch} from '@taiga-ui/cdk'; +import {AbstractTuiController, watch} from '@taiga-ui/cdk'; import {Observable} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; @@ -8,10 +8,10 @@ import {takeUntil} from 'rxjs/operators'; */ // eslint-disable-next-line @typescript-eslint/naming-convention export function watchedControllerFactory( - controller: TuiController, + controller: AbstractTuiController, changeDetectorRef: ChangeDetectorRef, destroy$: Observable, -): TuiController { +): AbstractTuiController { controller.change$.pipe(watch(changeDetectorRef), takeUntil(destroy$)).subscribe(); return controller; diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 37ba2496eecb..69a3916c4abe 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -417,15 +417,6 @@ export const ROUTES = [ title: 'InputDateTime', }, }, - { - path: 'components/input-file', - loadChildren: async () => - (await import('../components/input-file/input-file.module')) - .ExampleTuiInputFileModule, - data: { - title: 'InputFile', - }, - }, { path: 'components/input-month', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 8ac4112271e9..81e76e3ce24a 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -448,13 +448,6 @@ export const pages: TuiDocPages = [ 'неделя, месяц, год, дата, calendar, время, часы, минуты, секунды, мс', route: '/components/input-date-time', }, - { - section: $localize`Components`, - title: 'InputFile', - keywords: - 'селект, форма, файл, загрузка, ввод, input, file, attach, load', - route: '/components/input-file', - }, { section: $localize`Components`, title: 'InputInline', diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts index d552d7e7627e..8003e7b47970 100644 --- a/projects/demo/src/modules/components/abstract/control.ts +++ b/projects/demo/src/modules/components/abstract/control.ts @@ -1,5 +1,5 @@ import {AbstractControl} from '@angular/forms'; -import {TuiAutofillFieldName, TuiInputModeT, TuiInputTypeT} from '@taiga-ui/cdk'; +import {TuiAutofillFieldName, TuiInputMode, TuiInputType} from '@taiga-ui/cdk'; import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, @@ -52,7 +52,7 @@ export abstract class AbstractExampleTuiControl readonly hintModeVariants: readonly TuiHintModeT[] = ['error', 'onDark']; - readonly typeVariants: readonly TuiInputTypeT[] = [ + readonly typeVariants: readonly TuiInputType[] = [ 'text', 'email', 'password', @@ -80,7 +80,7 @@ export abstract class AbstractExampleTuiControl 'country-name', ]; - readonly inputModeVariants: readonly TuiInputModeT[] = ['text', 'numeric']; + readonly inputModeVariants: readonly TuiInputMode[] = ['text', 'numeric']; readonly customContentVariants: PolymorpheusContent[] = [ CUSTOM_SVG_NAME, @@ -98,7 +98,7 @@ export abstract class AbstractExampleTuiControl maxLength: TuiPossibleGenericType | null = null; - type: TuiInputTypeT = this.typeVariants[0]; + type: TuiInputType = this.typeVariants[0]; cleaner = false; diff --git a/projects/demo/src/modules/components/badge/badge.component.ts b/projects/demo/src/modules/components/badge/badge.component.ts index 3f106128876f..12c1b1509b5e 100644 --- a/projects/demo/src/modules/components/badge/badge.component.ts +++ b/projects/demo/src/modules/components/badge/badge.component.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; -import {TuiStatusT} from '@taiga-ui/kit'; +import {TuiStatus} from '@taiga-ui/kit'; @Component({ selector: 'example-badge', @@ -35,7 +35,7 @@ export class ExampleTuiBadgeComponent { HTML: import('!!raw-loader!./examples/4/index.html'), }; - readonly statusVariants: readonly TuiStatusT[] = [ + readonly statusVariants: readonly TuiStatus[] = [ 'default', 'primary', 'custom', diff --git a/projects/demo/src/modules/components/input-file/examples/1/index.html b/projects/demo/src/modules/components/input-file/examples/1/index.html deleted file mode 100644 index fe5a8c81e86b..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/1/index.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/projects/demo/src/modules/components/input-file/examples/1/index.less b/projects/demo/src/modules/components/input-file/examples/1/index.less deleted file mode 100644 index bc6c3e37f938..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/1/index.less +++ /dev/null @@ -1,7 +0,0 @@ -:host { - display: block; -} - -.container { - max-width: 35rem; -} diff --git a/projects/demo/src/modules/components/input-file/examples/1/index.ts b/projects/demo/src/modules/components/input-file/examples/1/index.ts deleted file mode 100644 index c9a0bcd9e55b..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/1/index.ts +++ /dev/null @@ -1,73 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiPure} from '@taiga-ui/cdk'; -import {TuiFileLike} from '@taiga-ui/kit'; -import {Observable, of, timer} from 'rxjs'; -import {map, mapTo, share, startWith, switchMap, tap} from 'rxjs/operators'; - -class RejectedFile { - constructor(readonly file: TuiFileLike, readonly reason: string) {} -} - -function convertRejected({file, reason}: RejectedFile): TuiFileLike { - return { - name: file.name, - size: file.size, - type: file.type, - content: reason, - }; -} - -@Component({ - selector: 'tui-input-file-example-1', - templateUrl: './index.html', - styleUrls: ['./index.less'], - changeDetection, - encapsulation, -}) -export class TuiInputFileExample1 { - readonly control = new FormControl(); - - @tuiPure - get loading$(): Observable { - return this.requests$.pipe( - map(file => (file instanceof File ? [file] : [])), - startWith([]), - ); - } - - @tuiPure - get rejected$(): Observable { - return this.requests$.pipe( - map(file => (file instanceof RejectedFile ? [convertRejected(file)] : [])), - tap(({length}) => { - if (length) { - this.control.setValue(null); - } - }), - startWith([]), - ); - } - - @tuiPure - private get requests$(): Observable { - return this.control.valueChanges.pipe( - switchMap(file => - file ? this.serverRequest(file).pipe(startWith(file)) : of(null), - ), - share(), - ); - } - - private serverRequest(file: File): Observable { - const delay = Math.round(Math.random() * 5000 + 500); - const result = - delay % 2 - ? null - : new RejectedFile(file, 'Server responded for odd number of time'); - - return timer(delay).pipe(mapTo(result)); - } -} diff --git a/projects/demo/src/modules/components/input-file/examples/2/index.html b/projects/demo/src/modules/components/input-file/examples/2/index.html deleted file mode 100644 index b043f5fefe6b..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/2/index.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
- With a custom accept format and async loading -
- -
diff --git a/projects/demo/src/modules/components/input-file/examples/2/index.less b/projects/demo/src/modules/components/input-file/examples/2/index.less deleted file mode 100644 index bc6c3e37f938..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/2/index.less +++ /dev/null @@ -1,7 +0,0 @@ -:host { - display: block; -} - -.container { - max-width: 35rem; -} diff --git a/projects/demo/src/modules/components/input-file/examples/2/index.ts b/projects/demo/src/modules/components/input-file/examples/2/index.ts deleted file mode 100644 index b503fef1954b..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/2/index.ts +++ /dev/null @@ -1,149 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {isPresent} from '@taiga-ui/cdk'; -import {TuiFileLike} from '@taiga-ui/kit'; -import {combineLatest, Observable, Subject, timer} from 'rxjs'; -import { - filter, - map, - mapTo, - mergeScan, - pairwise, - scan, - share, - startWith, - switchMap, - takeUntil, - tap, -} from 'rxjs/operators'; - -class RejectedFile { - constructor(readonly file: TuiFileLike, readonly reason: string) {} -} - -function isFile(file: unknown): file is File { - return file instanceof File; -} - -function isRejectedFile(file: unknown): file is RejectedFile { - return file instanceof RejectedFile; -} - -function convertRejected({file, reason}: RejectedFile): TuiFileLike { - return { - name: file.name, - size: file.size, - type: file.type, - content: reason, - }; -} - -@Component({ - selector: 'tui-input-file-example-2', - templateUrl: './index.html', - styleUrls: ['./index.less'], - changeDetection, - encapsulation, -}) -export class TuiInputFileExample2 { - private readonly files = new FormControl([]); - - private readonly rejectedFiles$ = new Subject(); - - private readonly files$ = this.files.valueChanges.pipe( - // We start with empty array for pairwise to work immediately - startWith([]), - pairwise(), - // We map each emit to newly added files - map(([prev, cur]) => cur.filter(item => !prev.includes(item))), - // We use mergeScan + combineLatest to accumulate results in one array - mergeScan( - (acc: ReadonlyArray, cur) => - combineLatest( - cur.map(file => - this.serverRequest(file).pipe( - startWith(file), - takeUntil( - // Cancel upload if file is removed from control - this.files.valueChanges.pipe( - filter(files => !files.includes(file)), - ), - ), - ), - ), - // Filtering out `null` as successfully uploaded files - ).pipe(map(files => [...acc, ...files.filter(isPresent)])), - [], - ), - // Now we have a shared Observable of currently loading Files and server-rejects - share(), - ); - - readonly loading$: Observable = this.files$.pipe( - // We filter out RejectedFiles to remove errors from loading array - map(files => files.filter(isFile)), - switchMap(loading => - this.files.valueChanges.pipe( - startWith(this.files.value), - // We filter out loading items that were removed from control before server responded - map(value => loading.filter(file => value.includes(file))), - ), - ), - startWith([]), - ); - - // We start with internal changes (i.e. wrong format or size found or user removed existing error message) - readonly rejected$: Observable = this.rejectedFiles$.pipe( - switchMap(rejectedFiles => - this.files$.pipe( - // We filter out Files to ignore loading files - map(files => files.filter(isRejectedFile)), - // We collect all newly rejected files and previously rejected since we switch mapped - scan( - (previous, current) => [ - ...previous, - ...current.filter(({file}) => this.files.value.includes(file)), - ], - [], - ), - // We remove server errored files from control **SIDE EFFECT** - tap(files => this.removeRejected(files)), - // Map new RejectedFiles to TuiFileLike with rejection reason - map(files => files.map(convertRejected)), - // Combine with currently present rejected files - map(filtered => [...rejectedFiles, ...filtered]), - ), - ), - startWith([]), - ); - - readonly form = new FormGroup({ - files: this.files, - }); - - onRejectedFilesChange(rejectedFiles: readonly TuiFileLike[]): void { - this.rejectedFiles$.next(rejectedFiles); - } - - private removeRejected(rejectedFiles: readonly RejectedFile[]): void { - const filtered = this.files.value.filter((file: File) => - rejectedFiles.every(rejectedFile => rejectedFile.file !== file), - ); - - if (filtered.length !== this.files.value.length) { - this.files.setValue(filtered); - } - } - - private serverRequest(file: File): Observable { - const delay = Math.round(Math.random() * 5000 + 500); - const result = - delay % 2 - ? null - : new RejectedFile(file, 'Server responded for odd number of time'); - - return timer(delay).pipe(mapTo(result)); - } -} diff --git a/projects/demo/src/modules/components/input-file/examples/3/index.html b/projects/demo/src/modules/components/input-file/examples/3/index.html deleted file mode 100644 index 0c4ea80436ac..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/3/index.html +++ /dev/null @@ -1,16 +0,0 @@ -
-

- With preset files and actions when deleting -

- -

Loading files should also be in control

-
diff --git a/projects/demo/src/modules/components/input-file/examples/3/index.less b/projects/demo/src/modules/components/input-file/examples/3/index.less deleted file mode 100644 index bc6c3e37f938..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/3/index.less +++ /dev/null @@ -1,7 +0,0 @@ -:host { - display: block; -} - -.container { - max-width: 35rem; -} diff --git a/projects/demo/src/modules/components/input-file/examples/3/index.ts b/projects/demo/src/modules/components/input-file/examples/3/index.ts deleted file mode 100644 index 477b946460d3..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/3/index.ts +++ /dev/null @@ -1,141 +0,0 @@ -import {ChangeDetectorRef, Component, Inject} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiDestroyService, watch} from '@taiga-ui/cdk'; -import {TuiAlertService} from '@taiga-ui/core'; -import {TuiFileLike} from '@taiga-ui/kit'; -import {combineLatest, Observable, Subject, timer} from 'rxjs'; -import {mapTo, startWith, switchMap, takeUntil} from 'rxjs/operators'; - -class RejectedFile { - constructor(readonly file: TuiFileLike, readonly reason: string) {} -} - -function isRejectedFile(file: unknown): file is RejectedFile { - return file instanceof RejectedFile; -} - -function getRemoved(oldArray: readonly T[], newArray: readonly T[]): T | null { - const filtered = oldArray.filter(item => !newArray.includes(item)); - - return filtered.length === 1 ? filtered[0] : null; -} - -function isNarrowed(oldArray: readonly T[], newArray: readonly T[]): boolean { - return newArray.every(item => oldArray.includes(item)); -} - -function convertRejected({file, reason}: RejectedFile): TuiFileLike { - return { - name: file.name, - size: file.size, - type: file.type, - content: reason, - }; -} - -@Component({ - selector: 'tui-input-file-example-3', - templateUrl: './index.html', - styleUrls: ['./index.less'], - providers: [TuiDestroyService], - changeDetection, - encapsulation, -}) -export class TuiInputFileExample3 { - private readonly files$ = new Subject(); - - files: readonly TuiFileLike[] = [ - { - name: 'Loading file.txt', - }, - { - name: 'A file with a very very long title to check that it can be cut correctly.txt', - src: 'https://tools.ietf.org/html/rfc675', - }, - ]; - - loadingFiles: readonly TuiFileLike[] = [this.files[0]]; - rejectedFiles: readonly TuiFileLike[] = [ - { - name: 'File with an error.txt', - content: 'Something went wrong this time', - }, - ]; - - constructor( - @Inject(TuiDestroyService) destroy$: TuiDestroyService, - @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef, - @Inject(TuiAlertService) - private readonly alertService: TuiAlertService, - ) { - this.files$ - .pipe( - switchMap(files => - combineLatest( - files.map(file => this.serverRequest(file).pipe(startWith(file))), - ), - ), - watch(changeDetectorRef), - takeUntil(destroy$), - ) - .subscribe(response => { - this.processResponse(response); - }); - } - - onModelChange(files: readonly TuiFileLike[]): void { - this.processNotification(files); - - if (isNarrowed(this.files, files)) { - this.files = files; - this.loadingFiles = this.loadingFiles.filter(file => files.includes(file)); - - return; - } - - this.files = files; - this.loadingFiles = this.files; - this.files$.next(this.files); - } - - private processNotification(files: readonly TuiFileLike[]): void { - const removed = getRemoved(this.files, files); - - if (removed) { - this.alertService.open(`"${removed.name}" was removed`).subscribe(); - } - } - - private processResponse( - files: ReadonlyArray, - ): void { - this.loadingFiles = this.loadingFiles.filter(file => files.includes(file)); - - const newRejectedFiles = files - .filter(isRejectedFile) - .filter(({file}) => this.files.includes(file)); - - if (newRejectedFiles.length === 0) { - return; - } - - this.rejectedFiles = [ - ...this.rejectedFiles, - ...newRejectedFiles.map(convertRejected), - ]; - this.files = this.files.filter(file => - newRejectedFiles.every(rejectedFile => rejectedFile.file !== file), - ); - } - - private serverRequest(file: TuiFileLike): Observable { - const delay = Math.round(Math.random() * 5000 + 500); - const result = - delay % 2 - ? null - : new RejectedFile(file, 'Server responded for odd number of time'); - - return timer(delay).pipe(mapTo(result)); - } -} diff --git a/projects/demo/src/modules/components/input-file/examples/4/index.html b/projects/demo/src/modules/components/input-file/examples/4/index.html deleted file mode 100644 index b3bce19acadf..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/4/index.html +++ /dev/null @@ -1,13 +0,0 @@ -
-
- Sync working with files, no loading state -
- -
diff --git a/projects/demo/src/modules/components/input-file/examples/4/index.less b/projects/demo/src/modules/components/input-file/examples/4/index.less deleted file mode 100644 index bc6c3e37f938..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/4/index.less +++ /dev/null @@ -1,7 +0,0 @@ -:host { - display: block; -} - -.container { - max-width: 35rem; -} diff --git a/projects/demo/src/modules/components/input-file/examples/4/index.ts b/projects/demo/src/modules/components/input-file/examples/4/index.ts deleted file mode 100644 index 43412764842e..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/4/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-input-file-example-4', - templateUrl: './index.html', - styleUrls: ['./index.less'], - changeDetection, - encapsulation, -}) -export class TuiInputFileExample4 { - files: readonly File[] = []; -} diff --git a/projects/demo/src/modules/components/input-file/examples/import/import-module.md b/projects/demo/src/modules/components/input-file/examples/import/import-module.md deleted file mode 100644 index b0bdc55bce86..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/import/import-module.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import {TuiInputFileModule} from '@taiga-ui/kit'; - -// ... - -@NgModule({ - imports: [ - // ... - TuiInputFileModule, - ], - // ... -}) -export class MyModule {} -``` diff --git a/projects/demo/src/modules/components/input-file/examples/import/insert-template.md b/projects/demo/src/modules/components/input-file/examples/import/insert-template.md deleted file mode 100644 index d5990cc493ca..000000000000 --- a/projects/demo/src/modules/components/input-file/examples/import/insert-template.md +++ /dev/null @@ -1,3 +0,0 @@ -```html - -``` diff --git a/projects/demo/src/modules/components/input-file/input-file.component.ts b/projects/demo/src/modules/components/input-file/input-file.component.ts deleted file mode 100644 index b46ff3af5ff7..000000000000 --- a/projects/demo/src/modules/components/input-file/input-file.component.ts +++ /dev/null @@ -1,74 +0,0 @@ -import {Component, forwardRef} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiSizeL} from '@taiga-ui/core'; -import {TuiFileLike} from '@taiga-ui/kit'; - -import {AbstractExampleTuiControl} from '../abstract/control'; -import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; - -@Component({ - selector: 'example-tui-input-file', - templateUrl: './input-file.template.html', - changeDetection, - providers: [ - { - provide: ABSTRACT_PROPS_ACCESSOR, - useExisting: forwardRef(() => ExampleTuiInputFileComponent), - }, - ], -}) -export class ExampleTuiInputFileComponent extends AbstractExampleTuiControl { - readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md'); - readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md'); - - readonly example1: TuiDocExample = { - TypeScript: import('!!raw-loader!./examples/1/index.ts'), - HTML: import('!!raw-loader!./examples/1/index.html'), - }; - - readonly example2: TuiDocExample = { - TypeScript: import('!!raw-loader!./examples/2/index.ts'), - HTML: import('!!raw-loader!./examples/2/index.html'), - }; - - readonly example3: TuiDocExample = { - TypeScript: import('!!raw-loader!./examples/3/index.ts'), - HTML: import('!!raw-loader!./examples/3/index.html'), - }; - - readonly example4: TuiDocExample = { - TypeScript: import('!!raw-loader!./examples/4/index.ts'), - HTML: import('!!raw-loader!./examples/4/index.html'), - }; - - readonly control = new FormControl(); - link = 'Choose a file'; - label = 'or drop\u00A0it\u00A0here'; - multiple = false; - showSize = true; - accept = ''; - acceptVariants = ['image/*', 'application/pdf', 'image/*,application/pdf']; - readonly maxFileSizeVariants = [100, 512000, 30 * 1000 * 1000, 2.2 * 1000 * 1000]; - readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l']; - readonly rejectedFilesVariants: ReadonlyArray = [ - [], - [ - { - name: 'test.txt', - size: 123, - content: 'File is too boring', - }, - { - name: 'Waterplea — Strays.mp3', - size: 237, - content: 'File already exists', - }, - ], - ]; - - size = this.sizeVariants[0]; - rejectedFiles = this.rejectedFilesVariants[0]; - maxFileSize = this.maxFileSizeVariants[2]; -} diff --git a/projects/demo/src/modules/components/input-file/input-file.module.ts b/projects/demo/src/modules/components/input-file/input-file.module.ts deleted file mode 100644 index 3d4f9b7f30e1..000000000000 --- a/projects/demo/src/modules/components/input-file/input-file.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc'; -import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core'; -import {TuiInputFileModule, TuiInputModule} from '@taiga-ui/kit'; - -import {TuiInputFileExample1} from './examples/1'; -import {TuiInputFileExample2} from './examples/2'; -import {TuiInputFileExample3} from './examples/3'; -import {TuiInputFileExample4} from './examples/4'; -import {ExampleTuiInputFileComponent} from './input-file.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - ReactiveFormsModule, - TuiInputFileModule, - TuiInputModule, - TuiLinkModule, - TuiNotificationModule, - TuiAddonDocModule, - RouterModule.forChild(generateRoutes(ExampleTuiInputFileComponent)), - ], - declarations: [ - ExampleTuiInputFileComponent, - TuiInputFileExample1, - TuiInputFileExample2, - TuiInputFileExample3, - TuiInputFileExample4, - ], - exports: [ExampleTuiInputFileComponent], -}) -export class ExampleTuiInputFileModule {} diff --git a/projects/demo/src/modules/components/input-file/input-file.template.html b/projects/demo/src/modules/components/input-file/input-file.template.html deleted file mode 100644 index 85259c87ac67..000000000000 --- a/projects/demo/src/modules/components/input-file/input-file.template.html +++ /dev/null @@ -1,203 +0,0 @@ - - -

An input for upload one or several files. It uses native input file abilities.

- - - Deprecated - . Use - InputFiles - from - - TuiInputFilesModule - - - - - - - - - - - - - - - - - - - - - - - - - - - Disabled state (use - formControl.disable() - ) - - - Allowed formats (for native attribute - accept - ) - - - Label text - - - Link text - - - Files in loading process - - - Max file size in bytes (30 MB by default — 30 * 1000 * 1000) - - - Allows to upload several files - - - Array of files that not passed check - - - Show file size - - - Files list size - - - - - -
    -
  1. -

    - Import - TuiInputFileModule - into a module where you want to use our component -

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
- - diff --git a/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts b/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts index c1916d093ff2..7734e979609b 100644 --- a/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts +++ b/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core'; -import {TuiMarkerIconModeT} from '@taiga-ui/kit'; +import {TuiMarkerIconMode} from '@taiga-ui/kit'; @Component({ selector: 'example-tui-marker-icon', @@ -44,7 +44,7 @@ export class ExampleTuiMarkerIconComponent { size: TuiSizeXS | TuiSizeXL = this.sizeVariants[2]; - readonly modeVariants: readonly TuiMarkerIconModeT[] = [ + readonly modeVariants: readonly TuiMarkerIconMode[] = [ 'link', 'primary', 'warning', @@ -54,5 +54,5 @@ export class ExampleTuiMarkerIconComponent { 'error', ]; - mode: TuiMarkerIconModeT | null = null; + mode: TuiMarkerIconMode | null = null; } diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts index f13dfbe25418..dfe86db4003a 100644 --- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts +++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.component.ts @@ -4,8 +4,8 @@ import {TuiDocExample} from '@taiga-ui/addon-doc'; import { TuiAutofillFieldName, TuiContextWithImplicit, - TuiInputModeT, - TuiInputTypeT, + TuiInputMode, + TuiInputType, } from '@taiga-ui/cdk'; import { TuiDirection, @@ -75,7 +75,7 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt iconAlign: TuiHorizontalDirection = this.iconAlignVariants[1]; - readonly typeVariants: readonly TuiInputTypeT[] = [ + readonly typeVariants: readonly TuiInputType[] = [ 'text', 'email', 'password', @@ -83,7 +83,7 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt 'url', ]; - type: TuiInputTypeT = 'text'; + type: TuiInputType = 'text'; cleaner = false; @@ -118,7 +118,7 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt autocomplete: TuiAutofillFieldName | '' = ''; - readonly inputModeVariants: readonly TuiInputModeT[] = ['text', 'numeric']; + readonly inputModeVariants: readonly TuiInputMode[] = ['text', 'numeric']; inputMode = this.inputModeVariants[0]; diff --git a/projects/demo/src/modules/components/stepper/stepper.component.ts b/projects/demo/src/modules/components/stepper/stepper.component.ts index 0ec0909dbb63..349c641bb3b3 100644 --- a/projects/demo/src/modules/components/stepper/stepper.component.ts +++ b/projects/demo/src/modules/components/stepper/stepper.component.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiOrientationT} from '@taiga-ui/core'; -import {TuiStepStateT} from '@taiga-ui/kit'; +import {TuiStepState} from '@taiga-ui/kit'; @Component({ selector: 'example-tui-stepper', @@ -33,7 +33,7 @@ export class ExampleTuiStepperComponent { icon = this.iconVariants[0]; - readonly stateVariants: TuiStepStateT[] = ['normal', 'pass', 'error']; + readonly stateVariants: TuiStepState[] = ['normal', 'pass', 'error']; - state: TuiStepStateT = this.stateVariants[0]; + state: TuiStepState = this.stateVariants[0]; } diff --git a/projects/demo/src/modules/components/tag/tag.component.ts b/projects/demo/src/modules/components/tag/tag.component.ts index 3f319c54ea1e..e7e0d64359d4 100644 --- a/projects/demo/src/modules/components/tag/tag.component.ts +++ b/projects/demo/src/modules/components/tag/tag.component.ts @@ -2,7 +2,7 @@ import {Component, TemplateRef, ViewChild} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {RawLoaderContent, TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; -import {TuiStatusT} from '@taiga-ui/kit'; +import {TuiStatus} from '@taiga-ui/kit'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @Component({ @@ -73,7 +73,7 @@ export class ExampleTuiTagComponent { maxLength: number | null = null; - readonly statusVariants: readonly TuiStatusT[] = [ + readonly statusVariants: readonly TuiStatus[] = [ 'default', 'primary', 'custom', diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts index e464f0971dd8..a297b7c69554 100644 --- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts +++ b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts @@ -8,7 +8,7 @@ import { TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; -import {TuiDropdownPositionT} from '@taiga-ui/kit'; +import {TuiDropdownPosition} from '@taiga-ui/kit'; @Component({ selector: 'example-tui-dropdown-selection', @@ -31,7 +31,7 @@ export class ExampleTuiDropdownSelectionComponent { LESS: import('!!raw-loader!./examples/2/index.less'), }; - positionVariants: TuiDropdownPositionT[] = ['selection', 'word', 'tag']; + positionVariants: TuiDropdownPosition[] = ['selection', 'word', 'tag']; open = false; diff --git a/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts b/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts index 649dd2b17f6c..3ac162e45692 100644 --- a/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts +++ b/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiAutofillFieldName, TuiInputModeT, TuiInputTypeT} from '@taiga-ui/cdk'; +import {TuiAutofillFieldName, TuiInputMode, TuiInputType} from '@taiga-ui/cdk'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; @Component({ @@ -21,11 +21,11 @@ export class ExampleTuiTextfieldControllerComponent { readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; - readonly inputModeVariants: readonly TuiInputModeT[] = ['text', 'numeric']; + readonly inputModeVariants: readonly TuiInputMode[] = ['text', 'numeric']; readonly maxLengthVariants: readonly number[] = [10]; - readonly typeVariants: readonly TuiInputTypeT[] = [ + readonly typeVariants: readonly TuiInputType[] = [ 'text', 'email', 'password', @@ -33,7 +33,7 @@ export class ExampleTuiTextfieldControllerComponent { 'url', ]; - type: TuiInputTypeT = this.typeVariants[0]; + type: TuiInputType = this.typeVariants[0]; readonly customContentVariants = ['Bell']; diff --git a/projects/kit/components/badge/badge.component.ts b/projects/kit/components/badge/badge.component.ts index ac0afea1d855..1fec83d4fd05 100644 --- a/projects/kit/components/badge/badge.component.ts +++ b/projects/kit/components/badge/badge.component.ts @@ -7,7 +7,7 @@ import { } from '@angular/core'; import {isNumber, tuiDefaultProp} from '@taiga-ui/cdk'; import {MODE_PROVIDER, TUI_MODE, TuiBrightness, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; -import {TuiStatusT} from '@taiga-ui/kit/types'; +import {TuiStatus} from '@taiga-ui/kit/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -34,7 +34,7 @@ export class TuiBadgeComponent { @Input() @HostBinding('attr.data-tui-host-status') @tuiDefaultProp() - status: TuiStatusT = 'default'; + status: TuiStatus = 'default'; @Input() @HostBinding('class._hoverable') diff --git a/projects/kit/components/badge/test/badge.component.spec.ts b/projects/kit/components/badge/test/badge.component.spec.ts index b5b427d0d7ef..785134b6d727 100644 --- a/projects/kit/components/badge/test/badge.component.spec.ts +++ b/projects/kit/components/badge/test/badge.component.spec.ts @@ -1,7 +1,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TuiSizeL} from '@taiga-ui/core'; -import {TuiStatusT} from '@taiga-ui/kit/types'; +import {TuiStatus} from '@taiga-ui/kit/types'; import {configureTestSuite} from '@taiga-ui/testing'; import {TuiBadgeComponent} from '../badge.component'; @@ -26,7 +26,7 @@ describe('Badge', () => { size: TuiSizeL = 'm'; value!: number | string; - status: TuiStatusT = 'default'; + status: TuiStatus = 'default'; } let fixture: ComponentFixture; diff --git a/projects/kit/components/badged-content/badged-content.component.ts b/projects/kit/components/badged-content/badged-content.component.ts index c232dcd32f25..8f891fd6b4cb 100644 --- a/projects/kit/components/badged-content/badged-content.component.ts +++ b/projects/kit/components/badged-content/badged-content.component.ts @@ -1,7 +1,7 @@ import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core'; import {isNumber, px, tuiDefaultProp} from '@taiga-ui/cdk'; import {sizeBigger, TuiSizeL, TuiSizeS, TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; -import {TuiStatusT} from '@taiga-ui/kit/types'; +import {TuiStatus} from '@taiga-ui/kit/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; const BADGE_SIZE: {[key: string]: TuiSizeS | TuiSizeL} = { @@ -85,7 +85,7 @@ export class TuiBadgedContentComponent { return typeof content.valueOf() === 'string'; } - getStatus(color: string): TuiStatusT { + getStatus(color: string): TuiStatus { return color ? 'custom' : 'primary'; } } diff --git a/projects/kit/components/files/file/file.component.ts b/projects/kit/components/files/file/file.component.ts index 7d4e27782419..11f4a4cdc536 100644 --- a/projects/kit/components/files/file/file.component.ts +++ b/projects/kit/components/files/file/file.component.ts @@ -10,9 +10,9 @@ import { import {DomSanitizer, SafeValue} from '@angular/platform-browser'; import {TUI_IS_MOBILE, tuiDefaultProp, tuiPure} from '@taiga-ui/cdk'; import {TuiSizeL} from '@taiga-ui/core'; -import {TuiFileState, TuiFileStateT} from '@taiga-ui/kit/enums'; import {TuiFileLike} from '@taiga-ui/kit/interfaces'; import {TUI_DIGITAL_INFORMATION_UNITS, TUI_FILE_TEXTS} from '@taiga-ui/kit/tokens'; +import {TuiFileState} from '@taiga-ui/kit/types'; import {formatSize} from '@taiga-ui/kit/utils/files'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable, of} from 'rxjs'; @@ -34,7 +34,7 @@ export class TuiFileComponent { @Input() @tuiDefaultProp() - state: TuiFileStateT = 'normal'; + state: TuiFileState = 'normal'; @Input() @tuiDefaultProp() @@ -72,15 +72,15 @@ export class TuiFileComponent { } get isLoading(): boolean { - return this.state === TuiFileState.Loading; + return this.state === 'loading'; } get isError(): boolean { - return this.state === TuiFileState.Error; + return this.state === 'error'; } get isDeleted(): boolean { - return this.state === TuiFileState.Deleted; + return this.state === 'deleted'; } get allowDelete(): boolean { @@ -88,14 +88,14 @@ export class TuiFileComponent { } get icon(): string { - if (this.state === TuiFileState.Normal && this.isBig) { + if (this.state === 'normal' && this.isBig) { return 'tuiIconDefaultDocLarge'; } switch (this.state) { - case TuiFileState.Deleted: + case 'deleted': return 'tuiIconTrashLarge'; - case TuiFileState.Error: + case 'error': return 'tuiIconAlertCircleLarge'; default: return 'tuiIconCheckCircleLarge'; @@ -133,11 +133,11 @@ export class TuiFileComponent { @tuiPure private calculateContent$( - state: TuiFileStateT, + state: TuiFileState, file: TuiFileLike, fileTexts$: Observable>, ): Observable { - return state === TuiFileState.Error && !file.content + return state === 'error' && !file.content ? fileTexts$.pipe(map(texts => texts.loadingError)) : of(this.file.content || ''); } diff --git a/projects/kit/components/index.ts b/projects/kit/components/index.ts index 295f8968c266..bf165e81d58c 100644 --- a/projects/kit/components/index.ts +++ b/projects/kit/components/index.ts @@ -22,7 +22,6 @@ export * from '@taiga-ui/kit/components/input-count'; export * from '@taiga-ui/kit/components/input-date'; export * from '@taiga-ui/kit/components/input-date-range'; export * from '@taiga-ui/kit/components/input-date-time'; -export * from '@taiga-ui/kit/components/input-file'; export * from '@taiga-ui/kit/components/input-files'; export * from '@taiga-ui/kit/components/input-inline'; export * from '@taiga-ui/kit/components/input-month'; diff --git a/projects/kit/components/input-file/file/file.component.ts b/projects/kit/components/input-file/file/file.component.ts deleted file mode 100644 index 80cc1cb40a9e..000000000000 --- a/projects/kit/components/input-file/file/file.component.ts +++ /dev/null @@ -1,162 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - EventEmitter, - HostBinding, - Inject, - Input, - Output, -} from '@angular/core'; -import {DomSanitizer, SafeValue} from '@angular/platform-browser'; -import {TUI_IS_MOBILE, tuiDefaultProp, tuiPure} from '@taiga-ui/cdk'; -import {TuiSizeL} from '@taiga-ui/core'; -import {TuiFileState, TuiFileStateT} from '@taiga-ui/kit/enums'; -import {TuiFileLike} from '@taiga-ui/kit/interfaces'; -import {TUI_DIGITAL_INFORMATION_UNITS, TUI_FILE_TEXTS} from '@taiga-ui/kit/tokens'; -import {formatSize} from '@taiga-ui/kit/utils/files'; -import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; -import {Observable, of} from 'rxjs'; -import {map} from 'rxjs/operators'; - -// @dynamic -@Component({ - selector: 'tui-file', - changeDetection: ChangeDetectionStrategy.OnPush, - templateUrl: './file.template.html', - styleUrls: ['./file.style.less'], -}) -export class TuiFileOldComponent { - @Input() - @tuiDefaultProp() - file: TuiFileLike = {name: ''}; - - @Input() - @tuiDefaultProp() - state: TuiFileStateT | TuiFileState = TuiFileState.Normal; - - @Input() - @tuiDefaultProp() - size: TuiSizeL = 'm'; - - @Input() - @tuiDefaultProp() - allowDelete = true; - - @Input() - @tuiDefaultProp() - showSize = true; - - @Output() - readonly fileRemoved = new EventEmitter(); - - @HostBinding('class._focused') - focused = false; - - constructor( - @Inject(TUI_IS_MOBILE) readonly isMobile: boolean, - @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer, - @Inject(TUI_FILE_TEXTS) - readonly fileTexts$: Observable< - Record<'loadingError' | 'preview' | 'remove', string> - >, - @Inject(TUI_DIGITAL_INFORMATION_UNITS) - private readonly units$: Observable<[string, string, string]>, - ) {} - - get preview(): SafeValue { - return this.isBig ? this.createPreview(this.file, this.sanitizer) : ''; - } - - get isBig(): boolean { - return this.size === 'l'; - } - - get isLoading(): boolean { - return this.state === TuiFileState.Loading; - } - - get isError(): boolean { - return this.state === TuiFileState.Error; - } - - get isDeleted(): boolean { - return this.state === TuiFileState.Deleted; - } - - get icon(): string { - if (this.state === TuiFileState.Normal && this.isBig) { - return 'tuiIconDefaultDocLarge'; - } - - switch (this.state) { - case TuiFileState.Deleted: - return 'tuiIconTrashLarge'; - case TuiFileState.Error: - return 'tuiIconAlertCircleLarge'; - default: - return 'tuiIconCheckCircleLarge'; - } - } - - @HostBinding('class._link') - get src(): string { - return this.file.src || ''; - } - - get name(): string { - return this.file.name.split('.').slice(0, -1).join('.'); - } - - get type(): string { - return `.${this.file.name.split('.').pop()}` || ''; - } - - get content$(): Observable { - return this.calculateContent$(this.state, this.file, this.fileTexts$); - } - - get fileSize$(): Observable { - return this.calculateFileSize$(this.file, this.units$); - } - - onRemoveClick(): void { - this.fileRemoved.emit(); - } - - onFocusVisible(focusVisible: boolean): void { - this.focused = focusVisible; - } - - @tuiPure - private calculateContent$( - state: keyof Record | string | TuiFileState, - file: TuiFileLike, - fileTexts$: Observable>, - ): Observable { - return state === TuiFileState.Error && !file.content - ? fileTexts$.pipe(map(texts => texts.loadingError)) - : of(this.file.content || ''); - } - - @tuiPure - private calculateFileSize$( - file: TuiFileLike, - units$: Observable<[string, string, string]>, - ): Observable { - return units$.pipe(map(units => formatSize(units, file.size))); - } - - @tuiPure - private createPreview(file: TuiFileLike, sanitizer: DomSanitizer): SafeValue { - if (file.src) { - return file.src; - } - - // TODO: iframe warning - if (file instanceof File && file.type && file.type.startsWith('image/')) { - return sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)); - } - - return ''; - } -} diff --git a/projects/kit/components/input-file/file/file.style.less b/projects/kit/components/input-file/file/file.style.less deleted file mode 100644 index 96bf7617e778..000000000000 --- a/projects/kit/components/input-file/file/file.style.less +++ /dev/null @@ -1,133 +0,0 @@ -@import 'taiga-ui-local'; - -:host { - position: relative; - display: flex; - font: var(--tui-font-text-m); - border: 1px solid var(--tui-base-03); - border-radius: var(--tui-radius-m); - - &[data-mode='onDark'] { - color: var(--tui-text-01-night); - } - - &:not(._link) { - padding: 0.5625rem 2.1875rem 0.5625rem 0.5625rem; - } - - &:hover .remove { - opacity: 1; - } - - &._focused { - border-color: var(--tui-focus); - box-shadow: 0 0 0 1px inset var(--tui-focus); - } -} - -.link { - display: flex; - flex: 1; - padding: 0.5625rem 2.1875rem 0.5625rem 0.5625rem; - text-decoration: none; - outline: none; - cursor: pointer; - color: var(--tui-text-01); - max-width: ~'calc(100% - 2.75rem)'; - - &:hover { - background-color: var(--tui-base-02); - } -} - -.preview { - position: relative; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - width: 1.5rem; - height: 1.5rem; - margin-right: 0.75rem; - border-radius: var(--tui-radius-m); - overflow: hidden; - color: rgba(0, 0, 0, 0.24); - - &_big { - width: 4rem; - height: 4rem; - margin-right: 1rem; - - &:before { - .fullsize(); - content: ''; - background: #333; - opacity: 0.08; - } - } -} - -.image { - max-width: 100%; - max-height: 100%; -} - -.loader { - .fullsize(); -} - -.icon { - .fullsize(); - color: var(--tui-success-fill); - - &_error { - color: var(--tui-error-fill); - } - - &_deleted { - color: var(--tui-base-06); - } -} - -.remove { - .transition(opacity); - position: absolute; - top: 0.625rem; - right: 0.625rem; - opacity: 0; - - &:focus, - &_mobile { - opacity: 1; - } -} - -.wrapper { - display: flex; - flex-direction: column; - justify-content: center; - overflow: hidden; -} - -.text { - display: flex; -} - -.size { - flex-shrink: 0; - opacity: var(--tui-disabled-opacity); - margin-left: 2 * @space; -} - -.type { - flex-shrink: 0; -} - -.name { - .text-overflow(); -} - -.content { - font: var(--tui-font-text-s); - color: var(--tui-error-fill); -} diff --git a/projects/kit/components/input-file/file/file.template.html b/projects/kit/components/input-file/file/file.template.html deleted file mode 100644 index 837c49ac5ecb..000000000000 --- a/projects/kit/components/input-file/file/file.template.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - - - - - - -
- - - - - - - -
-
-
-
- {{ name }} -
-
- {{ type }} -
-
- {{ fileSize }} -
-
-
-
- - - - diff --git a/projects/kit/components/input-file/index.ts b/projects/kit/components/input-file/index.ts deleted file mode 100644 index f04fdcc02877..000000000000 --- a/projects/kit/components/input-file/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './file/file.component'; -export * from './input-file.component'; -export * from './input-file.module'; diff --git a/projects/kit/components/input-file/input-file.component.ts b/projects/kit/components/input-file/input-file.component.ts deleted file mode 100644 index 991148a019f8..000000000000 --- a/projects/kit/components/input-file/input-file.component.ts +++ /dev/null @@ -1,373 +0,0 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - EventEmitter, - forwardRef, - Inject, - Input, - Optional, - Output, - Self, - ViewChild, -} from '@angular/core'; -import {NgControl} from '@angular/forms'; -import { - AbstractTuiNullableControl, - EMPTY_ARRAY, - isNativeFocused, - TUI_FOCUSABLE_ITEM_ACCESSOR, - TUI_IS_MOBILE, - tuiDefaultProp, - TuiFocusableElementAccessor, - TuiNativeFocusableElement, - tuiPure, -} from '@taiga-ui/cdk'; -import { - MODE_PROVIDER, - TUI_MODE, - TuiAppearance, - TuiBrightness, - TuiSizeL, -} from '@taiga-ui/core'; -import {TuiFileLike} from '@taiga-ui/kit/interfaces'; -import {TUI_DIGITAL_INFORMATION_UNITS, TUI_INPUT_FILE_TEXTS} from '@taiga-ui/kit/tokens'; -import {formatSize} from '@taiga-ui/kit/utils/files'; -import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; -import {Observable, of} from 'rxjs'; -import {map} from 'rxjs/operators'; - -const DEFAULT_MAX_SIZE = 30 * 1000 * 1000; // 30 MB - -// @dynamic -@Component({ - selector: 'tui-input-file', - templateUrl: './input-file.template.html', - styleUrls: ['./input-file.style.less'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - MODE_PROVIDER, - { - provide: TUI_FOCUSABLE_ITEM_ACCESSOR, - useExisting: forwardRef(() => TuiInputFileComponent), - }, - ], -}) -export class TuiInputFileComponent - extends AbstractTuiNullableControl - implements TuiFocusableElementAccessor -{ - private dataTransfer: DataTransfer | null = null; - - @Input() - @tuiDefaultProp() - link: PolymorpheusContent = ''; - - @Input() - @tuiDefaultProp() - label: PolymorpheusContent = ''; - - @Input() - @tuiDefaultProp() - accept = ''; - - @Input() - @tuiDefaultProp() - multiple = false; - - @Input() - @tuiDefaultProp() - size: TuiSizeL = 'm'; - - @Input() - @tuiDefaultProp() - showSize = true; - - @Input() - @tuiDefaultProp() - maxFileSize = DEFAULT_MAX_SIZE; - - @Input() - @tuiDefaultProp() - loadingFiles: readonly TuiFileLike[] = []; - - @Input() - @tuiDefaultProp() - rejectedFiles: readonly TuiFileLike[] = []; - - @Output() - rejectedFilesChange = new EventEmitter(); - - @ViewChild('input') - readonly input?: ElementRef; - - constructor( - @Optional() - @Self() - @Inject(NgControl) - control: NgControl | null, - @Inject(ChangeDetectorRef) - changeDetectorRef: ChangeDetectorRef, - @Inject(TUI_IS_MOBILE) - readonly isMobile: boolean, - @Inject(TUI_INPUT_FILE_TEXTS) - readonly inputFileTexts$: Observable< - Record< - | 'defaultLabelSingle' - | 'defaultLabelMultiple' - | 'defaultLinkSingle' - | 'defaultLinkMultiple' - | 'maxSizeRejectionReason' - | 'formatRejectionReason' - | 'drop' - | 'dropMultiple', - string - > - >, - @Inject(TUI_MODE) readonly mode$: Observable, - @Inject(TUI_DIGITAL_INFORMATION_UNITS) - readonly units$: Observable<[string, string, string]>, - ) { - super(control, changeDetectorRef); - } - - get nativeFocusableElement(): TuiNativeFocusableElement | null { - return this.input ? this.input.nativeElement : null; - } - - get focused(): boolean { - return isNativeFocused(this.nativeFocusableElement); - } - - get computedLink$(): Observable { - return this.computeLink$(this.fileDragged, this.multiple, this.link); - } - - get computedLabel$(): Observable { - return this.computeLabel$( - this.isMobile, - this.fileDragged, - this.multiple, - this.label, - ); - } - - // @bad TODO: 3.0 refactor after IE is dropped - get fileDragged(): boolean { - return ( - !!this.dataTransfer && - Array.prototype.indexOf.call(this.dataTransfer.types, 'Files') !== -1 - ); - } - - get acceptArray(): readonly string[] { - return this.getAcceptArray(this.accept); - } - - get arrayValue(): readonly TuiFileLike[] { - return this.getValueArray(this.value); - } - - get readyFiles(): readonly TuiFileLike[] { - return this.getReadyFiles(this.arrayValue, this.loadingFiles); - } - - get computedLoading(): readonly TuiFileLike[] { - return this.getLoadingFiles(this.arrayValue, this.loadingFiles); - } - - get hasFiles(): boolean { - return !!this.rejectedFiles.length || !!this.arrayValue.length; - } - - onHovered(hovered: boolean): void { - this.updateHovered(hovered); - } - - onFocused(focused: boolean): void { - this.updateFocused(focused); - } - - onPressed(pressed: boolean): void { - this.updatePressed(pressed); - } - - // TODO: refactor i18n messages - onFilesSelected( - input: HTMLInputElement, - texts: Record<'maxSizeRejectionReason' | 'formatRejectionReason', string>, - units: [string, string, string], - ): void { - this.processSelectedFiles(input.files, texts, units); - input.value = ''; - } - - onDropped( - event: DataTransfer, - texts: Record<'maxSizeRejectionReason' | 'formatRejectionReason', string>, - units: [string, string, string], - ): void { - this.processSelectedFiles(event.files, texts, units); - } - - onDragOver(dataTransfer: DataTransfer | null): void { - this.dataTransfer = dataTransfer; - } - - removeFile(removedFile: TuiFileLike): void { - this.updateValue( - this.multiple ? this.arrayValue.filter(file => file !== removedFile) : null, - ); - } - - removeRejectedFile(removedFile: TuiFileLike): void { - this.updateRejectedFiles(this.rejectedFiles.filter(file => file !== removedFile)); - } - - getAppearance(mode: null | unknown): string { - return mode === null ? '' : TuiAppearance.Outline; - } - - @tuiPure - private computeLink$( - fileDragged: boolean, - multiple: boolean, - link: PolymorpheusContent, - ): Observable { - if (fileDragged) { - return of(''); - } - - return this.inputFileTexts$.pipe( - map(texts => - multiple && link === '' - ? texts.defaultLinkMultiple - : link || texts.defaultLinkSingle, - ), - ); - } - - @tuiPure - private computeLabel$( - isMobile: boolean, - fileDragged: boolean, - multiple: boolean, - label: PolymorpheusContent, - ): Observable { - if (isMobile) { - return of(''); - } - - if (fileDragged) { - return this.inputFileTexts$.pipe( - map(texts => (multiple ? texts.dropMultiple : texts.drop)), - ); - } - - return this.inputFileTexts$.pipe( - map(texts => - multiple && label === '' - ? texts.defaultLabelMultiple - : label || texts.defaultLabelSingle, - ), - ); - } - - @tuiPure - private getValueArray( - value: TuiFileLike | readonly TuiFileLike[] | null, - ): readonly TuiFileLike[] { - if (!value) { - return EMPTY_ARRAY; - } - - return value instanceof Array ? value : [value]; - } - - @tuiPure - private getReadyFiles( - value: readonly TuiFileLike[], - loading: readonly TuiFileLike[], - ): readonly TuiFileLike[] { - return value.filter(file => !loading.includes(file)); - } - - @tuiPure - private getLoadingFiles( - value: readonly TuiFileLike[], - loading: readonly TuiFileLike[], - ): readonly TuiFileLike[] { - return loading.filter(file => value.includes(file)); - } - - @tuiPure - private getAcceptArray(accept: string): readonly string[] { - return accept - .toLowerCase() - .split(',') - .map(format => format.trim()); - } - - private processSelectedFiles( - files: FileList | null, - texts: Record<'maxSizeRejectionReason' | 'formatRejectionReason', string>, - units: [string, string, string], - ): void { - // IE11 after selecting a file through the open dialog generates a second event passing an empty FileList. - if (files === null || files.length === 0) { - return; - } - - const newFiles = this.multiple ? Array.from(files) : [files[0]]; - const tooBigFiles = newFiles.filter(file => file.size > this.maxFileSize); - const wrongFormatFiles = newFiles.filter( - file => !this.isFormatAcceptable(file) && !tooBigFiles.includes(file), - ); - const acceptedFiles = newFiles.filter( - file => !tooBigFiles.includes(file) && !wrongFormatFiles.includes(file), - ); - - this.updateRejectedFiles([ - ...tooBigFiles.map(file => ({ - name: file.name, - type: file.type, - size: file.size, - content: - texts.maxSizeRejectionReason + formatSize(units, this.maxFileSize), - })), - ...wrongFormatFiles.map(file => ({ - name: file.name, - type: file.type, - size: file.size, - content: texts.formatRejectionReason, - })), - ]); - this.updateValue( - this.multiple - ? [...this.arrayValue, ...acceptedFiles] - : acceptedFiles[0] || null, - ); - } - - private isFormatAcceptable(file: File): boolean { - if (!this.accept) { - return true; - } - - const extension = `.${(file.name.split('.').pop() || '').toLowerCase()}`; - - return this.acceptArray.some( - format => - format === extension || - format === file.type || - (format.split('/')[1] === '*' && - file.type.split('/')[0] === format.split('/')[0]), - ); - } - - private updateRejectedFiles(rejectedFiles: readonly TuiFileLike[]): void { - this.rejectedFiles = rejectedFiles; - this.rejectedFilesChange.emit(rejectedFiles); - } -} diff --git a/projects/kit/components/input-file/input-file.module.ts b/projects/kit/components/input-file/input-file.module.ts deleted file mode 100644 index 5ec6fa07dbb0..000000000000 --- a/projects/kit/components/input-file/input-file.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import { - TuiDroppableModule, - TuiFocusableModule, - TuiFocusedModule, - TuiFocusVisibleModule, - TuiHoveredModule, - TuiLetModule, - TuiPressedModule, - TuiPreventDefaultModule, -} from '@taiga-ui/cdk'; -import { - TuiButtonModule, - TuiGroupModule, - TuiLinkModule, - TuiLoaderModule, - TuiSvgModule, - TuiWrapperModule, -} from '@taiga-ui/core'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {TuiFileOldComponent} from './file/file.component'; -import {TuiInputFileComponent} from './input-file.component'; - -@NgModule({ - imports: [ - CommonModule, - PolymorpheusModule, - TuiLetModule, - TuiFocusedModule, - TuiFocusVisibleModule, - TuiPressedModule, - TuiHoveredModule, - TuiFocusableModule, - TuiDroppableModule, - TuiWrapperModule, - TuiSvgModule, - TuiLinkModule, - TuiLoaderModule, - TuiButtonModule, - TuiPreventDefaultModule, - TuiGroupModule, - ], - declarations: [TuiFileOldComponent, TuiInputFileComponent], - exports: [TuiInputFileComponent], -}) -export class TuiInputFileModule {} diff --git a/projects/kit/components/input-file/input-file.style.less b/projects/kit/components/input-file/input-file.style.less deleted file mode 100644 index d645dba96eb3..000000000000 --- a/projects/kit/components/input-file/input-file.style.less +++ /dev/null @@ -1,85 +0,0 @@ -@import 'taiga-ui-local'; - -:host { - display: block; - font: var(--tui-font-text-m); - word-wrap: break-word; - color: var(--tui-text-02); -} - -.native { - .fullsize(); - opacity: 0; - cursor: pointer; - - &::-webkit-file-upload-button { - display: none; - } -} - -.inline { - display: inline; -} - -.wrapper { - display: flex; - flex: 1; - justify-content: center; - align-items: center; - min-height: var(--tui-height-l); - border-radius: var(--tui-radius-m); - padding: 1rem 0.5rem; - box-sizing: border-box; - - &:after { - border: 1px dashed; - color: var(--tui-link); - } - - &_mobile:after { - border-style: solid; - } - - &_has-files { - margin-bottom: 2 * @space; - } - - &[data-state='hovered'] { - background: var(--tui-secondary); - - &:after { - color: var(--tui-link-hover); - } - } - - &[data-state='pressed'] { - background: var(--tui-secondary-hover); - } - - &[data-state='readonly'] { - pointer-events: none; - - &:after { - color: var(--tui-text-03); - } - } - - &[data-state='disabled'] { - opacity: var(--tui-disabled-opacity); - pointer-events: none; - - &:after { - color: var(--tui-text-03); - } - } - - &._focused:after { - border-style: solid; - border-width: 2px; - color: var(--tui-focus); - } -} - -.files { - display: flex; -} diff --git a/projects/kit/components/input-file/input-file.template.html b/projects/kit/components/input-file/input-file.template.html deleted file mode 100644 index dd130daba969..000000000000 --- a/projects/kit/components/input-file/input-file.template.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - -
- - - -
diff --git a/projects/kit/components/input-file/package.json b/projects/kit/components/input-file/package.json deleted file mode 100644 index 026899ee050c..000000000000 --- a/projects/kit/components/input-file/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "index.ts", - "styleIncludePaths": [ - "../../../core/styles" - ] - } - } -} diff --git a/projects/kit/components/input-file/test/input-file.component.spec.ts b/projects/kit/components/input-file/test/input-file.component.spec.ts deleted file mode 100644 index 1bad9fbc5216..000000000000 --- a/projects/kit/components/input-file/test/input-file.component.spec.ts +++ /dev/null @@ -1,246 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {FormsModule} from '@angular/forms'; -import {TuiSizeL} from '@taiga-ui/core'; -import {configureTestSuite, TuiPageObject} from '@taiga-ui/testing'; - -import {TuiFileState} from '../../../enums/file-state'; -import {TuiFileLike} from '../../../interfaces/file-like'; -import {TuiInputFileComponent} from '../input-file.component'; -import {TuiInputFileModule} from '../input-file.module'; - -describe('InputFile', () => { - @Component({ - template: ` - - `, - }) - class TestComponent { - @ViewChild(TuiInputFileComponent, {static: true}) - component!: TuiInputFileComponent; - - files: readonly TuiFileLike[] = [ - { - name: 'test.txt', - size: 237, - }, - ]; - - loadingFiles: readonly TuiFileLike[] = []; - rejectedFiles: readonly TuiFileLike[] = []; - state = TuiFileState.Normal; - showSize = true; - readOnly = false; - disabled = false; - size: TuiSizeL = 'm'; - accept = 'image/*,.txt'; - } - - let fixture: ComponentFixture; - let testComponent: TestComponent; - let pageObject: TuiPageObject; - - configureTestSuite(() => { - TestBed.configureTestingModule({ - imports: [FormsModule, TuiInputFileModule], - declarations: [TestComponent], - }); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(TestComponent); - pageObject = new TuiPageObject(fixture); - testComponent = fixture.componentInstance; - }); - - describe('file', () => { - beforeEach(() => { - fixture.detectChanges(); - }); - - it('has delete button', () => { - expect(pageObject.getByAutomationId('tui-file__remove')).toBeTruthy(); - }); - - it('delete button is not present in readOnly mode', () => { - testComponent.readOnly = true; - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-file__remove')).toBeFalsy(); - }); - - it('delete button is not present when control is disabled', async () => { - testComponent.disabled = true; - fixture.autoDetectChanges(true); - await fixture.whenStable(); - expect(pageObject.getByAutomationId('tui-file__remove')).toBeFalsy(); - }); - - it('has no message', () => { - expect(pageObject.getByAutomationId('tui-file__content')).toBeFalsy(); - }); - - it('has default message for failed file', () => { - testComponent.rejectedFiles = testComponent.files; - testComponent.files = []; - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-file__content')).toBeTruthy(); - }); - - it('has no spinner', () => { - expect(pageObject.getByAutomationId('tui-file__loading')).toBeFalsy(); - }); - - it('has spinner', async () => { - testComponent.loadingFiles = testComponent.files; - fixture.autoDetectChanges(true); - await fixture.whenStable(); - expect(pageObject.getByAutomationId('tui-file__loader')).toBeTruthy(); - }); - - it('has size', () => { - expect( - pageObject - .getByAutomationId('tui-file__size')! - .nativeElement.textContent.trim(), - ).toBe('237 B'); - }); - - it('size is hidden', () => { - testComponent.showSize = false; - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-file__size')).toBeFalsy(); - }); - - it('has name', () => { - expect( - pageObject - .getByAutomationId('tui-file__name')! - .nativeElement.textContent.trim(), - ).toBe('test'); - }); - - it('has extension', () => { - expect( - pageObject - .getByAutomationId('tui-file__type')! - .nativeElement.textContent.trim(), - ).toBe('.txt'); - }); - }); - - it('does not show loading files that are not in control', () => { - testComponent.loadingFiles = [ - { - name: 'test.txt', - size: 237, - }, - ]; - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-file__loading')).toBeFalsy(); - }); - - it('rejects incorrect formats', () => { - fixture.componentInstance.files = []; - fixture.detectChanges(); - - const text: TuiFileLike = {name: 'test.txt', type: 'text'}; - const image: TuiFileLike = {name: 'test.png', type: 'image/png'}; - const error: TuiFileLike = {name: 'test.hap', type: 'wtf'}; - - const files: FileList = [text, image, error] as unknown as FileList; - - testComponent.component.onDropped( - {files: files} as unknown as DataTransfer, - { - maxSizeRejectionReason: 'File exceeds size ', - formatRejectionReason: 'Wrong file format', - }, - ['B', 'KB', 'MB'], - ); - fixture.detectChanges(); - - expect(testComponent.rejectedFiles.length).toBe(1); - expect(testComponent.files).toEqual([text, image]); - }); - - it('does not rejects formats with whitespaces', () => { - fixture.componentInstance.files = []; - fixture.componentInstance.accept = - 'application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/pdf'; - fixture.detectChanges(); - - const text: TuiFileLike = { - name: 'test.pdf', - type: 'application/pdf', - }; - - const files: FileList = [text] as unknown as FileList; - - testComponent.component.onDropped( - {files: files} as unknown as DataTransfer, - { - maxSizeRejectionReason: 'File exceeds size ', - formatRejectionReason: 'Wrong file format', - }, - ['B', 'KB', 'MB'], - ); - fixture.detectChanges(); - - expect(testComponent.rejectedFiles.length).toBe(0); - }); - - it('if no files in control, not drawing files', () => { - testComponent.files = []; - testComponent.rejectedFiles = []; - - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-input-file__error')).toBeNull(); - expect(pageObject.getByAutomationId('tui-input-file__loading')).toBeNull(); - expect(pageObject.getByAutomationId('tui-input-file__file')).toBeNull(); - }); - - it('if no files in control, but has rejectedFiles, draw files', () => { - testComponent.files = []; - testComponent.rejectedFiles = [ - { - name: 'rejected file', - }, - ]; - - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-input-file__error')).not.toBeNull(); - expect(pageObject.getByAutomationId('tui-input-file__loading')).toBeNull(); - expect(pageObject.getByAutomationId('tui-input-file__file')).toBeNull(); - }); - - it('if no rejectedFiles to drawing, but has files in control, draw files', () => { - testComponent.files = [ - { - name: 'loaded file', - }, - ]; - testComponent.rejectedFiles = []; - - fixture.detectChanges(); - - expect(pageObject.getByAutomationId('tui-input-file__error')).toBeNull(); - expect(pageObject.getByAutomationId('tui-input-file__loading')).toBeNull(); - expect(pageObject.getByAutomationId('tui-input-file__file')).not.toBeNull(); - }); -}); diff --git a/projects/kit/components/input-number/input-number.component.ts b/projects/kit/components/input-number/input-number.component.ts index be9d127675ff..ff81973c1389 100644 --- a/projects/kit/components/input-number/input-number.component.ts +++ b/projects/kit/components/input-number/input-number.component.ts @@ -21,7 +21,7 @@ import { TUI_IS_IOS, tuiDefaultProp, TuiFocusableElementAccessor, - TuiInputModeT, + TuiInputMode, TuiMapper, } from '@taiga-ui/cdk'; import { @@ -123,7 +123,7 @@ export class TuiInputNumberComponent return this.min < 0; } - get inputMode(): TuiInputModeT { + get inputMode(): TuiInputMode { if (this.isIOS && this.isNegativeAllowed) { // iphones do not have minus sign if inputMode is equal to 'numeric' / 'decimal' return 'text'; diff --git a/projects/kit/components/input-password/input-password.component.ts b/projects/kit/components/input-password/input-password.component.ts index a4632d6918f9..4e9a03a4900e 100644 --- a/projects/kit/components/input-password/input-password.component.ts +++ b/projects/kit/components/input-password/input-password.component.ts @@ -14,7 +14,7 @@ import { TUI_FOCUSABLE_ITEM_ACCESSOR, TuiContextWithImplicit, TuiFocusableElementAccessor, - TuiInputTypeT, + TuiInputType, TuiNativeFocusableElement, tuiPure, } from '@taiga-ui/cdk'; @@ -121,7 +121,7 @@ export class TuiInputPasswordComponent return this.getContext(this.textfieldSize.size); } - get inputType(): TuiInputTypeT { + get inputType(): TuiInputType { return this.isPasswordHidden || !this.interactive ? 'password' : 'text'; } diff --git a/projects/kit/components/input-phone/input-phone.component.ts b/projects/kit/components/input-phone/input-phone.component.ts index 3b81261e1dc3..da8edd5141a4 100644 --- a/projects/kit/components/input-phone/input-phone.component.ts +++ b/projects/kit/components/input-phone/input-phone.component.ts @@ -22,7 +22,7 @@ import { TuiContextWithImplicit, tuiDefaultProp, TuiFocusableElementAccessor, - TuiInputModeT, + TuiInputMode, tuiRequiredSetter, } from '@taiga-ui/cdk'; import { @@ -152,7 +152,7 @@ export class TuiInputPhoneComponent : this.search || ''; } - get inputMode(): TuiInputModeT { + get inputMode(): TuiInputMode { return this.allowText ? 'text' : 'numeric'; } diff --git a/projects/kit/components/input-tag/input-tag.component.ts b/projects/kit/components/input-tag/input-tag.component.ts index ad954cad792f..2a45d66461ab 100644 --- a/projects/kit/components/input-tag/input-tag.component.ts +++ b/projects/kit/components/input-tag/input-tag.component.ts @@ -60,7 +60,7 @@ import {TuiStringifiableItem} from '@taiga-ui/kit/classes'; import {ALLOWED_SPACE_REGEXP} from '@taiga-ui/kit/components/tag'; import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers'; import {TUI_TAG_STATUS} from '@taiga-ui/kit/tokens'; -import {TuiStatusT} from '@taiga-ui/kit/types'; +import {TuiStatus} from '@taiga-ui/kit/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {merge, Observable, Subject} from 'rxjs'; import {filter, map, mapTo, switchMap, takeUntil} from 'rxjs/operators'; @@ -176,7 +176,7 @@ export class TuiInputTagComponent this.initScrollerSubscription(scroller); } - status$: Observable = this.mode$.pipe(map(() => this.status)); + status$: Observable = this.mode$.pipe(map(() => this.status)); open = false; @@ -194,7 +194,7 @@ export class TuiInputTagComponent private readonly modeDirective: TuiModeDirective | null, @Inject(TUI_MODE) private readonly mode$: Observable, - @Inject(TUI_TAG_STATUS) private readonly tagStatus: TuiStatusT, + @Inject(TUI_TAG_STATUS) private readonly tagStatus: TuiStatus, @Inject(TUI_HINT_WATCHED_CONTROLLER) readonly hintController: TuiHintControllerDirective, @Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER) @@ -284,7 +284,7 @@ export class TuiInputTagComponent return this.hasCleaner || this.hasTooltip || !!this.icon; } - get status(): TuiStatusT { + get status(): TuiStatus { return this.modeDirective?.mode ? 'default' : this.tagStatus; } diff --git a/projects/kit/components/marker-icon/marker-icon.component.ts b/projects/kit/components/marker-icon/marker-icon.component.ts index 7957539f7909..408552bdb098 100644 --- a/projects/kit/components/marker-icon/marker-icon.component.ts +++ b/projects/kit/components/marker-icon/marker-icon.component.ts @@ -13,7 +13,7 @@ import { TuiSizeXL, TuiSizeXS, } from '@taiga-ui/core'; -import {TuiMarkerIconModeT} from '@taiga-ui/kit/types'; +import {TuiMarkerIconMode} from '@taiga-ui/kit/types'; import {Observable} from 'rxjs'; @Component({ @@ -30,7 +30,7 @@ export class TuiMarkerIconComponent { @Input() @HostBinding('attr.data-marker-mode') @tuiDefaultProp() - mode: TuiMarkerIconModeT | null = null; + mode: TuiMarkerIconMode | null = null; @Input() @HostBinding('attr.data-size') diff --git a/projects/kit/components/tag/tag-options.ts b/projects/kit/components/tag/tag-options.ts index 27f5bbb6df8a..68dd39a9820c 100644 --- a/projects/kit/components/tag/tag-options.ts +++ b/projects/kit/components/tag/tag-options.ts @@ -1,10 +1,10 @@ import {InjectionToken, ValueProvider} from '@angular/core'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; -import {TuiStatusT} from '@taiga-ui/kit/types'; +import {TuiStatus} from '@taiga-ui/kit/types'; export interface TuiTagOptions { readonly size: TuiSizeS | TuiSizeL; - readonly status: TuiStatusT; + readonly status: TuiStatus; readonly autoColor: boolean; } diff --git a/projects/kit/components/tag/tag.component.ts b/projects/kit/components/tag/tag.component.ts index 79e651221dff..de0683e508ce 100644 --- a/projects/kit/components/tag/tag.component.ts +++ b/projects/kit/components/tag/tag.component.ts @@ -20,7 +20,7 @@ import { TuiSizeS, TuiSizeXS, } from '@taiga-ui/core'; -import {TuiStatusT} from '@taiga-ui/kit/types'; +import {TuiStatus} from '@taiga-ui/kit/types'; import {stringHashToHsl} from '@taiga-ui/kit/utils/format'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -74,7 +74,7 @@ export class TuiTagComponent { @Input() @HostBinding('attr.data-tui-host-status') @tuiDefaultProp() - status: TuiStatusT = this.options.status; + status: TuiStatus = this.options.status; @Input() @HostBinding('class._hoverable') diff --git a/projects/kit/enums/borders.ts b/projects/kit/enums/borders.ts deleted file mode 100644 index 6bf4fb9d0d57..000000000000 --- a/projects/kit/enums/borders.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * @deprecated use string values - */ -export const enum TuiBorders { - All = 'all', - TopBottom = 'top-bottom', -} diff --git a/projects/kit/enums/dropdown-position.ts b/projects/kit/enums/dropdown-position.ts deleted file mode 100644 index d70dfe00db80..000000000000 --- a/projects/kit/enums/dropdown-position.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @deprecated use {@link TuiDropdownPositionT} - */ -export const enum TuiDropdownPosition { - Selection = 'selection', - Word = 'word', - Tag = 'tag', -} - -export type TuiDropdownPositionT = 'selection' | 'word' | 'tag'; diff --git a/projects/kit/enums/file-state.ts b/projects/kit/enums/file-state.ts deleted file mode 100644 index 92d90716a9c0..000000000000 --- a/projects/kit/enums/file-state.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @internal - */ -export const enum TuiFileState { - Error = 'error', - Deleted = 'deleted', - Loading = 'loading', - Normal = 'normal', -} - -export type TuiFileStateT = 'error' | 'deleted' | 'loading' | 'normal'; diff --git a/projects/kit/enums/index.ts b/projects/kit/enums/index.ts deleted file mode 100644 index a0d555e627ae..000000000000 --- a/projects/kit/enums/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export * from './borders'; -export * from './dropdown-position'; -export * from './file-state'; -export * from './marker-icon-mode'; -export * from './status'; -export * from './step-state'; -export * from './text-align'; diff --git a/projects/kit/enums/marker-icon-mode.ts b/projects/kit/enums/marker-icon-mode.ts deleted file mode 100644 index f9b118fcfa8c..000000000000 --- a/projects/kit/enums/marker-icon-mode.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @deprecated use join type {@link TuiMarkerIconModeT} - */ -export const enum TuiMarkerIconMode { - Link = 'link', - Primary = 'primary', - Warning = 'warning', - White = 'white', - Secondary = 'secondary', - Success = 'success', - Error = 'error', - OnDark = 'onDark', -} diff --git a/projects/kit/enums/package.json b/projects/kit/enums/package.json deleted file mode 100644 index 289d2d373a50..000000000000 --- a/projects/kit/enums/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "index.ts" - } - } -} diff --git a/projects/kit/enums/status.ts b/projects/kit/enums/status.ts deleted file mode 100644 index cae728483a04..000000000000 --- a/projects/kit/enums/status.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * @deprecated use join type {@link TuiStatusT} - */ -export const enum TuiStatus { - Default = 'default', - Primary = 'primary', - Custom = 'custom', - Success = 'success', - Error = 'error', - Warning = 'warning', -} diff --git a/projects/kit/enums/step-state.ts b/projects/kit/enums/step-state.ts deleted file mode 100644 index d7f7352a9cf4..000000000000 --- a/projects/kit/enums/step-state.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @deprecated use {@link TuiStepStateT} - */ -export const enum TuiStepState { - Normal = 'normal', - Error = 'error', - Pass = 'pass', -} - -export type TuiStepStateT = 'normal' | 'error' | 'pass'; diff --git a/projects/kit/enums/text-align.ts b/projects/kit/enums/text-align.ts deleted file mode 100644 index f49f25765661..000000000000 --- a/projects/kit/enums/text-align.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @deprecated use string values - */ -export const enum TuiTextAlign { - Left = 'left', - Center = 'center', - Right = 'right', -} diff --git a/projects/kit/index.ts b/projects/kit/index.ts index 0219c20937bf..221a6bb85b19 100644 --- a/projects/kit/index.ts +++ b/projects/kit/index.ts @@ -2,7 +2,6 @@ export * from '@taiga-ui/kit/classes'; export * from '@taiga-ui/kit/components'; export * from '@taiga-ui/kit/constants'; export * from '@taiga-ui/kit/directives'; -export * from '@taiga-ui/kit/enums'; export * from '@taiga-ui/kit/interfaces'; export * from '@taiga-ui/kit/internal'; export * from '@taiga-ui/kit/pipes'; diff --git a/projects/kit/tokens/tag-status.ts b/projects/kit/tokens/tag-status.ts index 20ab4f466f67..d6fa7d7faa4c 100644 --- a/projects/kit/tokens/tag-status.ts +++ b/projects/kit/tokens/tag-status.ts @@ -1,10 +1,10 @@ import {InjectionToken} from '@angular/core'; -import {TuiStatus} from '@taiga-ui/kit/enums'; +import {TuiStatus} from '@taiga-ui/kit/types'; // TODO: 3.0 use TUI_TAG_OPTIONS instead of it export const TUI_TAG_STATUS = new InjectionToken( 'Status for tags inside InputTag component', { - factory: () => TuiStatus.Primary, + factory: () => 'primary', }, ); diff --git a/projects/kit/types/dropdown-position.ts b/projects/kit/types/dropdown-position.ts new file mode 100644 index 000000000000..f7f6c472cd1a --- /dev/null +++ b/projects/kit/types/dropdown-position.ts @@ -0,0 +1 @@ +export type TuiDropdownPosition = 'selection' | 'word' | 'tag'; diff --git a/projects/kit/types/file-state.ts b/projects/kit/types/file-state.ts new file mode 100644 index 000000000000..a80c984ee780 --- /dev/null +++ b/projects/kit/types/file-state.ts @@ -0,0 +1,4 @@ +/** + * @internal + */ +export type TuiFileState = 'error' | 'deleted' | 'loading' | 'normal'; diff --git a/projects/kit/types/index.ts b/projects/kit/types/index.ts index 412d30b0583f..63c2dcca8f9a 100644 --- a/projects/kit/types/index.ts +++ b/projects/kit/types/index.ts @@ -1,5 +1,8 @@ +export * from './dropdown-position'; +export * from './file-state'; export * from './handler-with-context'; export * from './key-steps'; export * from './marker-icon-mode'; export * from './status'; +export * from './step-state'; export * from './time-format-parts'; diff --git a/projects/kit/types/marker-icon-mode.ts b/projects/kit/types/marker-icon-mode.ts index 3317aab830a8..c08deaa6b70b 100644 --- a/projects/kit/types/marker-icon-mode.ts +++ b/projects/kit/types/marker-icon-mode.ts @@ -1,4 +1,4 @@ -export type TuiMarkerIconModeT = +export type TuiMarkerIconMode = | 'link' | 'primary' | 'warning' diff --git a/projects/kit/types/status.ts b/projects/kit/types/status.ts index 88f163f0a6d9..b094033ad333 100644 --- a/projects/kit/types/status.ts +++ b/projects/kit/types/status.ts @@ -1,4 +1,4 @@ -export type TuiStatusT = +export type TuiStatus = | 'default' | 'primary' | 'custom' diff --git a/projects/kit/types/step-state.ts b/projects/kit/types/step-state.ts new file mode 100644 index 000000000000..5aa6bd9fcf51 --- /dev/null +++ b/projects/kit/types/step-state.ts @@ -0,0 +1 @@ +export type TuiStepState = 'normal' | 'error' | 'pass';