@internetarchive/collection-browser 3.4.1-alpha-webdev7761.2 → 3.4.1-alpha-webdev7761.4

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

@@ -7,7 +7,6 @@ export class HoverPaneController {
     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.
@@ -107,13 +106,12 @@ export class HoverPaneController {
          */
         // 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');
+                this.hoverPane?.classList.add('fade-in');
             }
             // Restart the timer to show the hover pane anytime the mouse moves within the tile
             if (this.hoverPaneState === 'hidden') {
@@ -183,13 +181,13 @@ export class HoverPaneController {
             }
             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.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;
+        this.offsetX = options.offsetX ?? this.offsetX;
+        this.offsetY = options.offsetY ?? this.offsetY;
+        this.showDelay = options.showDelay ?? this.showDelay;
+        this.hideDelay = options.hideDelay ?? this.hideDelay;
+        this.longPressDelay = options.longPressDelay ?? this.longPressDelay;
+        this.enableLongPress = options.enableLongPress ?? this.enableLongPress;
         this.host.addController(this);
     }
     hostConnected() {
@@ -204,41 +202,39 @@ export class HoverPaneController {
     }
     /** @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>
+            ? html `
+          ${this.touchBackdropTemplate}
+          <tile-hover-pane
+            popover
+            tabindex="-1"
+            aria-describedby="tile-hover-pane-aria-description"
+            .model=${this.hoverPaneProps?.model}
+            .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}
+            .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}
+            .loggedIn=${this.hoverPaneProps?.loggedIn}
+            .suppressBlurring=${this.hoverPaneProps?.suppressBlurring}
+            .sortParam=${this.hoverPaneProps?.sortParam}
+            .collectionTitles=${this.hoverPaneProps?.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.forceTouchBackdrop = options.enableTouchBackdrop ?? false;
             this.showHoverPane();
         }
     }
@@ -251,15 +247,15 @@ export class HoverPaneController {
      */
     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()}
+            ? 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;
     }
