@fluid-topics/ft-tooltip 1.3.31 → 1.3.32

package/build/ft-tooltip.d.ts

@@ -9,6 +9,7 @@ export declare class FtTooltip extends FtLitElement implements FtTooltipProperti
     inline: boolean;
     delay: number;
     position: Position;
+    ignoreMatchingElements: string[];
     private slotNodes?;
     private container?;
     private tooltip?;
@@ -17,20 +18,28 @@ export declare class FtTooltip extends FtLitElement implements FtTooltipProperti
     private readonly validPositions;
     private get validPosition();
     protected render(): import("lit-html").TemplateResult<1>;
+    private eventsTarget?;
+    setupFor(eventsTarget: HTMLElement): void;
+    removeHandlers(): void;
+    defaultSetup(): void;
     protected updated(props: PropertyValues): void;
     protected contentAvailableCallback(props: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private hideDebounce;
     show(duration?: number): Promise<void>;
     showTemporaryText(text: string, duration: number): Promise<void>;
     hide(): void;
     toggle(): void;
+    isVisible(): boolean;
     private get slottedElement();
     private resetTooltipContent;
     private revealDebouncer;
     private positionTooltip;
     private onTouch;
     private onHover;
+    private onFocusIn;
     private onOut;
     private onClick;
-    private correctOutOfWindowPixels;
+    protected isIgnored(e: Event): boolean;
 }

package/build/ft-tooltip.js

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from "lit";
-import { eventOptions, property, query, queryAssignedNodes, state } from "lit/decorators.js";
-import { Debouncer, designSystemVariables, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, query, queryAssignedNodes, state } from "lit/decorators.js";
+import { Debouncer, designSystemVariables, eventPathContainsMatchingElement, FtLitElement, jsonProperty, numberProperty } from "@fluid-topics/ft-wc-utils";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { styles } from "./ft-tooltip.styles";
 import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
