fix(addon-table): sort icons are reversed (#9904)

projects/addon-table/components/table/directives/direction-order.directive.ts

@@ -1,6 +1,7 @@
 import {Directive, inject, Input, Output} from '@angular/core';
 import {map} from 'rxjs';
 
+import {TuiSortDirection} from '../table.options';
 import {TuiTableDirective} from './table.directive';
 
 @Directive({
@@ -17,6 +18,7 @@ export class TuiTableDirectionOrder<T> {
 
     @Input()
     public set directionOrder(order: 'asc' | 'desc') {
-        this.table.direction = order === 'asc' ? 1 : -1;
+        this.table.direction =
+            order === 'asc' ? TuiSortDirection.Asc : TuiSortDirection.Desc;
     }
 }

projects/addon-table/components/table/directives/table.directive.ts

@@ -23,7 +23,7 @@ import {tuiChipOptionsProvider} from '@taiga-ui/kit/components/chip';
 import {tuiProgressOptionsProvider} from '@taiga-ui/kit/components/progress';
 import {Subject} from 'rxjs';
 
-import {TUI_TABLE_OPTIONS} from '../table.options';
+import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options';
 import {TuiStuck} from './stuck.directive';
 
 @Component({
@@ -72,7 +72,7 @@ export class TuiTableDirective<T extends Partial<Record<keyof T, any>>>
     public direction = this.options.direction;
 
     @Output()
-    public readonly directionChange = new EventEmitter<-1 | 1>();
+    public readonly directionChange = new EventEmitter<TuiSortDirection>();
 
     @Output()
     public readonly sorterChange = new EventEmitter<TuiComparator<T> | null>();
@@ -94,7 +94,11 @@ export class TuiTableDirective<T extends Partial<Record<keyof T, any>>>
 
     public updateSorterAndDirection(sorter: TuiComparator<T> | null): void {
         if (this.sorter === sorter) {
-            this.updateDirection(this.direction === 1 ? -1 : 1);
+            this.updateDirection(
+                this.direction === TuiSortDirection.Asc
+                    ? TuiSortDirection.Desc
+                    : TuiSortDirection.Asc,
+            );
         } else {
             this.updateSorter(sorter);
             this.updateDirection(1);
@@ -115,7 +119,7 @@ export class TuiTableDirective<T extends Partial<Record<keyof T, any>>>
         this.change$.next();
     }
 
-    private updateDirection(direction: -1 | 1): void {
+    private updateDirection(direction: TuiSortDirection): void {
         this.direction = direction;
         this.directionChange.emit(this.direction);
         this.change$.next();

projects/addon-table/components/table/directives/test/direction-order.directive.spec.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
-import {TuiTable, TuiTableDirective} from '@taiga-ui/addon-table';
+import {TuiSortDirection, TuiTable, TuiTableDirective} from '@taiga-ui/addon-table';
 
 describe('TuiDirectionOrder directive', () => {
     @Component({
@@ -44,31 +44,31 @@ describe('TuiDirectionOrder directive', () => {
     it('sets the sort direction of table to ascending', () => {
         fixture.detectChanges();
 
-        expect(testComponent.table.direction).toBe(1);
+        expect(testComponent.table.direction).toBe(TuiSortDirection.Asc);
     });
 
     it('sets the sort direction of table to descending', () => {
         testComponent.directionOrder = 'desc';
         fixture.detectChanges();
 
-        expect(testComponent.table.direction).toBe(-1);
+        expect(testComponent.table.direction).toBe(TuiSortDirection.Desc);
     });
 
     describe('when table emits direction change', () => {
         it('emits ascending directionOrder', () => {
-            testComponent.table.directionChange.emit(1);
+            testComponent.table.directionChange.emit(TuiSortDirection.Asc);
 
             expect(testComponent.directionOrderChange).toHaveBeenCalledWith('asc');
         });
 
         it('emits descending directionOrder', () => {
-            testComponent.table.directionChange.emit(-1);
+            testComponent.table.directionChange.emit(TuiSortDirection.Desc);
 
             expect(testComponent.directionOrderChange).toHaveBeenCalledWith('desc');
         });
 
         it('should not emit directionChange when updating sorter programmatically', () => {
-            testComponent.table.updateSorter(() => -1);
+            testComponent.table.updateSorter(() => TuiSortDirection.Desc);
 
             expect(testComponent.directionOrderChange).not.toHaveBeenCalled();
         });

projects/addon-table/components/table/pipes/table-sort.pipe.ts

@@ -4,6 +4,7 @@ import type {TuiComparator} from '@taiga-ui/addon-table/types';
 import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 
 import {TuiTableDirective} from '../directives/table.directive';
+import type {TuiSortDirection} from '../table.options';
 
 @Pipe({
     standalone: true,
@@ -21,7 +22,7 @@ export class TuiTableSortPipe<K = Partial<Record<any, any>>> implements PipeTran
     private sort<T extends K>(
         data: readonly T[],
         sorter: TuiComparator<T>,
-        direction: -1 | 1,
+        direction: TuiSortDirection,
     ): readonly T[] {
         return [...data].sort((a, b) => direction * sorter(a, b));
     }

projects/addon-table/components/table/table.options.ts

@@ -2,8 +2,14 @@ import type {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 
+export const TuiSortDirection = {
+    Asc: 1,
+    Desc: -1,
+} as const;
+export type TuiSortDirection = (typeof TuiSortDirection)[keyof typeof TuiSortDirection];
+
 export interface TuiTableOptions {
-    readonly direction: -1 | 1;
+    readonly direction: TuiSortDirection;
     readonly requiredSort: boolean;
     readonly open: boolean;
     readonly resizable: boolean;
@@ -21,7 +27,7 @@ export const TUI_TABLE_DEFAULT_OPTIONS: TuiTableOptions = {
     resizable: false,
     open: true,
     size: 'm',
-    direction: 1,
+    direction: TuiSortDirection.Asc,
     requiredSort: false,
     sortIcons: {
         asc: '@tui.chevron-up',

projects/addon-table/components/table/th/th.component.ts

@@ -14,7 +14,7 @@ import {TuiIcon} from '@taiga-ui/core/components/icon';
 import {TuiTableHead} from '../directives/head.directive';
 import {TuiTableResized} from '../directives/resized.directive';
 import {TuiTableDirective} from '../directives/table.directive';
-import {TUI_TABLE_OPTIONS} from '../table.options';
+import {TUI_TABLE_OPTIONS, TuiSortDirection} from '../table.options';
 
 @Component({
     standalone: true,
@@ -70,9 +70,9 @@ export class TuiTableTh<T extends Partial<Record<keyof T, any>>> {
 
     protected get icon(): string {
         if (this.isCurrent) {
-            return this.table?.direction === 1
-                ? this.options.sortIcons.desc
-                : this.options.sortIcons.asc;
+            return this.table?.direction === TuiSortDirection.Asc
+                ? this.options.sortIcons.asc
+                : this.options.sortIcons.desc;
         }
 
         return this.options.sortIcons.off;
@@ -82,16 +82,19 @@ export class TuiTableTh<T extends Partial<Record<keyof T, any>>> {
         const sorter = this.requiredSort ? this.sorter : null;
 
         this.table?.updateSorterAndDirection(
-            this.isCurrentAndAscDirection ? sorter : this.sorter,
+            this.isCurrentAndDescDirection ? sorter : this.sorter,
         );
     }
 
     protected onResized(width: number): void {
         this.width = width;
     }
 
-    private get isCurrentAndAscDirection(): boolean {
-        return this.sorter === this.table?.sorter && this.table?.direction === -1;
+    private get isCurrentAndDescDirection(): boolean {
+        return (
+            this.sorter === this.table?.sorter &&
+            this.table?.direction === TuiSortDirection.Desc
+        );
     }
 }