fix(kit): Tree fix control chevron rotation programmatically (#7476)

taiga-family · May 20, 2024 · ba90b0d · ba90b0d
1 parent 50b3d5e
commit ba90b0d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/projects/kit/components/tree/components/tree-item-content/tree-item-content.component.ts b/projects/kit/components/tree/components/tree-item-content/tree-item-content.component.ts
@@ -1,12 +1,15 @@
 import {
     ChangeDetectionStrategy,
     Component,
+    DoCheck,
     forwardRef,
     HostBinding,
     Inject,
 } from '@angular/core';
 import {TUI_COMMON_ICONS, TuiCommonIcons} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
+import {Subject} from 'rxjs';
+import {distinctUntilChanged, map, startWith} from 'rxjs/operators';
 
 import {TUI_DEFAULT_TREE_CONTROLLER} from '../../misc/tree.constants';
 import type {TuiTreeController, TuiTreeItemContext} from '../../misc/tree.interfaces';
@@ -18,7 +21,15 @@ import {TUI_TREE_CONTROLLER} from '../../misc/tree.tokens';
     styleUrls: ['./tree-item-content.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TuiTreeItemContentComponent {
+export class TuiTreeItemContentComponent implements DoCheck {
+    private readonly change$ = new Subject<void>();
+
+    readonly expanded$ = this.change$.pipe(
+        startWith(null),
+        map(() => this.isExpanded),
+        distinctUntilChanged(),
+    );
+
     constructor(
         @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons,
         @Inject(POLYMORPHEUS_CONTEXT) readonly context: TuiTreeItemContext,
@@ -41,4 +52,8 @@ export class TuiTreeItemContentComponent {
     onClick(): void {
         this.controller.toggle(this.context.$implicit);
     }
+
+    ngDoCheck(): void {
+        this.change$.next();
+    }
 }
diff --git a/projects/kit/components/tree/components/tree-item-content/tree-item-content.template.html b/projects/kit/components/tree/components/tree-item-content/tree-item-content.template.html
@@ -6,7 +6,7 @@
     tuiIconButton
     type="button"
     class="t-button"
-    [class.t-button_expanded]="isExpanded"
+    [class.t-button_expanded]="expanded$ | async"
     [icon]="icons.more"
     (click)="onClick()"
 ></button>