@@ -18,10 +18,43 @@ class FtTooltip extends FtLitElement {
         this.inline = false;
         this.delay = 500;
         this.position = "bottom";
+        this.ignoreMatchingElements = [];
         this.visible = false;
         this.validPositions = new Set(["top", "bottom", "left", "right"]);
         this.hideDebounce = new Debouncer();
         this.revealDebouncer = new Debouncer();
+        this.onTouch = (e) => {
+            if (!this.isIgnored(e)) {
+                this.show();
+                setTimeout(() => window.addEventListener("touchstart", (e) => {
+                    if (!e.composedPath().includes(this.container)) {
+                        this.onOut(e);
+                    }
+                }, { once: true }), 100);
+            }
+        };
+        this.onHover = (e) => {
+            if (!this.isIgnored(e)) {
+                this.show();
+            }
+        };
+        this.onFocusIn = (e) => {
+            if (!this.isIgnored(e) && window.FluidTopicsA11yHints.isKeyboardNavigation && window.FluidTopicsA11yHints.lastPressedKey === "Tab") {
+                this.show();
+            }
+        };
+        this.onOut = (e) => {
+            if (!this.isIgnored(e)) {
+                this.revealDebouncer.cancel();
+                this.hide();
+            }
+        };
+        this.onClick = (e) => {
+            if (!this.isIgnored(e)) {
+                this.revealDebouncer.cancel();
+                this.hide();
+            }
+        };
     }
     get validPosition() {
         return this.validPositions.has(this.position) ? this.position : "bottom";
@@ -29,13 +62,8 @@ class FtTooltip extends FtLitElement {
     render() {
         return html `
             <div part="container"
-                 class="ft-tooltip--container ${this.inline ? "ft-tooltip--inline" : ""}"
-                 @mouseenter=${this.onHover}
-                 @mouseleave=${this.onOut}
-                 @focusin=${this.onHover}
-                 @focusout=${this.onOut}
-                 @touchstart=${this.onTouch}>
-                <slot part="slot" @click=${this.onClick}></slot>
+                 class="ft-tooltip--container ${this.inline ? "ft-tooltip--inline" : ""}">
+                <slot part="slot"></slot>
                 <div part="tooltip" role="tooltip" inert
                      class="ft-tooltip ft-tooltip--${this.validPosition}"
                      ?hidden=${!this.visible}>
@@ -47,6 +75,34 @@ class FtTooltip extends FtLitElement {
             </div>
         `;
     }
+    setupFor(eventsTarget) {
+        if (this.eventsTarget !== eventsTarget) {
+            this.removeHandlers();
+            this.eventsTarget = eventsTarget;
+            this.eventsTarget.addEventListener("mouseenter", this.onHover, { passive: true });
+            this.eventsTarget.addEventListener("mouseleave", this.onOut, { passive: true });
+            this.eventsTarget.addEventListener("focusin", this.onFocusIn, { passive: true });
+            this.eventsTarget.addEventListener("focusout", this.onOut, { passive: true });
+            this.eventsTarget.addEventListener("touchstart", this.onTouch, { passive: true });
+            this.eventsTarget.addEventListener("click", this.onClick, { passive: true });
+        }
+    }
+    removeHandlers() {
+        if (this.eventsTarget) {
+            this.eventsTarget.removeEventListener("mouseenter", this.onHover);
+            this.eventsTarget.removeEventListener("mouseleave", this.onOut);
+            this.eventsTarget.removeEventListener("focusin", this.onFocusIn);
+            this.eventsTarget.removeEventListener("focusout", this.onOut);
+            this.eventsTarget.removeEventListener("touchstart", this.onTouch);
+            this.eventsTarget.removeEventListener("click", this.onClick);
+            this.eventsTarget = undefined;
+        }
+    }
+    defaultSetup() {
+        if (this.container) {
+            this.setupFor(this.container);
+        }
+    }
     updated(props) {
         if (props.has("visible") && this.visible) {
             this.resetTooltipContent();
@@ -59,6 +115,18 @@ class FtTooltip extends FtLitElement {
             this.positionTooltip();
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            if (this.eventsTarget == undefined) {
+                this.defaultSetup();
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeHandlers();
+    }
     async show(duration) {
         this.visible = true;
         if (duration != null) {
@@ -82,6 +150,9 @@ class FtTooltip extends FtLitElement {
     toggle() {
         this.visible = !this.visible;
     }
+    isVisible() {
+        return this.visible;
+    }
     get slottedElement() {
         var _a;
         return ((_a = this.slotNodes) !== null && _a !== void 0 ? _a : []).filter((node) => node.nodeType == Node.ELEMENT_NODE)[0];
@@ -131,35 +202,8 @@ class FtTooltip extends FtLitElement {
             }
         }, this.manual ? 0 : this.delay);
     }
-    onTouch() {
-        if (!this.manual) {
-            this.show();
-            setTimeout(() => window.addEventListener("touchstart", (e) => {
-                if (!e.composedPath().includes(this.container)) {
-                    this.onOut();
-                }
-            }, { once: true }), 100);
-        }
-    }
-    onHover() {
-        if (!this.manual) {
-            this.show();
-        }
-    }
-    onOut() {
-        if (!this.manual) {
-            this.revealDebouncer.cancel();
-            this.hide();
-        }
-    }
-    onClick() {
-        if (!this.manual) {
-            this.revealDebouncer.cancel();
-            this.hide();
-        }
-    }
-    correctOutOfWindowPixels(leftOrTopOutOfWindowPixels, rightOrBottomOutOfWindowPixels) {
-        return Math.max(leftOrTopOutOfWindowPixels, Math.min(0, -rightOrBottomOutOfWindowPixels));
+    isIgnored(e) {
+        return this.manual || eventPathContainsMatchingElement(e, this.ignoreMatchingElements, this.eventsTarget);
     }
 }
 FtTooltip.elementDefinitions = {
@@ -176,11 +220,14 @@ __decorate([
     property({ type: Boolean })
 ], FtTooltip.prototype, "inline", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtTooltip.prototype, "delay", void 0);
 __decorate([
     property()
 ], FtTooltip.prototype, "position", void 0);
+__decorate([
+    jsonProperty([])
+], FtTooltip.prototype, "ignoreMatchingElements", void 0);
 __decorate([
     queryAssignedNodes()
 ], FtTooltip.prototype, "slotNodes", void 0);
@@ -196,16 +243,4 @@ __decorate([
 __decorate([
     state()
 ], FtTooltip.prototype, "visible", void 0);
-__decorate([
-    eventOptions({ passive: true })
-], FtTooltip.prototype, "onTouch", null);
-__decorate([
-    eventOptions({ passive: true })
-], FtTooltip.prototype, "onHover", null);
-__decorate([
-    eventOptions({ passive: true })
-], FtTooltip.prototype, "onOut", null);
-__decorate([
-    eventOptions({ passive: true })
-], FtTooltip.prototype, "onClick", null);
 export { FtTooltip };