ng-primitives 0.120.4 → 0.121.0

package/fesm2022/ng-primitives-tooltip.mjs

@@ -1,10 +1,10 @@
-import { ngpOverlayArrow, injectOverlay, injectOverlayContext, coerceOffset, coerceFlip, coerceShift, createOverlay } from 'ng-primitives/portal';
+import { ngpOverlayArrow, injectOverlay, provideControlContainerIsolation, injectOverlayContext, createOverlay, coerceOffset, coerceFlip, coerceShift } from 'ng-primitives/portal';
 export { injectOverlayContext as injectTooltipContext } from 'ng-primitives/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, numberAttribute, Directive, Component, ElementRef, Injector, ViewContainerRef, booleanAttribute, signal, computed } from '@angular/core';
-import { createPrimitive, createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { explicitEffect, setupOverflowListener } from 'ng-primitives/internal';
+import { InjectionToken, inject, input, numberAttribute, Directive, signal, Component, Injector, ViewContainerRef, ElementRef, computed, booleanAttribute } from '@angular/core';
+import { createPrimitive, controlled, attrBinding, dataBinding, styleBinding, listener } from 'ng-primitives/state';
 import { injectDisposables, isString } from 'ng-primitives/utils';
+import { injectElementRef, explicitEffect, setupOverflowListener } from 'ng-primitives/internal';
 import { ngpHover } from 'ng-primitives/interactions';
 
 const defaultTooltipConfig = {
@@ -54,11 +54,8 @@ class NgpTooltipArrow {
          * Padding between the arrow and the edges of the tooltip.
          * This prevents the arrow from overflowing the rounded corners.
          */
-        this.padding = input(undefined, ...(ngDevMode ? [{ debugName: "padding", alias: 'ngpTooltipArrowPadding',
-                transform: numberAttribute }] : [{
-                alias: 'ngpTooltipArrowPadding',
-                transform: numberAttribute,
-            }]));
+        this.padding = input(undefined, { ...(ngDevMode ? { debugName: "padding" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipArrowPadding',
+            transform: numberAttribute });
         this.state = ngpTooltipArrow({ padding: this.padding });
     }
     /**
@@ -68,10 +65,10 @@ class NgpTooltipArrow {
     setPadding(value) {
         this.state.setPadding(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpTooltipArrow, isStandalone: true, selector: "[ngpTooltipArrow]", inputs: { padding: { classPropertyName: "padding", publicName: "ngpTooltipArrowPadding", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTooltipArrowState()], exportAs: ["ngpTooltipArrow"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpTooltipArrow, isStandalone: true, selector: "[ngpTooltipArrow]", inputs: { padding: { classPropertyName: "padding", publicName: "ngpTooltipArrowPadding", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTooltipArrowState()], exportAs: ["ngpTooltipArrow"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltipArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltipArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTooltipArrow]',
@@ -80,69 +77,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipArrowPadding", required: false }] }] } });
 
-/**
- * The state token  for the TooltipTrigger primitive.
- */
-const NgpTooltipTriggerStateToken = createStateToken('TooltipTrigger');
-/**
- * Provides the TooltipTrigger state.
- */
-const provideTooltipTriggerState = createStateProvider(NgpTooltipTriggerStateToken);
-/**
- * Injects the TooltipTrigger state.
- */
-const injectTooltipTriggerState = createStateInjector(NgpTooltipTriggerStateToken);
-/**
- * The TooltipTrigger state registration function.
- */
-const tooltipTriggerState = createState(NgpTooltipTriggerStateToken);
+const [NgpTooltipStateToken, ngpTooltip, injectTooltipState, provideTooltipState] = createPrimitive('NgpTooltip', ({ id: _id = signal('') }) => {
+    const elementRef = injectElementRef();
+    const tooltipTriggerState = injectTooltipTriggerState();
+    const overlay = injectOverlay();
+    const id = controlled(_id);
+    // Seed the id with the overlay's generated unique id so the tooltip has a
+    // valid id (and the trigger a valid aria-describedby) when none is provided.
+    // `controlled` returns a linkedSignal, so this is only a transient default:
+    // if a consumer binds `id`, that source change supersedes this seed.
+    id.set(overlay.id());
+    // Setup interactions
+    ngpHover({
+        onHoverStart: () => tooltipTriggerState().onTooltipHoverStart(),
+        onHoverEnd: () => tooltipTriggerState().onTooltipHoverEnd(),
+    });
+    // Host binding
+    attrBinding(elementRef, 'role', 'tooltip');
+    attrBinding(elementRef, 'id', () => id());
+    dataBinding(elementRef, 'data-overlay', '');
+    dataBinding(elementRef, 'data-placement', () => overlay.finalPlacement()?.toString() ?? null);
+    styleBinding(elementRef, 'left.px', () => overlay.position().x ?? null);
+    styleBinding(elementRef, 'top.px', () => overlay.position().y ?? null);
+    styleBinding(elementRef, '--ngp-tooltip-trigger-width.px', () => overlay.triggerWidth());
+    styleBinding(elementRef, '--ngp-tooltip-transform-origin', () => overlay.transformOrigin());
+    styleBinding(elementRef, '--ngp-tooltip-available-width.px', () => overlay.availableWidth());
+    styleBinding(elementRef, '--ngp-tooltip-available-height.px', () => overlay.availableHeight());
+    // Effects
+    explicitEffect([id], ([id]) => overlay.id.set(id));
+    return {
+        elementRef,
+        id,
+    };
+});
 
 /**
  * Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.
  */
 class NgpTooltip {
     constructor() {
-        /**
-         * Access the overlay.
-         */
-        this.overlay = injectOverlay();
-        /**
-         * Access the tooltip trigger state.
-         */
-        this.tooltipTrigger = injectTooltipTriggerState();
         /**
          * The unique id of the tooltip.
          */
-        this.id = input(this.overlay.id(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        explicitEffect([this.id], ([id]) => this.overlay.id.set(id));
-        // if the mouse moves over the tooltip, we want to keep it open
-        ngpHover({
-            onHoverStart: () => this.tooltipTrigger().onTooltipHoverStart(),
-            onHoverEnd: () => this.tooltipTrigger().onTooltipHoverEnd(),
+        this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.state = ngpTooltip({
+            id: this.id,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpTooltip, isStandalone: true, selector: "[ngpTooltip]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip", "data-overlay": "" }, properties: { "id": "id()", "style.left.px": "overlay.position().x", "style.top.px": "overlay.position().y", "style.--ngp-tooltip-trigger-width.px": "overlay.triggerWidth()", "style.--ngp-tooltip-transform-origin": "overlay.transformOrigin()", "style.--ngp-tooltip-available-width.px": "overlay.availableWidth()", "style.--ngp-tooltip-available-height.px": "overlay.availableHeight()", "attr.data-placement": "overlay.finalPlacement()" } }, exportAs: ["ngpTooltip"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpTooltip, isStandalone: true, selector: "[ngpTooltip]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideControlContainerIsolation()], exportAs: ["ngpTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTooltip]',
                     exportAs: 'ngpTooltip',
-                    host: {
-                        role: 'tooltip',
-                        '[id]': 'id()',
-                        '[style.left.px]': 'overlay.position().x',
-                        '[style.top.px]': 'overlay.position().y',
-                        '[style.--ngp-tooltip-trigger-width.px]': 'overlay.triggerWidth()',
-                        '[style.--ngp-tooltip-transform-origin]': 'overlay.transformOrigin()',
-                        '[style.--ngp-tooltip-available-width.px]': 'overlay.availableWidth()',
-                        '[style.--ngp-tooltip-available-height.px]': 'overlay.availableHeight()',
-                        '[attr.data-placement]': 'overlay.finalPlacement()',
-                        'data-overlay': '',
-                    },
+                    providers: [provideControlContainerIsolation()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+const [NgpTooltipTextContentStateToken, ngpTooltipTextContent, injectTooltipTextContentState, provideTooltipTextContentState,] = createPrimitive('NgpTooltipTextContent', ({}) => {
+    const elementRef = injectElementRef();
+    const content = injectOverlayContext();
+    // Host bindings
+    attrBinding(elementRef, 'ngpTooltip', '');
+    return { elementRef, content };
+});
 
 /**
  * Internal component for wrapping string content in tooltip portals
@@ -150,24 +150,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  */
 class NgpTooltipTextContentComponent {
     constructor() {
-        /**
-         * The string content to display
-         */
-        this.content = injectOverlayContext();
+        this.state = ngpTooltipTextContent({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltipTextContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: NgpTooltipTextContentComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "ngpTooltip": "" } }, hostDirectives: [{ directive: NgpTooltip }], ngImport: i0, template: '{{ content() }}', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltipTextContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: NgpTooltipTextContentComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: NgpTooltip }], ngImport: i0, template: '{{ state.content() }}', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltipTextContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltipTextContentComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '{{ content() }}',
+                    template: '{{ state.content() }}',
                     hostDirectives: [NgpTooltip],
-                    host: {
-                        // Used only for styling, since the host directive isn’t added to the DOM.
-                        // This acts as the styling entry point.
-                        ngpTooltip: '',
-                    },
                 }]
         }] });
 
@@ -222,465 +214,472 @@ function isPointInHoverBridgePolygon(point, polygon) {
     return inside;
 }
 
+const [NgpTooltipTriggerStateToken, ngpTooltipTrigger, _injectTooltipTriggerState, provideTooltipTriggerState,] = createPrimitive('NgpTooltipTrigger', ({ tooltip: _tooltip = signal(null), disabled = signal(false), placement = signal('top'), offset = signal(0), showDelay = signal(500), hideDelay = signal(0), flip = signal(true), shift = signal(undefined), container = signal('body'), showOnOverflow = signal(false), anchor = signal(null), context = signal(undefined), useTextContent = signal(true), trackPosition = signal(false), position = signal(null), scrollBehavior = signal('reposition'), cooldown = signal(300), hoverableContent = signal(false), }) => {
+    const HOVER_BRIDGE_TIMEOUT_MS = 150;
+    const elementRef = injectElementRef();
+    const injector = inject(Injector);
+    const viewContainerRef = inject(ViewContainerRef);
+    const trigger = inject((ElementRef));
+    const tooltipTriggerState = injectTooltipTriggerState();
+    const disposables = injectDisposables();
+    const tooltip = controlled(_tooltip);
+    const tooltipId = signal(undefined, ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
+    const triggerHovered = signal(false, ...(ngDevMode ? [{ debugName: "triggerHovered" }] : /* istanbul ignore next */ []));
+    const contentHovered = signal(false, ...(ngDevMode ? [{ debugName: "contentHovered" }] : /* istanbul ignore next */ []));
+    const hoverBridgePolygon = signal(null, ...(ngDevMode ? [{ debugName: "hoverBridgePolygon" }] : /* istanbul ignore next */ []));
+    const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    const hasOverflow = setupOverflowListener(trigger.nativeElement, {
+        disabled: computed(() => !showOnOverflow()),
+    });
+    let removePointerMoveListener = undefined;
+    let clearHoverBridgeTimeout = undefined;
+    const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    // Host binding
+    attrBinding(elementRef, 'aria-describedby', () => overlay()?.ariaDescribedBy());
+    dataBinding(elementRef, 'data-open', () => (open() ? '' : null));
+    dataBinding(elementRef, 'data-disabled', () => (disabled() ? '' : null));
+    // Listeners
+    listener(elementRef, 'mouseenter', showFromInteraction);
+    listener(elementRef, 'focus', showFromInteraction);
+    listener(elementRef, 'mouseleave', hideFromInteraction);
+    listener(elementRef, 'blur', () => hideFromInteraction());
+    function destroy() {
+        clearHoverBridge();
+        overlay()?.destroy();
+    }
+    function show() {
+        performShow(true);
+    }
+    function hide() {
+        clearHoverBridge();
+        overlay()?.hide();
+    }
+    /**
+     * Show the tooltip from an interaction (respects disabled state, uses cooldown).
+     * @internal
+     */
+    function showFromInteraction() {
+        if (tooltipTriggerState().disabled()) {
+            return;
+        }
+        triggerHovered.set(true);
+        clearHoverBridge();
+        performShow(false);
+    }
+    /**
+     * Shared show logic.
+     * @param skipCooldown When true, skip cooldown registration so multiple tooltips can coexist.
+     */
+    function performShow(skipCooldown) {
+        // If already open, cancel any pending close
+        if (open()) {
+            overlay()?.cancelPendingClose();
+            return;
+        }
+        // if we should only show when there is overflow, check if the trigger has overflow
+        if (tooltipTriggerState().showOnOverflow() && !hasOverflow()) {
+            return;
+        }
+        // Create the overlay if it doesn't exist yet
+        if (!overlay()) {
+            createOverlayInstance();
+        }
+        overlay()?.show({ skipCooldown });
+    }
+    function setTooltipId(id) {
+        tooltipId.set(id);
+    }
+    /**
+     * Hide the tooltip from an interaction (respects disabled state).
+     * @internal
+     */
+    function hideFromInteraction(event) {
+        if (tooltipTriggerState().disabled()) {
+            return;
+        }
+        triggerHovered.set(false);
+        // Blur should close regardless of hover bridge or tooltip hover state.
+        if (!event) {
+            contentHovered.set(false);
+            clearHoverBridge();
+            hide();
+            return;
+        }
+        if (!tooltipTriggerState().hoverableContent()) {
+            hide();
+            return;
+        }
+        const tooltipElement = overlay()?.getElements()[0];
+        if (!tooltipElement) {
+            hide();
+            return;
+        }
+        const polygon = createTooltipHoverBridgePolygon({
+            triggerRect: trigger.nativeElement.getBoundingClientRect(),
+            tooltipRect: tooltipElement.getBoundingClientRect(),
+            exitPoint: { x: event.clientX, y: event.clientY },
+        });
+        if (!polygon) {
+            hide();
+            return;
+        }
+        hoverBridgePolygon.set(polygon);
+        overlay()?.cancelPendingClose();
+        registerPointerMoveListener();
+        scheduleHoverBridgeCloseFallback();
+    }
+    /**
+     * Called by tooltip content when pointer enters the tooltip.
+     * @internal
+     */
+    function onTooltipHoverStart() {
+        if (tooltipTriggerState().disabled() || !tooltipTriggerState().hoverableContent()) {
+            return;
+        }
+        contentHovered.set(true);
+        clearHoverBridge();
+        overlay()?.cancelPendingClose();
+    }
+    /**
+     * Called by tooltip content when pointer leaves the tooltip.
+     * @internal
+     */
+    function onTooltipHoverEnd() {
+        if (tooltipTriggerState().disabled() || !tooltipTriggerState().hoverableContent()) {
+            return;
+        }
+        contentHovered.set(false);
+        if (!triggerHovered()) {
+            hide();
+        }
+    }
+    /**
+     * Create the overlay that will contain the tooltip
+     */
+    function createOverlayInstance() {
+        // Determine the content and context based on useTextContent setting
+        const shouldUseTextContent = tooltipTriggerState().useTextContent();
+        let content = tooltip();
+        let context = tooltipTriggerState().context;
+        if (!content) {
+            if (!shouldUseTextContent) {
+                if (ngDevMode) {
+                    console.error('[ngpTooltipTrigger]: Tooltip must be a string, TemplateRef, or ComponentType. Alternatively, set useTextContent to true if none is provided.');
+                }
+                return;
+            }
+            const textContent = trigger.nativeElement.textContent?.trim() || '';
+            if (ngDevMode && !textContent) {
+                console.warn('[ngpTooltipTrigger]: useTextContent is enabled but trigger element has no text content');
+                return;
+            }
+            content = NgpTooltipTextContentComponent;
+            context = signal(textContent);
+        }
+        else if (isString(content)) {
+            context = signal(content);
+            content = NgpTooltipTextContentComponent;
+        }
+        // Create config for the overlay
+        const config = {
+            content,
+            triggerElement: trigger.nativeElement,
+            anchorElement: anchor(),
+            injector: injector,
+            context,
+            container: container(),
+            placement: placement,
+            offset: offset(),
+            flip: flip(),
+            shift: shift(),
+            showDelay: showDelay(),
+            hideDelay: hideDelay(),
+            closeOnEscape: true,
+            closeOnOutsideClick: true,
+            viewContainerRef: viewContainerRef,
+            trackPosition: trackPosition(),
+            position: position,
+            scrollBehaviour: scrollBehavior(),
+            overlayType: 'tooltip',
+            cooldown: cooldown(),
+        };
+        // Create the overlay instance
+        overlay.set(createOverlay(config));
+    }
+    /**
+     * Register document-level pointer tracking while crossing trigger -> tooltip.
+     * @internal
+     */
+    function registerPointerMoveListener() {
+        if (removePointerMoveListener) {
+            return;
+        }
+        const cleanup = disposables.addEventListener(document, 'pointermove', ((event) => {
+            if (triggerHovered() || contentHovered() || !hoverBridgePolygon()) {
+                clearHoverBridge();
+                return;
+            }
+            const inBridge = isPointInHoverBridgePolygon({ x: event.clientX, y: event.clientY }, hoverBridgePolygon());
+            if (!inBridge) {
+                clearHoverBridge();
+                hide();
+            }
+        }), true);
+        removePointerMoveListener = () => {
+            cleanup();
+            removePointerMoveListener = undefined;
+        };
+    }
+    /**
+     * Clear hover bridge state and global listeners.
+     * @internal
+     */
+    function clearHoverBridge() {
+        hoverBridgePolygon.set(null);
+        clearHoverBridgeTimeout?.();
+        clearHoverBridgeTimeout = undefined;
+        removePointerMoveListener?.();
+    }
+    /**
+     * Close if pointer leaves trigger and does not move into tooltip soon enough.
+     * @internal
+     */
+    function scheduleHoverBridgeCloseFallback() {
+        clearHoverBridgeTimeout?.();
+        clearHoverBridgeTimeout = disposables.setTimeout(() => {
+            clearHoverBridgeTimeout = undefined;
+            if (!triggerHovered() && !contentHovered() && hoverBridgePolygon()) {
+                clearHoverBridge();
+                hide();
+            }
+        }, HOVER_BRIDGE_TIMEOUT_MS);
+    }
+    const state = {
+        tooltip,
+        disabled,
+        placement,
+        offset,
+        showDelay,
+        hideDelay,
+        flip,
+        shift,
+        container,
+        showOnOverflow,
+        anchor,
+        context,
+        useTextContent,
+        trackPosition,
+        position,
+        scrollBehavior,
+        cooldown,
+        hoverableContent,
+        overlay,
+        tooltipId,
+        open,
+        hasOverflow,
+        contentHovered,
+        hoverBridgePolygon,
+        show,
+        hide,
+        setTooltipId,
+        onTooltipHoverStart,
+        onTooltipHoverEnd,
+        destroy,
+    };
+    return state;
+});
+function injectTooltipTriggerState(options) {
+    return _injectTooltipTriggerState(options);
+}
+
 /**
  * Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show.
  */
 class NgpTooltipTrigger {
-    /**
-     * Maximum time allowed to cross from trigger to tooltip without pointer movement.
-     */
-    static { this.HOVER_BRIDGE_TIMEOUT_MS = 150; }
     constructor() {
-        /**
-         * Access the trigger element
-         */
-        this.trigger = inject((ElementRef));
-        /**
-         * Access the injector.
-         */
-        this.injector = inject(Injector);
-        /**
-         * Access the view container reference.
-         */
-        this.viewContainerRef = inject(ViewContainerRef);
         /**
          * Access the global tooltip configuration.
          */
         this.config = injectTooltipConfig();
-        /**
-         * Disposables for managing event listeners and timers with automatic teardown.
-         */
-        this.disposables = injectDisposables();
         /**
          * Access the tooltip template ref.
          */
-        this.tooltip = input(null, ...(ngDevMode ? [{ debugName: "tooltip", alias: 'ngpTooltipTrigger',
-                transform: (value) => (value && !isString(value) ? value : null) }] : [{
-                alias: 'ngpTooltipTrigger',
-                transform: (value) => (value && !isString(value) ? value : null),
-            }]));
+        this.tooltip = input(null, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTrigger',
+            transform: (value) => (value && !isString(value) ? value : null) });
         /**
          * Define if the trigger should be disabled. This will prevent the tooltip from being shown or hidden from interactions.
          * @default false
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpTooltipTriggerDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpTooltipTriggerDisabled',
-                transform: booleanAttribute,
-            }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerDisabled',
+            transform: booleanAttribute });
         /**
          * Define the placement of the tooltip relative to the trigger.
          * @default 'top'
          */
-        this.placement = input(this.config.placement, ...(ngDevMode ? [{ debugName: "placement", alias: 'ngpTooltipTriggerPlacement' }] : [{
-                alias: 'ngpTooltipTriggerPlacement',
-            }]));
+        this.placement = input(this.config.placement, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerPlacement' });
         /**
          * Define the offset of the tooltip relative to the trigger.
          * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
          * @default 0
          */
-        this.offset = input(this.config.offset, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpTooltipTriggerOffset',
-                transform: coerceOffset }] : [{
-                alias: 'ngpTooltipTriggerOffset',
-                transform: coerceOffset,
-            }]));
+        this.offset = input(this.config.offset, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerOffset',
+            transform: coerceOffset });
         /**
          * Define the delay before the tooltip is displayed.
          * @default 500
          */
-        this.showDelay = input(this.config.showDelay, ...(ngDevMode ? [{ debugName: "showDelay", alias: 'ngpTooltipTriggerShowDelay',
-                transform: numberAttribute }] : [{
-                alias: 'ngpTooltipTriggerShowDelay',
-                transform: numberAttribute,
-            }]));
+        this.showDelay = input(this.config.showDelay, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerShowDelay',
+            transform: numberAttribute });
         /**
          * Define the delay before the tooltip is hidden.
          * @default 0
          */
-        this.hideDelay = input(this.config.hideDelay, ...(ngDevMode ? [{ debugName: "hideDelay", alias: 'ngpTooltipTriggerHideDelay',
-                transform: numberAttribute }] : [{
-                alias: 'ngpTooltipTriggerHideDelay',
-                transform: numberAttribute,
-            }]));
+        this.hideDelay = input(this.config.hideDelay, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerHideDelay',
+            transform: numberAttribute });
         /**
          * Define whether the tooltip should flip when there is not enough space for the tooltip.
          * Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options.
          * @default true
          */
-        this.flip = input(this.config.flip, ...(ngDevMode ? [{ debugName: "flip", alias: 'ngpTooltipTriggerFlip',
-                transform: coerceFlip }] : [{
-                alias: 'ngpTooltipTriggerFlip',
-                transform: coerceFlip,
-            }]));
+        this.flip = input(this.config.flip, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerFlip',
+            transform: coerceFlip });
         /**
          * Configure shift behavior to keep the tooltip in view.
          * Can be a boolean to enable/disable, or an object with padding and limiter options.
          * @default undefined (enabled by default in overlay)
          */
-        this.shift = input(this.config.shift, ...(ngDevMode ? [{ debugName: "shift", alias: 'ngpTooltipTriggerShift',
-                transform: coerceShift }] : [{
-                alias: 'ngpTooltipTriggerShift',
-                transform: coerceShift,
-            }]));
+        this.shift = input(this.config.shift, { ...(ngDevMode ? { debugName: "shift" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerShift',
+            transform: coerceShift });
         /**
          * Define the container in which the tooltip should be attached.
          * @default document.body
          */
-        this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpTooltipTriggerContainer' }] : [{
-                alias: 'ngpTooltipTriggerContainer',
-            }]));
+        this.container = input(this.config.container, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerContainer' });
         /**
          * Define whether the tooltip should only show when the trigger element overflows.
          * @default false
          */
-        this.showOnOverflow = input(this.config.showOnOverflow, ...(ngDevMode ? [{ debugName: "showOnOverflow", alias: 'ngpTooltipTriggerShowOnOverflow',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpTooltipTriggerShowOnOverflow',
-                transform: booleanAttribute,
-            }]));
+        this.showOnOverflow = input(this.config.showOnOverflow, { ...(ngDevMode ? { debugName: "showOnOverflow" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerShowOnOverflow',
+            transform: booleanAttribute });
         /**
          * Define an anchor element for positioning the tooltip.
          * If provided, the tooltip will be positioned relative to this element instead of the trigger.
          */
-        this.anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor", alias: 'ngpTooltipTriggerAnchor' }] : [{ alias: 'ngpTooltipTriggerAnchor' }]));
+        this.anchor = input(null, { ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerAnchor' });
         /**
          * Provide context to the tooltip. This can be used to pass data to the tooltip content.
          */
-        this.context = input(undefined, ...(ngDevMode ? [{ debugName: "context", alias: 'ngpTooltipTriggerContext' }] : [{
-                alias: 'ngpTooltipTriggerContext',
-            }]));
+        this.context = input(undefined, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerContext' });
         /**
          * Define whether to use the text content of the trigger element as the tooltip content.
          * When enabled, the tooltip will display the text content of the trigger element.
          * @default true
          */
-        this.useTextContent = input(this.config.useTextContent, ...(ngDevMode ? [{ debugName: "useTextContent", alias: 'ngpTooltipTriggerUseTextContent',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpTooltipTriggerUseTextContent',
-                transform: booleanAttribute,
-            }]));
+        this.useTextContent = input(this.config.useTextContent, { ...(ngDevMode ? { debugName: "useTextContent" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerUseTextContent',
+            transform: booleanAttribute });
         /**
          * Define whether to track the trigger element position on every animation frame.
          * Useful for moving elements like slider thumbs.
          * @default false
          */
-        this.trackPosition = input(this.config.trackPosition, ...(ngDevMode ? [{ debugName: "trackPosition", alias: 'ngpTooltipTriggerTrackPosition',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpTooltipTriggerTrackPosition',
-                transform: booleanAttribute,
-            }]));
+        this.trackPosition = input(this.config.trackPosition, { ...(ngDevMode ? { debugName: "trackPosition" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerTrackPosition',
+            transform: booleanAttribute });
         /**
          * Programmatic position for the tooltip. When provided, the tooltip
          * will be positioned at these coordinates instead of the trigger element.
          * Use with trackPosition="true" for smooth cursor following.
          */
-        this.position = input(null, ...(ngDevMode ? [{ debugName: "position", alias: 'ngpTooltipTriggerPosition' }] : [{
-                alias: 'ngpTooltipTriggerPosition',
-            }]));
+        this.position = input(null, { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerPosition' });
         /**
          * Defines how the tooltip behaves when the window is scrolled.
          * @default 'reposition'
          */
-        this.scrollBehavior = input(this.config.scrollBehavior, ...(ngDevMode ? [{ debugName: "scrollBehavior", alias: 'ngpTooltipTriggerScrollBehavior' }] : [{
-                alias: 'ngpTooltipTriggerScrollBehavior',
-            }]));
+        this.scrollBehavior = input(this.config.scrollBehavior, { ...(ngDevMode ? { debugName: "scrollBehavior" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerScrollBehavior' });
         /**
          * Define the cooldown duration in milliseconds.
          * When moving from one tooltip to another within this duration,
          * the showDelay is skipped for the new tooltip.
          * @default 300
          */
-        this.cooldown = input(this.config.cooldown, ...(ngDevMode ? [{ debugName: "cooldown", alias: 'ngpTooltipTriggerCooldown',
-                transform: numberAttribute }] : [{
-                alias: 'ngpTooltipTriggerCooldown',
-                transform: numberAttribute,
-            }]));
+        this.cooldown = input(this.config.cooldown, { ...(ngDevMode ? { debugName: "cooldown" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerCooldown',
+            transform: numberAttribute });
         /**
          * Whether hovering tooltip content keeps the tooltip open.
          * @default false
          */
-        this.hoverableContent = input(this.config.hoverableContent, ...(ngDevMode ? [{ debugName: "hoverableContent", alias: 'ngpTooltipTriggerHoverableContent',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpTooltipTriggerHoverableContent',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * The overlay that manages the tooltip
-         * @internal
-         */
-        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
-        /**
-         * The unique id of the tooltip.
-         */
-        this.tooltipId = signal(undefined, ...(ngDevMode ? [{ debugName: "tooltipId" }] : []));
-        /**
-         * The open state of the tooltip.
-         * @internal
-         */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-        /**
-         * Tracks whether pointer is currently over trigger.
-         */
-        this.triggerHovered = false;
-        /**
-         * Tracks whether pointer is currently over tooltip content.
-         */
-        this.contentHovered = false;
-        /**
-         * Current pointer grace polygon used while crossing trigger -> tooltip.
-         */
-        this.hoverBridgePolygon = null;
-        /**
-         * Store the state of the tooltip.
-         * @internal
-         */
-        this.state = tooltipTriggerState(this);
-        this.hasOverflow = setupOverflowListener(this.trigger.nativeElement, {
-            disabled: computed(() => !this.state.showOnOverflow()),
+        this.hoverableContent = input(this.config.hoverableContent, { ...(ngDevMode ? { debugName: "hoverableContent" } : /* istanbul ignore next */ {}), alias: 'ngpTooltipTriggerHoverableContent',
+            transform: booleanAttribute });
+        this.state = ngpTooltipTrigger({
+            tooltip: this.tooltip,
+            disabled: this.disabled,
+            placement: this.placement,
+            offset: this.offset,
+            showDelay: this.showDelay,
+            hideDelay: this.hideDelay,
+            flip: this.flip,
+            shift: this.shift,
+            container: this.container,
+            showOnOverflow: this.showOnOverflow,
+            anchor: this.anchor,
+            context: this.context,
+            useTextContent: this.useTextContent,
+            trackPosition: this.trackPosition,
+            position: this.position,
+            scrollBehavior: this.scrollBehavior,
+            cooldown: this.cooldown,
+            hoverableContent: this.hoverableContent,
         });
     }
     ngOnDestroy() {
-        this.clearHoverBridge();
-        this.overlay()?.destroy();
+        return this.state.destroy();
     }
     /**
      * Show the tooltip programmatically (skips cooldown so multiple tooltips can coexist).
      */
     show() {
-        this.performShow(true);
+        return this.state.show();
     }
     /**
      * Hide the tooltip.
      */
     hide() {
-        this.clearHoverBridge();
-        this.overlay()?.hide();
-    }
-    /**
-     * Show the tooltip from an interaction (respects disabled state, uses cooldown).
-     * @internal
-     */
-    showFromInteraction() {
-        if (this.state.disabled()) {
-            return;
-        }
-        this.triggerHovered = true;
-        this.clearHoverBridge();
-        this.performShow(false);
-    }
-    /**
-     * Shared show logic.
-     * @param skipCooldown When true, skip cooldown registration so multiple tooltips can coexist.
-     */
-    performShow(skipCooldown) {
-        // If already open, cancel any pending close
-        if (this.open()) {
-            this.overlay()?.cancelPendingClose();
-            return;
-        }
-        // if we should only show when there is overflow, check if the trigger has overflow
-        if (this.state.showOnOverflow() && !this.hasOverflow()) {
-            return;
-        }
-        // Create the overlay if it doesn't exist yet
-        if (!this.overlay()) {
-            this.createOverlay();
-        }
-        this.overlay()?.show({ skipCooldown });
-    }
-    /**
-     * Hide the tooltip from an interaction (respects disabled state).
-     * @internal
-     */
-    hideFromInteraction(event) {
-        if (this.state.disabled()) {
-            return;
-        }
-        this.triggerHovered = false;
-        // Blur should close regardless of hover bridge or tooltip hover state.
-        if (!event) {
-            this.contentHovered = false;
-            this.clearHoverBridge();
-            this.hide();
-            return;
-        }
-        if (!this.state.hoverableContent()) {
-            this.hide();
-            return;
-        }
-        const tooltipElement = this.overlay()?.getElements()[0];
-        if (!tooltipElement) {
-            this.hide();
-            return;
-        }
-        const polygon = createTooltipHoverBridgePolygon({
-            triggerRect: this.trigger.nativeElement.getBoundingClientRect(),
-            tooltipRect: tooltipElement.getBoundingClientRect(),
-            exitPoint: { x: event.clientX, y: event.clientY },
-        });
-        if (!polygon) {
-            this.hide();
-            return;
-        }
-        this.hoverBridgePolygon = polygon;
-        this.overlay()?.cancelPendingClose();
-        this.registerPointerMoveListener();
-        this.scheduleHoverBridgeCloseFallback();
+        return this.state.hide();
     }
     /**
      * Called by tooltip content when pointer enters the tooltip.
      * @internal
      */
     onTooltipHoverStart() {
-        if (this.state.disabled() || !this.state.hoverableContent()) {
-            return;
-        }
-        this.contentHovered = true;
-        this.clearHoverBridge();
-        this.overlay()?.cancelPendingClose();
+        return this.state.onTooltipHoverStart();
     }
     /**
      * Called by tooltip content when pointer leaves the tooltip.
      * @internal
      */
     onTooltipHoverEnd() {
-        if (this.state.disabled() || !this.state.hoverableContent()) {
-            return;
-        }
-        this.contentHovered = false;
-        if (!this.triggerHovered) {
-            this.hide();
-        }
-    }
-    /**
-     * Create the overlay that will contain the tooltip
-     */
-    createOverlay() {
-        // Determine the content and context based on useTextContent setting
-        const shouldUseTextContent = this.state.useTextContent();
-        let content = this.state.tooltip();
-        let context = this.state.context;
-        if (!content) {
-            if (!shouldUseTextContent) {
-                if (ngDevMode) {
-                    console.error('[ngpTooltipTrigger]: Tooltip must be a string, TemplateRef, or ComponentType. Alternatively, set useTextContent to true if none is provided.');
-                }
-                return;
-            }
-            const textContent = this.trigger.nativeElement.textContent?.trim() || '';
-            if (ngDevMode && !textContent) {
-                console.warn('[ngpTooltipTrigger]: useTextContent is enabled but trigger element has no text content');
-                return;
-            }
-            content = NgpTooltipTextContentComponent;
-            context = signal(textContent);
-        }
-        else if (isString(content)) {
-            context = signal(content);
-            content = NgpTooltipTextContentComponent;
-        }
-        // Create config for the overlay
-        const config = {
-            content,
-            triggerElement: this.trigger.nativeElement,
-            anchorElement: this.state.anchor(),
-            injector: this.injector,
-            context,
-            container: this.state.container(),
-            placement: this.state.placement,
-            offset: this.state.offset(),
-            flip: this.state.flip(),
-            shift: this.state.shift(),
-            showDelay: this.state.showDelay(),
-            hideDelay: this.state.hideDelay(),
-            closeOnEscape: true,
-            closeOnOutsideClick: true,
-            viewContainerRef: this.viewContainerRef,
-            trackPosition: this.state.trackPosition(),
-            position: this.state.position,
-            scrollBehaviour: this.state.scrollBehavior(),
-            overlayType: 'tooltip',
-            cooldown: this.state.cooldown(),
-        };
-        // Create the overlay instance
-        this.overlay.set(createOverlay(config));
+        return this.state.onTooltipHoverEnd();
     }
     /**
      * Set the tooltip id.
      */
     setTooltipId(id) {
-        this.tooltipId.set(id);
-    }
-    /**
-     * Register document-level pointer tracking while crossing trigger -> tooltip.
-     */
-    registerPointerMoveListener() {
-        if (this.removePointerMoveListener) {
-            return;
-        }
-        const cleanup = this.disposables.addEventListener(document, 'pointermove', ((event) => {
-            if (this.triggerHovered || this.contentHovered || !this.hoverBridgePolygon) {
-                this.clearHoverBridge();
-                return;
-            }
-            const inBridge = isPointInHoverBridgePolygon({ x: event.clientX, y: event.clientY }, this.hoverBridgePolygon);
-            if (!inBridge) {
-                this.clearHoverBridge();
-                this.hide();
-            }
-        }), true);
-        this.removePointerMoveListener = () => {
-            cleanup();
-            this.removePointerMoveListener = undefined;
-        };
-    }
-    /**
-     * Clear hover bridge state and global listeners.
-     */
-    clearHoverBridge() {
-        this.hoverBridgePolygon = null;
-        this.clearHoverBridgeTimeout?.();
-        this.clearHoverBridgeTimeout = undefined;
-        this.removePointerMoveListener?.();
-    }
-    /**
-     * Close if pointer leaves trigger and does not move into tooltip soon enough.
-     */
-    scheduleHoverBridgeCloseFallback() {
-        this.clearHoverBridgeTimeout?.();
-        this.clearHoverBridgeTimeout = this.disposables.setTimeout(() => {
-            this.clearHoverBridgeTimeout = undefined;
-            if (!this.triggerHovered && !this.contentHovered && this.hoverBridgePolygon) {
-                this.clearHoverBridge();
-                this.hide();
-            }
-        }, NgpTooltipTrigger.HOVER_BRIDGE_TIMEOUT_MS);
+        return this.state.setTooltipId(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpTooltipTrigger, isStandalone: true, selector: "[ngpTooltipTrigger]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "ngpTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpTooltipTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpTooltipTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpTooltipTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpTooltipTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpTooltipTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpTooltipTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "ngpTooltipTriggerShift", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpTooltipTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, showOnOverflow: { classPropertyName: "showOnOverflow", publicName: "ngpTooltipTriggerShowOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "ngpTooltipTriggerAnchor", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpTooltipTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, useTextContent: { classPropertyName: "useTextContent", publicName: "ngpTooltipTriggerUseTextContent", isSignal: true, isRequired: false, transformFunction: null }, trackPosition: { classPropertyName: "trackPosition", publicName: "ngpTooltipTriggerTrackPosition", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "ngpTooltipTriggerPosition", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpTooltipTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, cooldown: { classPropertyName: "cooldown", publicName: "ngpTooltipTriggerCooldown", isSignal: true, isRequired: false, transformFunction: null }, hoverableContent: { classPropertyName: "hoverableContent", publicName: "ngpTooltipTriggerHoverableContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "showFromInteraction()", "mouseleave": "hideFromInteraction($event)", "focus": "showFromInteraction()", "blur": "hideFromInteraction()" }, properties: { "attr.data-open": "open() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null", "attr.aria-describedby": "overlay()?.ariaDescribedBy()" } }, providers: [provideTooltipTriggerState({ inherit: false })], exportAs: ["ngpTooltipTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpTooltipTrigger, isStandalone: true, selector: "[ngpTooltipTrigger]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "ngpTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpTooltipTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpTooltipTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpTooltipTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpTooltipTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpTooltipTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpTooltipTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "ngpTooltipTriggerShift", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpTooltipTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, showOnOverflow: { classPropertyName: "showOnOverflow", publicName: "ngpTooltipTriggerShowOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "ngpTooltipTriggerAnchor", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpTooltipTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, useTextContent: { classPropertyName: "useTextContent", publicName: "ngpTooltipTriggerUseTextContent", isSignal: true, isRequired: false, transformFunction: null }, trackPosition: { classPropertyName: "trackPosition", publicName: "ngpTooltipTriggerTrackPosition", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "ngpTooltipTriggerPosition", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpTooltipTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, cooldown: { classPropertyName: "cooldown", publicName: "ngpTooltipTriggerCooldown", isSignal: true, isRequired: false, transformFunction: null }, hoverableContent: { classPropertyName: "hoverableContent", publicName: "ngpTooltipTriggerHoverableContent", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTooltipTriggerState({ inherit: false })], exportAs: ["ngpTooltipTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTooltipTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpTooltipTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTooltipTrigger]',
                     exportAs: 'ngpTooltipTrigger',
                     providers: [provideTooltipTriggerState({ inherit: false })],
-                    host: {
-                        '[attr.data-open]': 'open() ? "" : null',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
-                        '[attr.aria-describedby]': 'overlay()?.ariaDescribedBy()',
-                        '(mouseenter)': 'showFromInteraction()',
-                        '(mouseleave)': 'hideFromInteraction($event)',
-                        '(focus)': 'showFromInteraction()',
-                        '(blur)': 'hideFromInteraction()',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerOffset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerHideDelay", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerFlip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerShift", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerContainer", required: false }] }], showOnOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerShowOnOverflow", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerAnchor", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerContext", required: false }] }], useTextContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerUseTextContent", required: false }] }], trackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerTrackPosition", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerPosition", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerScrollBehavior", required: false }] }], cooldown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerCooldown", required: false }] }], hoverableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerHoverableContent", required: false }] }] } });
+        }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerOffset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerHideDelay", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerFlip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerShift", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerContainer", required: false }] }], showOnOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerShowOnOverflow", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerAnchor", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerContext", required: false }] }], useTextContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerUseTextContent", required: false }] }], trackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerTrackPosition", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerPosition", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerScrollBehavior", required: false }] }], cooldown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerCooldown", required: false }] }], hoverableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTooltipTriggerHoverableContent", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpTooltip, NgpTooltipArrow, NgpTooltipArrowStateToken, NgpTooltipTrigger, injectTooltipArrowState, injectTooltipTriggerState, ngpTooltipArrow, provideTooltipArrowState, provideTooltipConfig, provideTooltipTriggerState };
+export { NgpTooltip, NgpTooltipArrow, NgpTooltipArrowStateToken, NgpTooltipStateToken, NgpTooltipTextContentStateToken, NgpTooltipTrigger, NgpTooltipTriggerStateToken, injectTooltipArrowState, injectTooltipState, injectTooltipTextContentState, injectTooltipTriggerState, ngpTooltip, ngpTooltipArrow, ngpTooltipTextContent, ngpTooltipTrigger, provideTooltipArrowState, provideTooltipConfig, provideTooltipState, provideTooltipTextContentState, provideTooltipTriggerState };
 //# sourceMappingURL=ng-primitives-tooltip.mjs.map