npm - ng-hub-ui-utils - Versions diffs - 22.4.0 → 22.6.0 - Mend

ng-hub-ui-utils 22.4.0 → 22.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +22 -0
package/fesm2022/ng-hub-ui-utils.mjs +282 -71
package/fesm2022/ng-hub-ui-utils.mjs.map +1 -1
package/ng-hub-ui-utils-22.6.0.tgz +0 -0
package/package.json +1 -1
package/types/ng-hub-ui-utils.d.ts +185 -22
package/ng-hub-ui-utils-22.4.0.tgz +0 -0

package/README.md CHANGED Viewed

@@ -391,6 +391,28 @@ Available tokens: `--hub-tooltip-bg`, `--hub-tooltip-color`, `--hub-tooltip-opac
 `--hub-tooltip-font-size`, `--hub-tooltip-max-width`, `--hub-tooltip-zindex`,
 `--hub-tooltip-transition-duration`, `--hub-tooltip-shadow`, `--hub-tooltip-font-family`.
+#### Tooltip adapter for other libraries (`hubTooltipAdapter`)
+The same tooltip engine is exposed as a framework-agnostic adapter so sibling
+libraries can offer the hub-ui tooltip **without hard-depending on this package**.
+Wire it into their optional tooltip token — e.g. for badges or breadcrumbs:
+```ts
+import { hubTooltipAdapter } from 'ng-hub-ui-utils';
+import { provideHubBadgeTooltip } from 'ng-hub-ui-badges';
+import { provideHubBreadcrumbTooltip } from 'ng-hub-ui-breadcrumbs';
+providers: [
+  provideHubBadgeTooltip(hubTooltipAdapter),
+  provideHubBreadcrumbTooltip(hubTooltipAdapter)
+];
+```
+Also available: the imperative `HubTooltipController` (engine) and the
+`HubTooltipAdapter` / `HubTooltipHandle` / `HubTooltipOptions` types. See the
+ecosystem-wide [Synergies & agnosticism](../../README.md#synergies--agnosticism)
+section.
 ## 🚀 Installation
 ```bash

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, effect, InjectionToken, inject, makeEnvironmentProviders, ElementRef, TemplateRef, createComponent, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, NgZone, input, Renderer2, RendererStyleFlags2, HostListener, Directive } from '@angular/core';
+import { signal, computed, Injectable, effect, InjectionToken, inject, makeEnvironmentProviders, ElementRef, TemplateRef, createComponent, ApplicationRef, Pipe, ChangeDetectorRef, Injector, ViewContainerRef, NgZone, 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';
@@ -1803,73 +1803,118 @@ const TOOLTIP_THEME_VARS = [
     '--hub-tooltip-font-family'
 ];
 /**
- * Lightweight tooltip directive.
+ * Framework-agnostic tooltip engine.
  *
- * 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.
+ * 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
+ * (e.g. a badge overflow tooltip) that want the exact same visual contract
+ * without re-implementing the DOM logic.
  *
- * Styles ship in `styles/tooltip.scss` (mirroring `styles/overlay.scss`). Import
- * it once in your app: `@use 'ng-hub-ui-utils/styles/tooltip';`.
+ * Styles ship in `styles/tooltip.scss`. Import 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 */ []));
+class HubTooltipController {
+    host;
     tooltipEl = null;
     hideTimeout = null;
-    host = inject(ElementRef);
-    renderer = inject(Renderer2);
-    document = inject(DOCUMENT);
-    ngOnDestroy() {
-        this.destroyTooltip();
+    text = '';
+    placement = 'top';
+    delay = 150;
+    offset = 8;
+    doc;
+    view;
+    onShow = () => this.show();
+    onHide = () => this.hide();
+    /**
+     * @param host    Element the tooltip is anchored to and whose pointer/focus
+     *                events trigger the tooltip.
+     * @param options Initial placement, delay and offset.
+     */
+    constructor(host, options) {
+        this.host = host;
+        this.doc = host.ownerDocument;
+        this.view = this.doc.defaultView;
+        this.setOptions(options);
+        this.host.addEventListener('mouseenter', this.onShow);
+        this.host.addEventListener('focus', this.onShow);
+        this.host.addEventListener('mouseleave', this.onHide);
+        this.host.addEventListener('blur', this.onHide);
+        this.host.addEventListener('click', this.onHide);
+    }
+    /**
+     * Updates the tooltip label. An empty value disables the tooltip and hides any
+     * currently visible instance.
+     * @param text New tooltip content.
+     */
+    setText(text) {
+        this.text = text ?? '';
+        if (!this.text) {
+            this.hide();
+            return;
+        }
+        if (this.tooltipEl) {
+            this.tooltipEl.textContent = this.text;
+            this.position();
+        }
     }
-    onShow() {
-        this.show();
+    /**
+     * Updates placement/delay/offset. Only provided keys are overwritten.
+     * @param options Partial tooltip options.
+     */
+    setOptions(options) {
+        if (!options) {
+            return;
+        }
+        if (options.placement) {
+            this.placement = options.placement;
+        }
+        if (options.delay != null) {
+            this.delay = options.delay;
+        }
+        if (options.offset != null) {
+            this.offset = options.offset;
+        }
     }
-    onHide() {
-        this.hide();
+    /** Detaches listeners and removes any live tooltip element. */
+    destroy() {
+        this.host.removeEventListener('mouseenter', this.onShow);
+        this.host.removeEventListener('focus', this.onShow);
+        this.host.removeEventListener('mouseleave', this.onHide);
+        this.host.removeEventListener('blur', this.onHide);
+        this.host.removeEventListener('click', this.onHide);
+        this.removeElement();
     }
     /** Creates, positions and reveals the tooltip element. */
     show() {
-        if (this.tooltipEl || !this.tooltipTitle()) {
+        if (this.tooltipEl || !this.text) {
             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`);
+        const el = this.doc.createElement('span');
+        el.textContent = this.text;
+        el.classList.add('hub-tooltip', `hub-tooltip--${this.placement}`);
+        el.style.transitionDuration = `${this.delay}ms`;
         this.forwardThemeVars(el);
-        this.renderer.appendChild(this.document.body, el);
+        this.doc.body.appendChild(el);
         this.tooltipEl = el;
         this.position();
-        this.renderer.addClass(el, 'hub-tooltip--show');
+        el.classList.add('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.tooltipEl.classList.remove('hub-tooltip--show');
         this.clearHideTimeout();
-        this.hideTimeout = setTimeout(() => this.destroyTooltip(), this.delay());
+        this.hideTimeout = setTimeout(() => this.removeElement(), this.delay);
     }
     /** Removes the tooltip element immediately. */
-    destroyTooltip() {
+    removeElement() {
         this.clearHideTimeout();
         if (this.tooltipEl) {
-            this.renderer.removeChild(this.document.body, this.tooltipEl);
+            this.tooltipEl.remove();
             this.tooltipEl = null;
         }
     }
@@ -1878,15 +1923,14 @@ class TooltipDirective {
      * the body-portaled tooltip, so scoped theming applies despite the portal.
      */
     forwardThemeVars(el) {
-        const view = this.document.defaultView;
-        if (!view) {
+        if (!this.view) {
             return;
         }
-        const hostStyles = view.getComputedStyle(this.host.nativeElement);
+        const hostStyles = this.view.getComputedStyle(this.host);
         for (const name of TOOLTIP_THEME_VARS) {
             const value = hostStyles.getPropertyValue(name).trim();
             if (value) {
-                this.renderer.setStyle(el, name, value, RendererStyleFlags2.DashCase);
+                el.style.setProperty(name, value);
             }
         }
     }
@@ -1896,19 +1940,19 @@ class TooltipDirective {
             this.hideTimeout = null;
         }
     }
-    /** Positions the tooltip around the host according to `placement`. */
+    /** Positions the tooltip around the host according to the current placement. */
     position() {
         if (!this.tooltipEl) {
             return;
         }
-        const hostRect = this.host.nativeElement.getBoundingClientRect();
+        const hostRect = this.host.getBoundingClientRect();
         const tipRect = this.tooltipEl.getBoundingClientRect();
-        const scrollY = this.document.defaultView?.scrollY ?? 0;
-        const scrollX = this.document.defaultView?.scrollX ?? 0;
-        const offset = this.offset();
+        const scrollY = this.view?.scrollY ?? 0;
+        const scrollX = this.view?.scrollX ?? 0;
+        const offset = this.offset;
         let top = 0;
         let left = 0;
-        switch (this.placement()) {
+        switch (this.placement) {
             case 'bottom':
                 top = hostRect.bottom + offset;
                 left = hostRect.left + (hostRect.width - tipRect.width) / 2;
@@ -1927,33 +1971,200 @@ class TooltipDirective {
                 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`);
+        this.tooltipEl.style.top = `${top + scrollY}px`;
+        this.tooltipEl.style.left = `${left + scrollX}px`;
+    }
+}
+/**
+ * Ready-made {@link HubTooltipAdapter} backed by {@link HubTooltipController}.
+ *
+ * Wire it into any ng-hub-ui primitive that exposes an optional tooltip token,
+ * e.g. `provideHubBadgeTooltip(hubTooltipAdapter)`.
+ */
+const hubTooltipAdapter = {
+    attach(host, text, options) {
+        const controller = new HubTooltipController(host, options);
+        controller.setText(text);
+        return {
+            update: (next) => controller.setText(next),
+            destroy: () => controller.destroy()
+        };
+    }
+};
+/**
+ * Injection token resolving the tooltip adapter used by `[hubOverflowTooltip]`
+ * (and any other utils consumer that wants a swappable tooltip).
+ *
+ * It defaults — via a root factory — to the built-in {@link hubTooltipAdapter},
+ * so the hub-ui tooltip works out of the box with no wiring. Override it with
+ * {@link provideHubTooltip} to plug in **any** tooltip implementation (a custom
+ * one, a Material tooltip wrapper, etc.) app-wide or per subtree, keeping the
+ * tooltip **agnostic** even for libraries that already depend on utils.
+ */
+const HUB_TOOLTIP_ADAPTER = new InjectionToken('HUB_TOOLTIP_ADAPTER', {
+    providedIn: 'root',
+    factory: () => hubTooltipAdapter
+});
+/**
+ * Overrides the tooltip adapter used by `[hubOverflowTooltip]` (and other
+ * token-driven tooltip consumers), so the hub-ui tooltip can be swapped for any
+ * implementation without touching the components that show it.
+ *
+ * ```ts
+ * // app.config.ts — use a custom tooltip everywhere instead of the built-in one.
+ * providers: [provideHubTooltip(myTooltipAdapter)];
+ * ```
+ *
+ * Omit it and the built-in `hubTooltipAdapter` is used by default.
+ *
+ * @param adapter Tooltip adapter implementation.
+ * @returns Environment providers to add to the application config (or a route).
+ */
+function provideHubTooltip(adapter) {
+    return makeEnvironmentProviders([
+        {
+            provide: HUB_TOOLTIP_ADAPTER,
+            useValue: adapter
+        }
+    ]);
+}
+/**
+ * Lightweight 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.
+ *
+ * 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.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 });
+    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 } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tooltip]'
                 }]
-        }], 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']
-            }] } });
+        }], 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 }] }] } });
+/**
+ * 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
+ * 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
+ * changes).
+ *
+ * The tooltip implementation is **agnostic**: it resolves through the injectable
+ * {@link HUB_TOOLTIP_ADAPTER} token, which defaults to the built-in hub-ui
+ * tooltip. Swap it app-wide (or per subtree) with `provideHubTooltip(...)`.
+ *
+ * Requires the tooltip styles once in your app:
+ * `@use 'ng-hub-ui-utils/styles/tooltip';`.
+ *
+ * @example
+ * ```html
+ * <span class="label" [hubOverflowTooltip]="item.label">{{ item.label }}</span>
+ * ```
+ */
+class HubOverflowTooltipDirective {
+    /** Tooltip text; shown only while the host overflows. */
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'hubOverflowTooltip' });
+    /** Placement of the tooltip relative to the host. */
+    placement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    adapter = inject(HUB_TOOLTIP_ADAPTER);
+    handle = null;
+    resizeObserver = null;
+    mutationObserver = null;
+    overflowing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []));
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.init());
+        effect(() => {
+            if (!this.ready() || !this.handle) {
+                return;
+            }
+            this.handle.update(this.overflowing() ? this.text() : '');
+        });
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        this.handle?.destroy();
+        this.handle = null;
+    }
+    /** 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.
+        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);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.measure(el));
+            this.mutationObserver.observe(el, { childList: true, characterData: true, subtree: true });
+        }
+        this.ready.set(true);
+    }
+    /** Updates the truncation state from the host's layout. */
+    measure(el) {
+        this.overflowing.set(el.scrollWidth > el.clientWidth + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubOverflowTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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 }] }] } });
 /*
  * Public API Surface of utils
@@ -1963,5 +2174,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_TRANSLATION_CONFIG, HubDragDropService, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TooltipDirective, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, clamp, closest, computeTargetIndex, containsNode, copyArrayItem, createNativeDragImage, createPointerDragSession, debouncedSignal, equals, generateUniqueId, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, interpolateString, isDefined, isInteger, isNumber, isObject, isPromise, isString, mergeDeep, moveItemInArray, padNumber, provideHubTranslation, reflow, regExpEscape, removeAccents, resolveDropPosition, runInZone, toAbsoluteIndex, toInteger, toString, transferArrayItem };
+export { ContentRef, FOCUSABLE_ELEMENTS_SELECTOR, GetPipe, HUB_TOOLTIP_ADAPTER, HUB_TRANSLATION_CONFIG, HubDragDropService, HubOverflowTooltipDirective, HubTooltipController, HubTranslationService, IsObjectPipe, IsObservablePipe, IsStringPipe, OverlayPosition, OverlayRef, OverlayService, PopupService, ScrollBar, TooltipDirective, TranslatePipe, UcfirstPipe, UnwrapAsyncPipe, clamp, closest, computeTargetIndex, containsNode, copyArrayItem, createNativeDragImage, createPointerDragSession, debouncedSignal, equals, generateUniqueId, getActiveElement, getFocusableBoundaryElements, getValue, getValueInRange, hubCompleteTransition, hubFocusTrap, hubRunTransition, hubTooltipAdapter, interpolateString, isDefined, isInteger, isNumber, isObject, isPromise, isString, mergeDeep, moveItemInArray, padNumber, provideHubTooltip, provideHubTranslation, reflow, regExpEscape, removeAccents, resolveDropPosition, runInZone, toAbsoluteIndex, toInteger, toString, transferArrayItem };
 //# sourceMappingURL=ng-hub-ui-utils.mjs.map