feat(core): implement taiga-family#3417

projects/core/directives/dropdown/dropdown-position-sided.directive.ts

@@ -4,6 +4,7 @@ import {tuiAsPositionAccessor, TuiPositionAccessor} from '@taiga-ui/core/classes
 import {TUI_VIEWPORT} from '@taiga-ui/core/tokens';
 import type {TuiPoint} from '@taiga-ui/core/types';
 
+import {TuiDropdownService} from './dropdown.service';
 import {TUI_DROPDOWN_OPTIONS} from './dropdown-options.directive';
 import {TuiDropdownPosition} from './dropdown-position.directive';
 
@@ -16,7 +17,7 @@ export class TuiDropdownPositionSided extends TuiPositionAccessor {
     private readonly options = inject(TUI_DROPDOWN_OPTIONS);
     private readonly viewport = inject(TUI_VIEWPORT);
     private readonly vertical = inject(TuiDropdownPosition);
-
+    private readonly dropdownService = inject(TuiDropdownService);
     private previous = this.options.direction || 'bottom';
 
     @Input()
@@ -61,6 +62,7 @@ export class TuiDropdownPositionSided extends TuiPositionAccessor {
         }
 
         this.previous = better;
+        this.dropdownService.publishDropdownDirection(better);
 
         return [position[better], left];
     }

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

@@ -9,6 +9,7 @@ import {TUI_VIEWPORT} from '@taiga-ui/core/tokens';
 import type {TuiPoint, TuiVerticalDirection} from '@taiga-ui/core/types';
 
 import {TuiDropdownDirective} from './dropdown.directive';
+import {TuiDropdownService} from './dropdown.service';
 import {TUI_DROPDOWN_OPTIONS} from './dropdown-options.directive';
 
 @Directive({
@@ -19,6 +20,8 @@ export class TuiDropdownPosition extends TuiPositionAccessor {
     private readonly options = inject(TUI_DROPDOWN_OPTIONS);
     private readonly viewport = inject(TUI_VIEWPORT);
 
+    private readonly dropdownService = inject(TuiDropdownService);
+
     private previous?: TuiVerticalDirection;
 
     public readonly type = 'dropdown';
@@ -60,7 +63,8 @@ export class TuiDropdownPosition extends TuiPositionAccessor {
                     : right,
             left: Math.max(viewport.left, left),
         } as const;
-        const better = available.top > available.bottom ? 'top' : 'bottom';
+        const better: TuiVerticalDirection =
+            available.top > available.bottom ? 'top' : 'bottom';
 
         if (
             (available[previous] > minHeight && direction) ||
@@ -70,6 +74,7 @@ export class TuiDropdownPosition extends TuiPositionAccessor {
         }
 
         this.previous = better;
+        this.dropdownService.publishDropdownDirection(better);
 
         return [position[better], position[align]];
     }

projects/core/directives/dropdown/dropdown.directive.ts

@@ -1,10 +1,18 @@
-import type {AfterViewChecked, ComponentRef, OnChanges, OnDestroy} from '@angular/core';
+import type {
+    AfterViewChecked,
+    ComponentRef,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import {
     ChangeDetectorRef,
     Directive,
+    EventEmitter,
     inject,
     INJECTOR,
     Input,
+    Output,
     signal,
     TemplateRef,
 } from '@angular/core';
@@ -15,11 +23,11 @@ import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiRectAccessor, TuiVehicle} from '@taiga-ui/core/classes';
 import {tuiAsRectAccessor, tuiAsVehicle} from '@taiga-ui/core/classes';
-import type {TuiPortalItem} from '@taiga-ui/core/types';
+import type {TuiPortalItem, TuiVerticalDirection} from '@taiga-ui/core/types';
 import {tuiCheckFixedPosition} from '@taiga-ui/core/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusComponent, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
-import {Subject, throttleTime} from 'rxjs';
+import {observeOn, Subject, throttleTime} from 'rxjs';
 
 import {TuiDropdownDriverDirective} from './dropdown.driver';
 import {TUI_DROPDOWN_COMPONENT} from './dropdown.providers';
@@ -38,6 +46,7 @@ import {TuiDropdownPosition} from './dropdown-position.directive';
 })
 export class TuiDropdownDirective
     implements
+        OnInit,
         AfterViewChecked,
         OnDestroy,
         OnChanges,
@@ -48,6 +57,7 @@ export class TuiDropdownDirective
     private readonly refresh$ = new Subject<void>();
     private readonly service = inject(TuiDropdownService);
     private readonly cdr = inject(ChangeDetectorRef);
+    private readonly dropdownService = inject(TuiDropdownService);
 
     protected readonly sub = this.refresh$
         .pipe(throttleTime(0, tuiZonefreeScheduler()), takeUntilDestroyed())
@@ -56,6 +66,9 @@ export class TuiDropdownDirective
             this.ref()?.changeDetectorRef.markForCheck();
         });
 
+    @Output()
+    public readonly tuiDropdownDirectionChange = new EventEmitter<TuiVerticalDirection>();
+
     public readonly el = tuiInjectElement();
     public readonly type = 'dropdown';
     public readonly component = new PolymorpheusComponent(
@@ -93,6 +106,18 @@ export class TuiDropdownDirective
         this.toggle(false);
     }
 
+    public ngOnInit(): void {
+        this.directionChangeObserver();
+    }
+
+    public directionChangeObserver(): void {
+        this.dropdownService.dropdownDirection$
+            .pipe(observeOn(tuiZonefreeScheduler()), takeUntilDestroyed())
+            .subscribe((direction: TuiVerticalDirection) => {
+                this.tuiDropdownDirectionChange.emit(direction);
+            });
+    }
+
     public getClientRect(): DOMRect {
         return this.el.getBoundingClientRect();
     }

projects/core/directives/dropdown/dropdown.service.ts

@@ -1,7 +1,19 @@
 import {Injectable} from '@angular/core';
 import {TuiPortalService} from '@taiga-ui/cdk/classes';
+import type {TuiVerticalDirection} from '@taiga-ui/core/types';
+import type {Observable} from 'rxjs';
+import {Subject} from 'rxjs';
 
 @Injectable({
     providedIn: 'root',
 })
-export class TuiDropdownService extends TuiPortalService {}
+export class TuiDropdownService extends TuiPortalService {
+    private readonly dropDirectionSubject = new Subject<TuiVerticalDirection>();
+
+    public readonly dropdownDirection$: Observable<TuiVerticalDirection> =
+        this.dropDirectionSubject.asObservable();
+
+    public publishDropdownDirection(direction: TuiVerticalDirection): void {
+        this.dropDirectionSubject.next(direction);
+    }
+}