@@ -297,7 +293,6 @@ export class HoverPaneController {
         //  (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':
@@ -315,7 +310,7 @@ export class HoverPaneController {
         // (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();
+        const hoverPaneRect = this.hoverPane?.getBoundingClientRect();
         if (hoverPaneRect) {
             // If we need to flip the hover pane, do so by subtracting its width/height from left/top
             if (flipHorizontal) {
@@ -394,16 +389,15 @@ export class HoverPaneController {
     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))
+        if (!this.hoverPane?.isConnected)
             return;
-        (_c = (_b = this.hoverPane) === null || _b === void 0 ? void 0 : _b.showPopover) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.hoverPane?.showPopover?.();
         await new Promise(resolve => {
             // Pane sizes aren't accurate until next frame
             requestAnimationFrame(resolve);
@@ -413,16 +407,15 @@ export class HoverPaneController {
         // 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');
+        this.hoverPane?.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');
+        this.hoverPane?.classList.remove('fade-in');
         clearTimeout(this.hideTimer);
         this.hideTimer = window.setTimeout(() => {
             this.hoverPaneState = 'hidden';

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

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

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

@@ -11,38 +11,37 @@ let TileHoverPane = class TileHoverPane extends LitElement {
         this.suppressBlurring = false;
     }
     render() {
-        return html `
-      <div id="container">
-        <focus-trap>
-          ${this.headerTemplate}
-          <div id="hover-tile-list">
-            <tile-list
-              .model=${this.model}
-              .baseNavigationUrl=${this.baseNavigationUrl}
-              .baseImageUrl=${this.baseImageUrl}
-              .loggedIn=${this.loggedIn}
-              .suppressBlurring=${this.suppressBlurring}
-              .sortParam=${this.sortParam}
-              .collectionTitles=${this.collectionTitles}
-              .mobileBreakpoint=${this.mobileBreakpoint}
-              .currentWidth=${this.currentWidth}
-            ></tile-list>
-          </div>
-        </focus-trap>
-      </div>
+        return html `
+      <div id="container">
+        <focus-trap>
+          ${this.headerTemplate}
+          <div id="hover-tile-list">
+            <tile-list
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+              .baseImageUrl=${this.baseImageUrl}
+              .loggedIn=${this.loggedIn}
+              .suppressBlurring=${this.suppressBlurring}
+              .sortParam=${this.sortParam}
+              .collectionTitles=${this.collectionTitles}
+              .mobileBreakpoint=${this.mobileBreakpoint}
+              .currentWidth=${this.currentWidth}
+            ></tile-list>
+          </div>
+        </focus-trap>
+      </div>
     `;
     }
     get headerTemplate() {
-        var _a, _b, _c, _d, _e;
         // early return if item does't have parent collection
-        if (((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections) === null || _b === void 0 ? void 0 : _b.length) === 0)
+        if (this.model?.collections?.length === 0)
             return nothing;
         let collectionTitle = '';
         let collectionIdentifier = '';
-        for (const collection of ((_c = this.model) === null || _c === void 0 ? void 0 : _c.collections) || []) {
+        for (const collection of this.model?.collections || []) {
             if (!suppressedCollections[collection] &&
                 !collection.startsWith('fav-')) {
-                collectionTitle = (_e = (_d = this.collectionTitles) === null || _d === void 0 ? void 0 : _d.get(collection)) !== null && _e !== void 0 ? _e : collection;
+                collectionTitle = this.collectionTitles?.get(collection) ?? collection;
                 collectionIdentifier = collection;
                 break;
             }
@@ -51,103 +50,103 @@ let TileHoverPane = class TileHoverPane extends LitElement {
         // let's not render that
         if (!collectionIdentifier)
             return nothing;
-        return html `
-      <div id="list-line-header">
-        <a href="${this.baseNavigationUrl}/details/${collectionIdentifier}">
-          <img
-            src="${this.baseImageUrl}/services/img/${collectionIdentifier}"
-            alt=""
-          /><span>${collectionTitle}</span>
-        </a>
-      </div>
+        return html `
+      <div id="list-line-header">
+        <a href="${this.baseNavigationUrl}/details/${collectionIdentifier}">
+          <img
+            src="${this.baseImageUrl}/services/img/${collectionIdentifier}"
+            alt=""
+          /><span>${collectionTitle}</span>
+        </a>
+      </div>
     `;
     }
     static get styles() {
         const hoverPaneHeaderBGColor = css `var(--hoverPaneHeaderBGColor, #edf0ff)`;
         const iaLinkColor = css `var(--ia-theme-link-color, #4b64ff)`;
         const iaFontFamily = css `var(--ia-theme-base-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);`;
-        return css `
-      :host {
-        margin: 0;
-        border: 0;
-        padding: 0;
-        overflow: visible;
-        color: inherit;
-        background: none;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(8px);
-        transition:
-          opacity 0.1s ease-in,
-          transform 0.1s ease-in;
-        --image-width: auto;
-      }
-
-      :host(.visible) {
-        visibility: visible;
-      }
-
-      :host(.fade-in) {
-        opacity: 1;
-        transform: translateY(0);
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        :host {
-          transition-duration: 0.001s !important; /* Imperceptibly fast */
-        }
-      }
-
-      #container {
-        width: max-content;
-        max-width: min(45vw, 600px);
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);
-        background: white;
-      }
-
-      @media screen and (max-width: 600px) {
-        #container {
-          max-width: 80vw;
-        }
-      }
-
-      /* main tile-list container */
-      #hover-tile-list {
-        padding: 10px;
-      }
-
-      /* header on hover panel to show collection icon and title */
-      #list-line-header {
-        background: ${hoverPaneHeaderBGColor};
-      }
-      #list-line-header a {
-        display: flex;
-        align-items: center;
-        column-gap: 5px;
-        height: 3.4rem;
-        padding: 0 10px;
-        border-radius: 4px 4px 0 0;
-        width: fit-content;
-        font-size: 1.4rem;
-        color: ${iaLinkColor};
-        font-family: ${iaFontFamily};
-        text-decoration: none;
-        width: auto;
-      }
-      #list-line-header a span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      #list-line-header a:hover {
-        text-decoration: underline;
-      }
-      #list-line-header a img {
-        width: 30px;
-        max-height: 30px;
-      }
+        return css `
+      :host {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: visible;
+        color: inherit;
+        background: none;
+        visibility: hidden;
+        opacity: 0;
+        transform: translateY(8px);
+        transition:
+          opacity 0.1s ease-in,
+          transform 0.1s ease-in;
+        --image-width: auto;
+      }
+
+      :host(.visible) {
+        visibility: visible;
+      }
+
+      :host(.fade-in) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
+        }
+      }
+
+      #container {
+        width: max-content;
+        max-width: min(45vw, 600px);
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);
+        background: white;
+      }
+
+      @media screen and (max-width: 600px) {
+        #container {
+          max-width: 80vw;
+        }
+      }
+
+      /* main tile-list container */
+      #hover-tile-list {
+        padding: 10px;
+      }
+
+      /* header on hover panel to show collection icon and title */
+      #list-line-header {
+        background: ${hoverPaneHeaderBGColor};
+      }
+      #list-line-header a {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        height: 3.4rem;
+        padding: 0 10px;
+        border-radius: 4px 4px 0 0;
+        width: fit-content;
+        font-size: 1.4rem;
+        color: ${iaLinkColor};
+        font-family: ${iaFontFamily};
+        text-decoration: none;
+        width: auto;
+      }
+      #list-line-header a span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      #list-line-header a:hover {
+        text-decoration: underline;
+      }
+      #list-line-header a img {
+        width: 30px;
+        max-height: 30px;
+      }
     `;
     }
 };