@tylertech/forge 3.0.0-next.15 → 3.0.0-next.16

package/esm/tooltip/tooltip-foundation.js

@@ -3,252 +3,325 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { throttle, Platform, isDefined } from '@tylertech/forge-core';
 import { TOOLTIP_CONSTANTS } from './tooltip-constants';
-/**
- * The foundation class behind the tooltip component.
- */
-export class TooltipFoundation {
+import { WithLongpressListener } from '../core/mixins/interactions/longpress/with-longpress-listener';
+import { canUserHoverElements } from '../constants';
+const BaseClass = WithLongpressListener();
+export class TooltipFoundation extends BaseClass {
     constructor(_adapter) {
+        super();
         this._adapter = _adapter;
-        this._delay = TOOLTIP_CONSTANTS.numbers.DEFAULT_DELAY;
-        this._position = TOOLTIP_CONSTANTS.strings.DEFAULT_POSITION;
-        this._isOpen = false;
-        this._mouseOverListener = evt => this._onMouseOver(evt);
-        this._mouseOutListener = evt => this._onMouseOut(evt);
-        this._touchStartListener = evt => this._onTouchStart(evt);
-        this._touchEndListener = evt => this._onTouchEnd(evt);
-        this._scrollListener = throttle((evt) => this._onScroll(evt), 100);
-        this._clickListener = () => this._targetInteracted();
-        this._mouseDownListener = () => this._targetInteracted();
-        this._dragListener = () => this._targetInteracted();
+        this._open = false;
+        this._type = TOOLTIP_CONSTANTS.defaults.TYPE;
+        this._delay = TOOLTIP_CONSTANTS.defaults.DELAY;
+        this._placement = TOOLTIP_CONSTANTS.defaults.PLACEMENT;
+        this._offset = TOOLTIP_CONSTANTS.defaults.OFFSET;
+        this._flip = TOOLTIP_CONSTANTS.defaults.FLIP;
+        this._boundary = null;
+        this._boundaryElement = null;
+        this._fallbackPlacements = null;
+        this._triggerTypes = TOOLTIP_CONSTANTS.defaults.TRIGGER_TYPES;
+        // Hover trigger type
+        this._hoverStartListener = this._onHoverStart.bind(this);
+        this._hoverEndListener = this._onHoverEnd.bind(this);
+        // Focus trigger type
+        this._focusListener = this._onFocus.bind(this);
+        this._blurListener = this._onBlur.bind(this);
+        // Dismiss/hide triggers
+        this._scrollListener = this._onTryHide.bind(this);
+        this._mouseDownListener = this._onTryHide.bind(this);
+        this._dragListener = this._onTryHide.bind(this);
+        this._lightDismissListener = this._onTryHide.bind(this);
     }
     initialize() {
-        this._adapter.initializeTargetElement(this._target);
-        if (!this._adapter.hasTargetElement()) {
-            throw new Error('Unable to locate target element.');
+        if (!this._adapter.anchorElement) {
+            this._adapter.tryLocateAnchorElement(this._anchor);
         }
-        // Set a unique id for this tooltip (unless it already has one)
-        this._identifier = this._adapter.getHostAttribute('id');
-        if (!this._identifier) {
-            this._identifier = this._getNextIdentifier();
-            this._adapter.setHostAttribute('id', this._identifier);
+        this._adapter.syncAria();
+        this._attachAnchorListeners();
+        if (this._open) {
+            this._show();
         }
-        this._addTargetListeners();
-        this._adapter.initializeAccessibility(this._identifier);
     }
-    disconnect() {
-        if (this._mouseOverTimeout) {
-            window.clearTimeout(this._mouseOverTimeout);
-            this._mouseOverTimeout = undefined;
-        }
-        if (this._touchTimeout) {
-            window.clearTimeout(this._touchTimeout);
-            this._touchTimeout = undefined;
+    destroy() {
+        if (this._open) {
+            this._hide();
         }
-        this._adapter.destroy(this._identifier);
-        if (this._isOpen) {
-            this.hide();
+        this._adapter.detachAria();
+        this._detachAnchorListeners();
+    }
+    syncTooltipAria() {
+        this._adapter.syncAria();
+    }
+    _attachAnchorListeners() {
+        if (!this._adapter.anchorElement) {
+            return;
         }
-        if (this._adapter.hasTargetElement()) {
-            this._removeTargetListeners();
+        const triggerTypes = [...this._triggerTypes];
+        // If the users input mechanism doesn't support hover, then we need to force longpress as their alternative
+        /* c8 ignore next 4 */
+        if (!canUserHoverElements) {
+            triggerTypes.splice(triggerTypes.indexOf('hover'), 1);
+            triggerTypes.push('longpress');
         }
+        const triggerInitializers = {
+            'hover': () => this._adapter.addAnchorListener('mouseenter', this._hoverStartListener),
+            'longpress': () => this._startLongpressListener(this._adapter.anchorElement),
+            'focus': () => this._adapter.addAnchorListener('focusin', this._focusListener)
+        };
+        triggerTypes.forEach(triggerType => triggerInitializers[triggerType]());
     }
-    /**
-     * Generates the next available tooltip identifier.
-     */
-    _getNextIdentifier() {
-        return `forge-tooltip-${TooltipFoundation._tooltipIdentifier++}`;
-    }
-    /** Adds event listeners to the target element. */
-    _addTargetListeners() {
-        if (Platform.isMobile) {
-            this._adapter.addTargetEventListener('touchstart', this._touchStartListener);
-            this._adapter.addTargetEventListener('touchend', this._touchEndListener);
+    _detachAnchorListeners() {
+        if (!this._adapter.anchorElement) {
+            return;
         }
-        else {
-            this._adapter.addTargetEventListener('mouseover', this._mouseOverListener);
-            this._adapter.addTargetEventListener('mouseout', this._mouseOutListener);
-        }
-        this._adapter.addTargetEventListener('click', this._clickListener);
-        this._adapter.addTargetEventListener('mousedown', this._mouseDownListener);
-        this._adapter.addTargetEventListener('dragstart', this._dragListener);
-    }
-    /**
-     * Removes the event listeners from the target element.
-     * @param targetElement The target element instance.
-     */
-    _removeTargetListeners() {
-        if (Platform.isMobile) {
-            this._adapter.removeTargetEventListener('touchstart', this._touchStartListener);
-            this._adapter.removeTargetEventListener('touchend', this._touchEndListener);
+        const triggerTypes = [...this._triggerTypes];
+        /* c8 ignore next 3 */
+        if (!canUserHoverElements) {
+            triggerTypes.push('longpress');
         }
-        else {
-            this._adapter.removeTargetEventListener('mouseover', this._mouseOverListener);
-            this._adapter.removeTargetEventListener('mouseout', this._mouseOutListener);
-        }
-        this._adapter.removeTargetEventListener('click', this._clickListener);
-        this._adapter.removeTargetEventListener('mousedown', this._mouseDownListener);
-        this._adapter.removeTargetEventListener('dragstart', this._dragListener);
-    }
-    /**
-     * Handles the touchstart event on the target element to detect long press.
-     */
-    _onTouchStart(evt) {
-        this._touchTimeout = window.setTimeout(() => {
-            this._show();
-            window.setTimeout(() => this.hide(), TOOLTIP_CONSTANTS.numbers.LONGPRESS_VISIBILITY_DURATION);
-            this._touchTimeout = undefined;
-        }, TOOLTIP_CONSTANTS.numbers.LONGPRESS_THRESHOLD);
-    }
-    /**
-     * Handles the touchend event on the target element to cancel a long press action.
-     */
-    _onTouchEnd(evt) {
-        if (this._touchTimeout) {
-            this._clearTouchTimer();
-        }
-    }
-    _clearTouchTimer() {
-        window.clearTimeout(this._touchTimeout);
-        this._touchTimeout = undefined;
-    }
-    /**
-     * Handles the mouseover event on the target element.
-     */
-    _onMouseOver(evt) {
-        if (this._isOpen || !this._adapter.hasTargetElement() || !this._adapter.isTargetElementConnected()) {
+        const triggerRemovers = {
+            'hover': () => {
+                this._adapter.removeAnchorListener('mouseenter', this._hoverStartListener);
+                this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
+                this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
+            },
+            'longpress': () => this._stopLongpressListener(this._adapter.anchorElement),
+            'focus': () => {
+                this._adapter.removeAnchorListener('focusin', this._focusListener);
+                this._adapter.removeAnchorListener('focusout', this._blurListener);
+            }
+        };
+        triggerTypes.forEach(triggerType => triggerRemovers[triggerType]());
+    }
+    _show() {
+        this._open = true;
+        this._adapter.show();
+        this._attachDismissListeners();
+        this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
+    }
+    _hide() {
+        window.clearTimeout(this._hoverTimeout);
+        window.clearTimeout(this._longpressVisibilityTimeout);
+        this._open = false;
+        this._adapter.hide();
+        this._detachDismissListeners();
+        this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
+    }
+    _attachDismissListeners() {
+        this._adapter.addAnchorListener('mousedown', this._mouseDownListener);
+        this._adapter.addAnchorListener('dragstart', this._dragListener);
+        this._adapter.addDocumentListener('scroll', this._scrollListener);
+        this._adapter.addDocumentListener('wheel', this._scrollListener);
+        this._adapter.addLightDismissListener(this._lightDismissListener);
+    }
+    _detachDismissListeners() {
+        this._adapter.removeAnchorListener('mousedown', this._mouseDownListener);
+        this._adapter.removeAnchorListener('dragstart', this._dragListener);
+        this._adapter.removeDocumentListener('scroll', this._scrollListener);
+        this._adapter.removeDocumentListener('wheel', this._scrollListener);
+        this._adapter.removeLightDismissListener(this._lightDismissListener);
+    }
+    _onHoverStart(_evt) {
+        /* c8 ignore next 3 */
+        if (this._open) {
             return;
         }
+        this._adapter.addAnchorListener('mousedown', this._hoverEndListener);
+        this._adapter.addAnchorListener('mouseleave', this._hoverEndListener);
         if (this._delay) {
-            this._mouseOverTimeout = window.setTimeout(() => {
-                this._show();
-                this._mouseOverTimeout = undefined;
+            this._hoverTimeout = window.setTimeout(() => {
+                this._onTryShow();
             }, this._delay);
         }
         else {
-            this._show();
+            this._onTryShow();
         }
     }
-    /**
-     * Handles the mouseout event on the target element.
-     */
-    _onMouseOut(evt) {
-        if (this._mouseOverTimeout) {
-            window.clearTimeout(this._mouseOverTimeout);
-            this._mouseOverTimeout = undefined;
+    _onHoverEnd(_evt) {
+        this._adapter.removeAnchorListener('mousedown', this._hoverEndListener);
+        this._adapter.removeAnchorListener('mouseleave', this._hoverEndListener);
+        window.clearTimeout(this._hoverTimeout);
+        this._onTryHide();
+    }
+    _onFocus(_evt) {
+        /* c8 ignore next 3 */
+        if (this._open) {
             return;
         }
-        this.hide();
+        this._adapter.addAnchorListener('focusout', this._blurListener);
+        this._onTryShow();
     }
-    /**
-     * Displays the tooltip.
-     */
-    _show() {
-        let content;
-        if (this._builder && typeof this._builder === 'function') {
-            content = this._builder();
-        }
-        this._adapter.showTooltip(this._position, content);
-        if (this._adapter.hasTooltipElement()) {
-            this._isOpen = true;
-            this._adapter.addWindowListener('scroll', this._scrollListener);
-        }
+    _onBlur(_evt) {
+        this._adapter.removeAnchorListener('focusout', this._blurListener);
+        this._onTryHide();
     }
-    /**
-     * Hides the tooltip.
-     */
-    hide() {
-        if (!this._isOpen) {
-            return;
-        }
-        if (this._touchTimeout) {
-            this._clearTouchTimer();
-        }
-        this._isOpen = false;
-        this._adapter.removeWindowListener('scroll', this._scrollListener);
-        this._adapter.hideTooltip();
+    _onLongpress() {
+        this._onTryShow();
     }
-    /**
-     * Handles scrolling events when the tooltip is open.
-     */
-    _onScroll(evt) {
-        if (!this._isOpen) {
-            return;
+    _onLongpressEnd(evt) {
+        super._onLongpressEnd(evt);
+        // We only start the timeout to hide the tooltip after the user lifts the pointer
+        this._longpressVisibilityTimeout = window.setTimeout(() => {
+            this._onTryHide();
+        }, TOOLTIP_CONSTANTS.numbers.LONGPRESS_VISIBILITY_DURATION);
+    }
+    _onTryShow() {
+        if (!this._open) {
+            this._show();
         }
-        this.hide();
     }
-    _targetInteracted() {
-        if (this._mouseOverTimeout) {
-            window.clearTimeout(this._mouseOverTimeout);
+    _onTryHide() {
+        if (this._open) {
+            this._hide();
         }
-        if (this._isOpen) {
-            this.hide();
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            if (this._adapter.isConnected) {
+                if (!this._open) {
+                    this._show();
+                }
+                else {
+                    this._hide();
+                }
+            }
+            else {
+                this._open = value;
+            }
         }
     }
-    /** Gets/sets the tooltip text. */
-    get text() {
-        return this._text || this._adapter.getInnerText();
+    get type() {
+        return this._type;
     }
-    set text(value) {
-        if (this._text !== value) {
-            this._text = value;
-            this._adapter.setTextContent(this._text);
-            this._adapter.setHostAttribute(TOOLTIP_CONSTANTS.attributes.TEXT, this._text);
+    set type(value) {
+        value !== null && value !== void 0 ? value : (value = TOOLTIP_CONSTANTS.defaults.TYPE);
+        if (this._type !== value) {
+            this._type = value;
+            if (this._adapter.isConnected) {
+                this._adapter.syncAria();
+            }
+            this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.TYPE, this._type !== TOOLTIP_CONSTANTS.defaults.TYPE, this._type);
         }
     }
-    /** Sets the tooltip builder function. */
-    get builder() {
-        return this._builder;
+    get anchor() {
+        return this._anchor;
     }
-    set builder(value) {
-        this._builder = value;
+    set anchor(value) {
+        if (this._anchor !== value) {
+            this._anchor = value;
+            if (this._adapter.isConnected) {
+                this._detachAnchorListeners();
+                this._adapter.detachAria();
+                this._adapter.tryLocateAnchorElement(this._anchor);
+                this._adapter.syncAria();
+                this._attachAnchorListeners();
+            }
+            this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.ANCHOR, !!this._anchor, this._anchor);
+        }
     }
-    /** Gets/sets the target element CSS selector. */
-    get target() {
-        return this._target;
+    get anchorElement() {
+        return this._adapter.anchorElement;
     }
-    set target(value) {
-        if (this._target !== value) {
-            this._target = value;
-            if (this._adapter.hasTargetElement()) {
-                this._removeTargetListeners();
+    set anchorElement(element) {
+        if (this._adapter.anchorElement !== element) {
+            if (this._adapter.isConnected) {
+                this._detachAnchorListeners();
+                this._adapter.detachAria();
             }
-            this._adapter.initializeTargetElement(this._target);
-            if (this._adapter.hasTargetElement()) {
-                this._addTargetListeners();
+            this._adapter.setAnchorElement(element);
+            if (this._adapter.isConnected) {
+                this._adapter.syncAria();
+                this._attachAnchorListeners();
             }
-            this._adapter.setHostAttribute(TOOLTIP_CONSTANTS.attributes.TARGET, isDefined(this._target) ? this._target : '');
         }
     }
-    /** Gets/sets the interaction delay. */
     get delay() {
         return this._delay;
     }
     set delay(value) {
         if (this._delay !== value) {
             this._delay = value;
-            this._adapter.setHostAttribute(TOOLTIP_CONSTANTS.attributes.DELAY, isDefined(this._delay) ? this._delay.toString() : '');
+            this._adapter.setHostAttribute(TOOLTIP_CONSTANTS.attributes.DELAY, String(this._delay));
         }
     }
-    /** Gets/sets the tooltip position. */
-    get position() {
-        return this._position;
+    get placement() {
+        return this._placement;
     }
-    set position(value) {
-        if (this._position !== value) {
-            this._position = value;
-            this._adapter.setHostAttribute(TOOLTIP_CONSTANTS.attributes.POSITION, isDefined(this._position) ? this._position.toString() : '');
+    set placement(value) {
+        value !== null && value !== void 0 ? value : (value = TOOLTIP_CONSTANTS.defaults.PLACEMENT);
+        if (this._placement !== value) {
+            this._placement = value;
+            this._adapter.setHostAttribute(TOOLTIP_CONSTANTS.attributes.PLACEMENT, String(this._placement));
         }
     }
-    set open(value) {
-        this._show();
+    get offset() {
+        return this._offset;
     }
-    get open() {
-        return this._isOpen;
+    set offset(value) {
+        value !== null && value !== void 0 ? value : (value = TOOLTIP_CONSTANTS.defaults.OFFSET);
+        if (this._offset !== value) {
+            this._offset = value;
+            this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OFFSET, this._offset !== TOOLTIP_CONSTANTS.defaults.OFFSET, String(this._offset));
+        }
+    }
+    get flip() {
+        return this._flip;
+    }
+    set flip(value) {
+        value !== null && value !== void 0 ? value : (value = TOOLTIP_CONSTANTS.defaults.FLIP);
+        if (this._flip !== value) {
+            this._flip = value;
+            this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.FLIP, this._flip !== TOOLTIP_CONSTANTS.defaults.FLIP, String(this._flip));
+        }
     }
-    get tooltipElement() {
-        return this._adapter.getTooltipElement();
+    get boundary() {
+        return this._boundary;
+    }
+    set boundary(value) {
+        if (this._boundary !== value) {
+            this._boundary = value;
+            this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.BOUNDARY, !!this._boundary, this._boundary);
+        }
+    }
+    get boundaryElement() {
+        return this._boundaryElement;
+    }
+    set boundaryElement(element) {
+        var _a;
+        if (this._boundaryElement !== element) {
+            this._boundaryElement = element;
+            this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.BOUNDARY, !!this._boundaryElement, (_a = this._boundaryElement) === null || _a === void 0 ? void 0 : _a.id);
+        }
+    }
+    get fallbackPlacements() {
+        return this._fallbackPlacements;
+    }
+    set fallbackPlacements(value) {
+        if (this._fallbackPlacements !== value) {
+            this._fallbackPlacements = value;
+        }
+    }
+    get triggerType() {
+        return this._triggerTypes.length === 1 ? this._triggerTypes[0] : this._triggerTypes;
+    }
+    set triggerType(value) {
+        if (this._triggerTypes !== value) {
+            if (this._adapter.isConnected) {
+                this._detachAnchorListeners();
+            }
+            this._triggerTypes = Array.isArray(value) ? value : [value];
+            this._triggerTypes = this._triggerTypes.filter(type => !!type);
+            if (!this._triggerTypes.length) {
+                this._triggerTypes = TOOLTIP_CONSTANTS.defaults.TRIGGER_TYPES;
+            }
+            if (this._adapter.isConnected) {
+                this._attachAnchorListeners();
+            }
+        }
     }
 }
-TooltipFoundation._tooltipIdentifier = 0;