@taiga-ui/core 5.22.0 → 5.23.0-canary.0a07bcd

package/fesm2022/taiga-ui-core-portals-dropdown.mjs

@@ -1,7 +1,7 @@
 import { tuiProvide, tuiDirectiveBinding, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { coerceArray } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, forwardRef, computed, ChangeDetectionStrategy, Component, input, effect, INJECTOR, ChangeDetectorRef, signal, TemplateRef, ElementRef, contentChild, model, PLATFORM_ID, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, forwardRef, computed, ChangeDetectionStrategy, Component, input, effect, ElementRef, INJECTOR, ChangeDetectorRef, signal, TemplateRef, contentChild, model, PLATFORM_ID, ViewContainerRef, afterNextRender } from '@angular/core';
 import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { tuiZonefreeScheduler, tuiIfMap, tuiCloseWatcher, tuiTypedFromEvent, tuiStopPropagation, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement, tuiGetActualTarget, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, tuiPointToClientRect, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
@@ -264,6 +264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 const TUI_DROPDOWN_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_COMPONENT' : '', { factory: () => TuiDropdownComponent });
 const TUI_DROPDOWN_CONTEXT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_CONTEXT' : '');
 const TUI_DROPDOWN_HOST = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_HOST' : '');
+const TUI_DROPDOWN_ANCHOR = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_ANCHOR' : '');
 
 class TuiDropdownA11y {
     constructor() {
@@ -296,6 +297,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: '[tuiDropdownA11y]' }]
         }] });
 
