diff --git a/package-lock.json b/package-lock.json index 965bc7c476d86..3d00a3cc8e71b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@taiga-ui/components", - "version": "2.54.1", + "version": "2.55.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@taiga-ui/components", - "version": "2.54.1", + "version": "2.55.0", "hasInstallScript": true, "license": "Apache-2.0", "workspaces": [ @@ -39768,7 +39768,7 @@ }, "projects/addon-charts": { "name": "@taiga-ui/addon-charts", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -39777,14 +39777,14 @@ "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0" } }, "projects/addon-commerce": { "name": "@taiga-ui/addon-commerce", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -39794,9 +39794,9 @@ "@angular/core": ">=9.0.0", "@angular/forms": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/i18n": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/i18n": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "angular2-text-mask": ">=9.0.0", "rxjs": ">=6.0.0" @@ -39804,7 +39804,7 @@ }, "projects/addon-doc": { "name": "@taiga-ui/addon-doc", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "@angular-devkit/schematics": "~12.2.17", @@ -39823,16 +39823,16 @@ "@angular/forms": ">=9.0.0", "@angular/router": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", - "@taiga-ui/addon-mobile": ">=2.54.1", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/kit": ">=2.54.1", + "@taiga-ui/addon-mobile": ">=2.55.0", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/kit": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0" } }, "projects/addon-editor": { "name": "@taiga-ui/addon-editor", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "@tiptap/core": "2.0.0-beta.180", @@ -39871,16 +39871,16 @@ "@angular/forms": ">=9.0.0", "@angular/platform-browser": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/i18n": ">=2.54.1", - "@taiga-ui/kit": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/i18n": ">=2.55.0", + "@taiga-ui/kit": ">=2.55.0", "rxjs": ">=6.0.0" } }, "projects/addon-mobile": { "name": "@taiga-ui/addon-mobile", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -39890,16 +39890,16 @@ "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/kit": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/kit": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "rxjs": ">=6.0.0" } }, "projects/addon-preview": { "name": "@taiga-ui/addon-preview", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -39908,18 +39908,18 @@ "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", "@ng-web-apis/mutation-observer": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/i18n": ">=2.54.1", - "@taiga-ui/icons": ">=2.54.1", - "@taiga-ui/kit": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/i18n": ">=2.55.0", + "@taiga-ui/icons": ">=2.55.0", + "@taiga-ui/kit": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "rxjs": ">=6.0.0" } }, "projects/addon-table": { "name": "@taiga-ui/addon-table", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -39929,16 +39929,16 @@ "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", "@ng-web-apis/intersection-observer": ">=3.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/i18n": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/i18n": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "rxjs": ">=6.0.0" } }, "projects/addon-tablebars": { "name": "@taiga-ui/addon-tablebars", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -39946,15 +39946,15 @@ "peerDependencies": { "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "rxjs": ">=6.0.0" } }, "projects/cdk": { "name": "@taiga-ui/cdk", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "@ng-web-apis/common": "2.0.1", @@ -39976,10 +39976,10 @@ }, "projects/core": { "name": "@taiga-ui/core", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { - "@taiga-ui/i18n": "^2.54.1", + "@taiga-ui/i18n": "^2.55.0", "tslib": "^2.0.0" }, "peerDependencies": { @@ -39991,8 +39991,8 @@ "@angular/router": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", "@ng-web-apis/mutation-observer": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/i18n": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/i18n": ">=2.55.0", "@tinkoff/ng-event-plugins": ">=3.0.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "rxjs": ">=6.0.0" @@ -40023,7 +40023,7 @@ }, "projects/i18n": { "name": "@taiga-ui/i18n", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -40035,7 +40035,7 @@ }, "projects/icons": { "name": "@taiga-ui/icons", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "tslib": "^2.0.0" @@ -40062,7 +40062,7 @@ }, "projects/kit": { "name": "@taiga-ui/kit", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "@ng-web-apis/intersection-observer": "3.0.0", @@ -40076,16 +40076,16 @@ "@angular/router": ">=9.0.0", "@ng-web-apis/common": ">=2.0.0", "@ng-web-apis/mutation-observer": ">=2.0.0", - "@taiga-ui/cdk": ">=2.54.1", - "@taiga-ui/core": ">=2.54.1", - "@taiga-ui/i18n": ">=2.54.1", + "@taiga-ui/cdk": ">=2.55.0", + "@taiga-ui/core": ">=2.55.0", + "@taiga-ui/i18n": ">=2.55.0", "@tinkoff/ng-polymorpheus": ">=4.0.0", "rxjs": ">=6.0.0" } }, "projects/taiga-schematics": { "name": "taiga-ui", - "version": "2.54.1", + "version": "2.55.0", "license": "Apache-2.0", "dependencies": { "@angular-devkit/schematics": "~12.2.17", @@ -40098,7 +40098,7 @@ }, "projects/testing": { "name": "@taiga-ui/testing", - "version": "2.54.1", + "version": "2.55.0", "dependencies": { "cypress-image-snapshot": "^4.0.1", "tslib": "^2.0.0" @@ -44684,7 +44684,7 @@ "@taiga-ui/core": { "version": "file:projects/core", "requires": { - "@taiga-ui/i18n": "^2.54.1", + "@taiga-ui/i18n": "^2.55.0", "tslib": "^2.0.0" } }, diff --git a/projects/addon-charts/components/bar-chart/bar-chart.component.ts b/projects/addon-charts/components/bar-chart/bar-chart.component.ts index 14cee61e8ebf9..a128578858469 100644 --- a/projects/addon-charts/components/bar-chart/bar-chart.component.ts +++ b/projects/addon-charts/components/bar-chart/bar-chart.component.ts @@ -1,6 +1,4 @@ import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core'; -import {TUI_DEFAULT_COLOR_HANDLER} from '@taiga-ui/addon-charts/constants'; -import {TuiColorHandler} from '@taiga-ui/addon-charts/types'; import { sum, TuiContextWithImplicit, @@ -9,7 +7,7 @@ import { TuiMapper, tuiPure, } from '@taiga-ui/cdk'; -import {TuiHintModeT, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import {TuiHintMode, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; // eslint-disable-next-line @typescript-eslint/naming-convention @@ -19,12 +17,12 @@ export function valueAssertion(value: ReadonlyArray): boolean return valid; } -const VALUE_ERROR = `All arrays must be of the same length`; +const VALUE_ERROR = 'All arrays must be of the same length'; @Component({ - selector: `tui-bar-chart`, - templateUrl: `./bar-chart.template.html`, - styleUrls: [`./bar-chart.style.less`], + selector: 'tui-bar-chart', + templateUrl: './bar-chart.template.html', + styleUrls: ['./bar-chart.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiBarChartComponent { @@ -40,11 +38,7 @@ export class TuiBarChartComponent { @Input() @tuiDefaultProp() - colorHandler: TuiColorHandler = TUI_DEFAULT_COLOR_HANDLER; - - @Input() - @tuiDefaultProp() - size: TuiSizeS | TuiSizeL | null = `m`; + size: TuiSizeS | TuiSizeL | null = 'm'; @Input() @tuiDefaultProp() @@ -52,11 +46,11 @@ export class TuiBarChartComponent { @Input() @tuiDefaultProp() - hintContent: PolymorpheusContent> = ``; + hintContent: PolymorpheusContent> = ''; @Input() @tuiDefaultProp() - hintMode: TuiHintModeT | null = null; + hintMode: TuiHintMode | null = null; constructor(@Inject(TuiIdService) idService: TuiIdService) { this.autoIdString = idService.generate(); @@ -88,7 +82,7 @@ export class TuiBarChartComponent { ) => (100 * (collapsed ? sum(...set) : Math.max(...set))) / max; getHint(hint: PolymorpheusContent): PolymorpheusContent { - return this.hasHint ? hint : ``; + return this.hasHint ? hint : ''; } getHintId(index: number): string { diff --git a/projects/addon-charts/components/bar-chart/bar-chart.template.html b/projects/addon-charts/components/bar-chart/bar-chart.template.html index 03d685e6958f3..4af286298cd1c 100644 --- a/projects/addon-charts/components/bar-chart/bar-chart.template.html +++ b/projects/addon-charts/components/bar-chart/bar-chart.template.html @@ -23,7 +23,6 @@ [value]="set" [size]="size" [collapsed]="collapsed" - [colorHandler]="colorHandler" > diff --git a/projects/addon-charts/components/bar/bar.component.ts b/projects/addon-charts/components/bar/bar.component.ts index 66929f70a0360..dc66f7f59a97c 100644 --- a/projects/addon-charts/components/bar/bar.component.ts +++ b/projects/addon-charts/components/bar/bar.component.ts @@ -1,21 +1,12 @@ -import { - ChangeDetectionStrategy, - Component, - HostBinding, - Inject, - Input, -} from '@angular/core'; -import {DomSanitizer, SafeValue} from '@angular/platform-browser'; -import {TUI_DEFAULT_COLOR_HANDLER} from '@taiga-ui/addon-charts/constants'; -import {TuiColorHandler} from '@taiga-ui/addon-charts/types'; -import {sum, tuiDefaultProp, tuiPure} from '@taiga-ui/cdk'; -import {colorFallback, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core'; +import {SafeValue} from '@angular/platform-browser'; +import {tuiDefaultProp, tuiPure, tuiSum} from '@taiga-ui/cdk'; +import {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; -// TODO: 3.0 Remove sanitizer when Angular version is bumped @Component({ - selector: `tui-bar`, - templateUrl: `./bar.template.html`, - styleUrls: [`./bar.style.less`], + selector: 'tui-bar', + templateUrl: './bar.template.html', + styleUrls: ['./bar.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiBarComponent { @@ -24,28 +15,20 @@ export class TuiBarComponent { value: readonly number[] = []; @Input() + @HostBinding('attr.data-size') @tuiDefaultProp() - colorHandler: TuiColorHandler = TUI_DEFAULT_COLOR_HANDLER; - - @Input() - @HostBinding(`attr.data-size`) - @tuiDefaultProp() - size: TuiSizeS | TuiSizeL = `m`; - - constructor(@Inject(DomSanitizer) private readonly sanitizer: DomSanitizer) {} + size: TuiSizeS | TuiSizeL = 'm'; getHeight(value: number): number { return (100 * value) / this.getSum(this.value); } getColor(index: number): SafeValue { - return this.sanitizer.bypassSecurityTrustStyle( - `var(--tui-chart-${index}, ${colorFallback(this.colorHandler(index))})`, - ); + return `var(--tui-chart-${index}`; } @tuiPure private getSum(value: readonly number[]): number { - return sum(...value); + return tuiSum(...value); } } diff --git a/projects/addon-charts/components/legend-item/legend-item.component.ts b/projects/addon-charts/components/legend-item/legend-item.component.ts index b72c6e47e4308..a7ce5bd7c0c1c 100644 --- a/projects/addon-charts/components/legend-item/legend-item.component.ts +++ b/projects/addon-charts/components/legend-item/legend-item.component.ts @@ -1,12 +1,11 @@ import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core'; import {tuiDefaultProp} from '@taiga-ui/cdk'; -import {colorFallback, TuiSizeS} from '@taiga-ui/core'; +import {TuiSizeS} from '@taiga-ui/core'; -// TODO: 3.0 Remove fallback @Component({ - selector: `tui-legend-item`, - templateUrl: `./legend-item.template.html`, - styleUrls: [`./legend-item.style.less`], + selector: 'tui-legend-item', + templateUrl: './legend-item.template.html', + styleUrls: ['./legend-item.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiLegendItemComponent { @@ -16,27 +15,23 @@ export class TuiLegendItemComponent { @Input() @tuiDefaultProp() - color = ``; + color = ''; @Input() @tuiDefaultProp() - text = ``; + text = ''; @Input() - @HostBinding(`attr.data-size`) + @HostBinding('attr.data-size') @tuiDefaultProp() - size: TuiSizeS = `m`; + size: TuiSizeS = 'm'; @Input() - @HostBinding(`class._disabled`) + @HostBinding('class._disabled') disabled = false; - @HostBinding(`style.--tui-primary`) + @HostBinding('style.--tui-primary') get computedColor(): string | null { - if (this.color === `var(--tui-primary)`) { - return null; - } - - return this.color.startsWith(`var(`) ? this.color : colorFallback(this.color); + return this.color === 'var(--tui-primary)' ? null : this.color; } } diff --git a/projects/addon-charts/components/legend-item/legend-item.style.less b/projects/addon-charts/components/legend-item/legend-item.style.less index 35b9d58ffe21f..efbc83b39e865 100644 --- a/projects/addon-charts/components/legend-item/legend-item.style.less +++ b/projects/addon-charts/components/legend-item/legend-item.style.less @@ -27,7 +27,6 @@ width: 0.5rem; height: 0.5rem; border-radius: 100%; - background: var(--tui-primary); :host._disabled & { background: var(--tui-base-04); diff --git a/projects/addon-charts/components/legend-item/legend-item.template.html b/projects/addon-charts/components/legend-item/legend-item.template.html index 512bc323f0a8c..b92a7ab27ad45 100644 --- a/projects/addon-charts/components/legend-item/legend-item.template.html +++ b/projects/addon-charts/components/legend-item/legend-item.template.html @@ -8,7 +8,10 @@ >
- + {{ text }}
diff --git a/projects/addon-charts/components/pie-chart/pie-chart.component.ts b/projects/addon-charts/components/pie-chart/pie-chart.component.ts index 16be38d9041c3..53eb4e70a6cd0 100644 --- a/projects/addon-charts/components/pie-chart/pie-chart.component.ts +++ b/projects/addon-charts/components/pie-chart/pie-chart.component.ts @@ -8,25 +8,23 @@ import { Input, Output, } from '@angular/core'; -import {DomSanitizer, SafeValue} from '@angular/platform-browser'; -import {TUI_DEFAULT_COLOR_HANDLER} from '@taiga-ui/addon-charts/constants'; -import {TuiColorHandler} from '@taiga-ui/addon-charts/types'; +import {SafeValue} from '@angular/platform-browser'; import { - sum, TuiContextWithImplicit, tuiDefaultProp, TuiIdService, tuiPure, + tuiSum, } from '@taiga-ui/cdk'; -import {colorFallback, TuiSizeXL, TuiSizeXS} from '@taiga-ui/core'; +import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; const RADII = { - xs: `50`, - s: `50`, - m: `77.8`, - l: `81.9`, - xl: `81.3`, + xs: '50', + s: '50', + m: '77.8', + l: '81.9', + xl: '81.3', }; const TRANSFORM = { xs: 1.15, @@ -36,11 +34,10 @@ const TRANSFORM = { xl: 1.08, }; -// TODO: 3.0 Remove sanitizer when Angular version is bumped @Component({ - selector: `tui-pie-chart`, - templateUrl: `./pie-chart.template.html`, - styleUrls: [`./pie-chart.style.less`], + selector: 'tui-pie-chart', + templateUrl: './pie-chart.template.html', + styleUrls: ['./pie-chart.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiPieChartComponent { @@ -51,17 +48,13 @@ export class TuiPieChartComponent { value: readonly number[] = []; @Input() - @HostBinding(`attr.data-size`) + @HostBinding('attr.data-size') @tuiDefaultProp() - size: TuiSizeXS | TuiSizeXL = `m`; + size: TuiSizeXS | TuiSizeXL = 'm'; @Input() @tuiDefaultProp() - colorHandler: TuiColorHandler = TUI_DEFAULT_COLOR_HANDLER; - - @Input() - @tuiDefaultProp() - hintContent: PolymorpheusContent> = ``; + hintContent: PolymorpheusContent> = ''; @Input() @tuiDefaultProp() @@ -77,12 +70,11 @@ export class TuiPieChartComponent { constructor( @Inject(TuiIdService) idService: TuiIdService, @Inject(Location) private readonly locationRef: Location, - @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer, ) { this.autoIdString = idService.generate(); } - @HostBinding(`class._empty`) + @HostBinding('class._empty') get empty(): boolean { return !this.getSum(this.value); } @@ -116,7 +108,7 @@ export class TuiPieChartComponent { } getHint(hint: PolymorpheusContent): PolymorpheusContent { - return this.hintContent ? hint : ``; + return this.hintContent ? hint : ''; } onHovered(hovered: boolean, index: number): void { @@ -124,14 +116,12 @@ export class TuiPieChartComponent { } getColor(index: number): SafeValue { - return this.sanitizer.bypassSecurityTrustStyle( - `var(--tui-chart-${index}, ${colorFallback(this.colorHandler(index))})`, - ); + return `var(--tui-chart-${index}`; } @tuiPure private getSum(value: readonly number[]): number { - return sum(...value); + return tuiSum(...value); } @tuiPure diff --git a/projects/addon-charts/components/ring-chart/ring-chart.component.ts b/projects/addon-charts/components/ring-chart/ring-chart.component.ts index 046045d063a80..7751b3d6e2e64 100644 --- a/projects/addon-charts/components/ring-chart/ring-chart.component.ts +++ b/projects/addon-charts/components/ring-chart/ring-chart.component.ts @@ -6,8 +6,6 @@ import { Input, Output, } from '@angular/core'; -import {TUI_DEFAULT_COLOR_HANDLER} from '@taiga-ui/addon-charts/constants'; -import {TuiColorHandler} from '@taiga-ui/addon-charts/types'; import {tuiDefaultProp} from '@taiga-ui/cdk'; import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core'; @@ -27,11 +25,6 @@ export class TuiRingChartComponent { @tuiDefaultProp() size: TuiSizeS | TuiSizeXL = 'm'; - /** @deprecated */ - @Input() - @tuiDefaultProp() - colorHandler: TuiColorHandler = TUI_DEFAULT_COLOR_HANDLER; - @Input() @tuiDefaultProp() masked = true; diff --git a/projects/addon-charts/components/ring-chart/ring-chart.template.html b/projects/addon-charts/components/ring-chart/ring-chart.template.html index ec52158bd6d98..5e7afeecf2749 100644 --- a/projects/addon-charts/components/ring-chart/ring-chart.template.html +++ b/projects/addon-charts/components/ring-chart/ring-chart.template.html @@ -7,7 +7,6 @@ DEFAULT_COLORS[index]; diff --git a/projects/addon-charts/constants/default-colors.ts b/projects/addon-charts/constants/default-colors.ts deleted file mode 100644 index c736c186bf8f3..0000000000000 --- a/projects/addon-charts/constants/default-colors.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {TuiBaseColor, TuiColor, TuiSupportColor} from '@taiga-ui/core'; - -/** @deprecated */ -export const DEFAULT_COLORS: ReadonlyArray = [ - TuiBaseColor.Primary, - TuiSupportColor.Havelock, - TuiSupportColor.Feijoa, - TuiSupportColor.Lilac, - `base-05`, - TuiSupportColor.Mustard, - TuiSupportColor.Texas, - TuiSupportColor.Tan, - TuiSupportColor.Salmon, - TuiSupportColor.Sienna, - TuiSupportColor.Bittersweet, - TuiSupportColor.Pinkie, - TuiSupportColor.Charm, - TuiSupportColor.Amethist, - TuiSupportColor.Helio, - TuiSupportColor.Malibu, - TuiSupportColor.Picton, - TuiSupportColor.Mint, - TuiSupportColor.Fountain, - TuiSupportColor.Puertorico, - TuiSupportColor.Bay, - TuiSupportColor.Forest, - TuiSupportColor.York, - TuiBaseColor.Error, - TuiBaseColor.Success, - TuiBaseColor.Secondary, -]; diff --git a/projects/addon-charts/constants/index.ts b/projects/addon-charts/constants/index.ts index 6f8977fbdd546..50f4e0edab82f 100644 --- a/projects/addon-charts/constants/index.ts +++ b/projects/addon-charts/constants/index.ts @@ -1,3 +1 @@ -export * from './default-color-handler'; -export * from './default-colors'; export * from './line-handlers'; diff --git a/projects/addon-charts/types/color-handler.ts b/projects/addon-charts/types/color-handler.ts deleted file mode 100644 index 0e5e642b52b96..0000000000000 --- a/projects/addon-charts/types/color-handler.ts +++ /dev/null @@ -1,4 +0,0 @@ -import {TuiColor} from '@taiga-ui/core'; - -/** @deprecated use CSS custom properties */ -export type TuiColorHandler = (index: number) => TuiColor | string | null; diff --git a/projects/addon-charts/types/index.ts b/projects/addon-charts/types/index.ts index 70f64a92d6539..16b1266373dd0 100644 --- a/projects/addon-charts/types/index.ts +++ b/projects/addon-charts/types/index.ts @@ -1,3 +1,2 @@ -export * from './color-handler'; export * from './line-handler'; export * from './line-type'; diff --git a/projects/addon-commerce/components/money/money-options.ts b/projects/addon-commerce/components/money/money-options.ts index d7e6b9c387bf1..ae665d7f3ad98 100644 --- a/projects/addon-commerce/components/money/money-options.ts +++ b/projects/addon-commerce/components/money/money-options.ts @@ -1,10 +1,10 @@ import {InjectionToken, ValueProvider} from '@angular/core'; import {TuiCurrency} from '@taiga-ui/addon-commerce/enums'; import {TuiCurrencyVariants, TuiMoneySign} from '@taiga-ui/addon-commerce/types'; -import {TuiDecimalT} from '@taiga-ui/core'; +import {TuiDecimal} from '@taiga-ui/core'; export interface TuiMoneyOptions { - readonly decimal: TuiDecimalT; + readonly decimal: TuiDecimal; readonly currency: TuiCurrencyVariants; readonly sign: TuiMoneySign; readonly colored: boolean; diff --git a/projects/addon-commerce/components/money/money.component.ts b/projects/addon-commerce/components/money/money.component.ts index 4ccbac1f3091a..a76d1a53d5521 100644 --- a/projects/addon-commerce/components/money/money.component.ts +++ b/projects/addon-commerce/components/money/money.component.ts @@ -11,7 +11,7 @@ import { TuiMoneySignSymbol, } from '@taiga-ui/addon-commerce/types'; import {CHAR_MINUS, CHAR_PLUS, tuiDefaultProp} from '@taiga-ui/cdk'; -import {TuiDecimalT} from '@taiga-ui/core'; +import {TuiDecimal} from '@taiga-ui/core'; import {TUI_MONEY_OPTIONS, TuiMoneyOptions} from './money-options'; import {tuiFormatSignSymbol} from './utils/format-sign-symbol'; @@ -29,7 +29,7 @@ export class TuiMoneyComponent { @Input() @tuiDefaultProp() - decimal: TuiDecimalT = this.options.decimal; + decimal: TuiDecimal = this.options.decimal; @Input() @tuiDefaultProp() diff --git a/projects/addon-commerce/components/money/pipes/fraction-part.pipe.ts b/projects/addon-commerce/components/money/pipes/fraction-part.pipe.ts index 8d0d2aa7ce6cf..0619f15bcd739 100644 --- a/projects/addon-commerce/components/money/pipes/fraction-part.pipe.ts +++ b/projects/addon-commerce/components/money/pipes/fraction-part.pipe.ts @@ -1,5 +1,5 @@ import {Inject, Pipe, PipeTransform} from '@angular/core'; -import {TUI_NUMBER_FORMAT, TuiDecimalT, TuiNumberFormatSettings} from '@taiga-ui/core'; +import {TUI_NUMBER_FORMAT, TuiDecimal, TuiNumberFormatSettings} from '@taiga-ui/core'; import {tuiFormatFractionPart} from '../utils/format-fraction-part'; @@ -9,7 +9,7 @@ export class TuiFractionPartPipe implements PipeTransform { @Inject(TUI_NUMBER_FORMAT) private readonly numberFormat: TuiNumberFormatSettings, ) {} - transform(value: number, decimal: TuiDecimalT, precision: number): string { + transform(value: number, decimal: TuiDecimal, precision: number): string { return tuiFormatFractionPart({ value, decimal, diff --git a/projects/addon-commerce/components/money/test/money.component.spec.ts b/projects/addon-commerce/components/money/test/money.component.spec.ts index 7e0c988e56bf7..43b50243e1a58 100644 --- a/projects/addon-commerce/components/money/test/money.component.spec.ts +++ b/projects/addon-commerce/components/money/test/money.component.spec.ts @@ -9,7 +9,7 @@ import { TuiMoneySign, } from '@taiga-ui/addon-commerce'; import {CHAR_MINUS} from '@taiga-ui/cdk'; -import {TuiDecimalT} from '@taiga-ui/core'; +import {TuiDecimal} from '@taiga-ui/core'; import {configureTestSuite, TuiPageObject} from '@taiga-ui/testing'; describe('Money', () => { @@ -30,7 +30,7 @@ describe('Money', () => { component!: TuiMoneyComponent; value = 237; - decimal: TuiDecimalT = 'not-zero'; + decimal: TuiDecimal = 'not-zero'; currency: TuiCurrencyVariants = null; sign: TuiMoneySign = 'negative-only'; colored = false; diff --git a/projects/addon-commerce/components/money/utils/format-fraction-part.ts b/projects/addon-commerce/components/money/utils/format-fraction-part.ts index 9f7a41c679b6b..edd0aa83ff129 100644 --- a/projects/addon-commerce/components/money/utils/format-fraction-part.ts +++ b/projects/addon-commerce/components/money/utils/format-fraction-part.ts @@ -1,8 +1,8 @@ -import {TuiDecimalT, TuiNumberFormatSettings} from '@taiga-ui/core'; +import {TuiDecimal, TuiNumberFormatSettings} from '@taiga-ui/core'; export function tuiFormatFractionPart(options: { value: number; - decimal: TuiDecimalT; + decimal: TuiDecimal; precision: number; numberFormat: TuiNumberFormatSettings; }): string { diff --git a/projects/addon-preview/components/preview-dialog/preview-dialog.style.less b/projects/addon-preview/components/preview-dialog/preview-dialog.style.less index de514c916aa9e..e2b51bed13012 100644 --- a/projects/addon-preview/components/preview-dialog/preview-dialog.style.less +++ b/projects/addon-preview/components/preview-dialog/preview-dialog.style.less @@ -1,22 +1,21 @@ +@import 'taiga-ui-local'; + .t-dialog-content { position: fixed; width: 100%; height: 100%; } +/* stylelint-disable order/order */ [tuiWrapper][data-appearance='preview-action'] { background: rgba(104, 104, 104, 0.96); color: var(--tui-text-01-night); - &[data-state='hovered'] { + .wrapper-hover({ background: rgba(159, 159, 159, 0.86); - } + }); - &[data-state='pressed'] { + .wrapper-active({ background: rgba(159, 159, 159, 0.75); - } - - &[data-state='disabled'] { - opacity: var(--tui-disabled-opacity); - } + }); } diff --git a/projects/cdk/directives/hovered/hovered.service.ts b/projects/cdk/directives/hovered/hovered.service.ts index 10022172771a1..0f4d597b0233d 100644 --- a/projects/cdk/directives/hovered/hovered.service.ts +++ b/projects/cdk/directives/hovered/hovered.service.ts @@ -5,6 +5,10 @@ import {merge, Observable} from 'rxjs'; import {distinctUntilChanged, filter, mapTo} from 'rxjs/operators'; function movedOut({currentTarget, relatedTarget}: MouseEvent): boolean { + if (!relatedTarget) { + return true; + } + tuiAssertIsElement(currentTarget); tuiAssertIsElement(relatedTarget); diff --git a/projects/core/abstract/abstract-dropdown.ts b/projects/core/abstract/abstract-dropdown.ts index f3840ab47c1eb..20cd67fd6dd4b 100644 --- a/projects/core/abstract/abstract-dropdown.ts +++ b/projects/core/abstract/abstract-dropdown.ts @@ -19,7 +19,7 @@ import {TuiDropdownBoxComponent} from '@taiga-ui/core/components/dropdown-box'; import {DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT} from '@taiga-ui/core/constants'; import {TuiDropdown} from '@taiga-ui/core/interfaces'; import { - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core/types'; @@ -34,37 +34,37 @@ export abstract class AbstractTuiDropdown { abstract refresh$: Observable; - @Input(`tuiDropdownContent`) + @Input('tuiDropdownContent') @tuiDefaultProp() - content: PolymorpheusContent = ``; + content: PolymorpheusContent = ''; - @Input(`tuiDropdownHost`) + @Input('tuiDropdownHost') @tuiDefaultProp() tuiDropdownHost: TuiNativeFocusableElement | HTMLElement | null = null; - @Input(`tuiDropdownMinHeight`) + @Input('tuiDropdownMinHeight') @tuiDefaultProp() minHeight = DEFAULT_MIN_HEIGHT; - @Input(`tuiDropdownMaxHeight`) + @Input('tuiDropdownMaxHeight') @tuiDefaultProp() maxHeight = DEFAULT_MAX_HEIGHT; - @Input(`tuiDropdownAlign`) + @Input('tuiDropdownAlign') @tuiDefaultProp() - align: TuiHorizontalDirection = `left`; + align: TuiHorizontalDirection = 'left'; - @Input(`tuiDropdownDirection`) + @Input('tuiDropdownDirection') @tuiDefaultProp() direction: TuiVerticalDirection | null = null; - @Input(`tuiDropdownSided`) + @Input('tuiDropdownSided') @tuiDefaultProp() sided = false; - @Input(`tuiDropdownLimitWidth`) + @Input('tuiDropdownLimitWidth') @tuiDefaultProp() - limitMinWidth: TuiDropdownWidthT = `min`; + limitMinWidth: TuiDropdownWidth = 'min'; dropdownBoxRef: ComponentRef | null = null; diff --git a/projects/core/abstract/abstract-hint-options.ts b/projects/core/abstract/abstract-hint-options.ts index db29895f824af..6ae25c5330f78 100644 --- a/projects/core/abstract/abstract-hint-options.ts +++ b/projects/core/abstract/abstract-hint-options.ts @@ -1,7 +1,7 @@ -import {TuiDirection, TuiHintModeT} from '@taiga-ui/core/types'; +import {TuiDirection, TuiHintMode} from '@taiga-ui/core/types'; export interface TuiAbstractHintOptions { - readonly mode: TuiHintModeT | null; + readonly mode: TuiHintMode | null; readonly direction: TuiDirection; } diff --git a/projects/core/components/group/group.directive.ts b/projects/core/components/group/group.directive.ts index 71ebed5d520dc..2886f29fac9d7 100644 --- a/projects/core/components/group/group.directive.ts +++ b/projects/core/components/group/group.directive.ts @@ -1,39 +1,39 @@ import {Directive, HostBinding, Inject, Input} from '@angular/core'; import {tuiDefaultProp, TuiDirectiveStylesService} from '@taiga-ui/cdk'; -import {TuiOrientationT, TuiSizeL} from '@taiga-ui/core/types'; +import {TuiOrientation, TuiSizeL} from '@taiga-ui/core/types'; import {TuiGroupStylesComponent} from './group-styles.component'; @Directive({ - selector: `[tuiGroup]:not(ng-container)`, + selector: '[tuiGroup]:not(ng-container)', host: { - class: `tui-group`, - role: `group`, + class: 'tui-group', + role: 'group', }, }) export class TuiGroupDirective { @Input() @tuiDefaultProp() - orientation: TuiOrientationT = `horizontal`; + orientation: TuiOrientation = 'horizontal'; @Input() - @HostBinding(`class.tui-group_adaptive`) + @HostBinding('class.tui-group_adaptive') @tuiDefaultProp() adaptive = false; @Input() - @HostBinding(`class.tui-group_collapsed`) + @HostBinding('class.tui-group_collapsed') @tuiDefaultProp() collapsed = false; @Input() - @HostBinding(`class.tui-group_rounded`) + @HostBinding('class.tui-group_rounded') @tuiDefaultProp() rounded = true; @Input() @tuiDefaultProp() - size: TuiSizeL = `m`; + size: TuiSizeL = 'm'; constructor( @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, @@ -41,18 +41,18 @@ export class TuiGroupDirective { directiveStyles.addComponent(TuiGroupStylesComponent); } - @HostBinding(`class.tui-group_orientation_horizontal`) + @HostBinding('class.tui-group_orientation_horizontal') get orientationHorizontal(): boolean { - return this.orientation === `horizontal`; + return this.orientation === 'horizontal'; } - @HostBinding(`class.tui-group_orientation_vertical`) + @HostBinding('class.tui-group_orientation_vertical') get orientationVertical(): boolean { - return this.orientation === `vertical`; + return this.orientation === 'vertical'; } - @HostBinding(`class.tui-group_radius_large`) + @HostBinding('class.tui-group_radius_large') get sizeLarge(): boolean { - return this.size === `l`; + return this.size === 'l'; } } diff --git a/projects/core/components/hints-host/hint-box/hint-box.component.ts b/projects/core/components/hints-host/hint-box/hint-box.component.ts index 9895ef03686c3..f74150f14035e 100644 --- a/projects/core/components/hints-host/hint-box/hint-box.component.ts +++ b/projects/core/components/hints-host/hint-box/hint-box.component.ts @@ -23,7 +23,7 @@ import {TuiHintDirective} from '@taiga-ui/core/directives'; import {TuiPointerHintDirective} from '@taiga-ui/core/directives/pointer-hint'; import {TuiMedia} from '@taiga-ui/core/interfaces'; import {TUI_ANIMATION_OPTIONS, TUI_MEDIA} from '@taiga-ui/core/tokens'; -import {TuiDirection, TuiHintModeT} from '@taiga-ui/core/types'; +import {TuiDirection, TuiHintMode} from '@taiga-ui/core/types'; import {tuiIsMobile} from '@taiga-ui/core/utils'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -106,7 +106,7 @@ export class TuiHintBoxComponent { } @HostBinding('attr.data-mode') - get mode(): TuiHintModeT | null { + get mode(): TuiHintMode | null { return this.hint.mode; } diff --git a/projects/core/components/primitive-calendar/primitive-calendar.component.ts b/projects/core/components/primitive-calendar/primitive-calendar.component.ts index 677805eff5ccb..b26f70b015d9d 100644 --- a/projects/core/components/primitive-calendar/primitive-calendar.component.ts +++ b/projects/core/components/primitive-calendar/primitive-calendar.component.ts @@ -19,7 +19,7 @@ import { import {TUI_DEFAULT_MARKER_HANDLER} from '@taiga-ui/core/constants'; import {TuiInteractiveState, TuiRangeState} from '@taiga-ui/core/enums'; import {TUI_ORDERED_SHORT_WEEK_DAYS, WEEK_DAYS_NAMES} from '@taiga-ui/core/tokens'; -import {TuiColor, TuiMarkerHandler} from '@taiga-ui/core/types'; +import {TuiMarkerHandler} from '@taiga-ui/core/types'; import {Observable} from 'rxjs'; // @dynamic @@ -80,7 +80,7 @@ export class TuiPrimitiveCalendarComponent { day: TuiDay, today: boolean, inRange: boolean, - ): null | [TuiColor | string] | [TuiColor | string, TuiColor | string] => { + ): null | [string] | [string, string] => { if (today || inRange) { return null; } @@ -98,11 +98,11 @@ export class TuiPrimitiveCalendarComponent { } if (pressedItem?.daySame(item)) { - return TuiInteractiveState.Pressed; + return TuiInteractiveState.Active; } if (hoveredItem?.daySame(item)) { - return TuiInteractiveState.Hovered; + return TuiInteractiveState.Hover; } return null; diff --git a/projects/core/components/primitive-calendar/primitive-calendar.module.ts b/projects/core/components/primitive-calendar/primitive-calendar.module.ts index ef2d3cb2f601b..86f6dd67c4572 100644 --- a/projects/core/components/primitive-calendar/primitive-calendar.module.ts +++ b/projects/core/components/primitive-calendar/primitive-calendar.module.ts @@ -7,7 +7,6 @@ import { TuiPressedModule, TuiRepeatTimesModule, } from '@taiga-ui/cdk'; -import {TuiColorModule} from '@taiga-ui/core/directives/color'; import {TuiCalendarSheetPipeModule} from '@taiga-ui/core/pipes'; import {TuiPrimitiveCalendarComponent} from './primitive-calendar.component'; @@ -20,7 +19,6 @@ import {TuiPrimitiveCalendarComponent} from './primitive-calendar.component'; TuiRepeatTimesModule, TuiHoveredModule, TuiPressedModule, - TuiColorModule, TuiCalendarSheetPipeModule, ], declarations: [TuiPrimitiveCalendarComponent], diff --git a/projects/core/components/primitive-calendar/primitive-calendar.template.html b/projects/core/components/primitive-calendar/primitive-calendar.template.html index 04d6083f2dbe3..edf4a43570a5d 100644 --- a/projects/core/components/primitive-calendar/primitive-calendar.template.html +++ b/projects/core/components/primitive-calendar/primitive-calendar.template.html @@ -38,12 +38,12 @@ >
diff --git a/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts b/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts index 61ebcc23dc1e6..1da21495baddc 100644 --- a/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts +++ b/projects/core/components/primitive-calendar/test/primitive-calendar.component.spec.ts @@ -142,7 +142,7 @@ describe(`PrimitiveCalendar`, () => { component.onItemPressed(dayToPress); - expect(component.getItemState(dayToPress)).toBe(TuiInteractiveState.Pressed); + expect(component.getItemState(dayToPress)).toBe(TuiInteractiveState.Active); }); it(`returns hovered state if it is not disabled and pressed`, () => { @@ -150,7 +150,7 @@ describe(`PrimitiveCalendar`, () => { component.onItemHovered(dayToHover); - expect(component.getItemState(dayToHover)).toBe(TuiInteractiveState.Hovered); + expect(component.getItemState(dayToHover)).toBe(TuiInteractiveState.Hover); }); }); diff --git a/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts b/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts index 176b5cac2028a..7ea677f05ba1f 100644 --- a/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts +++ b/projects/core/components/primitive-year-picker/primitive-year-picker.component.ts @@ -103,11 +103,11 @@ export class TuiPrimitiveYearPickerComponent { } if (pressedItem === item) { - return TuiInteractiveState.Pressed; + return TuiInteractiveState.Active; } if (hoveredItem === item) { - return TuiInteractiveState.Hovered; + return TuiInteractiveState.Hover; } return null; diff --git a/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts b/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts index 8557597853bbd..792064043f842 100644 --- a/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts +++ b/projects/core/components/primitive-year-picker/test/primitive-year-picker.component.spec.ts @@ -77,7 +77,7 @@ describe(`TuiPrimitiveYearPickerComponent`, () => { component.onItemPressed(true, item); - expect(component.getItemState(item)).toBe(TuiInteractiveState.Pressed); + expect(component.getItemState(item)).toBe(TuiInteractiveState.Active); }); it(`returns hovered state if it is not disabled and pressed`, () => { @@ -85,7 +85,7 @@ describe(`TuiPrimitiveYearPickerComponent`, () => { component.onItemHovered(true, item); - expect(component.getItemState(item)).toBe(TuiInteractiveState.Hovered); + expect(component.getItemState(item)).toBe(TuiInteractiveState.Hover); }); }); diff --git a/projects/core/components/scroll-controls/scrollbar.directive.ts b/projects/core/components/scroll-controls/scrollbar.directive.ts index 984210756ce61..63b7120d4d076 100644 --- a/projects/core/components/scroll-controls/scrollbar.directive.ts +++ b/projects/core/components/scroll-controls/scrollbar.directive.ts @@ -18,7 +18,7 @@ import { typedFromEvent, } from '@taiga-ui/cdk'; import {TUI_ELEMENT_REF, TUI_SCROLL_REF} from '@taiga-ui/core/tokens'; -import {TuiOrientationT} from '@taiga-ui/core/types'; +import {TuiOrientation} from '@taiga-ui/core/types'; import {fromEvent, merge, Observable} from 'rxjs'; import {map, switchMap, takeUntil, throttleTime} from 'rxjs/operators'; @@ -26,12 +26,12 @@ const MIN_WIDTH = 24; // @dynamic @Directive({ - selector: `[tuiScrollbar]`, + selector: '[tuiScrollbar]', providers: [TuiDestroyService], }) export class TuiScrollbarDirective { @Input() - tuiScrollbar: TuiOrientationT = `vertical`; + tuiScrollbar: TuiOrientation = 'vertical'; constructor( @Inject(NgZone) ngZone: NgZone, @@ -48,10 +48,10 @@ export class TuiScrollbarDirective { @Inject(ViewportScroller) private readonly viewportScroller: ViewportScroller, ) { const {nativeElement} = this.elementRef; - const mousedown$ = typedFromEvent(nativeElement, `mousedown`); - const mousemove$ = typedFromEvent(this.documentRef, `mousemove`); - const mouseup$ = typedFromEvent(this.documentRef, `mouseup`); - const mousedownWrapper$ = typedFromEvent(wrapper.nativeElement, `mousedown`); + const mousedown$ = typedFromEvent(nativeElement, 'mousedown'); + const mousemove$ = typedFromEvent(this.documentRef, 'mousemove'); + const mouseup$ = typedFromEvent(this.documentRef, 'mouseup'); + const mousedownWrapper$ = typedFromEvent(wrapper.nativeElement, 'mousedown'); merge( mousedownWrapper$.pipe( @@ -79,23 +79,23 @@ export class TuiScrollbarDirective { if (!this.container) { this.viewportScroller.scrollToPosition([ - this.tuiScrollbar === `vertical` ? x : scrollLeft, - this.tuiScrollbar === `vertical` ? scrollTop : y, + this.tuiScrollbar === 'vertical' ? x : scrollLeft, + this.tuiScrollbar === 'vertical' ? scrollTop : y, ]); return; } - if (this.tuiScrollbar === `vertical`) { + if (this.tuiScrollbar === 'vertical') { renderer.setProperty( this.container.nativeElement, - `scrollTop`, + 'scrollTop', scrollTop, ); } else { renderer.setProperty( this.container.nativeElement, - `scrollLeft`, + 'scrollLeft', scrollLeft, ); } @@ -104,18 +104,18 @@ export class TuiScrollbarDirective { merge( fromEvent( this.container ? this.container.nativeElement : this.windowRef, - `scroll`, + 'scroll', ), animationFrame$.pipe(throttleTime(POLLING_TIME)), ) .pipe(tuiZonefree(ngZone), takeUntil(destroy$)) .subscribe(() => { - if (this.tuiScrollbar === `vertical`) { - renderer.setStyle(nativeElement, `top`, `${this.thumb * 100}%`); - renderer.setStyle(nativeElement, `height`, `${this.view * 100}%`); + if (this.tuiScrollbar === 'vertical') { + renderer.setStyle(nativeElement, 'top', `${this.thumb * 100}%`); + renderer.setStyle(nativeElement, 'height', `${this.view * 100}%`); } else { - renderer.setStyle(nativeElement, `left`, `${this.thumb * 100}%`); - renderer.setStyle(nativeElement, `width`, `${this.view * 100}%`); + renderer.setStyle(nativeElement, 'left', `${this.thumb * 100}%`); + renderer.setStyle(nativeElement, 'width', `${this.view * 100}%`); } }); } @@ -130,7 +130,7 @@ export class TuiScrollbarDirective { clientWidth, } = this.computedContainer; - return this.tuiScrollbar === `vertical` + return this.tuiScrollbar === 'vertical' ? scrollTop / (scrollHeight - clientHeight) : scrollLeft / (scrollWidth - clientWidth); } @@ -141,14 +141,14 @@ export class TuiScrollbarDirective { if ( ((clientHeight * clientHeight) / scrollHeight > MIN_WIDTH && - this.tuiScrollbar === `vertical`) || + this.tuiScrollbar === 'vertical') || ((clientWidth * clientWidth) / scrollWidth > MIN_WIDTH && - this.tuiScrollbar === `horizontal`) + this.tuiScrollbar === 'horizontal') ) { return 0; } - return this.tuiScrollbar === `vertical` + return this.tuiScrollbar === 'vertical' ? MIN_WIDTH / clientHeight : MIN_WIDTH / clientWidth; } @@ -163,7 +163,7 @@ export class TuiScrollbarDirective { const {clientHeight, scrollHeight, clientWidth, scrollWidth} = this.computedContainer; - return this.tuiScrollbar === `vertical` + return this.tuiScrollbar === 'vertical' ? Math.ceil((clientHeight / scrollHeight) * 100) / 100 : Math.ceil((clientWidth / scrollWidth) * 100) / 100; } diff --git a/projects/core/components/tooltip/tooltip.component.ts b/projects/core/components/tooltip/tooltip.component.ts index 30c6535bdd94c..c82794816aa3d 100644 --- a/projects/core/components/tooltip/tooltip.component.ts +++ b/projects/core/components/tooltip/tooltip.component.ts @@ -10,15 +10,15 @@ import {TUI_IS_MOBILE, tuiDefaultProp, TuiDestroyService} from '@taiga-ui/cdk'; import {TUI_HINT_OPTIONS, TuiHintOptions} from '@taiga-ui/core/directives'; import {MODE_PROVIDER} from '@taiga-ui/core/providers'; import {TUI_MODE} from '@taiga-ui/core/tokens'; -import {TuiBrightness, TuiHintModeT} from '@taiga-ui/core/types'; +import {TuiBrightness, TuiHintMode} from '@taiga-ui/core/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; @Component({ - selector: `tui-tooltip`, - templateUrl: `./tooltip.template.html`, - styleUrls: [`./tooltip.style.less`], + selector: 'tui-tooltip', + templateUrl: './tooltip.template.html', + styleUrls: ['./tooltip.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiDestroyService, MODE_PROVIDER], }) @@ -27,7 +27,7 @@ export class TuiTooltipComponent { @Input() @tuiDefaultProp() - content: PolymorpheusContent = ``; + content: PolymorpheusContent = ''; @Input() @tuiDefaultProp() @@ -47,7 +47,7 @@ export class TuiTooltipComponent { @Input() @tuiDefaultProp() - describeId = ``; + describeId = ''; constructor( @Inject(TuiDestroyService) destroy$: Observable, @@ -61,13 +61,13 @@ export class TuiTooltipComponent { } // TODO: Simplify - @HostBinding(`attr.data-mode`) - get computedMode(): TuiHintModeT | null { - return this.mode || (this.globalMode === `onDark` ? `onDark` : null); + @HostBinding('attr.data-mode') + get computedMode(): TuiHintMode | null { + return this.mode || (this.globalMode === 'onDark' ? 'onDark' : null); } - @HostListener(`mousedown`, [`$event`]) - @HostListener(`click`, [`$event`]) + @HostListener('mousedown', ['$event']) + @HostListener('click', ['$event']) stopOnMobile(event: MouseEvent): void { if (this.isMobile) { event.preventDefault(); diff --git a/projects/core/directives/color/color.const.ts b/projects/core/directives/color/color.const.ts deleted file mode 100644 index 885aa9fddb4b6..0000000000000 --- a/projects/core/directives/color/color.const.ts +++ /dev/null @@ -1,317 +0,0 @@ -/** - * @deprecated use CSS custom properties - */ -export const COLOR = `[data-tui-background='primary'] { - background-color: var(--tui-primary); -} - -[data-tui-background='secondary'] { - background-color: var(--tui-info-fill); -} - -[data-tui-background='success'] { - background-color: var(--tui-success-fill); -} - -[data-tui-background='error'] { - background-color: var(--tui-error-fill); -} - -[data-tui-background='support-mustard'], -[data-tui-background='support-01'] { - background-color: var(--tui-support-01); -} - -[data-tui-background='support-texas'], -[data-tui-background='support-02'] { - background-color: var(--tui-support-02); -} - -[data-tui-background='support-tan'], -[data-tui-background='support-03'] { - background-color: var(--tui-support-03); -} - -[data-tui-background='support-salmon'], -[data-tui-background='support-04'] { - background-color: var(--tui-support-04); -} - -[data-tui-background='support-sienna'], -[data-tui-background='support-05'] { - background-color: var(--tui-support-05); -} - -[data-tui-background='support-bittersweet'], -[data-tui-background='support-06'] { - background-color: var(--tui-support-06); -} - -[data-tui-background='support-pinkie'], -[data-tui-background='support-07'] { - background-color: var(--tui-support-07); -} - -[data-tui-background='support-charm'], -[data-tui-background='support-08'] { - background-color: var(--tui-support-08); -} - -[data-tui-background='support-amethyst'], -[data-tui-background='support-09'] { - background-color: var(--tui-support-09); -} - -[data-tui-background='support-helio'], -[data-tui-background='support-10'] { - background-color: var(--tui-support-10); -} - -[data-tui-background='support-lilac'], -[data-tui-background='support-11'] { - background-color: var(--tui-support-11); -} - -[data-tui-background='support-malibu'], -[data-tui-background='support-12'] { - background-color: var(--tui-support-12); -} - -[data-tui-background='support-havelock'], -[data-tui-background='support-13'] { - background-color: var(--tui-support-13); -} - -[data-tui-background='support-picton'], -[data-tui-background='support-14'] { - background-color: var(--tui-support-14); -} - -[data-tui-background='support-mint'], -[data-tui-background='support-15'] { - background-color: var(--tui-support-15); -} - -[data-tui-background='support-fountain'], -[data-tui-background='support-16'] { - background-color: var(--tui-support-16); -} - -[data-tui-background='support-puertorico'], -[data-tui-background='support-17'] { - background-color: var(--tui-support-17); -} - -[data-tui-background='support-bay'], -[data-tui-background='support-18'] { - background-color: var(--tui-support-18); -} - -[data-tui-background='support-forest'], -[data-tui-background='support-19'] { - background-color: var(--tui-support-19); -} - -[data-tui-background='support-york'], -[data-tui-background='support-20'] { - background-color: var(--tui-support-20); -} - -[data-tui-background='support-feijoa'], -[data-tui-background='support-21'] { - background-color: var(--tui-support-21); -} - -[data-tui-background='base-01'] { - background-color: var(--tui-base-01); -} - -[data-tui-background='base-02'] { - background-color: var(--tui-base-02); -} - -[data-tui-background='base-03'] { - background-color: var(--tui-base-03); -} - -[data-tui-background='base-04'] { - background-color: var(--tui-base-04); -} - -[data-tui-background='base-05'] { - background-color: var(--tui-base-05); -} - -[data-tui-background='base-06'] { - background-color: var(--tui-base-06); -} - -[data-tui-background='base-07'] { - background-color: var(--tui-base-07); -} - -[data-tui-background='base-08'] { - background-color: var(--tui-base-08); -} - -[data-tui-background='base-09'] { - background-color: var(--tui-base-09); -} - -[data-tui-color='primary'] { - color: var(--tui-primary); -} - -[data-tui-color='secondary'] { - color: var(--tui-info-fill); -} - -[data-tui-color='success'] { - color: var(--tui-success-fill); -} - -[data-tui-color='error'] { - color: var(--tui-error-fill); -} - -[data-tui-color='support-mustard'], -[data-tui-color='support-01'] { - color: var(--tui-support-01); -} - -[data-tui-color='support-texas'], -[data-tui-color='support-02'] { - color: var(--tui-support-02); -} - -[data-tui-color='support-tan'], -[data-tui-color='support-03'] { - color: var(--tui-support-03); -} - -[data-tui-color='support-salmon'], -[data-tui-color='support-04'] { - color: var(--tui-support-04); -} - -[data-tui-color='support-sienna'], -[data-tui-color='support-05'] { - color: var(--tui-support-05); -} - -[data-tui-color='support-bittersweet'], -[data-tui-color='support-06'] { - color: var(--tui-support-06); -} - -[data-tui-color='support-pinkie'], -[data-tui-color='support-07'] { - color: var(--tui-support-07); -} - -[data-tui-color='support-charm'], -[data-tui-color='support-08'] { - color: var(--tui-support-08); -} - -[data-tui-color='support-amethyst'], -[data-tui-color='support-09'] { - color: var(--tui-support-09); -} - -[data-tui-color='support-helio'], -[data-tui-color='support-10'] { - color: var(--tui-support-10); -} - -[data-tui-color='support-lilac'], -[data-tui-color='support-11'] { - color: var(--tui-support-11); -} - -[data-tui-color='support-malibu'], -[data-tui-color='support-12'] { - color: var(--tui-support-12); -} - -[data-tui-color='support-havelock'], -[data-tui-color='support-13'] { - color: var(--tui-support-13); -} - -[data-tui-color='support-picton'], -[data-tui-color='support-14'] { - color: var(--tui-support-14); -} - -[data-tui-color='support-mint'], -[data-tui-color='support-15'] { - color: var(--tui-support-15); -} - -[data-tui-color='support-fountain'], -[data-tui-color='support-16'] { - color: var(--tui-support-16); -} - -[data-tui-color='support-puertorico'], -[data-tui-color='support-17'] { - color: var(--tui-support-17); -} - -[data-tui-color='support-bay'], -[data-tui-color='support-18'] { - color: var(--tui-support-18); -} - -[data-tui-color='support-forest'], -[data-tui-color='support-19'] { - color: var(--tui-support-19); -} - -[data-tui-color='support-york'], -[data-tui-color='support-20'] { - color: var(--tui-support-20); -} - -[data-tui-color='support-feijoa'], -[data-tui-color='support-21'] { - color: var(--tui-support-21); -} - -[data-tui-color='base-01'] { - color: var(--tui-base-01); -} - -[data-tui-color='base-02'] { - color: var(--tui-base-02); -} - -[data-tui-color='base-03'] { - color: var(--tui-base-03); -} - -[data-tui-color='base-04'] { - color: var(--tui-base-04); -} - -[data-tui-color='base-05'] { - color: var(--tui-base-05); -} - -[data-tui-color='base-06'] { - color: var(--tui-base-06); -} - -[data-tui-color='base-07'] { - color: var(--tui-base-07); -} - -[data-tui-color='base-08'] { - color: var(--tui-base-08); -} - -[data-tui-color='base-09'] { - color: var(--tui-base-09); -} -`; diff --git a/projects/core/directives/color/color.directive.ts b/projects/core/directives/color/color.directive.ts deleted file mode 100644 index dbfb96ed6833f..0000000000000 --- a/projects/core/directives/color/color.directive.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {Directive, HostBinding, Inject, Input} from '@angular/core'; -import {tuiDefaultProp, TuiDirectiveStylesService} from '@taiga-ui/cdk'; -import {TuiColor} from '@taiga-ui/core/types'; - -import {COLOR} from './color.const'; - -/** - * @deprecated use CSS custom properties - */ -@Directive({ - selector: `[tuiColor],[tuiBackground]`, -}) -export class TuiColorDirective { - @Input() - @HostBinding(`attr.data-tui-color`) - @tuiDefaultProp() - tuiColor: TuiColor | string = ``; - - @Input() - @HostBinding(`attr.data-tui-background`) - @tuiDefaultProp() - tuiBackground: TuiColor | string = ``; - - constructor( - @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, - ) { - directiveStyles.addStyle(COLOR, `TuiColorDirective`); - } -} diff --git a/projects/core/directives/color/color.module.ts b/projects/core/directives/color/color.module.ts deleted file mode 100644 index bc9053ac0b640..0000000000000 --- a/projects/core/directives/color/color.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TuiColorDirective} from './color.directive'; - -/** - * @deprecated use CSS custom properties - */ -@NgModule({ - declarations: [TuiColorDirective], - exports: [TuiColorDirective], -}) -export class TuiColorModule {} diff --git a/projects/core/directives/color/index.ts b/projects/core/directives/color/index.ts deleted file mode 100644 index 47e4104dd6a64..0000000000000 --- a/projects/core/directives/color/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './color.const'; -export * from './color.directive'; -export * from './color.module'; diff --git a/projects/core/directives/color/package.json b/projects/core/directives/color/package.json deleted file mode 100644 index 289d2d373a50c..0000000000000 --- a/projects/core/directives/color/package.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "ngPackage": { - "lib": { - "entryFile": "index.ts" - } - } -} diff --git a/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts b/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts index 6fb55e1693c11..08254b7872937 100644 --- a/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts +++ b/projects/core/directives/dropdown-controller/dropdown-controller.directive.ts @@ -2,7 +2,7 @@ import {Directive, forwardRef, Input} from '@angular/core'; import {AbstractTuiController, tuiDefaultProp} from '@taiga-ui/cdk'; import {DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT} from '@taiga-ui/core/constants'; import { - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core/types'; @@ -30,7 +30,7 @@ export class TuiDropdownControllerDirective extends AbstractTuiController { @Input('tuiDropdownLimitWidth') @tuiDefaultProp() - limitWidth: TuiDropdownWidthT = 'auto'; + limitWidth: TuiDropdownWidth = 'auto'; @Input('tuiDropdownMinHeight') @tuiDefaultProp() diff --git a/projects/core/directives/index.ts b/projects/core/directives/index.ts index 505a9efa1ea12..94a66627118a9 100644 --- a/projects/core/directives/index.ts +++ b/projects/core/directives/index.ts @@ -1,4 +1,3 @@ -export * from '@taiga-ui/core/directives/color'; export * from '@taiga-ui/core/directives/described-by'; export * from '@taiga-ui/core/directives/dropdown'; export * from '@taiga-ui/core/directives/dropdown-controller'; diff --git a/projects/core/directives/wrapper/wrapper.directive.ts b/projects/core/directives/wrapper/wrapper.directive.ts index 46de2f260c60f..ae3b32f5a5a23 100644 --- a/projects/core/directives/wrapper/wrapper.directive.ts +++ b/projects/core/directives/wrapper/wrapper.directive.ts @@ -58,11 +58,11 @@ export class TuiWrapperDirective { } if (this.active) { - return TuiInteractiveState.Pressed; + return TuiInteractiveState.Active; } if (this.hover) { - return TuiInteractiveState.Hovered; + return TuiInteractiveState.Hover; } return null; diff --git a/projects/core/enums/base-color.ts b/projects/core/enums/base-color.ts deleted file mode 100644 index cfa57e7c9c404..0000000000000 --- a/projects/core/enums/base-color.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @deprecated - */ -export const enum TuiBaseColor { - Primary = `primary`, - Secondary = `secondary`, - Success = `success`, - Error = `error`, -} diff --git a/projects/core/enums/button-shape.ts b/projects/core/enums/button-shape.ts deleted file mode 100644 index a99966dc9b36a..0000000000000 --- a/projects/core/enums/button-shape.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * @deprecated use string values - */ -export const enum TuiButtonShape { - Square = `square`, - Rounded = `rounded`, -} diff --git a/projects/core/enums/decimal.ts b/projects/core/enums/decimal.ts deleted file mode 100644 index f092ae9ced592..0000000000000 --- a/projects/core/enums/decimal.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @deprecated use join type {@link TuiDecimalT} - */ -export const enum TuiDecimal { - NotZero = `not-zero`, - Always = `always`, - Never = `never`, -} diff --git a/projects/core/enums/dropdown-width.ts b/projects/core/enums/dropdown-width.ts deleted file mode 100644 index dc61df3cb6e61..0000000000000 --- a/projects/core/enums/dropdown-width.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @deprecated use join type {@link TuiDropdownWidthT} - */ -export const enum TuiDropdownWidth { - Fixed = `fixed`, - Min = `min`, - Auto = `auto`, -} diff --git a/projects/core/enums/hint-mode.ts b/projects/core/enums/hint-mode.ts deleted file mode 100644 index dc1c6e8bf3be1..0000000000000 --- a/projects/core/enums/hint-mode.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @deprecated use join type {@link TuiHintModeT} - */ -export const enum TuiHintMode { - Error = `error`, - OnDark = `onDark`, - Overflow = `overflow`, -} diff --git a/projects/core/enums/index.ts b/projects/core/enums/index.ts index 1271bc0c9a6c2..6cfae90b9d70e 100644 --- a/projects/core/enums/index.ts +++ b/projects/core/enums/index.ts @@ -1,13 +1,5 @@ export * from './appearance'; -export * from './base-color'; -export * from './button-shape'; -export * from './decimal'; export * from './dropdown-animation'; -export * from './dropdown-width'; -export * from './hint-mode'; export * from './interactive-state'; -export * from './link-mode'; export * from './notification'; -export * from './orientation'; export * from './range-state'; -export * from './support-color'; diff --git a/projects/core/enums/interactive-state.ts b/projects/core/enums/interactive-state.ts index 4903242740c25..38f406efcb496 100644 --- a/projects/core/enums/interactive-state.ts +++ b/projects/core/enums/interactive-state.ts @@ -2,10 +2,8 @@ * @internal used in calendar, year picker and wrapper */ export const enum TuiInteractiveState { - Disabled = `disabled`, - Readonly = `readonly`, - // TODO: 3.0 Rename to `active` - Pressed = `pressed`, - // TODO: 3.0 Rename to `hover` - Hovered = `hovered`, + Disabled = 'disabled', + Readonly = 'readonly', + Active = 'active', + Hover = 'hover', } diff --git a/projects/core/enums/link-mode.ts b/projects/core/enums/link-mode.ts deleted file mode 100644 index 64f170a94e341..0000000000000 --- a/projects/core/enums/link-mode.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * @deprecated use string values - */ -export const enum TuiLinkMode { - Positive = `positive`, - Negative = `negative`, -} diff --git a/projects/core/enums/orientation.ts b/projects/core/enums/orientation.ts deleted file mode 100644 index 162e18a1069ac..0000000000000 --- a/projects/core/enums/orientation.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * @deprecated use join type {@link TuiOrientationT} - */ -export const enum TuiOrientation { - Vertical = `vertical`, - Horizontal = `horizontal`, -} diff --git a/projects/core/enums/support-color.ts b/projects/core/enums/support-color.ts deleted file mode 100644 index 8962b0046d881..0000000000000 --- a/projects/core/enums/support-color.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @deprecated - */ -export const enum TuiSupportColor { - Mustard = `support-01`, - Texas = `support-02`, - Tan = `support-03`, - Salmon = `support-04`, - Sienna = `support-05`, - Bittersweet = `support-06`, - Pinkie = `support-07`, - Charm = `support-08`, - Amethist = `support-09`, - Helio = `support-10`, - Lilac = `support-11`, - Malibu = `support-12`, - Havelock = `support-13`, - Picton = `support-14`, - Mint = `support-15`, - Fountain = `support-16`, - Puertorico = `support-17`, - Bay = `support-18`, - Forest = `support-19`, - York = `support-20`, - Feijoa = `support-21`, -} diff --git a/projects/core/interfaces/dropdown-directive.ts b/projects/core/interfaces/dropdown-directive.ts index 671999d672062..09c157449d69c 100644 --- a/projects/core/interfaces/dropdown-directive.ts +++ b/projects/core/interfaces/dropdown-directive.ts @@ -1,6 +1,6 @@ import {TuiActiveZoneDirective, TuiNativeFocusableElement} from '@taiga-ui/cdk'; import { - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core/types'; @@ -16,7 +16,7 @@ export interface TuiDropdown { minHeight: number; maxHeight: number; direction?: TuiVerticalDirection | null; - limitMinWidth?: TuiDropdownWidthT; + limitMinWidth?: TuiDropdownWidth; sided?: boolean; fixed?: boolean; activeZone?: TuiActiveZoneDirective | null; diff --git a/projects/core/styles/mixins/picker.less b/projects/core/styles/mixins/picker.less index 1ca09d873c285..8df50c2c057cf 100644 --- a/projects/core/styles/mixins/picker.less +++ b/projects/core/styles/mixins/picker.less @@ -110,13 +110,13 @@ } } - &[data-state='hovered'] > .t-item:before, - &[data-state='hovered'] > .t-item:after { + &[data-state='hover'] > .t-item:before, + &[data-state='hover'] > .t-item:after { background-color: var(--tui-primary-hover); } - &[data-state='pressed'] > .t-item:before, - &[data-state='pressed'] > .t-item:after { + &[data-state='active'] > .t-item:before, + &[data-state='active'] > .t-item:after { background-color: var(--tui-primary-active); } } @@ -153,11 +153,11 @@ } } - &[data-state='hovered']:hover:not([data-range]) > .t-item { + &[data-state='hover']:hover:not([data-range]) > .t-item { background-color: var(--tui-secondary-hover); } - &[data-state='pressed']:hover:not([data-range]) > .t-item { + &[data-state='active']:hover:not([data-range]) > .t-item { background-color: var(--tui-secondary-active); } } diff --git a/projects/core/styles/mixins/picker.scss b/projects/core/styles/mixins/picker.scss index 99776d136275b..cc1d3f55c3607 100644 --- a/projects/core/styles/mixins/picker.scss +++ b/projects/core/styles/mixins/picker.scss @@ -110,13 +110,13 @@ } } - &[data-state='hovered'] > .t-item:before, - &[data-state='hovered'] > .t-item:after { + &[data-state='hover'] > .t-item:before, + &[data-state='hover'] > .t-item:after { background-color: var(--tui-primary-hover); } - &[data-state='pressed'] > .t-item:before, - &[data-state='pressed'] > .t-item:after { + &[data-state='active'] > .t-item:before, + &[data-state='active'] > .t-item:after { background-color: var(--tui-primary-active); } } @@ -153,12 +153,12 @@ } } - &[data-state='hovered']:hover:not([data-range]) + &[data-state='hover']:hover:not([data-range]) > .t-item { background-color: var(--tui-secondary-hover); } - &[data-state='pressed']:hover:not([data-range]) + &[data-state='active']:hover:not([data-range]) > .t-item { background-color: var(--tui-secondary-active); } diff --git a/projects/core/styles/mixins/wrapper.less b/projects/core/styles/mixins/wrapper.less index 0620e2c3c3976..d1f09285a582e 100644 --- a/projects/core/styles/mixins/wrapper.less +++ b/projects/core/styles/mixins/wrapper.less @@ -1,7 +1,7 @@ .wrapper-hover(@ruleset) { @media (hover: hover) { &:hover:not(._no-hover), - &[data-state='hovered'] { + &[data-state='hover'] { @ruleset(); } } @@ -9,8 +9,8 @@ .wrapper-active(@ruleset) { &:active:not(._no-active), - &[data-state='pressed'], - &[data-state='pressed']:hover { + &[data-state='active'], + &[data-state='active']:hover { @ruleset(); } } diff --git a/projects/core/styles/mixins/wrapper.scss b/projects/core/styles/mixins/wrapper.scss index 6889e473b27e2..ef80d7746c5a5 100644 --- a/projects/core/styles/mixins/wrapper.scss +++ b/projects/core/styles/mixins/wrapper.scss @@ -1,14 +1,14 @@ @mixin wrapper-hover { &:hover:not(._no-hover), - &[data-state='hovered'] { + &[data-state='hover'] { @content; } } @mixin wrapper-active { &:active:not(._no-active), - &[data-state='pressed'], - &[data-state='pressed']:hover { + &[data-state='active'], + &[data-state='active']:hover { @content; } } diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less index 66c64d633a289..994a6cb4ff05c 100644 --- a/projects/core/styles/theme/variables.less +++ b/projects/core/styles/theme/variables.less @@ -145,4 +145,9 @@ --tui-support-21: #a0c5df; // TODO: 3.0 This color does not exist in our palette --tui-support-22: #3c7ba8; + --tui-chart-0: var(--tui-primary); + --tui-chart-1: var(--tui-support-13); + --tui-chart-2: var(--tui-support-21); + --tui-chart-3: var(--tui-support-11); + --tui-chart-4: var(--tui-base-05); } diff --git a/projects/core/types/color.ts b/projects/core/types/color.ts deleted file mode 100644 index 5e702d1d8433d..0000000000000 --- a/projects/core/types/color.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {TuiBaseColor, TuiSupportColor} from '@taiga-ui/core/enums'; - -/** @deprecated */ -export type TuiColor = - | TuiBaseColor - | TuiSupportColor - | 'base-01' - | 'base-02' - | 'base-03' - | 'base-04' - | 'base-05' - | 'base-06' - | 'base-07' - | 'base-08' - | 'base-09'; diff --git a/projects/core/types/decimal.ts b/projects/core/types/decimal.ts index 2f61f93e3a518..d899026e93e3b 100644 --- a/projects/core/types/decimal.ts +++ b/projects/core/types/decimal.ts @@ -1 +1 @@ -export type TuiDecimalT = 'not-zero' | 'always' | 'never'; +export type TuiDecimal = 'not-zero' | 'always' | 'never'; diff --git a/projects/core/types/dropdown-width.ts b/projects/core/types/dropdown-width.ts index 9e9c63004c85c..633f4aa7225a6 100644 --- a/projects/core/types/dropdown-width.ts +++ b/projects/core/types/dropdown-width.ts @@ -1 +1 @@ -export type TuiDropdownWidthT = 'fixed' | 'min' | 'auto'; +export type TuiDropdownWidth = 'fixed' | 'min' | 'auto'; diff --git a/projects/core/types/hint-mode.ts b/projects/core/types/hint-mode.ts index d4b88fdf1f244..1b0706357c820 100644 --- a/projects/core/types/hint-mode.ts +++ b/projects/core/types/hint-mode.ts @@ -1 +1 @@ -export type TuiHintModeT = 'error' | 'onDark' | 'overflow'; +export type TuiHintMode = 'error' | 'onDark' | 'overflow'; diff --git a/projects/core/types/index.ts b/projects/core/types/index.ts index 18b60e9c1c455..3d6b0e7a176de 100644 --- a/projects/core/types/index.ts +++ b/projects/core/types/index.ts @@ -1,5 +1,4 @@ export * from './brightness'; -export * from './color'; export * from './data-list-role'; export * from './decimal'; export * from './decimal-symbol'; diff --git a/projects/core/types/marker-handler.ts b/projects/core/types/marker-handler.ts index 051cc4adb7272..cdd818fcae4b9 100644 --- a/projects/core/types/marker-handler.ts +++ b/projects/core/types/marker-handler.ts @@ -1,8 +1,3 @@ import {TuiDay, TuiHandler} from '@taiga-ui/cdk'; -import {TuiColor} from './color'; - -export type TuiMarkerHandler = TuiHandler< - TuiDay, - [] | [TuiColor | string] | [TuiColor | string, TuiColor | string] ->; +export type TuiMarkerHandler = TuiHandler; diff --git a/projects/core/types/orientation.ts b/projects/core/types/orientation.ts index 70efe72f55e40..078158b05c201 100644 --- a/projects/core/types/orientation.ts +++ b/projects/core/types/orientation.ts @@ -1 +1 @@ -export type TuiOrientationT = 'vertical' | 'horizontal'; +export type TuiOrientation = 'vertical' | 'horizontal'; diff --git a/projects/core/utils/format/format-number.ts b/projects/core/utils/format/format-number.ts index c29aa084082a3..654b6174a23eb 100644 --- a/projects/core/utils/format/format-number.ts +++ b/projects/core/utils/format/format-number.ts @@ -1,6 +1,6 @@ import {CHAR_HYPHEN, CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk'; -import {getFractionPartPadded} from './get-fractional-part-padded'; +import {tuiGetFractionPartPadded} from './get-fractional-part-padded'; // TODO: refactor later to `formatNumber(value: number, options: Partial)` /** @@ -25,7 +25,7 @@ export function formatNumber( ): string { const integerPartString = String(Math.floor(Math.abs(value))); - let fractionPartPadded = getFractionPartPadded(value, decimalLimit); + let fractionPartPadded = tuiGetFractionPartPadded(value, decimalLimit); if (decimalLimit !== null) { if (zeroPadding) { diff --git a/projects/core/utils/format/get-fractional-part-padded.ts b/projects/core/utils/format/get-fractional-part-padded.ts index b87976c3a086c..68156b1ad2303 100644 --- a/projects/core/utils/format/get-fractional-part-padded.ts +++ b/projects/core/utils/format/get-fractional-part-padded.ts @@ -3,20 +3,19 @@ import {tuiIsNumber} from '@taiga-ui/cdk'; import {tuiNumberToStringWithoutExp} from './number-to-string-without-exp'; /** - * @deprecated: use {@link tuiGetFractionPartPadded} instead * Return fractional part of number * * @param value the number * @param precision number of digits of decimal part, null to keep untouched * @return the fractional part of number */ -// eslint-disable-next-line @typescript-eslint/naming-convention -export function getFractionPartPadded(value: number, precision?: number | null): string { +export function tuiGetFractionPartPadded( + value: number, + precision?: number | null, +): string { const [, fractionPartPadded = ''] = tuiNumberToStringWithoutExp(value).split('.'); return tuiIsNumber(precision) ? fractionPartPadded.slice(0, Math.max(0, precision)) : fractionPartPadded; } - -export const tuiGetFractionPartPadded = getFractionPartPadded; diff --git a/projects/core/utils/format/test/get-fractional-part-padded.spec.ts b/projects/core/utils/format/test/get-fractional-part-padded.spec.ts index c6bc7384f9941..d26b10eb1a3bf 100644 --- a/projects/core/utils/format/test/get-fractional-part-padded.spec.ts +++ b/projects/core/utils/format/test/get-fractional-part-padded.spec.ts @@ -1,65 +1,65 @@ -import {getFractionPartPadded} from '../get-fractional-part-padded'; +import {tuiGetFractionPartPadded} from '../get-fractional-part-padded'; -describe(`Getting fractional part from number`, () => { - describe(`without precision argument`, () => { - it(`integer value`, () => { - expect(getFractionPartPadded(100)).toBe(``); +describe('Getting fractional part from number', () => { + describe('without precision argument', () => { + it('integer value', () => { + expect(tuiGetFractionPartPadded(100)).toBe(''); }); - it(`negative integer value`, () => { - expect(getFractionPartPadded(-10)).toBe(``); + it('negative integer value', () => { + expect(tuiGetFractionPartPadded(-10)).toBe(''); }); - it(`fractional value`, () => { - expect(getFractionPartPadded(0.0002)).toBe(`0002`); + it('fractional value', () => { + expect(tuiGetFractionPartPadded(0.0002)).toBe('0002'); }); - it(`negative fractional value`, () => { - expect(getFractionPartPadded(-0.0002)).toBe(`0002`); + it('negative fractional value', () => { + expect(tuiGetFractionPartPadded(-0.0002)).toBe('0002'); }); - it(`fractional value with precision > 6`, () => { - expect(getFractionPartPadded(0.00000002)).toBe(`00000002`); + it('fractional value with precision > 6', () => { + expect(tuiGetFractionPartPadded(0.00000002)).toBe('00000002'); }); - it(`negative fractional value with precision > 6`, () => { - expect(getFractionPartPadded(-0.00000002)).toBe(`00000002`); + it('negative fractional value with precision > 6', () => { + expect(tuiGetFractionPartPadded(-0.00000002)).toBe('00000002'); }); }); - describe(`with precision argument equals 2`, () => { - it(`integer value`, () => { - expect(getFractionPartPadded(100, 2)).toBe(``); + describe('with precision argument equals 2', () => { + it('integer value', () => { + expect(tuiGetFractionPartPadded(100, 2)).toBe(''); }); - it(`negative integer value`, () => { - expect(getFractionPartPadded(-10, 2)).toBe(``); + it('negative integer value', () => { + expect(tuiGetFractionPartPadded(-10, 2)).toBe(''); }); - it(`fractional value with small precision and bigger `, () => { - expect(getFractionPartPadded(0.0002, 2)).toBe(`00`); + it('fractional value with small precision and bigger ', () => { + expect(tuiGetFractionPartPadded(0.0002, 2)).toBe('00'); }); - it(`fractional value with precision > 6`, () => { - expect(getFractionPartPadded(0.00000002, 2)).toBe(`00`); + it('fractional value with precision > 6', () => { + expect(tuiGetFractionPartPadded(0.00000002, 2)).toBe('00'); }); }); - describe(`with precision argument equals 8`, () => { - it(`integer value`, () => { - expect(getFractionPartPadded(100, 8)).toBe(``); + describe('with precision argument equals 8', () => { + it('integer value', () => { + expect(tuiGetFractionPartPadded(100, 8)).toBe(''); }); - it(`negative integer value`, () => { - expect(getFractionPartPadded(-10, 8)).toBe(``); + it('negative integer value', () => { + expect(tuiGetFractionPartPadded(-10, 8)).toBe(''); }); - it(`fractional value with small precision and bigger `, () => { - expect(getFractionPartPadded(0.0002, 8)).toBe(`0002`); + it('fractional value with small precision and bigger ', () => { + expect(tuiGetFractionPartPadded(0.0002, 8)).toBe('0002'); }); - it(`fractional value with precision > 6`, () => { - expect(getFractionPartPadded(0.00000002, 8)).toBe(`00000002`); + it('fractional value with precision > 6', () => { + expect(tuiGetFractionPartPadded(0.00000002, 8)).toBe('00000002'); }); }); }); diff --git a/projects/core/utils/miscellaneous/color-fallback.ts b/projects/core/utils/miscellaneous/color-fallback.ts deleted file mode 100644 index 78381bb21793c..0000000000000 --- a/projects/core/utils/miscellaneous/color-fallback.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @deprecated has been deleted in 3.0, please use CSS variables - */ -// eslint-disable-next-line @typescript-eslint/naming-convention -export function colorFallback(color: string | null): string { - switch (color) { - case `secondary`: - return `var(--tui-info-fill)`; - case `error`: - return `var(--tui-error-fill)`; - case `success`: - return `var(--tui-success-fill)`; - default: - return `var(--tui-${color || `base-05`})`; - } -} diff --git a/projects/core/utils/miscellaneous/index.ts b/projects/core/utils/miscellaneous/index.ts index e8f55d04cb129..bdf1cf9f84fa1 100644 --- a/projects/core/utils/miscellaneous/index.ts +++ b/projects/core/utils/miscellaneous/index.ts @@ -1,4 +1,3 @@ -export * from './color-fallback'; export * from './get-border'; export * from './icons-path-factory'; export * from './is-editing-key'; diff --git a/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts b/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts index e3b9cae5963d1..a6de48d3e3a00 100644 --- a/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts +++ b/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts @@ -3,7 +3,7 @@ import {changeDetection} from '@demo/emulate/change-detection'; import {TuiCurrency, tuiGetCurrencySymbol} from '@taiga-ui/addon-commerce'; import {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiContextWithImplicit} from '@taiga-ui/cdk'; -import {formatNumber, TuiHintModeT, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import {formatNumber, TuiHintMode, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; const MONTHS: readonly string[] = [ @@ -75,9 +75,9 @@ export class ExampleTuiBarChartComponent { hintContent = this.contentVariants[0]; - readonly hintModeVariants: readonly TuiHintModeT[] = ['onDark', 'error']; + readonly hintModeVariants: readonly TuiHintMode[] = ['onDark', 'error']; - hintMode: TuiHintModeT | null = null; + hintMode: TuiHintMode | null = null; getHint(index: number): string { return this.value diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts index e67a26f895c1d..75317fff95979 100644 --- a/projects/demo/src/modules/components/abstract/control.ts +++ b/projects/demo/src/modules/components/abstract/control.ts @@ -4,8 +4,8 @@ import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, TuiDirection, - TuiDropdownWidthT, - TuiHintModeT, + TuiDropdownWidth, + TuiHintMode, TuiHorizontalDirection, TuiSizeL, TuiSizeS, @@ -50,7 +50,7 @@ export abstract class AbstractExampleTuiControl 'top-middle', ]; - readonly hintModeVariants: readonly TuiHintModeT[] = ['error', 'onDark']; + readonly hintModeVariants: readonly TuiHintMode[] = ['error', 'onDark']; readonly typeVariants: readonly TuiInputType[] = [ 'text', @@ -118,15 +118,15 @@ export abstract class AbstractExampleTuiControl hintDirection: TuiDirection = this.hintDirectionVariants[2]; - hintMode: TuiHintModeT | null = null; + hintMode: TuiHintMode | null = null; readonly dropdownAlignVariants: readonly TuiHorizontalDirection[] = ['left', 'right']; dropdownAlign: TuiHorizontalDirection = this.dropdownAlignVariants[0]; - readonly dropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = ['fixed', 'min']; + readonly dropdownLimitWidthVariants: readonly TuiDropdownWidth[] = ['fixed', 'min']; - dropdownLimitWidth: TuiDropdownWidthT = this.dropdownLimitWidthVariants[0]; + dropdownLimitWidth: TuiDropdownWidth = this.dropdownLimitWidthVariants[0]; readonly dropdownDirectionVariants: readonly TuiVerticalDirection[] = [ 'top', diff --git a/projects/demo/src/modules/components/abstract/dropdown-controller-documentation/dropdown-controller-documentation.component.ts b/projects/demo/src/modules/components/abstract/dropdown-controller-documentation/dropdown-controller-documentation.component.ts index 452e84d5d0b06..7eb41bcd29813 100644 --- a/projects/demo/src/modules/components/abstract/dropdown-controller-documentation/dropdown-controller-documentation.component.ts +++ b/projects/demo/src/modules/components/abstract/dropdown-controller-documentation/dropdown-controller-documentation.component.ts @@ -1,7 +1,7 @@ import {Component, Inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import { - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; @@ -11,8 +11,8 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../inherited-documentation/abstract-props export interface ExampleTuiDropdown { dropdownDirectionVariants: readonly TuiVerticalDirection[]; dropdownDirection: TuiVerticalDirection | null; - dropdownLimitWidthVariants: readonly TuiDropdownWidthT[]; - dropdownLimitWidth: TuiDropdownWidthT; + dropdownLimitWidthVariants: readonly TuiDropdownWidth[]; + dropdownLimitWidth: TuiDropdownWidth; dropdownAlignVariants: readonly TuiHorizontalDirection[]; dropdownAlign: TuiHorizontalDirection; dropdownMinHeight: number; diff --git a/projects/demo/src/modules/components/abstract/hint.ts b/projects/demo/src/modules/components/abstract/hint.ts index 973fbc082206e..0e32afb62b671 100644 --- a/projects/demo/src/modules/components/abstract/hint.ts +++ b/projects/demo/src/modules/components/abstract/hint.ts @@ -1,19 +1,19 @@ -import {TuiDirection, TuiHintModeT} from '@taiga-ui/core'; +import {TuiDirection, TuiHintMode} from '@taiga-ui/core'; export abstract class AbstractExampleTuiHint { - readonly modeVariants: readonly TuiHintModeT[] = [`error`, `onDark`]; + readonly modeVariants: readonly TuiHintMode[] = ['error', 'onDark']; - mode: TuiHintModeT | null = null; + mode: TuiHintMode | null = null; readonly directionVariants: readonly TuiDirection[] = [ - `left`, - `right`, - `bottom-left`, - `bottom-right`, - `bottom-middle`, - `top-left`, - `top-right`, - `top-middle`, + 'left', + 'right', + 'bottom-left', + 'bottom-right', + 'bottom-middle', + 'top-left', + 'top-right', + 'top-middle', ]; direction: TuiDirection = this.directionVariants[5]; diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts index a8ffcc8730463..e283dd0e1ad00 100644 --- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts +++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.component.ts @@ -1,6 +1,6 @@ import {Component, Inject, Input} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDirection, TuiHintModeT} from '@taiga-ui/core'; +import {TuiDirection, TuiHintMode} from '@taiga-ui/core'; import {AbstractExampleTuiControl} from '../control'; import {AbstractExampleTuiHint} from '../hint'; @@ -9,8 +9,8 @@ import {ABSTRACT_PROPS_ACCESSOR} from './abstract-props-accessor'; import {TuiSupportingDocumentationComponent} from './supporting-documentation-component'; @Component({ - selector: `inherited-documentation`, - templateUrl: `./inherited-documentation.template.html`, + selector: 'inherited-documentation', + templateUrl: './inherited-documentation.template.html', changeDetection, }) export class InheritedDocumentationComponent { @@ -20,17 +20,17 @@ export class InheritedDocumentationComponent { readonly booleanVariants: readonly boolean[] = [false, true]; readonly directionVariants: readonly TuiDirection[] = [ - `left`, - `right`, - `bottom-left`, - `bottom-right`, - `bottom-middle`, - `top-left`, - `top-right`, - `top-middle`, + 'left', + 'right', + 'bottom-left', + 'bottom-right', + 'bottom-middle', + 'top-left', + 'top-right', + 'top-middle', ]; - readonly modeVariants: readonly TuiHintModeT[] = [`error`, `onDark`]; + readonly modeVariants: readonly TuiHintMode[] = ['error', 'onDark']; constructor( @Inject(ABSTRACT_PROPS_ACCESSOR) diff --git a/projects/demo/src/modules/components/badge/badge.template.html b/projects/demo/src/modules/components/badge/badge.template.html index 5061b18bc9895..3429d494f67d3 100644 --- a/projects/demo/src/modules/components/badge/badge.template.html +++ b/projects/demo/src/modules/components/badge/badge.template.html @@ -106,7 +106,7 @@ i18n documentationPropertyName="status" documentationPropertyMode="input" - documentationPropertyType="TuiStatus | TuiSupportColor" + documentationPropertyType="TuiStatus" [documentationPropertyValues]="statusVariants" [(documentationPropertyValue)]="status" > diff --git a/projects/demo/src/modules/components/button/examples/4/index.less b/projects/demo/src/modules/components/button/examples/4/index.less index 65585c9cdcc8d..8ee0b0726e2b2 100644 --- a/projects/demo/src/modules/components/button/examples/4/index.less +++ b/projects/demo/src/modules/components/button/examples/4/index.less @@ -1,17 +1,18 @@ +@import 'taiga-ui-local'; // This goes into global, unencapsulated styles [tuiWrapper][data-appearance='custom'] { background: #bc71c9; color: #fff; - &[data-state='hovered'] { + .wrapper-hover({ background: #a381ff; - } + }); - &[data-state='pressed'] { + .wrapper-active({ background: #8f75d1; - } + }); - &[data-state='disabled'] { + .wrapper-disabled({ background: #eaecee; - } + }); } diff --git a/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts b/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts index 509d13cba0831..d567f9731d29b 100644 --- a/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts +++ b/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts @@ -10,16 +10,11 @@ import { TuiDayLike, TuiMonth, } from '@taiga-ui/cdk'; -import { - TUI_DEFAULT_MARKER_HANDLER, - TuiBaseColor, - TuiColor, - TuiMarkerHandler, -} from '@taiga-ui/core'; +import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core'; import {tuiCreateDefaultDayRangePeriods, TuiDayRangePeriod} from '@taiga-ui/kit'; -const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary]; -const ONE_DOT: [TuiColor] = [TuiBaseColor.Success]; +const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)']; +const ONE_DOT: [string] = ['var(--tui-success-fill)']; @Component({ selector: 'example-calendar-range', diff --git a/projects/demo/src/modules/components/calendar/calendar.component.ts b/projects/demo/src/modules/components/calendar/calendar.component.ts index 65f465d827506..57f6ffa00f56a 100644 --- a/projects/demo/src/modules/components/calendar/calendar.component.ts +++ b/projects/demo/src/modules/components/calendar/calendar.component.ts @@ -13,13 +13,11 @@ import { import { TUI_DEFAULT_MARKER_HANDLER, TuiAlertService, - TuiBaseColor, - TuiColor, TuiMarkerHandler, } from '@taiga-ui/core'; -const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary]; -const ONE_DOT: [TuiColor] = [TuiBaseColor.Success]; +const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)']; +const ONE_DOT: [string] = ['var(--tui-success-fill)']; @Component({ selector: 'example-tui-calendar', diff --git a/projects/demo/src/modules/components/calendar/examples/3/index.ts b/projects/demo/src/modules/components/calendar/examples/3/index.ts index b555b517d53fe..78888e7f8ba88 100644 --- a/projects/demo/src/modules/components/calendar/examples/3/index.ts +++ b/projects/demo/src/modules/components/calendar/examples/3/index.ts @@ -2,10 +2,10 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiDay, TuiDayRange, TuiMonth} from '@taiga-ui/cdk'; -import {TuiBaseColor, TuiColor, TuiMarkerHandler} from '@taiga-ui/core'; +import {TuiMarkerHandler} from '@taiga-ui/core'; -const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary]; -const ONE_DOT: [TuiColor] = [TuiBaseColor.Success]; +const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)']; +const ONE_DOT: [string] = ['var(--tui-success-fill)']; @Component({ selector: `tui-calendar-example-3`, diff --git a/projects/demo/src/modules/components/group/group.component.ts b/projects/demo/src/modules/components/group/group.component.ts index ba4e682c24494..bd50edc7ee02a 100644 --- a/projects/demo/src/modules/components/group/group.component.ts +++ b/projects/demo/src/modules/components/group/group.component.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiOrientationT, TuiSizeL} from '@taiga-ui/core'; +import {TuiOrientation, TuiSizeL} from '@taiga-ui/core'; @Component({ selector: 'example-group', @@ -39,9 +39,9 @@ export class ExampleTuiGroupComponent { rounded = true; collapsed = false; - readonly orientationVariants: readonly TuiOrientationT[] = ['horizontal', 'vertical']; + readonly orientationVariants: readonly TuiOrientation[] = ['horizontal', 'vertical']; - orientation: TuiOrientationT = this.orientationVariants[0]; + orientation: TuiOrientation = this.orientationVariants[0]; readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l']; diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts index cd926dee93c28..3f241b194b813 100644 --- a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts +++ b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts @@ -4,7 +4,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc'; import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; @@ -65,9 +65,9 @@ export class ExampleTuiHostedDropdownComponent { direction: TuiVerticalDirection | null = this.directionVariants[0]; - readonly limitWidthVariants: readonly TuiDropdownWidthT[] = ['auto', 'fixed', 'min']; + readonly limitWidthVariants: readonly TuiDropdownWidth[] = ['auto', 'fixed', 'min']; - limitWidth: TuiDropdownWidthT = this.limitWidthVariants[0]; + limitWidth: TuiDropdownWidth = this.limitWidthVariants[0]; open = false; diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.component.ts b/projects/demo/src/modules/components/input-date-range/input-date-range.component.ts index 997b5a25d1e59..7c3639e7fed86 100644 --- a/projects/demo/src/modules/components/input-date-range/input-date-range.component.ts +++ b/projects/demo/src/modules/components/input-date-range/input-date-range.component.ts @@ -11,19 +11,14 @@ import { TuiDayLike, TuiMonth, } from '@taiga-ui/cdk'; -import { - TUI_DEFAULT_MARKER_HANDLER, - TuiBaseColor, - TuiColor, - TuiMarkerHandler, -} from '@taiga-ui/core'; +import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core'; import {tuiCreateDefaultDayRangePeriods, TuiDayRangePeriod} from '@taiga-ui/kit'; import {AbstractExampleTuiControl} from '../abstract/control'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; -const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary]; -const ONE_DOT: [TuiColor] = [TuiBaseColor.Success]; +const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)']; +const ONE_DOT: [string] = ['var(--tui-success-fill)']; @Component({ selector: 'example-tui-input-date-range', diff --git a/projects/demo/src/modules/components/input-date/input-date.component.ts b/projects/demo/src/modules/components/input-date/input-date.component.ts index fca19b8fa2d77..1d31b7ec23806 100644 --- a/projects/demo/src/modules/components/input-date/input-date.component.ts +++ b/projects/demo/src/modules/components/input-date/input-date.component.ts @@ -10,19 +10,14 @@ import { TuiBooleanHandler, TuiDay, } from '@taiga-ui/cdk'; -import { - TUI_DEFAULT_MARKER_HANDLER, - TuiBaseColor, - TuiColor, - TuiMarkerHandler, -} from '@taiga-ui/core'; +import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core'; import {TuiNamedDay} from '@taiga-ui/kit'; import {AbstractExampleTuiControl} from '../abstract/control'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; -const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary]; -const ONE_DOT: [TuiColor] = [TuiBaseColor.Success]; +const TWO_DOTS: [string, string] = ['var(--tui-primary)', 'var(--tui-info-fill)']; +const ONE_DOT: [string] = ['var(--tui-success-fill)']; @Component({ selector: 'example-tui-input-date', diff --git a/projects/demo/src/modules/components/input-number/input-number.component.ts b/projects/demo/src/modules/components/input-number/input-number.component.ts index b36f88f29f0b2..59ea391342194 100644 --- a/projects/demo/src/modules/components/input-number/input-number.component.ts +++ b/projects/demo/src/modules/components/input-number/input-number.component.ts @@ -3,7 +3,7 @@ import {FormControl, Validators} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiAutofillFieldName} from '@taiga-ui/cdk'; -import {TuiDecimalT} from '@taiga-ui/core'; +import {TuiDecimal} from '@taiga-ui/core'; import {AbstractExampleTuiControl} from '../abstract/control'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; @@ -67,7 +67,7 @@ export class ExampleTuiInputNumberComponent extends AbstractExampleTuiControl { autocomplete: TuiAutofillFieldName | '' = ''; - readonly decimalVariants: readonly TuiDecimalT[] = ['not-zero', 'always', 'never']; + readonly decimalVariants: readonly TuiDecimal[] = ['not-zero', 'always', 'never']; decimal = this.decimalVariants[0]; diff --git a/projects/demo/src/modules/components/input-phone/input-phone.component.ts b/projects/demo/src/modules/components/input-phone/input-phone.component.ts index 0af04ccfda1d6..b34a28bedc98b 100644 --- a/projects/demo/src/modules/components/input-phone/input-phone.component.ts +++ b/projects/demo/src/modules/components/input-phone/input-phone.component.ts @@ -5,7 +5,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc'; import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; @@ -52,9 +52,9 @@ export class ExampleTuiInputPhoneComponent extends AbstractExampleTuiControl { dropdownAlign: TuiHorizontalDirection = this.dropdownAlignVariants[0]; - readonly dropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = ['fixed', 'min']; + readonly dropdownLimitWidthVariants: readonly TuiDropdownWidth[] = ['fixed', 'min']; - dropdownLimitWidth: TuiDropdownWidthT = this.dropdownLimitWidthVariants[0]; + dropdownLimitWidth: TuiDropdownWidth = this.dropdownLimitWidthVariants[0]; readonly dropdownDirectionVariants: readonly TuiVerticalDirection[] = [ 'top', diff --git a/projects/demo/src/modules/components/input-time/input-time.component.ts b/projects/demo/src/modules/components/input-time/input-time.component.ts index 67cc1f57a47d7..8a5775e7f92bc 100644 --- a/projects/demo/src/modules/components/input-time/input-time.component.ts +++ b/projects/demo/src/modules/components/input-time/input-time.component.ts @@ -11,7 +11,7 @@ import { import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiSizeL, TuiSizeS, TuiVerticalDirection, @@ -79,9 +79,9 @@ export class ExampleTuiInputTimeComponent extends AbstractExampleTuiControl { disabledItemHandler = this.disabledItemHandlerVariants[0]; - readonly dropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = ['fixed', 'min']; + readonly dropdownLimitWidthVariants: readonly TuiDropdownWidth[] = ['fixed', 'min']; - dropdownLimitWidth: TuiDropdownWidthT = this.dropdownLimitWidthVariants[0]; + dropdownLimitWidth: TuiDropdownWidth = this.dropdownLimitWidthVariants[0]; readonly dropdownDirectionVariants: readonly TuiVerticalDirection[] = [ 'top', diff --git a/projects/demo/src/modules/components/money/money.component.ts b/projects/demo/src/modules/components/money/money.component.ts index 85c9e1e8cb3d7..5e8f4e9d46c97 100644 --- a/projects/demo/src/modules/components/money/money.component.ts +++ b/projects/demo/src/modules/components/money/money.component.ts @@ -7,7 +7,7 @@ import { TuiMoneySign, } from '@taiga-ui/addon-commerce'; import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiDecimalT} from '@taiga-ui/core'; +import {TuiDecimal} from '@taiga-ui/core'; @Component({ selector: 'example-tui-money', @@ -45,7 +45,7 @@ export class ExampleTuiMoneyComponent { HTML: import('./examples/5/index.html?raw'), }; - readonly decimalVariants: readonly TuiDecimalT[] = ['not-zero', 'always', 'never']; + readonly decimalVariants: readonly TuiDecimal[] = ['not-zero', 'always', 'never']; decimal = this.decimalVariants[0]; diff --git a/projects/demo/src/modules/components/multi-select/multi-select.component.ts b/projects/demo/src/modules/components/multi-select/multi-select.component.ts index 9f1a49227d3e5..392f96bea6c97 100644 --- a/projects/demo/src/modules/components/multi-select/multi-select.component.ts +++ b/projects/demo/src/modules/components/multi-select/multi-select.component.ts @@ -13,7 +13,7 @@ import { import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiSizeL, TuiSizeS, @@ -115,9 +115,9 @@ export class ExampleTuiMultiSelectComponent extends AbstractExampleTuiControl { editable = true; - readonly dropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = ['fixed', 'min']; + readonly dropdownLimitWidthVariants: readonly TuiDropdownWidth[] = ['fixed', 'min']; - dropdownLimitWidth: TuiDropdownWidthT = this.dropdownLimitWidthVariants[0]; + dropdownLimitWidth: TuiDropdownWidth = this.dropdownLimitWidthVariants[0]; search: string | 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 8d4a1a460d35c..932be8cb0347d 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 @@ -9,7 +9,7 @@ import { } from '@taiga-ui/cdk'; import { TuiDirection, - TuiHintModeT, + TuiHintMode, TuiHorizontalDirection, TuiSizeL, TuiSizeS, @@ -157,7 +157,7 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt 'top-middle', ]; - readonly hintModeVariants: readonly TuiHintModeT[] = ['error', 'onDark']; + readonly hintModeVariants: readonly TuiHintMode[] = ['error', 'onDark']; invalid = false; @@ -165,7 +165,7 @@ export class ExampleTuiPrimitiveTextfieldComponent extends AbstractExampleTuiInt hintDirection: TuiDirection = this.hintDirectionVariants[2]; - hintMode: TuiHintModeT | null = null; + hintMode: TuiHintMode | null = null; get customContent(): string | null { return this.customContentSelected === CUSTOM_SVG_NAME diff --git a/projects/demo/src/modules/components/radio-list/radio-list.component.ts b/projects/demo/src/modules/components/radio-list/radio-list.component.ts index a07d4ca8aa9bd..91d6c1e1a5235 100644 --- a/projects/demo/src/modules/components/radio-list/radio-list.component.ts +++ b/projects/demo/src/modules/components/radio-list/radio-list.component.ts @@ -7,7 +7,7 @@ import { ALWAYS_TRUE_HANDLER, TuiBooleanHandler, } from '@taiga-ui/cdk'; -import {TuiOrientationT, TuiSizeL} from '@taiga-ui/core'; +import {TuiOrientation, TuiSizeL} from '@taiga-ui/core'; import {AbstractExampleTuiControl} from '../abstract/control'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; @@ -46,8 +46,8 @@ export class ExampleTuiRadioListComponent extends AbstractExampleTuiControl { LESS: import('./examples/2/index.less?raw'), }; - readonly orientationVariants: readonly TuiOrientationT[] = ['vertical', 'horizontal']; - orientation: TuiOrientationT = this.orientationVariants[0]; + readonly orientationVariants: readonly TuiOrientation[] = ['vertical', 'horizontal']; + orientation: TuiOrientation = this.orientationVariants[0]; readonly items: readonly ItemRadio[] = [ { diff --git a/projects/demo/src/modules/components/stepper/stepper.component.ts b/projects/demo/src/modules/components/stepper/stepper.component.ts index 3eda5f3c23e71..d52c35a690d8a 100644 --- a/projects/demo/src/modules/components/stepper/stepper.component.ts +++ b/projects/demo/src/modules/components/stepper/stepper.component.ts @@ -1,7 +1,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 {TuiOrientation} from '@taiga-ui/core'; import {TuiStepState} from '@taiga-ui/kit'; @Component({ @@ -25,9 +25,9 @@ export class ExampleTuiStepperComponent { activeItemIndex = 0; - readonly orientationVariants: readonly TuiOrientationT[] = ['horizontal', 'vertical']; + readonly orientationVariants: readonly TuiOrientation[] = ['horizontal', 'vertical']; - orientation: TuiOrientationT = this.orientationVariants[0]; + orientation: TuiOrientation = this.orientationVariants[0]; readonly iconVariants = ['', 'tuiIconTimeLarge', 'tuiIconHeart']; diff --git a/projects/demo/src/modules/components/tag/tag.template.html b/projects/demo/src/modules/components/tag/tag.template.html index 59de31fc0d215..5b90765d4d3b2 100644 --- a/projects/demo/src/modules/components/tag/tag.template.html +++ b/projects/demo/src/modules/components/tag/tag.template.html @@ -177,7 +177,7 @@ i18n documentationPropertyName="status" documentationPropertyMode="input" - documentationPropertyType="TuiStatus | TuiSupportColor" + documentationPropertyType="TuiStatus" [documentationPropertyValues]="statusVariants" [(documentationPropertyValue)]="status" > diff --git a/projects/demo/src/modules/components/tooltip/tooltip.component.ts b/projects/demo/src/modules/components/tooltip/tooltip.component.ts index 3a02932149fa6..92fd659322717 100644 --- a/projects/demo/src/modules/components/tooltip/tooltip.component.ts +++ b/projects/demo/src/modules/components/tooltip/tooltip.component.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiDirection, TuiHintModeT} from '@taiga-ui/core'; +import {TuiDirection, TuiHintMode} from '@taiga-ui/core'; @Component({ selector: 'example-tooltip', @@ -36,9 +36,9 @@ export class ExampleTuiTooltipComponent { readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - readonly modeVariants: readonly TuiHintModeT[] = ['error']; + readonly modeVariants: readonly TuiHintMode[] = ['error']; - mode: TuiHintModeT | null = null; + mode: TuiHintMode | null = null; directionVariants: readonly TuiDirection[] = [ 'left', diff --git a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts index e421646bf4294..d98ecc96318fa 100644 --- a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts +++ b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts @@ -4,7 +4,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc'; import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; @@ -53,7 +53,7 @@ export class ExampleTuiDropdownContextComponent implements ExampleTuiDropdown { 'top', ]; - readonly dropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = [ + readonly dropdownLimitWidthVariants: readonly TuiDropdownWidth[] = [ 'min', 'auto', 'fixed', @@ -63,6 +63,6 @@ export class ExampleTuiDropdownContextComponent implements ExampleTuiDropdown { dropdownDirection: TuiVerticalDirection | null = null; dropdownMinHeight = DEFAULT_MIN_HEIGHT; dropdownMaxHeight = DEFAULT_MAX_HEIGHT; - dropdownLimitWidth: TuiDropdownWidthT = this.dropdownLimitWidthVariants[0]; + dropdownLimitWidth: TuiDropdownWidth = this.dropdownLimitWidthVariants[0]; dropdownSided = false; } 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 facbe0158a75c..649852e59ab64 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 @@ -4,7 +4,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc'; import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; @@ -54,11 +54,11 @@ export class ExampleTuiDropdownSelectionComponent { tuiDropdownDirection: TuiVerticalDirection | null = null; - readonly tuiDropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = [ + readonly tuiDropdownLimitWidthVariants: readonly TuiDropdownWidth[] = [ 'fixed', 'min', 'auto', ]; - tuiDropdownLimitWidth: TuiDropdownWidthT = this.tuiDropdownLimitWidthVariants[0]; + tuiDropdownLimitWidth: TuiDropdownWidth = this.tuiDropdownLimitWidthVariants[0]; } diff --git a/projects/demo/src/modules/directives/dropdown/dropdown.component.ts b/projects/demo/src/modules/directives/dropdown/dropdown.component.ts index a67c8390e9c48..e36a676127a1a 100644 --- a/projects/demo/src/modules/directives/dropdown/dropdown.component.ts +++ b/projects/demo/src/modules/directives/dropdown/dropdown.component.ts @@ -4,7 +4,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc'; import { DEFAULT_MAX_HEIGHT, DEFAULT_MIN_HEIGHT, - TuiDropdownWidthT, + TuiDropdownWidth, TuiHorizontalDirection, TuiVerticalDirection, } from '@taiga-ui/core'; @@ -51,13 +51,13 @@ export class ExampleTuiDropdownComponent { tuiDropdownDirection: TuiVerticalDirection | null = null; - readonly tuiDropdownLimitWidthVariants: readonly TuiDropdownWidthT[] = [ + readonly tuiDropdownLimitWidthVariants: readonly TuiDropdownWidth[] = [ 'fixed', 'min', 'auto', ]; - tuiDropdownLimitWidth: TuiDropdownWidthT = this.tuiDropdownLimitWidthVariants[0]; + tuiDropdownLimitWidth: TuiDropdownWidth = this.tuiDropdownLimitWidthVariants[0]; open = false; diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts index ab488b7832dc9..34f0ef4f49d36 100644 --- a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts +++ b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiDirection, TuiHintModeT} from '@taiga-ui/core'; +import {TuiDirection, TuiHintMode} from '@taiga-ui/core'; @Component({ selector: 'example-tui-hint-controller', @@ -17,11 +17,11 @@ export class ExampleTuiHintControllerComponent { HTML: import('./examples/1/index.html?raw'), }; - readonly modeVariants: readonly TuiHintModeT[] = ['error']; + readonly modeVariants: readonly TuiHintMode[] = ['error']; tuiHintContent = 'Example hint content'; - tuiHintMode: TuiHintModeT | null = null; + tuiHintMode: TuiHintMode | null = null; readonly directionVariants: readonly TuiDirection[] = [ 'left', diff --git a/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less b/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less index 2863aad8a174a..d313995779833 100644 --- a/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less +++ b/projects/demo/src/modules/themes/bootstrap/bootstrap.style.less @@ -25,10 +25,12 @@ color: #ced4da; } - &._focused:after { - color: #80bdff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); - } + .wrapper-focus({ + &:after { + color: #80bdff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + } + }); } [tui-wrapper][data-appearance='textfield'][data-mode='onDark'] { @@ -36,14 +38,14 @@ color: #959aa0; } - &[data-state='hovered'] { - background: transparent; - } + .wrapper-hover({background: transparent}); - &._focused:after { - color: #db6574; - box-shadow: none; - } + .wrapper-focus({ + &:after { + color: #db6574; + box-shadow: none; + } + }); } [tui-wrapper][data-appearance='textfield'][data-mode='onLight'] { @@ -51,14 +53,16 @@ color: #959aa0; } - &[data-state='hovered'] { + .wrapper-hover({ background: transparent; - } + }); - &._focused:after { - color: #80bdff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); - } + .wrapper-focus({ + &:after { + color: #80bdff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + } + }); } // TODO: Cover this by CSS vars diff --git a/projects/demo/src/modules/themes/material/material.style.less b/projects/demo/src/modules/themes/material/material.style.less index b94d88d57240b..2d080112f195e 100644 --- a/projects/demo/src/modules/themes/material/material.style.less +++ b/projects/demo/src/modules/themes/material/material.style.less @@ -35,12 +35,12 @@ transform: scale(0); } - &[data-state='hovered'] { + .wrapper-hover({ background: #ececec; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.87); - } + }); - &._focused { + .wrapper-focus({ background: #dcdcdc; &:after { @@ -51,7 +51,7 @@ label { color: var(--tui-primary) !important; } - } + }); } // TODO: Cover this by CSS vars diff --git a/projects/demo/src/typings.d.ts b/projects/demo/src/typings.d.ts index 07a79da2709df..ef5cdce5c2008 100644 --- a/projects/demo/src/typings.d.ts +++ b/projects/demo/src/typings.d.ts @@ -1,4 +1,5 @@ declare module '!!raw-loader!*'; + declare module 'highlight*'; /* SystemJS module definition */ diff --git a/projects/kit/components/calendar-month/calendar-month.component.ts b/projects/kit/components/calendar-month/calendar-month.component.ts index 12cdf607ee9f9..c7c72d4c5e0ff 100644 --- a/projects/kit/components/calendar-month/calendar-month.component.ts +++ b/projects/kit/components/calendar-month/calendar-month.component.ts @@ -99,11 +99,11 @@ export class TuiCalendarMonthComponent implements TuiWithOptionalMinMax { component.pressedItem = pressedMonth; - expect(component.getItemState(pressedMonth)).toBe( - TuiInteractiveState.Pressed, - ); + expect(component.getItemState(pressedMonth)).toBe(TuiInteractiveState.Active); }); it(`returns hovered if there is`, () => { @@ -96,7 +94,7 @@ describe(`CalendarMonth`, () => { component.hoveredItem = hoveredItem; - expect(component.getItemState(hoveredItem)).toBe(TuiInteractiveState.Hovered); + expect(component.getItemState(hoveredItem)).toBe(TuiInteractiveState.Hover); }); it(`returns null if there is no state`, () => { diff --git a/projects/kit/components/input-copy/input-copy.component.ts b/projects/kit/components/input-copy/input-copy.component.ts index a33e13e20b183..65370bc68492e 100644 --- a/projects/kit/components/input-copy/input-copy.component.ts +++ b/projects/kit/components/input-copy/input-copy.component.ts @@ -21,7 +21,7 @@ import { import { TUI_TEXTFIELD_SIZE, TuiDirection, - TuiHintModeT, + TuiHintMode, TuiPrimitiveTextfieldComponent, TuiTextfieldSizeDirective, } from '@taiga-ui/core'; @@ -59,7 +59,7 @@ export class TuiInputCopyComponent @Input() @tuiDefaultProp() - messageMode: TuiHintModeT | null = null; + messageMode: TuiHintMode | null = null; constructor( @Optional() diff --git a/projects/kit/components/input-files/input-files.style.less b/projects/kit/components/input-files/input-files.style.less index 3085425edf6b2..3df685d61c59a 100644 --- a/projects/kit/components/input-files/input-files.style.less +++ b/projects/kit/components/input-files/input-files.style.less @@ -14,6 +14,7 @@ tui-input-files { } } +/* stylelint-disable order/order */ [tuiWrapper][data-appearance='input-file'] { display: flex; background: transparent; @@ -37,32 +38,22 @@ tui-input-files { border: 1px solid; } - &[data-state='hovered'] { - background: var(--tui-secondary); - - &:after { - color: var(--tui-link-hover); - } - } - - &[data-state='pressed'] { - background: var(--tui-secondary-hover); - } - - &[data-state='disabled'] { + .wrapper-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); - } + .wrapper-focus({ + &:after { + border-style: solid; + border-width: 2px; + color: var(--tui-focus); + } + }); &[data-mode='onDark'] { color: var(--tui-text-01-night); @@ -71,25 +62,28 @@ tui-input-files { color: var(--tui-text-01-night); } - &[data-state='hovered'] { + .wrapper-focus({ + &:after { + color: var(--tui-text-01-night); + }} + ); + + /* stylelint-disable selector-max-specificity */ + .wrapper-hover({ background: var(--tui-clear-inverse-hover); &:after { color: var(--tui-text-03-night); } - } + }); - &[data-state='pressed'] { + .wrapper-active({ background: var(--tui-clear-inverse-active); &:after { color: var(--tui-text-03-night); } - } - - &._focused:after { - color: var(--tui-text-01-night); - } + }); } &[data-mode='onLight'] { @@ -99,20 +93,32 @@ tui-input-files { color: var(--tui-text-01); } - &[data-state='hovered'] { + .wrapper-hover({ background: var(--tui-clear-hover); &:after { color: var(--tui-text-03); } - } + }); - &[data-state='pressed'] { + .wrapper-active({ background: var(--tui-clear-active); &:after { color: var(--tui-text-03); } - } + }); } + + .wrapper-hover({ + background: var(--tui-secondary); + + &:after { + color: var(--tui-link-hover); + } + }); + + .wrapper-active({ + background: var(--tui-secondary-hover); + }); } diff --git a/projects/kit/components/input-files/input-files.template.html b/projects/kit/components/input-files/input-files.template.html index 0ab1011955933..86f62d29eacca 100644 --- a/projects/kit/components/input-files/input-files.template.html +++ b/projects/kit/components/input-files/input-files.template.html @@ -4,7 +4,7 @@ class="t-wrapper" [class._mobile]="isMobile" [focus]="computedFocused" - [hover]="pseudoHover || fileDragged" + [hover]="pseudoHover || fileDragged || null" [active]="pseudoActive" [disabled]="computedDisabled" > diff --git a/projects/kit/components/input-number/input-number.component.ts b/projects/kit/components/input-number/input-number.component.ts index 4f3fc59e83422..154c39af2494f 100644 --- a/projects/kit/components/input-number/input-number.component.ts +++ b/projects/kit/components/input-number/input-number.component.ts @@ -26,15 +26,15 @@ import { } from '@taiga-ui/cdk'; import { formatNumber, - getFractionPartPadded, maskedMoneyValueIsEmpty, maskedNumberStringToNumber, TUI_DECIMAL_SYMBOLS, TUI_NUMBER_FORMAT, tuiCreateAutoCorrectedNumberPipe, tuiCreateNumberMask, - TuiDecimalT, + TuiDecimal, tuiEnableAutoCorrectDecimalSymbol, + tuiGetFractionPartPadded, TuiNumberFormatSettings, TuiPrimitiveTextfieldComponent, TuiTextMaskOptions, @@ -46,9 +46,9 @@ const DEFAULT_MAX_LENGTH = 18; // @dynamic @Component({ - selector: `tui-input-number`, - templateUrl: `./input-number.template.html`, - styleUrls: [`./input-number.style.less`], + selector: 'tui-input-number', + templateUrl: './input-number.template.html', + styleUrls: ['./input-number.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -78,7 +78,7 @@ export class TuiInputNumberComponent @Input() @tuiDefaultProp() - decimal: TuiDecimalT = `not-zero`; + decimal: TuiDecimal = 'not-zero'; @Input() @tuiDefaultProp() @@ -86,11 +86,11 @@ export class TuiInputNumberComponent @Input() @tuiDefaultProp() - prefix = ``; + prefix = ''; @Input() @tuiDefaultProp() - postfix = ``; + postfix = ''; @ContentChildren(PolymorpheusOutletDirective, {descendants: true}) readonly polymorpheusValueContent: QueryList = EMPTY_QUERY; @@ -126,15 +126,15 @@ export class TuiInputNumberComponent get inputMode(): TuiInputMode { if (this.isIOS && this.isNegativeAllowed) { // iphones do not have minus sign if inputMode is equal to 'numeric' / 'decimal' - return `text`; + return 'text'; } - return this.decimal === `never` ? `numeric` : `decimal`; + return this.decimal === 'never' ? 'numeric' : 'decimal'; } get calculatedMaxLength(): number { const decimalPart = - this.decimal !== `never` && + this.decimal !== 'never' && this.nativeValue.includes(this.numberFormat.decimalSeparator); const precision = decimalPart ? this.precision + 1 : 0; const takeThousand = this.numberFormat.thousandSeparator.repeat(5).length; @@ -151,20 +151,20 @@ export class TuiInputNumberComponent return this.nativeValue; } - return this.value === null ? `` : this.formattedValue; + return this.value === null ? '' : this.formattedValue; } - @HostListener(`keydown.0`, [`$event`]) + @HostListener('keydown.0', ['$event']) onZero(event: KeyboardEvent): void { const decimal = - this.nativeValue.split(this.numberFormat.decimalSeparator)[1] || ``; + this.nativeValue.split(this.numberFormat.decimalSeparator)[1] || ''; const {nativeFocusableElement} = this; if ( decimal.length < this.precision || !nativeFocusableElement || !nativeFocusableElement.selectionStart || - this.nativeValue[nativeFocusableElement.selectionStart] !== `0` + this.nativeValue[nativeFocusableElement.selectionStart] !== '0' ) { return; } @@ -175,7 +175,7 @@ export class TuiInputNumberComponent mask: TuiMapper = ( allowNegative: boolean, - decimal: TuiDecimalT, + decimal: TuiDecimal, decimalLimit: number, nativeFocusableElement: HTMLInputElement | null, ) => @@ -183,8 +183,8 @@ export class TuiInputNumberComponent mask: tuiCreateNumberMask({ allowNegative, decimalLimit, - allowDecimal: decimal !== `never`, - requireDecimal: decimal === `always`, + allowDecimal: decimal !== 'never', + requireDecimal: decimal === 'always', decimalSymbol: this.numberFormat.decimalSeparator, thousandSymbol: this.numberFormat.thousandSeparator, autoCorrectDecimalSymbol: tuiEnableAutoCorrectDecimalSymbol( @@ -192,7 +192,7 @@ export class TuiInputNumberComponent ), }), pipe: tuiCreateAutoCorrectedNumberPipe( - decimal === `always` ? decimalLimit : 0, + decimal === 'always' ? decimalLimit : 0, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator, nativeFocusableElement, @@ -238,7 +238,7 @@ export class TuiInputNumberComponent return; } - if (this.decimal === `never`) { + if (this.decimal === 'never') { event.preventDefault(); return; @@ -275,13 +275,15 @@ export class TuiInputNumberComponent const absValue = Math.abs(value); const hasFraction = absValue % 1 > 0; let limit = - this.decimal === `always` || (hasFraction && this.decimal !== `never`) + this.decimal === 'always' || (hasFraction && this.decimal !== 'never') ? this.precision : 0; - const fraction = hasFraction ? getFractionPartPadded(value, this.precision) : ``; + const fraction = hasFraction + ? tuiGetFractionPartPadded(value, this.precision) + : ''; - if (this.focused && this.decimal !== `always`) { + if (this.focused && this.decimal !== 'always') { limit = fraction.length; } @@ -303,7 +305,7 @@ export class TuiInputNumberComponent } get nativeValue(): string { - return this.nativeFocusableElement ? this.nativeFocusableElement.value : ``; + return this.nativeFocusableElement ? this.nativeFocusableElement.value : ''; } set nativeValue(value: string) { @@ -324,7 +326,7 @@ export class TuiInputNumberComponent } private clear(): void { - this.nativeValue = ``; + this.nativeValue = ''; this.updateValue(null); } diff --git a/projects/kit/components/input-number/test/input-number-format.spec.ts b/projects/kit/components/input-number/test/input-number-format.spec.ts index a70264fc88fd6..a3ee92030b3b9 100644 --- a/projects/kit/components/input-number/test/input-number-format.spec.ts +++ b/projects/kit/components/input-number/test/input-number-format.spec.ts @@ -3,11 +3,11 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk'; -import {TUI_NUMBER_FORMAT, TuiDecimalT} from '@taiga-ui/core'; +import {TUI_NUMBER_FORMAT, TuiDecimal} from '@taiga-ui/core'; import {TuiInputNumberComponent, TuiInputNumberModule} from '@taiga-ui/kit'; import {configureTestSuite, TuiPageObject} from '@taiga-ui/testing'; -describe(`InputNumber - backward compatibility for separators`, () => { +describe('InputNumber - backward compatibility for separators', () => { @Component({ template: ` @@ -26,7 +26,7 @@ describe(`InputNumber - backward compatibility for separators`, () => { control = new FormControl(12345.0); form = new FormGroup({control: this.control}); - decimal: TuiDecimalT = `always`; + decimal: TuiDecimal = 'always'; precision = 2; } @@ -36,7 +36,7 @@ describe(`InputNumber - backward compatibility for separators`, () => { let pageObject: TuiPageObject; let nativeInput: HTMLInputElement; - describe(`Format - {d d d,d}`, () => { + describe('Format - {d d d,d}', () => { configureTestSuite(() => { TestBed.configureTestingModule({ imports: [ @@ -58,16 +58,16 @@ describe(`InputNumber - backward compatibility for separators`, () => { fixture.detectChanges(); }); - it(`comma usage`, () => { - nativeInput.value = `55666,7777`; + it('comma usage', () => { + nativeInput.value = '55666,7777'; nativeInput.focus(); fixture.detectChanges(); expect(component.computedValue).toBe(`55${CHAR_NO_BREAK_SPACE}666,77`); }); - it(`dot usage`, () => { - nativeInput.value = `55666.7777`; + it('dot usage', () => { + nativeInput.value = '55666.7777'; nativeInput.focus(); fixture.detectChanges(); @@ -75,7 +75,7 @@ describe(`InputNumber - backward compatibility for separators`, () => { }); }); - describe(`Format - {d d d,d}`, () => { + describe('Format - {d d d,d}', () => { configureTestSuite(() => { TestBed.configureTestingModule({ imports: [ @@ -97,16 +97,16 @@ describe(`InputNumber - backward compatibility for separators`, () => { fixture.detectChanges(); }); - it(`comma usage`, () => { - nativeInput.value = `55666,7777`; + it('comma usage', () => { + nativeInput.value = '55666,7777'; nativeInput.focus(); fixture.detectChanges(); expect(component.computedValue).toBe(`55${CHAR_NO_BREAK_SPACE}666,77`); }); - it(`dot usage`, () => { - nativeInput.value = `55666.7777`; + it('dot usage', () => { + nativeInput.value = '55666.7777'; nativeInput.focus(); fixture.detectChanges(); @@ -114,7 +114,7 @@ describe(`InputNumber - backward compatibility for separators`, () => { }); }); - describe(`Format - {d,d,d.d}`, () => { + describe('Format - {d,d,d.d}', () => { configureTestSuite(() => { TestBed.configureTestingModule({ imports: [ @@ -126,7 +126,7 @@ describe(`InputNumber - backward compatibility for separators`, () => { providers: [ { provide: TUI_NUMBER_FORMAT, - useValue: {decimalSeparator: `.`, thousandSeparator: `,`}, + useValue: {decimalSeparator: '.', thousandSeparator: ','}, }, ], }); @@ -142,16 +142,16 @@ describe(`InputNumber - backward compatibility for separators`, () => { fixture.detectChanges(); }); - it(`comma usage`, () => { - nativeInput.value = `556,667,777`; + it('comma usage', () => { + nativeInput.value = '556,667,777'; nativeInput.focus(); fixture.detectChanges(); expect(component.computedValue).toBe(`556,667,777.00`); }); - it(`dot usage`, () => { - nativeInput.value = `556,667,777.99`; + it('dot usage', () => { + nativeInput.value = '556,667,777.99'; nativeInput.focus(); fixture.detectChanges(); @@ -160,6 +160,6 @@ describe(`InputNumber - backward compatibility for separators`, () => { }); function getNativeInput(): DebugElement | null { - return pageObject.getByAutomationId(`tui-primitive-textfield__native-input`); + return pageObject.getByAutomationId('tui-primitive-textfield__native-input'); } }); diff --git a/projects/kit/components/input-number/test/input-number.component.spec.ts b/projects/kit/components/input-number/test/input-number.component.spec.ts index e6581937f8fad..9485210aa7308 100644 --- a/projects/kit/components/input-number/test/input-number.component.spec.ts +++ b/projects/kit/components/input-number/test/input-number.component.spec.ts @@ -4,7 +4,7 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk'; import { - TuiDecimalT, + TuiDecimal, TuiHintControllerModule, TuiSizeL, TuiSizeS, @@ -15,7 +15,7 @@ import {configureTestSuite, TuiNativeInputPO, TuiPageObject} from '@taiga-ui/tes import {TuiInputNumberComponent} from '../input-number.component'; import {TuiInputNumberModule} from '../input-number.module'; -describe(`InputNumber`, () => { +describe('InputNumber', () => { @Component({ template: ` @@ -48,12 +48,12 @@ describe(`InputNumber`, () => { }); readOnly = false; - decimal: TuiDecimalT = `never`; + decimal: TuiDecimal = 'never'; cleaner = true; defaultValues = false; - size: TuiSizeS | TuiSizeL = `m`; - hintContent: string | null = `prompt`; - exampleText = `placeholder`; + size: TuiSizeS | TuiSizeL = 'm'; + hintContent: string | null = 'prompt'; + exampleText = 'placeholder'; } let fixture: ComponentFixture; @@ -85,13 +85,13 @@ describe(`InputNumber`, () => { inputPO = new TuiNativeInputPO(fixture, `tui-primitive-textfield__native-input`); }); - describe(`Default values:`, () => { + describe('Default values:', () => { beforeEach(() => { testComponent.defaultValues = true; fixture.detectChanges(); }); - it(`Zero pennies are not shown`, async () => { + it('Zero pennies are not shown', async () => { testComponent.control.setValue(1234.0); fixture.detectChanges(); @@ -103,14 +103,14 @@ describe(`InputNumber`, () => { ); }); - it(`Non-zero pennies are shown`, async () => { + it('Non-zero pennies are shown', async () => { testComponent.control.setValue(12.345); fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); - expect(getNativeInput()!.nativeElement.value).toBe(`12,34`); + expect(getNativeInput()!.nativeElement.value).toBe('12,34'); }); }); @@ -121,10 +121,10 @@ describe(`InputNumber`, () => { await fixture.whenStable(); fixture.detectChanges(); - expect(getNativeInput()!.nativeElement.value).toBe(`12`); + expect(getNativeInput()!.nativeElement.value).toBe('12'); }); - it(`There is no minus sign for negative values with min> = 0`, async () => { + it('There is no minus sign for negative values with min> = 0', async () => { testComponent.component.min = 0; testComponent.control.setValue(-12345); fixture.detectChanges(); @@ -135,7 +135,7 @@ describe(`InputNumber`, () => { expect(getNativeInput()!.nativeElement.value).toBe(`12${CHAR_NO_BREAK_SPACE}345`); }); - it(`No minus sign for non-negative min`, async () => { + it('No minus sign for non-negative min', async () => { testComponent.component.min = 10; testComponent.control.setValue(-12345); fixture.detectChanges(); @@ -148,55 +148,55 @@ describe(`InputNumber`, () => { ); }); - describe(`onValueChange | updating form values`, () => { - describe(`An incomplete value is passed to the form null`, () => { + describe('onValueChange | updating form values', () => { + describe('An incomplete value is passed to the form null', () => { it(`Value ''`, () => { - component.onValueChange(``); + component.onValueChange(''); expect(testComponent.control.value).toBe(null); }); it(`Value '-'`, () => { - component.onValueChange(`-`); + component.onValueChange('-'); expect(testComponent.control.value).toBe(null); }); it(`Value ','`, () => { - component.onValueChange(`,`); + component.onValueChange(','); expect(testComponent.control.value).toBe(null); }); it(`Value '-,'`, () => { - component.onValueChange(`-,`); + component.onValueChange('-,'); expect(testComponent.control.value).toBe(null); }); it(`Value does not depend on the separator`, () => { - component.onValueChange(`123456,50`); + component.onValueChange('123456,50'); expect(testComponent.control.value).toBe(123456.5); - component.onValueChange(`123456.50`); + component.onValueChange('123456.50'); expect(testComponent.control.value).toBe(123456.5); }); }); - describe(`The min and max properties`, () => { + describe('The min and max properties', () => { beforeEach(() => { - inputPO.sendText(``); + inputPO.sendText(''); testComponent.control.setValue(null); }); - it(`A value less than positive min does not update the control`, () => { + it('A value less than positive min does not update the control', () => { testComponent.component.min = 15; component.onValueChange(`10`); expect(testComponent.control.value).toBe(null); }); - it(`A value greater than max is clipped to max`, () => { + it('A value greater than max is clipped to max', () => { const savedMax = 25; testComponent.component.max = savedMax; @@ -205,14 +205,14 @@ describe(`InputNumber`, () => { expect(testComponent.control.value).toBe(savedMax); }); - it(`A value greater than negative max does not update the control`, () => { + it('A value greater than negative max does not update the control', () => { testComponent.component.max = -15; component.onValueChange(`-10`); expect(testComponent.control.value).toBe(null); }); - it(`A value less than negative min is truncated to min`, () => { + it('A value less than negative min is truncated to min', () => { const savedMin = -25; testComponent.component.min = savedMin; @@ -229,7 +229,7 @@ describe(`InputNumber`, () => { }); }); - describe(`computedValue | value to display`, () => { + describe('computedValue | value to display', () => { it(`The given value from the form is correctly converted to a string`, () => { testComponent.control.setValue(-12345.67); @@ -237,66 +237,66 @@ describe(`InputNumber`, () => { }); it(`The given value from the form is correctly converted to a string with 0's at start`, () => { - inputPO.sendText(`00 002 025`); + inputPO.sendText('00 002 025'); expect(component.computedValue).toBe(`2${CHAR_NO_BREAK_SPACE}025`); - inputPO.sendText(` 005`); + inputPO.sendText(' 005'); expect(component.computedValue).toBe(`5`); }); it(`The given value from the form is correctly converted to a string with 0`, () => { - inputPO.sendText(`0`); + inputPO.sendText('0'); expect(component.computedValue).toBe(`0`); }); it(`Doesn't trim zeros if the input is focused`, () => { - component.decimal = `not-zero`; + component.decimal = 'not-zero'; inputPO.focus(); - inputPO.sendText(`10,07`); - inputPO.sendText(`10,0`); + inputPO.sendText('10,07'); + inputPO.sendText('10,0'); - expect(component.computedValue).toBe(`10,0`); + expect(component.computedValue).toBe('10,0'); }); it(`formats a value if the element is out of focus`, () => { - component.decimal = `not-zero`; + component.decimal = 'not-zero'; - inputPO.sendText(`10,0`); + inputPO.sendText('10,0'); - expect(component.computedValue).toBe(`10`); + expect(component.computedValue).toBe('10'); }); }); - describe(`Format value when element lose focus with precision > 6`, () => { + describe('Format value when element lose focus with precision > 6', () => { beforeEach(() => { - component.decimal = `always`; + component.decimal = 'always'; component.precision = 10; - inputPO.sendText(``); + inputPO.sendText(''); inputPO.focus(); }); - it(`Positive value`, () => { - inputPO.sendText(`0,0000000001`); + it('Positive value', () => { + inputPO.sendText('0,0000000001'); component.onFocused(false); fixture.detectChanges(); expect(component.computedValue).toBe(`0,0000000001`); }); - it(`Negative value`, () => { - inputPO.sendText(`-0,0000000001`); + it('Negative value', () => { + inputPO.sendText('-0,0000000001'); component.onFocused(false); fixture.detectChanges(); expect(component.computedValue).toBe(`-0,0000000001`); }); - it(`Value with precision less than 10`, () => { - inputPO.sendText(`-0,00000052`); + it('Value with precision less than 10', () => { + inputPO.sendText('-0,00000052'); component.onFocused(false); fixture.detectChanges(); @@ -304,18 +304,18 @@ describe(`InputNumber`, () => { }); }); - it(`maxlength is set to 23 by default (18 digits + 5 default separators)`, () => { + it('maxlength is set to 23 by default (18 digits + 5 default separators)', () => { const nativeInput = getNativeInput()!.nativeElement; - expect(nativeInput.getAttribute(`maxlength`)).toBe(`23`); + expect(nativeInput.getAttribute('maxlength')).toBe('23'); }); - describe(`When decimal === always`, () => { + describe('When decimal === always', () => { it(`Adds the number of zeros specified by the precision property when updating Value with an integer`, () => { - const value = `123`; + const value = '123'; const precision = 2; - component.decimal = `always`; + component.decimal = 'always'; component.precision = precision; component.onValueChange(value); @@ -323,10 +323,10 @@ describe(`InputNumber`, () => { }); it(`Adds the number of zeros specified by the precision property when updating Value with an integer`, () => { - const value = `0`; + const value = '0'; const precision = 2; - component.decimal = `always`; + component.decimal = 'always'; component.precision = precision; component.onValueChange(value); @@ -335,6 +335,6 @@ describe(`InputNumber`, () => { }); function getNativeInput(): DebugElement | null { - return pageObject.getByAutomationId(`tui-primitive-textfield__native-input`); + return pageObject.getByAutomationId('tui-primitive-textfield__native-input'); } }); diff --git a/projects/kit/components/input-password/input-password.component.ts b/projects/kit/components/input-password/input-password.component.ts index 4603a80b53670..33fb838e8580a 100644 --- a/projects/kit/components/input-password/input-password.component.ts +++ b/projects/kit/components/input-password/input-password.component.ts @@ -26,7 +26,7 @@ import { TUI_TEXTFIELD_SIZE, TuiBrightness, TuiHintControllerDirective, - TuiHintModeT, + TuiHintMode, TuiPrimitiveTextfieldComponent, TuiSizeL, TuiSizeS, @@ -70,7 +70,7 @@ export class TuiInputPasswordComponent isPasswordHidden = true; - readonly computedMode$: Observable = combineLatest([ + readonly computedMode$: Observable = combineLatest([ this.mode$.pipe(map(val => (val === 'onDark' ? 'onDark' : null))), this.hintController.change$.pipe( startWith(null), diff --git a/projects/kit/components/input-phone-international/tokens/countries-masks.ts b/projects/kit/components/input-phone-international/tokens/countries-masks.ts index da8f46b1d9ec8..c91dc3bcfa75a 100644 --- a/projects/kit/components/input-phone-international/tokens/countries-masks.ts +++ b/projects/kit/components/input-phone-international/tokens/countries-masks.ts @@ -207,6 +207,7 @@ export const TUI_COUNTRIES_MASKS: InjectionToken extends AbstractTuiNullableControl { items: readonly T[] = []; @Input() - @HostBinding(`attr.data-size`) + @HostBinding('attr.data-size') @tuiDefaultProp() - size: TuiSizeL = `m`; + size: TuiSizeL = 'm'; @Input() @tuiDefaultProp() identityMatcher: TuiIdentityMatcher = TUI_DEFAULT_IDENTITY_MATCHER; @Input() - @HostBinding(`attr.data-tui-host-orientation`) + @HostBinding('attr.data-tui-host-orientation') @tuiDefaultProp() - orientation: TuiOrientationT = `vertical`; + orientation: TuiOrientation = 'vertical'; @Input() @tuiDefaultProp() diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index 67e0d5d685064..81c028a2dfa25 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -20,26 +20,26 @@ import { tuiMoveFocus, tuiPure, } from '@taiga-ui/cdk'; -import {TuiOrientationT} from '@taiga-ui/core'; +import {TuiOrientation} from '@taiga-ui/core'; import {Observable} from 'rxjs'; import {delay} from 'rxjs/operators'; import {TuiStepComponent} from './step/step.component'; const ONLY_HORIZONTAL_SCROLL: ScrollIntoViewOptions = { - block: `nearest`, - inline: `center`, + block: 'nearest', + inline: 'center', }; const ONLY_VERTICAL_SCROLL: ScrollIntoViewOptions = { - block: `center`, - inline: `nearest`, + block: 'center', + inline: 'nearest', }; @Component({ - selector: `tui-stepper, nav[tuiStepper]`, - templateUrl: `./stepper.template.html`, - styleUrls: [`./stepper.style.less`], + selector: 'tui-stepper, nav[tuiStepper]', + templateUrl: './stepper.template.html', + styleUrls: ['./stepper.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiStepperComponent { @@ -47,9 +47,9 @@ export class TuiStepperComponent { private readonly steps: QueryList> = EMPTY_QUERY; @Input() - @HostBinding(`attr.data-orientation`) + @HostBinding('attr.data-orientation') @tuiDefaultProp() - orientation: TuiOrientationT = `horizontal`; + orientation: TuiOrientation = 'horizontal'; @Input() @tuiDefaultProp() @@ -65,10 +65,10 @@ export class TuiStepperComponent { return itemsQueryListObservable(this.steps).pipe(delay(0)); } - @HostListener(`keydown.arrowRight`, [`$event`, `1`]) - @HostListener(`keydown.arrowLeft`, [`$event`, `-1`]) + @HostListener('keydown.arrowRight', ['$event', '1']) + @HostListener('keydown.arrowLeft', ['$event', '-1']) onHorizontal(event: Event, step: number): void { - if (this.orientation !== `horizontal` || !event.target) { + if (this.orientation !== 'horizontal' || !event.target) { return; } @@ -76,10 +76,10 @@ export class TuiStepperComponent { this.moveFocus(event.target, step); } - @HostListener(`keydown.arrowDown`, [`$event`, `1`]) - @HostListener(`keydown.arrowUp`, [`$event`, `-1`]) + @HostListener('keydown.arrowDown', ['$event', '1']) + @HostListener('keydown.arrowUp', ['$event', '-1']) onVertical(event: Event, step: number): void { - if (this.orientation !== `vertical` || !event.target) { + if (this.orientation !== 'vertical' || !event.target) { return; } @@ -125,7 +125,7 @@ export class TuiStepperComponent { private scrollIntoView(targetStepIndex: number): void { this.getNativeElements(this.steps)[targetStepIndex].scrollIntoView( - this.orientation === `vertical` + this.orientation === 'vertical' ? ONLY_VERTICAL_SCROLL : ONLY_HORIZONTAL_SCROLL, );