ng-hub-ui-utils 22.12.1 → 22.14.0

package/README.md

@@ -384,13 +384,14 @@ export class ExampleComponent {}
 Inputs: `hubTooltip` (text), `hubTooltipPlacement` (`top` | `bottom` | `left` | `right`,
 default `top`), `hubTooltipDelay` (fade ms, default `150`), `hubTooltipOffset` (px, default `8`).
 
-> **`TooltipDirective` (`[tooltip]`) is deprecated since 22.9.0.** It still works,
-> unchanged — both directives are thin shells over the same `HubTooltipController` — but its
-> bare input names (`tooltip`, `placement`, `delay`, `offset`) belong to every directive on
-> the element that declares them, which is how it collided with `[hubDropdown]`'s own
-> `placement` and with the `tooltip` input of `<hub-badge>`. Migration is attribute for
+> **`TooltipDirective` (`[tooltip]`) was removed in 22.14.0**, having been deprecated since
+> 22.9.0. Its bare input names (`tooltip`, `placement`, `delay`, `offset`) belonged to every
+> directive on the element that declared them, which is how it collided with `[hubDropdown]`'s
+> own `placement` and with the `tooltip` input of `<hub-badge>`. Migration is attribute for
 > attribute: `tooltip` → `hubTooltip`, `placement` → `hubTooltipPlacement`,
-> `delay` → `hubTooltipDelay`, `offset` → `hubTooltipOffset`.
+> `delay` → `hubTooltipDelay`, `offset` → `hubTooltipOffset`. A template left writing
+> `tooltip="…"` still compiles and shows nothing at all, so check the markup as well as the
+> imports.
 
 Show the label **only while the host is truncated** with `HubOverflowTooltipDirective`
 (`[hubOverflowTooltip]`), which tracks truncation live with a `ResizeObserver` and a
@@ -400,6 +401,22 @@ Show the label **only while the host is truncated** with `HubOverflowTooltipDire
 <span class="label" [hubOverflowTooltip]="item.label">{{ item.label }}</span>
 ```
 
