@taiga-ui/core 5.23.0 → 5.24.0

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

@@ -1,27 +1,27 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, inject, input, signal, INJECTOR, ChangeDetectionStrategy, Component, TemplateRef, forwardRef, computed } from '@angular/core';
-import { outputFromObservable, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { EMPTY_CLIENT_RECT } from '@taiga-ui/cdk/constants';
+import { InjectionToken, ElementRef, Directive, inject, input, signal, INJECTOR, forwardRef, afterNextRender, ChangeDetectionStrategy, Component, TemplateRef, computed, effect } from '@angular/core';
 import * as i3 from '@taiga-ui/cdk/directives/active-zone';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
 import * as i2 from '@taiga-ui/cdk/directives/animated';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
-import { TuiHoveredService } from '@taiga-ui/cdk/directives/hovered';
 import { tuiInjectElement, tuiPointToClientRect } from '@taiga-ui/cdk/utils/dom';
-import { tuiClamp } from '@taiga-ui/cdk/utils/math';
-import { tuiSetSignal, tuiPx, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
-import { TuiDriverDirective, TuiDriver, tuiAsDriver, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsVehicle, tuiAsRectAccessor, tuiPositionAccessorFor, tuiRectAccessorFor } from '@taiga-ui/core/classes';
+import { TuiDriverDirective, TuiDriver, tuiAsDriver, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsVehicle, tuiPositionAccessorFor, tuiRectAccessorFor, tuiAsRectAccessor } from '@taiga-ui/core/classes';
 import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
 import * as i1 from '@taiga-ui/core/directives/appearance';
 import { tuiAppearance, TuiAppearance } from '@taiga-ui/core/directives/appearance';
-import { TuiPositionService, TuiVisualViewportService } from '@taiga-ui/core/services';
-import { TUI_VIEWPORT } from '@taiga-ui/core/tokens';
 import { tuiIsObscured } from '@taiga-ui/core/utils/miscellaneous';
 import { PolymorpheusComponent, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { Subject, merge, switchMap, of, delay, takeUntil, repeat, filter, map, tap, distinctUntilChanged, skip, takeWhile, fromEvent, debounce, timer, startWith, BehaviorSubject } from 'rxjs';
+import { outputFromObservable, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TuiPopupService } from '@taiga-ui/core/portals/popup';
+import { Subject, merge, switchMap, of, delay, takeUntil, repeat, filter, map, tap, distinctUntilChanged, skip, takeWhile, fromEvent, debounce, timer, startWith, BehaviorSubject } from 'rxjs';
+import { tuiProvide, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import { tuiGenerateId, tuiPx, tuiSetSignal, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
 import { WA_IS_MOBILE } from '@ng-web-apis/platform';
-import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import { TuiHoveredService } from '@taiga-ui/cdk/directives/hovered';
+import { TUI_VIEWPORT } from '@taiga-ui/core/tokens';
+import { EMPTY_CLIENT_RECT } from '@taiga-ui/cdk/constants';
+import { tuiClamp } from '@taiga-ui/cdk/utils/math';
+import { TuiVisualViewportService, TuiPositionService } from '@taiga-ui/core/services';
 import { DOCUMENT } from '@angular/common';
 import { tuiIfMap, tuiTypedFromEvent, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
 import { tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
@@ -31,6 +31,25 @@ import { tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
  */
 const TUI_HINT_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_HINT_COMPONENT' : '', { factory: () => TuiHintComponent });
 
+const TUI_HINT_ANCHOR = new InjectionToken(ngDevMode ? 'TUI_HINT_ANCHOR' : '');
+class TuiHintAnchor {
+    constructor() {
+        this.anchor = `--${tuiGenerateId()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiHintAnchor, isStandalone: true, host: { properties: { "attr.data-tui-anchor": "anchor", "style.anchor-name": "anchor" } }, providers: [tuiProvide(TUI_HINT_ANCHOR, ElementRef)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [tuiProvide(TUI_HINT_ANCHOR, ElementRef)],
+                    host: {
+                        '[attr.data-tui-anchor]': 'anchor',
+                        '[style.anchor-name]': 'anchor',
+                    },
+                }]
+        }] });
+
 class TuiHintDriver extends TuiDriverDirective {
     constructor() {
         super(...arguments);
@@ -77,7 +96,6 @@ class TuiHintHover extends TuiDriver {
     constructor() {
         super((subscriber) => this.stream$.subscribe(subscriber));
         this.isMobile = inject(WA_IS_MOBILE);
-        this.el = tuiInjectElement();
         this.hovered$ = inject(TuiHoveredService);
         this.options = inject(TUI_HINT_OPTIONS);
         this.visible = false;
@@ -94,6 +112,7 @@ class TuiHintHover extends TuiDriver {
             optional: true,
             skipSelf: true,
         });
+        this.el = tuiInjectElement();
         this.showDelay = input(this.options.showDelay, {
             alias: 'tuiHintShowDelay',
         });
@@ -269,7 +288,7 @@ class TuiHintDirective {
                 deps: [TUI_HINT_COMPONENT, INJECTOR],
                 useClass: PolymorpheusComponent,
             },
-        ], usesOnChanges: true, hostDirectives: [{ directive: TuiHintDriver }, { directive: TuiHintHover, inputs: ["tuiHintHideDelay", "tuiHintHideDelay", "tuiHintShowDelay", "tuiHintShowDelay"] }, { directive: TuiHintPosition, inputs: ["tuiHintDirection", "tuiHintDirection", "tuiHintCentered", "tuiHintCentered", "tuiHintOffset", "tuiHintOffset"], outputs: ["tuiHintDirectionChange", "tuiHintDirectionChange"] }], ngImport: i0 }); }
+        ], usesOnChanges: true, hostDirectives: [{ directive: TuiHintAnchor }, { directive: TuiHintDriver }, { directive: TuiHintHover, inputs: ["tuiHintHideDelay", "tuiHintHideDelay", "tuiHintShowDelay", "tuiHintShowDelay"] }, { directive: TuiHintPosition, inputs: ["tuiHintDirection", "tuiHintDirection", "tuiHintCentered", "tuiHintCentered", "tuiHintOffset", "tuiHintOffset"], outputs: ["tuiHintDirectionChange", "tuiHintDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintDirective, decorators: [{
             type: Directive,
@@ -284,6 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         },
                     ],
                     hostDirectives: [
+                        TuiHintAnchor,
                         TuiHintDriver,
                         {
                             directive: TuiHintHover,
@@ -298,28 +318,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }] });
 
+const GAP = 8;
+const ARROW_OFFSET = 22;
+class TuiHintAnchored {
+    constructor() {
+        this.el = tuiInjectElement();
+        this.hover = inject(TuiHintHover);
+        this.vvs = inject(TuiVisualViewportService);
+        this.viewport = inject(TUI_VIEWPORT);
+        this.accessor = inject(TuiRectAccessor);
+        this.directive = inject(TuiHintDirective);
+        this.styles$ = inject(TuiPositionService).pipe(takeWhile(() => this.directive.el.isConnected &&
+            this.directive.el.getClientRects().length > 0), map((point) => this.vvs.correct(point)), takeUntilDestroyed());
+        this.sub = inject(TuiHoveredService)
+            .pipe(takeUntilDestroyed())
+            .subscribe((hover) => this.hover.toggle(hover));
+    }
+    ngAfterViewInit() {
+        this.styles$.subscribe({
+            next: (point) => this.update(...point),
+            complete: () => this.directive.toggle(false),
+        });
+    }
+    update(left, top) {
+        const { clientHeight, clientWidth } = this.el;
+        const rect = this.accessor.getClientRect();
+        if (rect === EMPTY_CLIENT_RECT || !clientHeight || !clientWidth) {
+            return;
+        }
+        const viewport = this.viewport.getClientRect();
+        const max = Math.max(GAP, viewport.width + viewport.left - clientWidth - GAP);
+        const safeLeft = tuiClamp(Math.max(GAP, left), viewport.left + GAP, max);
+        const startX = Math.round(safeLeft) === Math.round(rect.left);
+        const startY = Math.round(top) === Math.round(rect.top);
+        const endX = Math.round(safeLeft + clientWidth) === Math.round(rect.right);
+        const endY = Math.round(top + clientHeight) === Math.round(rect.bottom);
+        const [beakLeft, beakTop] = this.vvs.correct([
+            rect.left + rect.width / 2 - safeLeft,
+            rect.top + rect.height / 2 - top,
+        ]);
+        /* eslint-disable no-nested-ternary */
+        const x = startX ? ARROW_OFFSET : endX ? clientWidth - ARROW_OFFSET : beakLeft;
+        const y = startY ? ARROW_OFFSET : endY ? clientHeight - ARROW_OFFSET : beakTop;
+        this.apply(tuiPx(Math.round(top)), tuiPx(Math.round(safeLeft)), Math.round((tuiClamp(y, 0, clientHeight) / clientHeight) * 100), Math.round((tuiClamp(x, 0, clientWidth) / clientWidth) * 100));
+    }
+    apply(top, left, beakTop, beakLeft) {
+        this.el.style.setProperty('top', top);
+        this.el.style.setProperty('left', left);
+        this.el.style.setProperty('--t-top', `${beakTop}%`);
+        this.el.style.setProperty('--t-left', `${beakLeft}%`);
+        this.el.style.setProperty('--t-rotate', !beakLeft || Math.ceil(beakLeft) === 100 ? '90deg' : '0deg');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintAnchored, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiHintAnchored, isStandalone: true, providers: [
+            TuiPositionService,
+            TuiHoveredService,
+            tuiPositionAccessorFor('hint', TuiHintPosition),
+            tuiRectAccessorFor('hint', forwardRef(() => TuiHintDirective)),
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintAnchored, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        TuiPositionService,
+                        TuiHoveredService,
+                        tuiPositionAccessorFor('hint', TuiHintPosition),
+                        tuiRectAccessorFor('hint', forwardRef(() => TuiHintDirective)),
+                    ],
+                }]
+        }] });
+
+const STYLE = {
+    position: 'fixed',
+    blockSize: '1px',
+    inlineSize: '1px',
+    pointerEvents: 'none',
+};
 class TuiHintPointer extends TuiHintHover {
     constructor() {
-        super(...arguments);
+        super();
+        this.doc = inject(DOCUMENT);
         this.currentRect = EMPTY_CLIENT_RECT;
+        this.nativeElement = this.doc.createElement('div');
+        afterNextRender(() => {
+            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);
+            this.doc.body.appendChild(this.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
     }
     getClientRect() {
         return this.currentRect;
     }
     onMove({ clientX, clientY }) {
+        const { top, left } = this.el.getBoundingClientRect();
         this.currentRect = tuiPointToClientRect(clientX, clientY);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintPointer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiHintPointer, isStandalone: true, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.zoneless": "onMove($event)" } }, providers: [tuiAsRectAccessor(TuiHintPointer), tuiAsDriver(TuiHintPointer)], usesInheritance: true, ngImport: i0 }); }
+        this.nativeElement.style.top = `calc(anchor(top) + ${clientY - top}px)`;
+        this.nativeElement.style.left = `calc(anchor(left) + ${clientX - left}px)`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintPointer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiHintPointer, isStandalone: true, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.zoneless": "onMove($event)" } }, providers: [
+            tuiAsRectAccessor(TuiHintPointer),
+            tuiAsDriver(TuiHintPointer),
+            tuiProvide(TUI_HINT_ANCHOR, TuiHintPointer),
+        ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintPointer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintPointer]',
-                    providers: [tuiAsRectAccessor(TuiHintPointer), tuiAsDriver(TuiHintPointer)],
+                    providers: [
+                        tuiAsRectAccessor(TuiHintPointer),
+                        tuiAsDriver(TuiHintPointer),
+                        tuiProvide(TUI_HINT_ANCHOR, TuiHintPointer),
+                    ],
                     host: { '(mousemove.zoneless)': 'onMove($event)' },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class TuiHintUnstyledComponent {
     constructor() {
@@ -350,43 +471,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: 'ng-template[tuiHint]' }]
         }], ctorParameters: () => [] });
 
-/** @internal */
-function tuiGetHintProviders() {
-    return [
-        TuiPositionService,
-        TuiHoveredService,
-        tuiPositionAccessorFor('hint', TuiHintPosition),
-        tuiRectAccessorFor('hint', forwardRef(() => TuiHintDirective)),
-    ];
-}
-const GAP = 8;
-const ARROW_OFFSET = 22;
 class TuiHintComponent {
     constructor() {
         this.el = tuiInjectElement();
         this.hover = inject(TuiHintHover);
-        this.vvs = inject(TuiVisualViewportService);
-        this.viewport = inject(TUI_VIEWPORT);
         this.pointer = inject(TuiHintPointer, { optional: true });
         this.accessor = inject(TuiRectAccessor);
         this.hint = inject(TuiHintDirective);
+        this.appearance = tuiAppearance(this.hint.appearance);
         this.content = this.hint.component.component === TuiHintUnstyledComponent
             ? signal('')
             : this.hint.content;
         this.theme = this.hint.el
             .closest('[tuiTheme]')
             ?.getAttribute('tuiTheme');
-        this.appearance = tuiAppearance(this.hint.appearance);
-        inject(TuiPositionService)
-            .pipe(takeWhile(() => this.hint.el.isConnected &&
-            this.hint.el.getClientRects().length > 0), map((point) => this.vvs.correct(point)), takeUntilDestroyed())
-            .subscribe({
-            next: (point) => this.update(...point),
-            complete: () => this.hint.toggle(false),
-        });
-        inject(TuiHoveredService)
-            .pipe(takeUntilDestroyed())
-            .subscribe((hover) => this.hover.toggle(hover));
     }
     onPointerDown(target) {
         if ((!target.closest(this.el.tagName) && !this.hint.el.contains(target)) ||
@@ -394,36 +492,8 @@ class TuiHintComponent {
             this.hover.toggle(false);
         }
     }
-    apply(top, left, beakTop, beakLeft) {
-        this.el.style.setProperty('top', top);
-        this.el.style.setProperty('left', left);
-        this.el.style.setProperty('--t-top', `${beakTop}%`);
-        this.el.style.setProperty('--t-left', `${beakLeft}%`);
-        this.el.style.setProperty('--t-rotate', !beakLeft || Math.ceil(beakLeft) === 100 ? '90deg' : '0deg');
-    }
-    update(left, top) {
-        const { clientHeight, clientWidth } = this.el;
-        const rect = this.accessor.getClientRect();
-        if (rect === EMPTY_CLIENT_RECT || !clientHeight || !clientWidth) {
-            return;
-        }
-        const viewport = this.viewport.getClientRect();
-        const safeLeft = tuiClamp(Math.max(GAP, left), viewport.left + GAP, Math.max(GAP, viewport.width + viewport.left - clientWidth - GAP));
-        const startX = Math.round(safeLeft) === Math.round(rect.left);
-        const startY = Math.round(top) === Math.round(rect.top);
-        const endX = Math.round(safeLeft + clientWidth) === Math.round(rect.right);
-        const endY = Math.round(top + clientHeight) === Math.round(rect.bottom);
-        const [beakLeft, beakTop] = this.vvs.correct([
-            rect.left + rect.width / 2 - safeLeft,
-            rect.top + rect.height / 2 - top,
-        ]);
-        /* eslint-disable no-nested-ternary */
-        const x = startX ? ARROW_OFFSET : endX ? clientWidth - ARROW_OFFSET : beakLeft;
-        const y = startY ? ARROW_OFFSET : endY ? clientHeight - ARROW_OFFSET : beakTop;
-        this.apply(tuiPx(Math.round(top)), tuiPx(Math.round(safeLeft)), Math.round((tuiClamp(y, 0, clientHeight) / clientHeight) * 100), Math.round((tuiClamp(x, 0, clientWidth) / clientWidth) * 100));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiHintComponent, isStandalone: true, selector: "tui-hint", host: { attributes: { "role": "tooltip" }, listeners: { "document:pointerdown": "onPointerDown($event.target)" }, properties: { "attr.tuiTheme": "theme", "class._untouchable": "pointer" } }, providers: [tuiGetHintProviders(), tuiButtonOptionsProvider({ size: 's' })], hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiAnimated }, { directive: i3.TuiActiveZone }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiHintComponent, isStandalone: true, selector: "tui-hint", host: { attributes: { "role": "tooltip" }, listeners: { "document:pointerdown": "onPointerDown($event.target)" }, properties: { "attr.tuiTheme": "theme", "class._untouchable": "pointer" } }, providers: [tuiButtonOptionsProvider({ size: 's' })], hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiAnimated }, { directive: i3.TuiActiveZone }, { directive: TuiHintAnchored }], ngImport: i0, template: `
         <ng-content />
         <span
             *polymorpheusOutlet="content() as text; context: hint.context()"
@@ -439,13 +509,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             *polymorpheusOutlet="content() as text; context: hint.context()"
             [innerHTML]="text"
         ></span>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiGetHintProviders(), tuiButtonOptionsProvider({ size: 's' })], hostDirectives: [TuiAppearance, TuiAnimated, TuiActiveZone], host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiButtonOptionsProvider({ size: 's' })], hostDirectives: [TuiAppearance, TuiAnimated, TuiActiveZone, TuiHintAnchored], host: {
                         role: 'tooltip',
                         '[attr.tuiTheme]': 'theme',
                         '[class._untouchable]': 'pointer',
                         '(document:pointerdown)': 'onPointerDown($event.target)',
                     }, styles: [":host{position:absolute;max-inline-size:min(20rem,calc(100% - 1rem));padding:.75rem 1rem;background:var(--tui-background-accent-1);border-radius:var(--tui-radius-l);color:var(--tui-text-primary-on-accent-1);box-sizing:border-box;font:var(--tui-typography-body-s);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--t-left) var(--t-top);--tui-background-elevation-2: var(--tui-background-elevation-3);--tui-scale: .5}:host.tui-enter{animation:tuiFade var(--tui-duration) var(--tui-curve-expressive-standard),tuiScale var(--tui-duration) var(--tui-curve-expressive-standard) 10ms}:host.tui-leave{animation:tuiFade calc(var(--tui-duration) / 2) var(--tui-curve-expressive-standard) reverse,tuiScale calc(var(--tui-duration) / 2) var(--tui-curve-expressive-standard) reverse}:host:before{content:\"\";position:absolute;inset-block-start:var(--t-top);inset-inline-start:var(--t-left);inline-size:.75rem;block-size:.5rem;background:inherit;-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');transition:none;transform:translate(-50%,-50%) rotate(var(--t-rotate))}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}:host ::ng-deep [tuiTitle]{margin-block-end:.75rem}:host ::ng-deep [tuiTitle]+footer{margin-block-start:.75rem}:host ::ng-deep [tuiIconButton][data-appearance=icon][data-size=xs]{float:right;margin-inline-end:-.25rem}@supports (float: inline-end){:host ::ng-deep [tuiIconButton][data-appearance=icon][data-size=xs]{float:inline-end}}:host ::ng-deep img{display:block;border-radius:var(--tui-radius-m)}:host ::ng-deep footer{display:flex;justify-content:flex-end;gap:.5rem;inline-size:18rem;max-inline-size:100%;margin:1rem 0 .25rem}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class TuiHintDescribe extends TuiDriver {
     constructor() {
@@ -478,18 +548,25 @@ class TuiHintHost extends TuiRectAccessor {
         super(...arguments);
         this.tuiHintHost = input();
         this.type = 'hint';
+        this.nativeElement = tuiInjectElement();
+        this.sync = effect(() => {
+            const anchorName = `--${tuiGenerateId()}`;
+            this.nativeElement = this.tuiHintHost() || this.nativeElement;
+            this.nativeElement.setAttribute('data-tui-anchor', anchorName);
+            this.nativeElement.style.setProperty('anchor-name', anchorName);
+        });
     }
     getClientRect() {
-        return this.tuiHintHost()?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
+        return this.nativeElement.getBoundingClientRect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintHost, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiHintHost, isStandalone: true, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: { classPropertyName: "tuiHintHost", publicName: "tuiHintHost", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsRectAccessor(TuiHintHost)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiHintHost, isStandalone: true, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: { classPropertyName: "tuiHintHost", publicName: "tuiHintHost", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsRectAccessor(TuiHintHost), tuiProvide(TUI_HINT_ANCHOR, TuiHintHost)], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiHintHost, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintHost]',
-                    providers: [tuiAsRectAccessor(TuiHintHost)],
+                    providers: [tuiAsRectAccessor(TuiHintHost), tuiProvide(TUI_HINT_ANCHOR, TuiHintHost)],
                 }]
         }] });
 
@@ -561,5 +638,5 @@ const TuiHint = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_HINT_COMPONENT, TUI_HINT_DEFAULT_OPTIONS, TUI_HINT_DIRECTIONS, TUI_HINT_OPTIONS, TuiHint, TuiHintComponent, TuiHintDescribe, TuiHintDirective, TuiHintDriver, TuiHintHost, TuiHintHover, TuiHintManual, TuiHintOverflow, TuiHintPointer, TuiHintPosition, TuiHintUnstyled, TuiHintUnstyledComponent, tuiGetHintProviders, tuiHintOptionsProvider };
+export { TUI_HINT_ANCHOR, TUI_HINT_COMPONENT, TUI_HINT_DEFAULT_OPTIONS, TUI_HINT_DIRECTIONS, TUI_HINT_OPTIONS, TuiHint, TuiHintAnchor, TuiHintAnchored, TuiHintComponent, TuiHintDescribe, TuiHintDirective, TuiHintDriver, TuiHintHost, TuiHintHover, TuiHintManual, TuiHintOverflow, TuiHintPointer, TuiHintPosition, TuiHintUnstyled, TuiHintUnstyledComponent, tuiHintOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-portals-hint.mjs.map