+class TuiDropdownHost {
+    constructor() {
+        this.anchor = `--${tuiGenerateId()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownHost, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownHost, isStandalone: true, host: { properties: { "attr.data-tui-anchor": "anchor", "style.anchor-name": "anchor" } }, providers: [
+            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, ElementRef),
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownHost, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, ElementRef),
+                    ],
+                    host: {
+                        '[attr.data-tui-anchor]': 'anchor',
+                        '[style.anchor-name]': 'anchor',
+                    },
+                }]
+        }] });
+
 class TuiDropdownDirective {
     constructor() {
         this.injector = inject(INJECTOR);
@@ -357,21 +382,16 @@ class TuiDropdownDirective {
         this.drivers.forEach((driver) => driver?.next(show));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [
-            tuiAsVehicle(TuiDropdownDirective),
-            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
-        ], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownHost }, { directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not(ng-container):not(ng-template)',
-                    providers: [
-                        tuiAsVehicle(TuiDropdownDirective),
-                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
-                    ],
+                    providers: [tuiAsVehicle(TuiDropdownDirective)],
                     exportAs: 'tuiDropdown',
                     hostDirectives: [
+                        TuiDropdownHost,
                         TuiDropdownDriverDirective,
                         { directive: TuiDropdownA11y, inputs: ['tuiDropdownRole'] },
                         {
@@ -558,6 +578,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: 'ng-template[tuiDropdown]' }]
         }], ctorParameters: () => [] });
 
+const STYLE = {
+    position: 'fixed',
+    blockSize: '1px',
+    inlineSize: '1px',
+    pointerEvents: 'none',
+};
 class TuiDropdownContext extends TuiRectAccessor {
     constructor() {
         super(...arguments);
@@ -580,12 +606,27 @@ class TuiDropdownContext extends TuiRectAccessor {
             this.currentRect = EMPTY_CLIENT_RECT;
         });
         this.type = 'dropdown';
+        this.nativeElement = this.doc.createElement('div');
+    }
+    ngAfterViewInit() {
+        const anchorName = `--${tuiGenerateId()}`;
+        const positionAnchor = this.el.getAttribute('data-tui-anchor');
+        const style = { ...STYLE, positionAnchor, anchorName };
+        Object.assign(this.nativeElement.style, style);
+        this.nativeElement.setAttribute('data-tui-anchor', anchorName);
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
     }
     getClientRect() {
         return this.currentRect;
     }
     onContextMenu(x, y) {
+        const { top, left } = this.el.getBoundingClientRect();
         this.currentRect = tuiPointToClientRect(x, y);
+        this.nativeElement.style.top = `calc(anchor(top) + ${y - top}px)`;
+        this.nativeElement.style.left = `calc(anchor(left) + ${x - left}px)`;
+        this.doc.body.appendChild(this.nativeElement);
         this.driver.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
@@ -594,6 +635,7 @@ class TuiDropdownContext extends TuiRectAccessor {
             TuiDropdownDriver,
             tuiAsDriver(TuiDropdownDriver),
             tuiAsRectAccessor(TuiDropdownContext),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownContext),
         ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownContext, decorators: [{
@@ -605,6 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TuiDropdownDriver,
                         tuiAsDriver(TuiDropdownDriver),
                         tuiAsRectAccessor(TuiDropdownContext),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownContext),
                     ],
                     host: {
                         '[style.-webkit-touch-callout]': 'userSelect()',
@@ -802,16 +845,35 @@ class TuiDropdownSelection extends TuiDriver {
             const contained = this.el.contains(range.commonAncestorContainer);
             const valid = contained && handler(this.range);
             const visible = valid || this.inDropdown(range);
-            const active = tuiGetFocused(this.doc);
-            const textfield = active && tuiIsTextfield(active) && this.el.contains(active);
+            const focus = tuiGetFocused(this.doc);
+            const textfield = focus && tuiIsTextfield(focus) && this.el.contains(focus);
+            this.updateAnchor();
             return visible && textfield ? this.isCaretVisible(this.range) : visible;
         }));
         this.range = isPlatformBrowser(inject(PLATFORM_ID))
             ? new Range()
             : {};
         this.type = 'dropdown';
+        this.nativeElement = this.doc.createElement('div');
         this.tuiDropdownSelection = input('');
         this.tuiDropdownSelectionPosition = input('selection');
+        afterNextRender(() => {
+            const anchorName = `--${tuiGenerateId()}`;
+            Object.assign(this.nativeElement.style, {
+                position: 'fixed',
+                pointerEvents: 'none',
+                positionAnchor: this.el.dataset.tuiAnchor,
+                anchorName,
+            });
+            this.nativeElement.dataset.tuiAnchor = anchorName;
+            this.doc.body.appendChild(this.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
+        if (this.ghost) {
+            this.ghostHost.removeChild(this.ghost);
+        }
     }
     getClientRect() {
         switch (this.tuiDropdownSelectionPosition()) {
@@ -830,11 +892,6 @@ class TuiDropdownSelection extends TuiDriver {
                 return this.range.getBoundingClientRect();
         }
     }
-    ngOnDestroy() {
-        if (this.ghost) {
-            this.ghostHost.removeChild(this.ghost);
-        }
-    }
     get ghostHost() {
         return this.el.querySelector('tui-textfield .t-ghost') || this.el;
     }
@@ -917,10 +974,21 @@ class TuiDropdownSelection extends TuiDriver {
         const threshold = lineHeight * 0.5;
         return visibleHeight >= threshold;
     }
+    updateAnchor() {
+        const rect = this.getClientRect();
+        const { top, left } = this.el.getBoundingClientRect();
+        Object.assign(this.nativeElement.style, {
+            top: `calc(anchor(top) + ${rect.top - top}px)`,
+            left: `calc(anchor(left) + ${rect.left - left}px)`,
+            blockSize: tuiPx(rect.height),
+            inlineSize: tuiPx(rect.width),
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownSelection, isStandalone: true, selector: "[tuiDropdownSelection]", inputs: { tuiDropdownSelection: { classPropertyName: "tuiDropdownSelection", publicName: "tuiDropdownSelection", isSignal: true, isRequired: false, transformFunction: null }, tuiDropdownSelectionPosition: { classPropertyName: "tuiDropdownSelectionPosition", publicName: "tuiDropdownSelectionPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             tuiAsDriver(TuiDropdownSelection),
             tuiAsRectAccessor(TuiDropdownSelection),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownSelection),
         ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownSelection, decorators: [{
@@ -930,6 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     providers: [
                         tuiAsDriver(TuiDropdownSelection),
                         tuiAsRectAccessor(TuiDropdownSelection),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownSelection),
                     ],
                 }]
         }], ctorParameters: () => [] });
@@ -971,5 +1040,5 @@ const TuiDropdown = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAnchor, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_ANCHOR, TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAnchor, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHost, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-portals-dropdown.mjs.map