+The element that is **hovered** and the element that is **measured** need not be the same.
+By default they are, but a control whose text is clipped by a box inside it wants them apart:
+the hover area is the whole control, while the only box that can report truncation is the
+inner one — a child that clips its own text never lets the overflow reach its parent, so
+measuring the parent reports none and the tooltip goes quiet. Point
+`hubOverflowTooltipMeasure` at the inner box with a CSS selector, resolved inside the host:
+
+```html
+<div class="chip" [hubOverflowTooltip]="item.label" hubOverflowTooltipMeasure=".chip__title">
+	<span class="chip__icon"></span>
+	<span class="chip__title">{{ item.label }}</span>
+</div>
+```
+
+Unset — or pointing at nothing — the host measures itself, exactly as before.
+
 Theme it from any scope with `--hub-tooltip-*` variables:
 
 ```css
@@ -710,8 +727,7 @@ library, because their selectors and data models differ.
 ### Directives
 
 -   `HubTooltipDirective` (`[hubTooltip]`) - Tooltip on hover/focus. Inputs: `hubTooltip`, `hubTooltipPlacement`, `hubTooltipDelay`, `hubTooltipOffset`
--   `HubOverflowTooltipDirective` (`[hubOverflowTooltip]`) - Tooltip shown only while the host label is truncated. Inputs: `hubOverflowTooltip`, `placement`
--   `TooltipDirective` (`[tooltip]`) - **Deprecated since 22.9.0**, kept working. Inputs: `tooltip`, `placement`, `delay`, `offset`
+-   `HubOverflowTooltipDirective` (`[hubOverflowTooltip]`) - Tooltip shown only while the label is truncated. Inputs: `hubOverflowTooltip`, `placement`, `hubOverflowTooltipMeasure` (CSS selector, resolved inside the host, naming the box whose truncation decides it; defaults to the host)
 -   `provideHubTooltip(adapter: HubTooltipAdapter)` and `HUB_TOOLTIP_ADAPTER` - Swap the implementation behind `[hubOverflowTooltip]`, app-wide or per subtree; defaults to `hubTooltipAdapter`
 
 ### Pipes
@@ -788,6 +804,8 @@ class OverlayRef {
 }
 
 class OverlayPosition {
+  // The element the panel is anchored to. The overlay watches it and follows it when it moves.
+  readonly origin: HTMLElement | null;
   flexibleConnectedTo(origin: ElementRef | HTMLElement): this;
   withPositions(positions: ConnectionPosition[]): this;
   // `start` / `end` are logical and read from the origin element; this overrides that.

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, effect, InjectionToken, inject, makeEnvironmentProviders, provideAppInitializer, DestroyRef, ElementRef, TemplateRef, createComponent, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, NgZone, input, Directive, afterNextRender } from '@angular/core';
+import { signal, computed, Injectable, effect, InjectionToken, inject, makeEnvironmentProviders, provideAppInitializer, DestroyRef, ElementRef, TemplateRef, createComponent, NgZone, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, input, Directive, afterNextRender } from '@angular/core';
 import { fromEvent, Observable, Subject, isObservable, EMPTY, of, timer, race } from 'rxjs';
 import { takeUntil, map, filter, withLatestFrom, endWith, take, mergeMap, tap } from 'rxjs/operators';
 import { DOCUMENT } from '@angular/common';
@@ -1729,6 +1729,20 @@ class OverlayPosition {
         this._origin = origin;
         return this;
     }
+    /**
+     * The element this overlay is anchored to, resolved to a plain node.
+     *
+     * Exposed because the strategy is the only place that knows what the panel is connected to,
+     * and the overlay has to watch that element to keep up with it when it moves.
+     *
+     * @returns The origin element, or `null` while none has been set.
+     */
+    get origin() {
+        if (!this._origin) {
+            return null;
+        }
+        return this._origin instanceof ElementRef ? this._origin.nativeElement : this._origin;
+    }
     /**
      * Sets the preferred positions for the overlay.
      * The order of the array determines the fallback priority.
@@ -1914,6 +1928,8 @@ class OverlayRef {
     _isAttached = false;
     _repositionHandler;
     _repositionFrame = 0;
+    _originFrame = 0;
+    _originBox = null;
     _keydownCallback;
     _unregisterKeydown;
     _backdropClickCallback;
@@ -2042,8 +2058,79 @@ class OverlayRef {
         };
         window.addEventListener('scroll', this._repositionHandler, { capture: true, passive: true });
         window.addEventListener('resize', this._repositionHandler, { passive: true });
+        this._followOrigin();
+    }
+    /**
+     * Follows the origin while it moves for a reason no event announces.
+     *
+     * Scroll and resize both describe the page moving under an origin that stays put. Neither says
+     * anything about the origin itself moving inside a page nobody scrolled — a sibling collapsing
+     * above it, an image landing, an accordion animating shut — and the panel is then left hanging
+     * where its trigger used to be. Since that collapse is animated, one re-measure when it starts
+     * would only move the panel to a place the trigger is still on its way out of: the trigger has
+     * to be followed for as long as it slides.
+     *
+     * The origin's box is read every frame, but the position is re-applied only when it actually
+     * changed, so an overlay whose trigger sits still never touches the DOM. Scheduled outside
+     * Angular's zone, or a zone-based application would run change detection on every frame an
+     * overlay is open.
+     */
+    _followOrigin() {
+        if (!this._config.positionStrategy || typeof requestAnimationFrame !== 'function') {
+            return;
+        }
+        this._originBox = this._measureOrigin();
+        const track = () => {
+            if (!this._isAttached) {
+                this._originFrame = 0;
+                return;
+            }
+            this._originFrame = requestAnimationFrame(track);
+            // Read again rather than captured once: a consumer is free to re-anchor a live overlay,
+            // and the panel has to end up following whatever it is connected to now.
+            const box = this._measureOrigin();
+            const previous = this._originBox;
+            if (!box) {
+                return;
+            }
+            if (previous &&
+                previous.top === box.top &&
+                previous.left === box.left &&
+                previous.width === box.width &&
+                previous.height === box.height) {
+                return;
+            }
+            this._originBox = box;
+            this.updatePosition();
+        };
+        const start = () => {
+            this._originFrame = requestAnimationFrame(track);
+        };
+        // Resolved through the injector rather than taken in the constructor, so the shape of a
+        // class consumers can instantiate does not change for a private scheduling detail.
+        const zone = this._appRef.injector.get(NgZone, null);
+        if (zone) {
+            zone.runOutsideAngular(start);
+            return;
+        }
+        start();
+    }
+    /**
+     * Reads the origin's box, reduced to the four numbers a move can change.
+     *
+     * @returns The box, or `null` when there is no origin or it has left the document — an element
+     * out of the document reports zeros for everything, and following that would fling the panel
+     * into the corner rather than leave it where it was.
+     */
+    _measureOrigin() {
+        const origin = this._config.positionStrategy?.origin;
+        if (!origin || !origin.isConnected) {
+            return null;
+        }
+        const rect = origin.getBoundingClientRect();
+        return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
     }
-    /** Removes the listeners registered by {@link _listenForReposition}. */
+    /** Releases everything {@link _listenForReposition} started, the origin follow included. */
     _stopListeningForReposition() {
         if (!this._repositionHandler || typeof window === 'undefined') {
             return;
@@ -2055,6 +2142,11 @@ class OverlayRef {
             cancelAnimationFrame(this._repositionFrame);
             this._repositionFrame = 0;
         }
+        if (this._originFrame) {
+            cancelAnimationFrame(this._originFrame);
+            this._originFrame = 0;
+        }
+        this._originBox = null;
     }
     /**
      * Disposes the overlay and cleans up all allocated resources.
@@ -2700,7 +2792,7 @@ let nextTooltipId = 0;
  *
  * Binds hover/focus listeners to a host element and renders a body-portaled,
  * `--hub-tooltip-*`-themeable label on demand. It owns no Angular dependency, so
- * it can be reused both by the `[tooltip]` directive and by other primitives
+ * it can be reused both by the `[hubTooltip]` directive and by other primitives
  * (e.g. a badge overflow tooltip) that want the exact same visual contract
  * without re-implementing the DOM logic.
  *
@@ -3033,65 +3125,6 @@ function provideHubTooltip(adapter) {
     ]);
 }
 
-/**
- * Lightweight tooltip directive.
- *
- * @deprecated Use {@link HubTooltipDirective} (`[hubTooltip]`) instead. The bare
- * attribute and the bare input names `placement`, `delay` and `offset` are not this
- * directive's to hold: Angular feeds one attribute to every directive on the element
- * that declares an input of that name, so `[hubDropdown] placement` fails to compile
- * beside a tooltip, and `[tooltip]` on a `<hub-badge>` — which owns an input of that
- * name — renders two. Kept working, unchanged, until the next major.
- *
- * 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.
- *
- * All DOM work is delegated to {@link HubTooltipController}, so the directive and
- * any imperative consumer (e.g. a badge overflow tooltip) share the exact same
- * behaviour and styling.
- *
- * Styles ship in `styles/tooltip.scss` (mirroring `styles/overlay.scss`). Import
- * it once in your app: `@use 'ng-hub-ui-utils/styles/tooltip';`.
- */
-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 */ []));
-    host = inject(ElementRef);
-    controller = new HubTooltipController(this.host.nativeElement);
-    constructor() {
-        effect(() => {
-            this.controller.setOptions({
-                placement: this.placement(),
-                delay: this.delay(),
-                offset: this.offset()
-            });
-            this.controller.setText(this.tooltipTitle());
-        });
-    }
-    ngOnDestroy() {
-        this.controller.destroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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 } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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 }] }] } });
-
 /**
  * Tooltip directive, named the way the rest of the family names itself.
  *
@@ -3100,12 +3133,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * container, and every visual aspect is themeable through `--hub-tooltip-*` CSS
  * variables.
  *
- * ## Why this exists beside {@link TooltipDirective}
+ * ## Why every attribute here carries the prefix
  *
- * The older directive claims the bare attribute `[tooltip]` and the bare input names
- * `placement`, `delay` and `offset`. Angular feeds one attribute to **every** directive
- * on the element that declares an input of that name, so those bare names are not this
- * directive's to hold:
+ * This replaced an earlier directive that claimed the bare attribute `[tooltip]` and the
+ * bare input names `placement`, `delay` and `offset`. Angular feeds one attribute to
+ * **every** directive on the element that declares an input of that name, so those bare
+ * names were never a library's to hold:
  *
  * - `[hubDropdown]` declares its own `placement`, typed over eight values where a
  *   tooltip understands four. A menu trigger that also wanted a tooltip did not merely
@@ -3165,7 +3198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Shows a tooltip with the given text **only while the host element is truncated**
  * (its content is wider than its box).
  *
- * Unlike `[tooltip]`, which always shows on hover, this directive is meant for
+ * Unlike `[hubTooltip]`, which always shows on hover, this directive is meant for
  * ellipsised labels: the tooltip appears solely when the text doesn't fit, so it
  * never duplicates already-visible content. Truncation is tracked live with a
  * `ResizeObserver` (host/container resizes) and a `MutationObserver` (text
@@ -3175,13 +3208,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * {@link HUB_TOOLTIP_ADAPTER} token, which defaults to the built-in hub-ui
  * tooltip. Swap it app-wide (or per subtree) with `provideHubTooltip(...)`.
  *
+ * The element that is MEASURED and the element that is HOVERED need not be the same. By
+ * default they are — the host does both — but a control whose text is clipped by a box
+ * inside it wants them apart: the hover area is the whole control, while the only box that
+ * can report truncation is the inner one. Point `hubOverflowTooltipMeasure` at that box and
+ * the tooltip covers the control while answering to the text.
+ *
  * Requires the tooltip styles once in your app:
  * `@use 'ng-hub-ui-utils/styles/tooltip';`.
  *
- * @example
+ * @example Host measures itself
  * ```html
  * <span class="label" [hubOverflowTooltip]="item.label">{{ item.label }}</span>
  * ```
+ *
+ * @example Hover the whole chip, measure the title inside it
+ * ```html
+ * <div class="chip" [hubOverflowTooltip]="item.label" hubOverflowTooltipMeasure=".chip__title">
+ *   <span class="chip__icon"></span>
+ *   <span class="chip__title">{{ item.label }}</span>
+ * </div>
+ * ```
  */
 class HubOverflowTooltipDirective {
     /** Tooltip text; shown only while the host overflows. */
@@ -3189,6 +3236,15 @@ class HubOverflowTooltipDirective {
     /** Placement of the tooltip relative to the host. */
     placement = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS selector, resolved inside the host, naming the element whose truncation decides
+     * whether the tooltip speaks. The tooltip still belongs to the host, so the hover area is
+     * unchanged; only the measurement moves.
+     *
+     * Left unset — or pointing at nothing — the host measures itself, which is what this
+     * directive has always done.
+     */
+    measureTarget = input(undefined, { ...(ngDevMode ? { debugName: "measureTarget" } : /* istanbul ignore next */ {}), alias: 'hubOverflowTooltipMeasure' });
     host = inject(ElementRef);
     adapter = inject(HUB_TOOLTIP_ADAPTER);
     handle = null;
@@ -3200,6 +3256,14 @@ class HubOverflowTooltipDirective {
     ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => this.init());
+        // A selector changed after the fact points at a different box, so the observers and
+        // the truncation state both have to be taken again.
+        effect(() => {
+            this.measureTarget();
+            if (this.ready()) {
+                this.observe();
+            }
+        });
         effect(() => {
             if (!this.ready() || !this.handle) {
                 return;
@@ -3216,32 +3280,63 @@ class HubOverflowTooltipDirective {
     /** Wires the tooltip handle and the browser-only truncation observers. */
     init() {
         const el = this.host.nativeElement;
-        // Attach with no text; the effect feeds the label only while truncated.
+        // The tooltip belongs to the HOST whatever is measured: it is the control the pointer
+        // is over, and the box that reports truncation may be a fraction of it.
         this.handle = this.adapter.attach(el, '', { placement: this.placement() });
-        this.measure(el);
         if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => this.measure(el));
-            this.resizeObserver.observe(el);
+            // Re-resolving on every callback rather than closing over the element: content
+            // rendered after this point can bring the measured box with it.
+            this.resizeObserver = new ResizeObserver(() => this.measure());
         }
         if (typeof MutationObserver !== 'undefined') {
-            this.mutationObserver = new MutationObserver(() => this.measure(el));
+            // A mutation can replace the measured box, so the observers are re-pointed rather
+            // than merely re-read.
+            this.mutationObserver = new MutationObserver(() => this.observe());
             this.mutationObserver.observe(el, { childList: true, characterData: true, subtree: true });
         }
+        this.observe();
         this.ready.set(true);
     }
-    /** Updates the truncation state from the host's layout. */
-    measure(el) {
+    /**
+     * Points the resize observer at the boxes that can change the answer — the host, whose
+     * width bounds everything, and the measured box when it is a different element — and
+     * takes the measurement again.
+     */
+    observe() {
+        const host = this.host.nativeElement;
+        const target = this.resolveTarget();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver.observe(host);
+            if (target !== host) {
+                this.resizeObserver.observe(target);
+            }
+        }
+        this.measure();
+    }
+    /**
+     * The element whose overflow is the question. Falls back to the host, so a selector that
+     * matches nothing behaves exactly as no selector at all rather than silently going quiet.
+     */
+    resolveTarget() {
+        const host = this.host.nativeElement;
+        const selector = this.measureTarget();
+        return (selector ? host.querySelector(selector) : null) ?? host;
+    }
+    /** Updates the truncation state from the measured box's layout. */
+    measure() {
+        const el = this.resolveTarget();
         this.overflowing.set(el.scrollWidth > el.clientWidth + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubOverflowTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubOverflowTooltipDirective, isStandalone: true, selector: "[hubOverflowTooltip]", inputs: { text: { classPropertyName: "text", publicName: "hubOverflowTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubOverflowTooltipDirective, isStandalone: true, selector: "[hubOverflowTooltip]", inputs: { text: { classPropertyName: "text", publicName: "hubOverflowTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, measureTarget: { classPropertyName: "measureTarget", publicName: "hubOverflowTooltipMeasure", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubOverflowTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hubOverflowTooltip]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubOverflowTooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubOverflowTooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], measureTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubOverflowTooltipMeasure", required: false }] }] } });
 
 /*
  * Public API Surface of utils
@@ -3251,5 +3346,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_DROPDOWN_POSITIONS, HUB_INK_LIGHTNESS_THRESHOLD, HUB_NAMED_COLORS, HUB_TOOLTIP_ADAPTER, HUB_TRANSLATION_CONFIG, HUB_TRANSLATION_PREFIX, HUB_TRANSLATION_SOURCE, HubDragDropService, HubOverflowTooltipDirective, HubTooltipController, HubTooltipDirective, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TooltipDirective, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, clamp, clampToSrgbGamut, closest, compositeOver, computeTargetIndex, containsNode, contrastAPCA, contrastRatio, copyArrayItem, createNativeDragImage, createPointerDragSession, debouncedSignal, equals, generateUniqueId, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, hubTooltipAdapter, interpolateString, isDefined, isInSrgbGamut, isInteger, isNumber, isObject, isPromise, isString, isValidColor, maxSrgbChroma, mergeDeep, moveItemInArray, oklchToRgb, padNumber, parseColor, provideHubTooltip, provideHubTranslation, provideHubTranslationAdapter, readableOn, reflow, regExpEscape, registerOverlayKeydown, relativeLuminance, removeAccents, resolveDropPosition, resolveHubAccent, rgbToOklch, runInZone, toAbsoluteIndex, toHex, toInteger, toRgb, toString, transferArrayItem };
+export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_DROPDOWN_POSITIONS, HUB_INK_LIGHTNESS_THRESHOLD, HUB_NAMED_COLORS, HUB_TOOLTIP_ADAPTER, HUB_TRANSLATION_CONFIG, HUB_TRANSLATION_PREFIX, HUB_TRANSLATION_SOURCE, HubDragDropService, HubOverflowTooltipDirective, HubTooltipController, HubTooltipDirective, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, clamp, clampToSrgbGamut, closest, compositeOver, computeTargetIndex, containsNode, contrastAPCA, contrastRatio, copyArrayItem, createNativeDragImage, createPointerDragSession, debouncedSignal, equals, generateUniqueId, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, hubTooltipAdapter, interpolateString, isDefined, isInSrgbGamut, isInteger, isNumber, isObject, isPromise, isString, isValidColor, maxSrgbChroma, mergeDeep, moveItemInArray, oklchToRgb, padNumber, parseColor, provideHubTooltip, provideHubTranslation, provideHubTranslationAdapter, readableOn, reflow, regExpEscape, registerOverlayKeydown, relativeLuminance, removeAccents, resolveDropPosition, resolveHubAccent, rgbToOklch, runInZone, toAbsoluteIndex, toHex, toInteger, toRgb, toString, transferArrayItem };
 //# sourceMappingURL=ng-hub-ui-utils.mjs.map