ng-hub-ui-utils 22.19.0 → 22.20.0

package/README.md

@@ -385,7 +385,8 @@ export class ExampleComponent {}
 > ```
 
 Inputs: `hubTooltip` (text), `hubTooltipPlacement` (`top` | `bottom` | `left` | `right`,
-default `top`), `hubTooltipDelay` (fade ms, default `150`), `hubTooltipOffset` (px, default `8`).
+default `top`), `hubTooltipDelay` (fade ms, default `150`), `hubTooltipShowDelay` (ms a hover has to last before
+the tooltip opens, default `0`; keyboard focus always opens it at once), `hubTooltipOffset` (px, default `8`).
 
 **The placement is a preference, not an instruction (since 22.16.0).** A tooltip that would open
 off the edge of the window opens on the opposite side instead, at all four edges, and one centred
@@ -816,7 +817,7 @@ library, because their selectors and data models differ.
 
 ### Directives
 
-- `HubTooltipDirective` (`[hubTooltip]`) - Tooltip on hover/focus, flipped away from the window edges. Inputs: `hubTooltip`, `hubTooltipPlacement`, `hubTooltipDelay`, `hubTooltipOffset`
+- `HubTooltipDirective` (`[hubTooltip]`) - Tooltip on hover/focus, flipped away from the window edges. Inputs: `hubTooltip`, `hubTooltipPlacement`, `hubTooltipDelay`, `hubTooltipShowDelay`, `hubTooltipOffset`
 - `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`
 

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

@@ -4068,11 +4068,13 @@ let nextTooltipId = 0;
 class HubTooltipController {
     host;
     tooltipEl = null;
+    showTimeout = null;
     hideTimeout = null;
     leaveTimeout = null;
     text = '';
     placement = 'top';
     delay = 150;
+    showDelay = 0;
     offset = 8;
     /**
      * Side the bubble is actually on, which is the requested placement until the window says
@@ -4085,6 +4087,7 @@ class HubTooltipController {
     /** Id of this controller's bubble, minted once so the host can be described by it. */
     tooltipId = `hub-tooltip-${++nextTooltipId}`;
     onShow = () => this.show();
+    onPointerEnter = () => this.scheduleShow();
     onHide = () => this.hide();
     onPointerLeave = () => this.scheduleHide();
     onTooltipEnter = () => this.retain();
@@ -4115,7 +4118,7 @@ class HubTooltipController {
         this.doc = host.ownerDocument;
         this.view = this.doc.defaultView;
         this.setOptions(options);
-        this.host.addEventListener('mouseenter', this.onShow);
+        this.host.addEventListener('mouseenter', this.onPointerEnter);
         this.host.addEventListener('focus', this.onShow);
         this.host.addEventListener('mouseleave', this.onPointerLeave);
         this.host.addEventListener('blur', this.onHide);
@@ -4151,21 +4154,34 @@ class HubTooltipController {
         if (options.delay != null) {
             this.delay = options.delay;
         }
+        if (options.showDelay != null) {
+            this.showDelay = Math.max(0, options.showDelay);
+        }
         if (options.offset != null) {
             this.offset = options.offset;
         }
     }
     /** Detaches listeners and removes any live tooltip element. */
     destroy() {
-        this.host.removeEventListener('mouseenter', this.onShow);
+        this.host.removeEventListener('mouseenter', this.onPointerEnter);
         this.host.removeEventListener('focus', this.onShow);
         this.host.removeEventListener('mouseleave', this.onPointerLeave);
         this.host.removeEventListener('blur', this.onHide);
         this.host.removeEventListener('click', this.onHide);
         this.removeElement();
     }
+    /** Waits for a sustained hover before opening, while retaining an already visible bubble. */
+    scheduleShow() {
+        this.clearShowTimeout();
+        if (this.tooltipEl || this.showDelay === 0) {
+            this.show();
+            return;
+        }
+        this.showTimeout = setTimeout(() => this.show(), this.showDelay);
+    }
     /** Creates, positions and reveals the tooltip element. */
     show() {
+        this.clearShowTimeout();
         if (!this.text) {
             return;
         }
@@ -4218,6 +4234,7 @@ class HubTooltipController {
      * offset opens between host and bubble without the label vanishing on the way.
      */
     scheduleHide() {
+        this.clearShowTimeout();
         if (!this.tooltipEl) {
             return;
         }
@@ -4235,6 +4252,7 @@ class HubTooltipController {
     }
     /** Fades the tooltip out and removes it after the fade completes. */
     hide() {
+        this.clearShowTimeout();
         this.clearLeaveTimeout();
         if (!this.tooltipEl) {
             return;
@@ -4248,6 +4266,7 @@ class HubTooltipController {
     }
     /** Removes the tooltip element immediately. */
     removeElement() {
+        this.clearShowTimeout();
         this.clearHideTimeout();
         this.clearLeaveTimeout();
         if (this.tooltipEl) {
@@ -4304,6 +4323,13 @@ class HubTooltipController {
             }
         }
     }
+    /** Cancels hover work when the pointer leaves or the host is destroyed. */
+    clearShowTimeout() {
+        if (this.showTimeout !== null) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
     clearHideTimeout() {
         if (this.hideTimeout !== null) {
             clearTimeout(this.hideTimeout);
@@ -4471,6 +4497,8 @@ class HubTooltipDirective {
     placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'hubTooltipPlacement' });
     /** Fade duration in milliseconds, also used as the removal delay on hide. */
     delay = input(150, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), alias: 'hubTooltipDelay' });
+    /** Pointer hover wait in milliseconds; keyboard focus remains immediate. */
+    showDelay = input(0, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), alias: 'hubTooltipShowDelay' });
     /** Gap in pixels between the host and the tooltip. */
     offset = input(8, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'hubTooltipOffset' });
     host = inject(ElementRef);
@@ -4480,6 +4508,7 @@ class HubTooltipDirective {
             this.controller.setOptions({
                 placement: this.placement(),
                 delay: this.delay(),
+                showDelay: this.showDelay(),
                 offset: this.offset()
             });
             this.controller.setText(this.text());
@@ -4490,14 +4519,14 @@ class HubTooltipDirective {
         this.controller.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubTooltipDirective, isStandalone: true, selector: "[hubTooltip]", inputs: { text: { classPropertyName: "text", publicName: "hubTooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "hubTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "hubTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "hubTooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubTooltipDirective, isStandalone: true, selector: "[hubTooltip]", inputs: { text: { classPropertyName: "text", publicName: "hubTooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "hubTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "hubTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "hubTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "hubTooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hubTooltip]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltip", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipPlacement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipDelay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipOffset", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltip", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipPlacement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipDelay", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipShowDelay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubTooltipOffset", required: false }] }] } });
 
 /**
  * Shows a tooltip with the given text **only while the host element is truncated**