@internetarchive/collection-browser 3.3.2 → 3.3.3

package/dist/src/tiles/hover/hover-pane-controller.d.ts

@@ -0,0 +1,228 @@
+import type { SortParam } from '@internetarchive/search-service';
+import { HTMLTemplateResult, nothing, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { TileModel } from '../../models';
+import type { CollectionTitles } from '../../data-source/models';
+export interface HoverPaneProperties {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    baseImageUrl?: string;
+    loggedIn: boolean;
+    suppressBlurring: boolean;
+    sortParam: SortParam | null;
+    collectionTitles?: CollectionTitles;
+}
+export interface HoverPaneControllerOptions {
+    offsetX?: number;
+    offsetY?: number;
+    enableLongPress?: boolean;
+    showDelay?: number;
+    hideDelay?: number;
+    longPressDelay?: number;
+    mobileBreakpoint?: number;
+}
+/** A common interface for providing a hover pane element. */
+export interface HoverPaneProviderInterface {
+    /** Returns the provider's currently rendered hover pane element. */
+    getHoverPane(): HTMLElement | undefined;
+    /** Returns properties that should be passed to the hover pane. */
+    getHoverPaneProps(): HoverPaneProperties;
+    /** When user has keyboard navigated out of more info, we want the host to get focus */
+    acquireFocus(): void;
+    /** When user has keyboard navigated out of more info, we want the host to lose focus */
+    releaseFocus(): void;
+}
+export interface ToggleHoverPaneOptions {
+    coords: {
+        x: number;
+        y: number;
+    };
+    enableTouchBackdrop?: boolean;
+}
+/**
+ * An interface for interacting with hover pane controllers (e.g.,
+ * to retrieve their current hover pane template).
+ */
+export interface HoverPaneControllerInterface extends ReactiveController {
+    /**
+     * Returns the hover pane template to render based on this controller's
+     * current state. The returned template may be `nothing` if the hover
+     * pane should not currently be rendered.
+     */
+    getTemplate(): HTMLTemplateResult | typeof nothing;
+    /**
+     * Requests to manually toggle the state of the hover pane.
+     * If the hover pane is already shown, it will begin fading out and then
+     * subsequently be hidden and removed. If the hover pane is already fading
+     * out or hidden, it will fade back in and be shown.
+     */
+    toggleHoverPane(options: ToggleHoverPaneOptions): void;
+}
+export declare class HoverPaneController implements HoverPaneControllerInterface {
+    /** The host element to which this controller should attach listeners */
+    private readonly host;
+    /**
+     * The hover pane element attached to this controller's host.
+     */
+    private hoverPane?;
+    /**
+     * The properties to be passed to the hover pane element
+     */
+    private hoverPaneProps?;
+    /**
+     * The breakpoint (in pixels) below which the mobile interface should be used.
+     */
+    private mobileBreakpoint?;
+    /**
+     * The number of horizontal pixels the hover pane should be offset from the
+     * pointer position.
+     */
+    private offsetX;
+    /**
+     * The number of vertical pixels the hover pane should be offset from the
+     * pointer position.
+     */
+    private offsetY;
+    /**
+     * The delay between the mouse idling within the host element and when the hover
+     * pane should begin fading in (in milliseconds).
+     */
+    private showDelay;
+    /**
+     * The delay between when the mouse leaves the host element and when the hover
+     * pane should begin fading out (in milliseconds).
+     */
+    private hideDelay;
+    /**
+     * The delay between when a touch event begins on the host element and when the
+     * hover pane should begin fading in (in milliseconds).
+     */
+    private longPressDelay;
+    /**
+     * Whether long press interactions should cause the hover pane to appear (when
+     * below the mobile breakpoint).
+     */
+    private enableLongPress;
+    /**
+     * Used to control the current state of this provider's hover pane.
+     *  - `'hidden'` => The hover pane is not present at all.
+     *  - `'shown'` => The hover pane is either fading in or fully visible.
+     *  - `'fading-out'` => The hover pane is fading out and about to be removed.
+     */
+    private hoverPaneState;
+    /** The timer ID for showing the hover pane */
+    private showTimer?;
+    /** The timer ID for hiding the hover pane */
+    private hideTimer?;
+    /** The timer ID for recognizing a long press event */
+    private longPressTimer?;
+    /**
+     * Whether the touch backdrop should currently be rendered irrespective of other touch
+     * interactions being enabled.
+     */
+    private forceTouchBackdrop;
+    /** A record of the last mouse position on the host element, for positioning the hover pane */
+    private lastPointerClientPos;
+    constructor(
+    /** The host element to which this controller should attach listeners */
+    host: ReactiveControllerHost & HoverPaneProviderInterface & HTMLElement, 
+    /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
+    options?: HoverPaneControllerOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /** @inheritdoc */
+    getTemplate(): HTMLTemplateResult | typeof nothing;
+    /** @inheritdoc */
+    toggleHoverPane(options: ToggleHoverPaneOptions): void;
+    /**
+     * Produces a template for the invisible touch capture backdrop that
+     * is used to cancel the hover pane on touch devices. We want any
+     * touch interaction on the backdrop to remove the hover pane, and
+     * we don't want to bubble up mouse events that would otherwise
+     * affect the state of the hover pane (e.g., fading it back in).
+     */
+    private get touchBackdropTemplate();
+    private get showTouchBackdrop();
+    /** Whether to use the mobile layout */
+    private get isMobileView();
+    private get isHoverEnabled();
+    private get isTouchEnabled();
+    /** Whether this controller should currently render its hover pane. */
+    private get shouldRenderHoverPane();
+    /**
+     * Returns the desired top/left offsets (in pixels) for this tile's hover pane.
+     * The desired offsets balance positioning the hover pane under the primary pointer
+     * while preventing it from flowing outside the viewport. The returned offsets are
+     * relative to the viewport, intended to position the pane as a popover element.
+     *
+     * These offsets are only valid if the hover pane is already rendered with its
+     * correct width and height. If the hover pane is not present, the returned offsets
+     * will simply represent the current pointer position.
+     */
+    private makePaneDesiredOffsets;
+    /**
+     * Adds to the host element all the listeners necessary to make the
+     * hover pane functional.
+     */
+    private attachListeners;
+    /**
+     * Removes all the hover pane listeners from the host element.
+     */
+    private detachListeners;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private handleKeyUp;
+    /**
+     * Handler for the mouseenter event on the host element.
+     */
+    private handleMouseEnter;
+    /**
+     * Handler for the mousemove event on the host element.
+     * Aborts any pending hide/fade-out for the hover pane, and restarts the
+     * timer to show it.
+     */
+    private handleMouseMove;
+    /**
+     * Handler for the mouseleave event on the host element.
+     * Hides the hover pane if present, and aborts the timer for showing it.
+     */
+    private handleMouseLeave;
+    /**
+     * Handler for the touchstart event on the host element.
+     * Begins the timer for recognizing a long press event.
+     */
+    private handleTouchStart;
+    /**
+     * Handler for events that should cancel a pending long press event
+     * (touchmove, touchend, touchcancel). Aborts the timer for recognizing
+     * a long press.
+     */
+    private handleLongPressCancel;
+    /**
+     * Handler for the contextmenu event, which should be suppressed during
+     * mobile long-press events on the host element.
+     */
+    private handleContextMenu;
+    /**
+     * Immediately causes the hover pane to begin fading out, if it is present.
+     */
+    private handleBackdropInteraction;
+    /**
+     * Aborts and restarts the timer for showing the hover pane.
+     */
+    private restartShowHoverPaneTimer;
+    /**
+     * Causes this tile's hover pane to be rendered, positioned, and made visible.
+     */
+    private showHoverPane;
+    /**
+     * Causes this tile's hover pane to begin fading out and starts
+     * the timer for it to be removed.
+     */
+    private fadeOutHoverPane;
+    /**
+     * Positions the hover pane with the correct offsets.
+     */
+    private repositionHoverPane;
+}

package/dist/src/tiles/hover/hover-pane-controller.js

@@ -0,0 +1,446 @@
+import { html, nothing, } from 'lit';
+import { msg } from '@lit/localize';
+const clamp = (val, min = -Infinity, max = Infinity) => Math.max(min, Math.min(val, max));
+export class HoverPaneController {
+    constructor(
+    /** The host element to which this controller should attach listeners */
+    host, 
+    /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
+    options = {}) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.host = host;
+        /**
+         * The breakpoint (in pixels) below which the mobile interface should be used.
+         */
+        this.mobileBreakpoint = 600;
+        /**
+         * The number of horizontal pixels the hover pane should be offset from the
+         * pointer position.
+         */
+        this.offsetX = -10;
+        /**
+         * The number of vertical pixels the hover pane should be offset from the
+         * pointer position.
+         */
+        this.offsetY = 15;
+        /**
+         * The delay between the mouse idling within the host element and when the hover
+         * pane should begin fading in (in milliseconds).
+         */
+        this.showDelay = 300;
+        /**
+         * The delay between when the mouse leaves the host element and when the hover
+         * pane should begin fading out (in milliseconds).
+         */
+        this.hideDelay = 100;
+        /**
+         * The delay between when a touch event begins on the host element and when the
+         * hover pane should begin fading in (in milliseconds).
+         */
+        this.longPressDelay = 600;
+        /**
+         * Whether long press interactions should cause the hover pane to appear (when
+         * below the mobile breakpoint).
+         */
+        this.enableLongPress = false;
+        /**
+         * Used to control the current state of this provider's hover pane.
+         *  - `'hidden'` => The hover pane is not present at all.
+         *  - `'shown'` => The hover pane is either fading in or fully visible.
+         *  - `'fading-out'` => The hover pane is fading out and about to be removed.
+         */
+        this.hoverPaneState = 'hidden';
+        /**
+         * Whether the touch backdrop should currently be rendered irrespective of other touch
+         * interactions being enabled.
+         */
+        this.forceTouchBackdrop = false;
+        /** A record of the last mouse position on the host element, for positioning the hover pane */
+        this.lastPointerClientPos = { x: 0, y: 0 };
+        this.handleFocus = () => {
+            if (this.hoverPaneState === 'hidden') {
+                this.showHoverPane({
+                    anchor: 'host',
+                });
+            }
+        };
+        this.handleBlur = () => {
+            if (this.hoverPaneState !== 'hidden') {
+                this.fadeOutHoverPane();
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
+                this.hoverPaneState !== 'hidden') {
+                e.preventDefault();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (this.hoverPaneState === 'hidden' || !this.hoverPane)
+                return;
+            if (e.key === 'ArrowDown') {
+                this.hoverPane.tabIndex = 1;
+                this.hoverPane.focus();
+            }
+            const isArrowUp = e.key === 'ArrowUp';
+            const isEscape = e.key === 'Escape' || e.key === 'Esc';
+            if (isEscape) {
+                this.fadeOutHoverPane();
+            }
+            if (isArrowUp || isEscape) {
+                this.hoverPane.tabIndex = -1;
+                this.host.acquireFocus();
+            }
+        };
+        /**
+         * Handler for the mouseenter event on the host element.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleMouseEnter = (e) => {
+            // Delegate to the mousemove handler, as they are currently processed identically
+            this.handleMouseMove(e);
+        };
+        /**
+         * Handler for the mousemove event on the host element.
+         * Aborts any pending hide/fade-out for the hover pane, and restarts the
+         * timer to show it.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleMouseMove = (e) => {
+            var _a;
+            // The mouse is within the tile, so abort any pending removal of the hover pane
+            clearTimeout(this.hideTimer);
+            // If the hover pane is currently fading out, just make it fade back in where it is
+            if (this.hoverPaneState === 'fading-out') {
+                this.hoverPaneState = 'shown';
+                (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.add('fade-in');
+            }
+            // Restart the timer to show the hover pane anytime the mouse moves within the tile
+            if (this.hoverPaneState === 'hidden') {
+                this.restartShowHoverPaneTimer();
+                this.lastPointerClientPos = { x: e.clientX, y: e.clientY };
+            }
+        };
+        /**
+         * Handler for the mouseleave event on the host element.
+         * Hides the hover pane if present, and aborts the timer for showing it.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleMouseLeave = () => {
+            this.host.releaseFocus();
+            // Abort any timer to show the hover pane, as the mouse has left the tile
+            clearTimeout(this.showTimer);
+            // Hide the hover pane if it's already been shown
+            if (this.hoverPaneState !== 'hidden') {
+                this.hideTimer = window.setTimeout(() => {
+                    this.fadeOutHoverPane();
+                }, this.hideDelay);
+            }
+        };
+        /**
+         * Handler for the touchstart event on the host element.
+         * Begins the timer for recognizing a long press event.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleTouchStart = (e) => {
+            clearTimeout(this.longPressTimer);
+            if (e.touches.length === 1) {
+                this.longPressTimer = window.setTimeout(() => {
+                    if (this.hoverPaneState === 'hidden') {
+                        this.showHoverPane();
+                    }
+                }, this.longPressDelay);
+                this.lastPointerClientPos = {
+                    x: e.touches[0].clientX,
+                    y: e.touches[0].clientY,
+                };
+            }
+        };
+        /**
+         * Handler for events that should cancel a pending long press event
+         * (touchmove, touchend, touchcancel). Aborts the timer for recognizing
+         * a long press.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleLongPressCancel = () => {
+            clearTimeout(this.longPressTimer);
+        };
+        /**
+         * Handler for the contextmenu event, which should be suppressed during
+         * mobile long-press events on the host element.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleContextMenu = (e) => {
+            e.preventDefault();
+        };
+        /**
+         * Immediately causes the hover pane to begin fading out, if it is present.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleBackdropInteraction = (e) => {
+            if (this.hoverPaneState !== 'hidden') {
+                this.fadeOutHoverPane();
+            }
+            e.stopPropagation();
+        };
+        this.mobileBreakpoint = (_a = options.mobileBreakpoint) !== null && _a !== void 0 ? _a : this.mobileBreakpoint;
+        this.offsetX = (_b = options.offsetX) !== null && _b !== void 0 ? _b : this.offsetX;
+        this.offsetY = (_c = options.offsetY) !== null && _c !== void 0 ? _c : this.offsetY;
+        this.showDelay = (_d = options.showDelay) !== null && _d !== void 0 ? _d : this.showDelay;
+        this.hideDelay = (_e = options.hideDelay) !== null && _e !== void 0 ? _e : this.hideDelay;
+        this.longPressDelay = (_f = options.longPressDelay) !== null && _f !== void 0 ? _f : this.longPressDelay;
+        this.enableLongPress = (_g = options.enableLongPress) !== null && _g !== void 0 ? _g : this.enableLongPress;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.attachListeners();
+    }
+    hostDisconnected() {
+        this.detachListeners();
+    }
+    hostUpdated() {
+        this.hoverPane = this.host.getHoverPane();
+        this.hoverPaneProps = this.host.getHoverPaneProps();
+    }
+    /** @inheritdoc */
+    getTemplate() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.hoverPaneProps = this.host.getHoverPaneProps();
+        return this.shouldRenderHoverPane
+            ? html `
+          ${this.touchBackdropTemplate}
+          <tile-hover-pane
+            popover
+            tabindex="-1"
+            aria-describedby="tile-hover-pane-aria-description"
+            .model=${(_a = this.hoverPaneProps) === null || _a === void 0 ? void 0 : _a.model}
+            .baseNavigationUrl=${(_b = this.hoverPaneProps) === null || _b === void 0 ? void 0 : _b.baseNavigationUrl}
+            .baseImageUrl=${(_c = this.hoverPaneProps) === null || _c === void 0 ? void 0 : _c.baseImageUrl}
+            .loggedIn=${(_d = this.hoverPaneProps) === null || _d === void 0 ? void 0 : _d.loggedIn}
+            .suppressBlurring=${(_e = this.hoverPaneProps) === null || _e === void 0 ? void 0 : _e.suppressBlurring}
+            .sortParam=${(_f = this.hoverPaneProps) === null || _f === void 0 ? void 0 : _f.sortParam}
+            .collectionTitles=${(_g = this.hoverPaneProps) === null || _g === void 0 ? void 0 : _g.collectionTitles}
+            .mobileBreakpoint=${this.mobileBreakpoint}
+            .currentWidth=${window.innerWidth}
+          ></tile-hover-pane>
+          <div id="tile-hover-pane-aria-description" class="sr-only">
+            ${msg('Press Up Arrow to exit item detail preview')}
+          </div>
+        `
+            : nothing;
+    }
+    /** @inheritdoc */
+    toggleHoverPane(options) {
+        var _a;
+        if (this.hoverPaneState === 'shown') {
+            this.fadeOutHoverPane();
+            this.forceTouchBackdrop = false;
+        }
+        else {
+            this.lastPointerClientPos = options.coords;
+            this.forceTouchBackdrop = (_a = options.enableTouchBackdrop) !== null && _a !== void 0 ? _a : false;
+            this.showHoverPane();
+        }
+    }
+    /**
+     * Produces a template for the invisible touch capture backdrop that
+     * is used to cancel the hover pane on touch devices. We want any
+     * touch interaction on the backdrop to remove the hover pane, and
+     * we don't want to bubble up mouse events that would otherwise
+     * affect the state of the hover pane (e.g., fading it back in).
+     */
+    get touchBackdropTemplate() {
+        return this.showTouchBackdrop
+            ? html `<div
+          id="touch-backdrop"
+          @touchstart=${this.handleBackdropInteraction}
+          @touchmove=${this.handleBackdropInteraction}
+          @touchend=${this.handleBackdropInteraction}
+          @touchcancel=${this.handleBackdropInteraction}
+          @mouseenter=${(e) => e.stopPropagation()}
+          @mousemove=${(e) => e.stopPropagation()}
+          @mouseleave=${(e) => e.stopPropagation()}
+        ></div>`
+            : nothing;
+    }
+    get showTouchBackdrop() {
+        return ((this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop);
+    }
+    /** Whether to use the mobile layout */
+    get isMobileView() {
+        return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;
+    }
+    get isHoverEnabled() {
+        return window.matchMedia('(hover: hover)').matches;
+    }
+    get isTouchEnabled() {
+        return ('ontouchstart' in window &&
+            window.matchMedia('(any-pointer: coarse)').matches);
+    }
+    /** Whether this controller should currently render its hover pane. */
+    get shouldRenderHoverPane() {
+        return this.hoverPaneState !== 'hidden';
+    }
+    /**
+     * Returns the desired top/left offsets (in pixels) for this tile's hover pane.
+     * The desired offsets balance positioning the hover pane under the primary pointer
+     * while preventing it from flowing outside the viewport. The returned offsets are
+     * relative to the viewport, intended to position the pane as a popover element.
+     *
+     * These offsets are only valid if the hover pane is already rendered with its
+     * correct width and height. If the hover pane is not present, the returned offsets
+     * will simply represent the current pointer position.
+     */
+    makePaneDesiredOffsets(anchor) {
+        // Try to find offsets for the hover pane that:
+        //  (a) cause it to lie entirely within the viewport, and
+        //  (b) to the extent possible, minimize the distance between the
+        //      nearest corner of the hover pane and the mouse/host element position
+        //      (with some additional offsets applied after the fact).
+        var _a;
+        let [left, top] = [0, 0];
+        switch (anchor) {
+            case 'host':
+                const hostRect = this.host.getBoundingClientRect();
+                // slight inset from host top left corner
+                left = hostRect.left + 20;
+                top = hostRect.top + 30;
+                break;
+            case 'cursor':
+                left = this.lastPointerClientPos.x;
+                top = this.lastPointerClientPos.y;
+                break;
+        }
+        // Flip the hover pane according to which quadrant of the viewport the coordinates are in.
+        // (Similar to how Wikipedia's link hover panes work)
+        const flipHorizontal = left > window.innerWidth / 2;
+        const flipVertical = top > window.innerHeight / 2;
+        const hoverPaneRect = (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (hoverPaneRect) {
+            // If we need to flip the hover pane, do so by subtracting its width/height from left/top
+            if (flipHorizontal) {
+                left -= hoverPaneRect.width;
+            }
+            if (flipVertical) {
+                top -= hoverPaneRect.height;
+            }
+            // Apply desired offsets from the target position
+            left += (flipHorizontal ? -1 : 1) * this.offsetX;
+            top += (flipVertical ? -1 : 1) * this.offsetY;
+            // On mobile view, shunt the hover pane to avoid overflowing the viewport
+            if (this.isMobileView) {
+                left = clamp(left, 20, window.innerWidth - hoverPaneRect.width - 20);
+                top = clamp(top, 20, window.innerHeight - hoverPaneRect.height - 20);
+            }
+        }
+        left += window.scrollX;
+        top += window.scrollY;
+        return { left, top };
+    }
+    /**
+     * Adds to the host element all the listeners necessary to make the
+     * hover pane functional.
+     */
+    attachListeners() {
+        // keyboard navigation listeners
+        this.host.addEventListener('focus', this.handleFocus);
+        this.host.addEventListener('blur', this.handleBlur);
+        this.host.addEventListener('keyup', this.handleKeyUp);
+        this.host.addEventListener('keydown', this.handleKeyDown);
+        if (this.isHoverEnabled) {
+            this.host.addEventListener('mouseenter', this.handleMouseEnter);
+            this.host.addEventListener('mousemove', this.handleMouseMove);
+            this.host.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+        if (this.isTouchEnabled && this.enableLongPress) {
+            this.host.addEventListener('touchstart', this.handleTouchStart);
+            this.host.addEventListener('touchmove', this.handleLongPressCancel);
+            this.host.addEventListener('touchend', this.handleLongPressCancel);
+            this.host.addEventListener('touchcancel', this.handleLongPressCancel);
+            this.host.addEventListener('contextmenu', this.handleContextMenu);
+        }
+    }
+    /**
+     * Removes all the hover pane listeners from the host element.
+     */
+    detachListeners() {
+        this.host.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.host.removeEventListener('mousemove', this.handleMouseMove);
+        this.host.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.host.removeEventListener('touchstart', this.handleTouchStart);
+        this.host.removeEventListener('touchmove', this.handleLongPressCancel);
+        this.host.removeEventListener('touchend', this.handleLongPressCancel);
+        this.host.removeEventListener('touchcancel', this.handleLongPressCancel);
+        this.host.removeEventListener('contextmenu', this.handleContextMenu);
+        // keyboard navigation listeners
+        this.host.removeEventListener('focus', this.handleFocus);
+        this.host.removeEventListener('blur', this.handleBlur);
+        this.host.removeEventListener('keyup', this.handleKeyUp);
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+    }
+    /**
+     * Aborts and restarts the timer for showing the hover pane.
+     */
+    restartShowHoverPaneTimer() {
+        clearTimeout(this.showTimer);
+        this.showTimer = window.setTimeout(() => {
+            this.host.acquireFocus();
+            this.showHoverPane();
+        }, this.showDelay);
+    }
+    /**
+     * Causes this tile's hover pane to be rendered, positioned, and made visible.
+     */
+    async showHoverPane(options = {
+        anchor: 'cursor',
+    }) {
+        var _a, _b, _c, _d;
+        this.hoverPaneState = 'shown';
+        this.host.requestUpdate();
+        // Wait for the state update to render the hover pane
+        await this.host.updateComplete;
+        // Ensure the hover pane element is still in the document before showing,
+        // as it might have been removed by the previous update.
+        if (!((_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.isConnected))
+            return;
+        (_c = (_b = this.hoverPane) === null || _b === void 0 ? void 0 : _b.showPopover) === null || _c === void 0 ? void 0 : _c.call(_b);
+        await new Promise(resolve => {
+            // Pane sizes aren't accurate until next frame
+            requestAnimationFrame(resolve);
+        });
+        // Apply the correct positioning to the hover pane
+        this.repositionHoverPane(options.anchor);
+        // The hover pane is initially not visible (to avoid it shifting around
+        // while being positioned). Since it now has the correct positioning, we
+        // can make it visible and begin its fade-in animation.
+        (_d = this.hoverPane) === null || _d === void 0 ? void 0 : _d.classList.add('visible', 'fade-in');
+    }
+    /**
+     * Causes this tile's hover pane to begin fading out and starts
+     * the timer for it to be removed.
+     */
+    fadeOutHoverPane() {
+        var _a;
+        this.hoverPaneState = 'fading-out';
+        (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.remove('fade-in');
+        clearTimeout(this.hideTimer);
+        this.hideTimer = window.setTimeout(() => {
+            this.hoverPaneState = 'hidden';
+            if (this.hoverPane) {
+                this.hoverPane.tabIndex = -1;
+            }
+            this.host.requestUpdate();
+        }, 100);
+    }
+    /**
+     * Positions the hover pane with the correct offsets.
+     */
+    repositionHoverPane(anchor) {
+        if (!this.hoverPane)
+            return;
+        const { top, left } = this.makePaneDesiredOffsets(anchor);
+        this.hoverPane.style.top = `${top}px`;
+        this.hoverPane.style.left = `${left}px`;
+    }
+}
+//# sourceMappingURL=hover-pane-controller.js.map