ng-hub-ui-utils 1.2.0 → 22.2.0

package/fesm2022/ng-hub-ui-utils.mjs

@@ -1,7 +1,7 @@
 import { fromEvent, Observable, Subject, isObservable, EMPTY, of, timer, race } from 'rxjs';
 import { takeUntil, map, filter, withLatestFrom, endWith, take, mergeMap, tap } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, ElementRef, TemplateRef, createComponent, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, NgZone } from '@angular/core';
+import { signal, effect, InjectionToken, inject, Injectable, makeEnvironmentProviders, ElementRef, TemplateRef, createComponent, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, NgZone, input, Renderer2, RendererStyleFlags2, HostListener, Directive } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 const FOCUSABLE_ELEMENTS_SELECTOR = [
@@ -272,6 +272,80 @@ function getValue(target, key) {
     } while (keys.length);
     return target;
 }
+/**
+ * Checks if the given item is a plain object (not an array, null, or primitive).
+ *
+ * @param item Value to test.
+ * @returns true when item is a non-null, non-array object.
+ */
+function isObject(item) {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+}
+/**
+ * Recursively deep-merges source into target, producing a new object.
+ * Arrays are replaced, not merged. Primitives from source win.
+ *
+ * @param target Base object.
+ * @param source Overrides to apply on top of target.
+ * @returns New merged object.
+ */
+function mergeDeep(target, source) {
+    const output = Object.assign({}, target);
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach((key) => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    Object.assign(output, { [key]: source[key] });
+                }
+                else {
+                    output[key] = mergeDeep(target[key], source[key]);
+                }
+            }
+            else {
+                Object.assign(output, { [key]: source[key] });
+            }
+        });
+    }
+    return output;
+}
+/**
+ * Generates a random alphanumeric string of the requested length.
+ * Not cryptographically secure — intended for transient DOM ids and keys.
+ *
+ * @param length Desired character count.
+ * @returns Random alphanumeric string.
+ */
+function generateUniqueId(length) {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+/**
+ * Creates a read-only signal that mirrors sourceSignal but only updates
+ * after debounceDelay ms have elapsed since the last emission.
+ * Cleans up the pending timer via the Angular effect cleanup mechanism.
+ *
+ * @template T Type of the signal value.
+ * @param sourceSignal Signal to debounce.
+ * @param debounceDelay Milliseconds to wait, or a signal that provides the delay.
+ * @returns Debounced read-only signal.
+ */
+function debouncedSignal(sourceSignal, debounceDelay = 0) {
+    const debounced = signal(sourceSignal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "debounced" }] : /* istanbul ignore next */ []));
+    effect((onCleanup) => {
+        const delay = typeof debounceDelay === 'number' ? debounceDelay : debounceDelay();
+        const value = sourceSignal();
+        const timeout = setTimeout(() => {
+            debounced.set(value);
+        }, delay);
+        onCleanup(() => clearTimeout(timeout));
+    });
+    return debounced;
+}
 /**
  * Returns the active element in the given root.
  *
@@ -321,13 +395,28 @@ class HubTranslationService {
         this.translations = { ...fallbackTranslations, ...nextTranslations };
         this.translationSource.next(this.translations);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubTranslationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubTranslationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubTranslationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubTranslationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Helper function to provide HubTranslationService and its configuration.
+ * @param config Optional configuration for translations.
+ * @returns EnvironmentProviders
+ */
+function provideHubTranslation(config = {}) {
+    return makeEnvironmentProviders([
+        HubTranslationService,
+        {
+            provide: HUB_TRANSLATION_CONFIG,
+            useValue: config
+        }
+    ]);
+}
+
 /**
  * Positions an overlay container relative to an origin element.
  * The first configured position that fits within the viewport is applied.
@@ -704,10 +793,10 @@ class OverlayService {
     position() {
         return new OverlayPosition();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -730,10 +819,10 @@ class GetPipe {
             ? a[c]
             : defaultValue || null, value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: GetPipe, isStandalone: true, name: "get" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GetPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: GetPipe, isStandalone: true, name: "get" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GetPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GetPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'get',
@@ -745,10 +834,10 @@ class IsObjectPipe {
     transform(value) {
         return typeof value === 'object';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObjectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsObjectPipe, isStandalone: true, name: "isObject" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IsObjectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: IsObjectPipe, isStandalone: true, name: "isObject" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObjectPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IsObjectPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isObject'
@@ -759,10 +848,10 @@ class IsObservablePipe {
     transform(value) {
         return isObservable(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsObservablePipe, isStandalone: true, name: "isObservable" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IsObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: IsObservablePipe, isStandalone: true, name: "isObservable" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsObservablePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IsObservablePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isObservable',
@@ -774,10 +863,10 @@ class IsStringPipe {
     transform(value) {
         return typeof value === 'string';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: IsStringPipe, isStandalone: true, name: "isString" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IsStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: IsStringPipe, isStandalone: true, name: "isString" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IsStringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IsStringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isString'
@@ -839,13 +928,12 @@ class TranslatePipe {
         // Clean any existing subscription.
         this._dispose();
         if (!this.translationSubscription) {
-            this.translationSubscription =
-                this._translationSvc.translationObserver.subscribe(() => {
-                    if (this.lastKey) {
-                        this.lastKey = null;
-                        this.updateValue(query, interpolateParams);
-                    }
-                });
+            this.translationSubscription = this._translationSvc.translationObserver.subscribe(() => {
+                if (this.lastKey) {
+                    this.lastKey = null;
+                    this.updateValue(query, interpolateParams);
+                }
+            });
         }
         return this.value;
     }
@@ -861,10 +949,10 @@ class TranslatePipe {
     ngOnDestroy() {
         this._dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'translate',
@@ -877,10 +965,10 @@ class UcfirstPipe {
     transform(value = '') {
         return value.charAt(0).toUpperCase() + value.slice(1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UcfirstPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: UcfirstPipe, isStandalone: true, name: "ucfirst" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UcfirstPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: UcfirstPipe, isStandalone: true, name: "ucfirst" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UcfirstPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UcfirstPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ucfirst',
@@ -948,10 +1036,10 @@ class UnwrapAsyncPipe {
             this.subscription = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UnwrapAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: UnwrapAsyncPipe, isStandalone: true, name: "unwrapAsync", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UnwrapAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: UnwrapAsyncPipe, isStandalone: true, name: "unwrapAsync", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UnwrapAsyncPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UnwrapAsyncPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'unwrapAsync',
@@ -1138,14 +1226,235 @@ class ScrollBar {
             bodyStyle.overflow = overflow;
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ScrollBar, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ScrollBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ScrollBar, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ScrollBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ScrollBar, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Id of the singleton stylesheet injected into the document head. */
+const TOOLTIP_STYLE_ID = 'hub-tooltip-styles';
+/**
+ * Themeable custom properties forwarded from the host to the tooltip element.
+ *
+ * The tooltip is appended to `<body>`, so it cannot inherit scoped variables set
+ * on an ancestor of the host. We resolve them on the host (which *does* inherit
+ * from its scope) and copy any defined value onto the tooltip inline style, so
+ * both `:root`-level and scoped theming work.
+ */
+const TOOLTIP_THEME_VARS = [
+    '--hub-tooltip-bg',
+    '--hub-tooltip-color',
+    '--hub-tooltip-opacity',
+    '--hub-tooltip-padding-x',
+    '--hub-tooltip-padding-y',
+    '--hub-tooltip-border-radius',
+    '--hub-tooltip-font-size',
+    '--hub-tooltip-font-weight',
+    '--hub-tooltip-line-height',
+    '--hub-tooltip-max-width',
+    '--hub-tooltip-z-index',
+    '--hub-tooltip-transition-duration',
+    '--hub-tooltip-shadow',
+    '--hub-tooltip-font-family'
+];
+/**
+ * Base tooltip styles, injected once per document.
+ *
+ * Every visual property is driven by a `--hub-tooltip-*` custom property with a
+ * sensible fallback, so consuming apps can theme tooltips from any scope without
+ * touching this directive.
+ */
+const TOOLTIP_STYLES = `
+.hub-tooltip {
+  position: absolute;
+  z-index: var(--hub-tooltip-z-index, 1070);
+  display: block;
+  margin: 0;
+  max-width: var(--hub-tooltip-max-width, 200px);
+  padding: var(--hub-tooltip-padding-y, 0.25rem) var(--hub-tooltip-padding-x, 0.5rem);
+  font-family: var(--hub-tooltip-font-family, var(--hub-ref-font-family, inherit));
+  font-size: var(--hub-tooltip-font-size, 0.875rem);
+  font-weight: var(--hub-tooltip-font-weight, 400);
+  line-height: var(--hub-tooltip-line-height, 1.5);
+  text-align: center;
+  word-wrap: break-word;
+  white-space: normal;
+  color: var(--hub-tooltip-color, #fff);
+  background-color: var(--hub-tooltip-bg, #000);
+  border-radius: var(--hub-tooltip-border-radius, 0.375rem);
+  box-shadow: var(--hub-tooltip-shadow, none);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--hub-tooltip-transition-duration, 0.15s) ease-in-out;
+}
+.hub-tooltip--show { opacity: var(--hub-tooltip-opacity, 0.9); }
+`;
+/**
+ * Lightweight, dependency-free tooltip directive.
+ *
+ * Apply `[tooltip]` to any element to show a positioned label on hover/focus.
+ * The tooltip element is appended to `<body>` so it is never clipped by an
+ * overflow container, and every visual aspect is themeable through
+ * `--hub-tooltip-*` CSS variables.
+ */
+class TooltipDirective {
+    /** Tooltip text content. */
+    tooltipTitle = input.required({ ...(ngDevMode ? { debugName: "tooltipTitle" } : /* istanbul ignore next */ {}), alias: 'tooltip' });
+    /** Placement of the tooltip relative to the host. */
+    placement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Fade duration in milliseconds, also used as the removal delay on hide. */
+    delay = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+    /** Gap in pixels between the host and the tooltip. */
+    offset = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    tooltipEl = null;
+    hideTimeout = null;
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    document = inject(DOCUMENT);
+    constructor() {
+        this.ensureStyles();
+    }
+    ngOnDestroy() {
+        this.destroyTooltip();
+    }
+    onShow() {
+        this.show();
+    }
+    onHide() {
+        this.hide();
+    }
+    /** Injects the shared stylesheet into `<head>` once per document. */
+    ensureStyles() {
+        if (this.document.getElementById(TOOLTIP_STYLE_ID)) {
+            return;
+        }
+        const style = this.renderer.createElement('style');
+        style.id = TOOLTIP_STYLE_ID;
+        style.textContent = TOOLTIP_STYLES;
+        this.renderer.appendChild(this.document.head, style);
+    }
+    /** Creates, positions and reveals the tooltip element. */
+    show() {
+        if (this.tooltipEl || !this.tooltipTitle()) {
+            return;
+        }
+        this.clearHideTimeout();
+        const el = this.renderer.createElement('span');
+        this.renderer.appendChild(el, this.renderer.createText(this.tooltipTitle()));
+        this.renderer.addClass(el, 'hub-tooltip');
+        this.renderer.addClass(el, `hub-tooltip--${this.placement()}`);
+        this.renderer.setStyle(el, 'transition-duration', `${this.delay()}ms`);
+        this.forwardThemeVars(el);
+        this.renderer.appendChild(this.document.body, el);
+        this.tooltipEl = el;
+        this.position();
+        this.renderer.addClass(el, 'hub-tooltip--show');
+    }
+    /** Fades the tooltip out and removes it after the fade completes. */
+    hide() {
+        if (!this.tooltipEl) {
+            return;
+        }
+        this.renderer.removeClass(this.tooltipEl, 'hub-tooltip--show');
+        this.clearHideTimeout();
+        this.hideTimeout = setTimeout(() => this.destroyTooltip(), this.delay());
+    }
+    /** Removes the tooltip element immediately. */
+    destroyTooltip() {
+        this.clearHideTimeout();
+        if (this.tooltipEl) {
+            this.renderer.removeChild(this.document.body, this.tooltipEl);
+            this.tooltipEl = null;
+        }
+    }
+    /**
+     * Copies any `--hub-tooltip-*` value defined on the host (or its scope) onto
+     * the body-portaled tooltip, so scoped theming applies despite the portal.
+     */
+    forwardThemeVars(el) {
+        const view = this.document.defaultView;
+        if (!view) {
+            return;
+        }
+        const hostStyles = view.getComputedStyle(this.host.nativeElement);
+        for (const name of TOOLTIP_THEME_VARS) {
+            const value = hostStyles.getPropertyValue(name).trim();
+            if (value) {
+                this.renderer.setStyle(el, name, value, RendererStyleFlags2.DashCase);
+            }
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout !== null) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    /** Positions the tooltip around the host according to `placement`. */
+    position() {
+        if (!this.tooltipEl) {
+            return;
+        }
+        const hostRect = this.host.nativeElement.getBoundingClientRect();
+        const tipRect = this.tooltipEl.getBoundingClientRect();
+        const scrollY = this.document.defaultView?.scrollY ?? 0;
+        const scrollX = this.document.defaultView?.scrollX ?? 0;
+        const offset = this.offset();
+        let top = 0;
+        let left = 0;
+        switch (this.placement()) {
+            case 'bottom':
+                top = hostRect.bottom + offset;
+                left = hostRect.left + (hostRect.width - tipRect.width) / 2;
+                break;
+            case 'left':
+                top = hostRect.top + (hostRect.height - tipRect.height) / 2;
+                left = hostRect.left - tipRect.width - offset;
+                break;
+            case 'right':
+                top = hostRect.top + (hostRect.height - tipRect.height) / 2;
+                left = hostRect.right + offset;
+                break;
+            case 'top':
+            default:
+                top = hostRect.top - tipRect.height - offset;
+                left = hostRect.left + (hostRect.width - tipRect.width) / 2;
+                break;
+        }
+        this.renderer.setStyle(this.tooltipEl, 'top', `${top + scrollY}px`);
+        this.renderer.setStyle(this.tooltipEl, 'left', `${left + scrollX}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: TooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltipTitle: { classPropertyName: "tooltipTitle", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onShow()", "focus": "onShow()", "mouseleave": "onHide()", "blur": "onHide()", "click": "onHide()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { tooltipTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onShow: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focus']
+            }], onHide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }, {
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 /*
  * Public API Surface of utils
  */
@@ -1154,5 +1463,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_TRANSLATION_CONFIG, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, closest, equals, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, interpolateString, isDefined, isInteger, isNumber, isPromise, isString, padNumber, reflow, regExpEscape, removeAccents, runInZone, toInteger, toString };
+export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_TRANSLATION_CONFIG, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TooltipDirective, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, closest, debouncedSignal, equals, generateUniqueId, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, interpolateString, isDefined, isInteger, isNumber, isObject, isPromise, isString, mergeDeep, padNumber, provideHubTranslation, reflow, regExpEscape, removeAccents, runInZone, toInteger, toString };
 //# sourceMappingURL=ng-hub-ui-utils.mjs.map