feat(core): implement

projects/core/directives/hint/hint-position.directive.ts

@@ -10,6 +10,7 @@ import {TUI_VIEWPORT} from '@taiga-ui/core/tokens';
 import type {TuiPoint} from '@taiga-ui/core/types';
 
 import {TuiHintDirective} from './hint.directive';
+import {TuiHintService} from './hint.service';
 import type {TuiHintDirection, TuiHintOptions} from './hint-options.directive';
 import {TUI_HINT_DIRECTIONS, TUI_HINT_OPTIONS} from './hint-options.directive';
 
@@ -29,6 +30,8 @@ export class TuiHintPosition extends TuiPositionAccessor {
         inject(TuiHintDirective),
     );
 
+    private readonly hintService = inject(TuiHintService);
+
     private readonly points: Record<TuiHintDirection, [number, number]> =
         TUI_HINT_DIRECTIONS.reduce(
             (acc, direction) => ({...acc, [direction]: [0, 0]}),
@@ -76,13 +79,17 @@ export class TuiHintPosition extends TuiPositionAccessor {
         this.points['right-bottom'][LEFT] = this.points['right-top'][LEFT];
 
         if (this.checkPosition(this.points[this.direction], width, height)) {
+            this.hintService.publishHintDirection(this.direction);
+
             return this.points[this.direction];
         }
 
         const direction = TUI_HINT_DIRECTIONS.find((direction) =>
             this.checkPosition(this.points[direction], width, height),
         );
 
+        this.hintService.publishHintDirection(direction || this.fallback);
+
         return this.points[direction || this.fallback];
     }
 

projects/core/directives/hint/hint.directive.ts

@@ -1,6 +1,17 @@
 import type {OnDestroy} from '@angular/core';
-import {Directive, inject, INJECTOR, Input, signal} from '@angular/core';
+import {
+    Directive,
+    EventEmitter,
+    inject,
+    INJECTOR,
+    Input,
+    NgZone,
+    Output,
+    signal,
+} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';
+import {tuiZonefree} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import type {TuiRectAccessor, TuiVehicle} from '@taiga-ui/core/classes';
 import {tuiAsRectAccessor, tuiAsVehicle} from '@taiga-ui/core/classes';
@@ -12,6 +23,7 @@ import {TUI_HINT_COMPONENT} from './hint.providers';
 import {TuiHintService} from './hint.service';
 import {TuiHintDriver} from './hint-driver.directive';
 import {TuiHintHover} from './hint-hover.directive';
+import type {TuiHintDirection} from './hint-options.directive';
 import {TUI_HINT_OPTIONS} from './hint-options.directive';
 import {TuiHintPosition} from './hint-position.directive';
 
@@ -43,19 +55,27 @@ export class TuiHintDirective<C>
     implements OnDestroy, TuiPortalItem<C>, TuiRectAccessor, TuiVehicle
 {
     private readonly service = inject(TuiHintService);
+    private readonly zone: NgZone = inject(NgZone);
 
     @Input('tuiHintContext')
     public context?: C;
 
     @Input('tuiHintAppearance')
     public appearance = inject(TUI_HINT_OPTIONS).appearance;
 
+    @Output('tuiHintDirectionChange')
+    public readonly directionChange = new EventEmitter<TuiHintDirection>();
+
     public content = signal<PolymorpheusContent<C>>(null);
     public component = inject(PolymorpheusComponent<unknown>);
     public readonly el = tuiInjectElement();
     public readonly activeZone? = inject(TuiActiveZone, {optional: true});
     public readonly type = 'hint';
 
+    constructor() {
+        this.hintDirectionObserver();
+    }
+
     @Input()
     public set tuiHint(content: PolymorpheusContent<C>) {
         this.content.set(content);
@@ -80,4 +100,12 @@ export class TuiHintDirective<C>
             this.service.remove(this);
         }
     }
+
+    public hintDirectionObserver(): void {
+        this.service.hintDirection$
+            .pipe(tuiZonefree(this.zone), takeUntilDestroyed())
+            .subscribe((direction: TuiHintDirection) => {
+                this.directionChange.emit(direction);
+            });
+    }
 }

projects/core/directives/hint/hint.service.ts

@@ -1,6 +1,9 @@
 import {Injectable} from '@angular/core';
 import type {TuiPortalItem} from '@taiga-ui/core/types';
-import {BehaviorSubject} from 'rxjs';
+import type {Observable} from 'rxjs';
+import {BehaviorSubject, distinctUntilChanged, Subject} from 'rxjs';
+
+import type {TuiHintDirection} from './hint-options.directive';
 
 /**
  * Service for displaying hints/tooltips
@@ -9,6 +12,10 @@ import {BehaviorSubject} from 'rxjs';
     providedIn: 'root',
 })
 export class TuiHintService extends BehaviorSubject<readonly TuiPortalItem[]> {
+    private readonly hintDirectionSubject = new Subject<TuiHintDirection>();
+    public readonly hintDirection$: Observable<TuiHintDirection> =
+        this.hintDirectionSubject.asObservable().pipe(distinctUntilChanged());
+
     constructor() {
         super([]);
     }
@@ -22,4 +29,8 @@ export class TuiHintService extends BehaviorSubject<readonly TuiPortalItem[]> {
             this.next(this.value.filter((hint) => hint !== directive));
         }
     }
+
+    public publishHintDirection(direction: TuiHintDirection): void {
+        this.hintDirectionSubject.next(direction);
+    }
 }

projects/demo/src/modules/components/abstract/inherited-documentation/index.html

@@ -105,4 +105,11 @@ <h6 class="tui-text_h6">
     >
         Hint mode
     </ng-template>
+    <ng-template
+        documentationPropertyMode="output"
+        documentationPropertyName="tuiHintDirectionChange"
+        documentationPropertyType="TuiHintDirection"
+    >
+        Hint direction change
+    </ng-template>
 </tui-doc-documentation>