@internetarchive/collection-browser 3.3.2 → 3.3.3

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,20 @@
+import type { SortParam } from '@internetarchive/search-service';
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import '@a11y/focus-trap';
+import { type TileModel } from '../../models';
+import type { CollectionTitles } from '../../data-source/models';
+import '../list/tile-list';
+export declare class TileHoverPane extends LitElement {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    baseImageUrl?: string;
+    loggedIn: boolean;
+    suppressBlurring: boolean;
+    sortParam?: SortParam;
+    mobileBreakpoint?: number;
+    currentWidth?: number;
+    collectionTitles?: CollectionTitles;
+    protected render(): TemplateResult;
+    private get headerTemplate();
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,185 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@a11y/focus-trap';
+import { suppressedCollections } from '../../models';
+import '../list/tile-list';
+let TileHoverPane = class TileHoverPane extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loggedIn = false;
+        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>
+    `;
+    }
+    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)
+            return nothing;
+        let collectionTitle = '';
+        let collectionIdentifier = '';
+        for (const collection of ((_c = this.model) === null || _c === void 0 ? void 0 : _c.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;
+                collectionIdentifier = collection;
+                break;
+            }
+        }
+        // sometimes item does have collections but they are in suppressed or favorite list,
+        // 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>
+    `;
+    }
+    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;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileHoverPane.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], TileHoverPane.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: String })
+], TileHoverPane.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileHoverPane.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileHoverPane.prototype, "suppressBlurring", void 0);
+__decorate([
+    property({ type: Object })
+], TileHoverPane.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: Number })
+], TileHoverPane.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    property({ type: Number })
+], TileHoverPane.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Object })
+], TileHoverPane.prototype, "collectionTitles", void 0);
+TileHoverPane = __decorate([
+    customElement('tile-hover-pane')
+], TileHoverPane);
+export { TileHoverPane };
+//# sourceMappingURL=tile-hover-pane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-hover-pane.js","sourceRoot":"","sources":["../../../../src/tiles/hover/tile-hover-pane.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SortParam } from '@internetarchive/search-service';\r\nimport {\r\n  css,\r\n  CSSResultGroup,\r\n  html,\r\n  LitElement,\r\n  nothing,\r\n  TemplateResult,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport '@a11y/focus-trap';\r\n\r\nimport { suppressedCollections, type TileModel } from '../../models';\r\nimport type { CollectionTitles } from '../../data-source/models';\r\nimport '../list/tile-list';\r\n\r\n@customElement('tile-hover-pane')\r\nexport class TileHoverPane extends LitElement {\r\n  @property({ type: Object }) model?: TileModel;\r\n\r\n  @property({ type: String }) baseNavigationUrl?: string;\r\n\r\n  @property({ type: String }) baseImageUrl?: string;\r\n\r\n  @property({ type: Boolean }) loggedIn: boolean = false;\r\n\r\n  @property({ type: Boolean }) suppressBlurring: boolean = false;\r\n\r\n  @property({ type: Object }) sortParam?: SortParam;\r\n\r\n  @property({ type: Number }) mobileBreakpoint?: number;\r\n\r\n  @property({ type: Number }) currentWidth?: number;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  protected render(): TemplateResult {\r\n    return html`\r\n      <div id=\"container\">\r\n        <focus-trap>\r\n          ${this.headerTemplate}\r\n          <div id=\"hover-tile-list\">\r\n            <tile-list\r\n              .model=${this.model}\r\n              .baseNavigationUrl=${this.baseNavigationUrl}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .loggedIn=${this.loggedIn}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .sortParam=${this.sortParam}\r\n              .collectionTitles=${this.collectionTitles}\r\n              .mobileBreakpoint=${this.mobileBreakpoint}\r\n              .currentWidth=${this.currentWidth}\r\n            ></tile-list>\r\n          </div>\r\n        </focus-trap>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get headerTemplate(): TemplateResult | typeof nothing {\r\n    // early return if item does't have parent collection\r\n    if (this.model?.collections?.length === 0) return nothing;\r\n\r\n    let collectionTitle = '';\r\n    let collectionIdentifier = '';\r\n\r\n    for (const collection of this.model?.collections || []) {\r\n      if (\r\n        !suppressedCollections[collection] &&\r\n        !collection.startsWith('fav-')\r\n      ) {\r\n        collectionTitle = this.collectionTitles?.get(collection) ?? collection;\r\n        collectionIdentifier = collection;\r\n        break;\r\n      }\r\n    }\r\n\r\n    // sometimes item does have collections but they are in suppressed or favorite list,\r\n    // let's not render that\r\n    if (!collectionIdentifier) return nothing;\r\n\r\n    return html`\r\n      <div id=\"list-line-header\">\r\n        <a href=\"${this.baseNavigationUrl}/details/${collectionIdentifier}\">\r\n          <img\r\n            src=\"${this.baseImageUrl}/services/img/${collectionIdentifier}\"\r\n            alt=\"\"\r\n          /><span>${collectionTitle}</span>\r\n        </a>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const hoverPaneHeaderBGColor = css`var(--hoverPaneHeaderBGColor, #edf0ff)`;\r\n    const iaLinkColor = css`var(--ia-theme-link-color, #4b64ff)`;\r\n    const iaFontFamily = css`var(--ia-theme-base-font-family, \"Helvetica Neue\", Helvetica, Arial, sans-serif);`;\r\n\r\n    return css`\r\n      :host {\r\n        margin: 0;\r\n        border: 0;\r\n        padding: 0;\r\n        overflow: visible;\r\n        color: inherit;\r\n        background: none;\r\n        visibility: hidden;\r\n        opacity: 0;\r\n        transform: translateY(8px);\r\n        transition:\r\n          opacity 0.1s ease-in,\r\n          transform 0.1s ease-in;\r\n        --image-width: auto;\r\n      }\r\n\r\n      :host(.visible) {\r\n        visibility: visible;\r\n      }\r\n\r\n      :host(.fade-in) {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n\r\n      @media (prefers-reduced-motion: reduce) {\r\n        :host {\r\n          transition-duration: 0.001s !important; /* Imperceptibly fast */\r\n        }\r\n      }\r\n\r\n      #container {\r\n        width: max-content;\r\n        max-width: min(45vw, 600px);\r\n        border: 1px solid #ddd;\r\n        border-radius: 4px;\r\n        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);\r\n        background: white;\r\n      }\r\n\r\n      @media screen and (max-width: 600px) {\r\n        #container {\r\n          max-width: 80vw;\r\n        }\r\n      }\r\n\r\n      /* main tile-list container */\r\n      #hover-tile-list {\r\n        padding: 10px;\r\n      }\r\n\r\n      /* header on hover panel to show collection icon and title */\r\n      #list-line-header {\r\n        background: ${hoverPaneHeaderBGColor};\r\n      }\r\n      #list-line-header a {\r\n        display: flex;\r\n        align-items: center;\r\n        column-gap: 5px;\r\n        height: 3.4rem;\r\n        padding: 0 10px;\r\n        border-radius: 4px 4px 0 0;\r\n        width: fit-content;\r\n        font-size: 1.4rem;\r\n        color: ${iaLinkColor};\r\n        font-family: ${iaFontFamily};\r\n        text-decoration: none;\r\n        width: auto;\r\n      }\r\n      #list-line-header a span {\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n      }\r\n      #list-line-header a:hover {\r\n        text-decoration: underline;\r\n      }\r\n      #list-line-header a img {\r\n        width: 30px;\r\n        max-height: 30px;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

package/dist/src/tiles/image-block.d.ts

@@ -0,0 +1,19 @@
+import { CSSResultGroup, LitElement, nothing } from 'lit';
+import type { TileModel } from '../models';
+import './overlay/icon-overlay';
+import './overlay/text-overlay';
+export declare class ImageBlock extends LitElement {
+    baseImageUrl?: string;
+    isCompactTile: boolean;
+    isListTile: boolean;
+    loggedIn: boolean;
+    suppressBlurring: boolean;
+    model?: TileModel;
+    viewSize: string;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+    private get baseClass();
+    private get iconOverlayTemplate();
+    private get textOverlayTemplate();
+    private get overlayType();
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/image-block.js

@@ -0,0 +1,175 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import './overlay/icon-overlay';
+import './overlay/text-overlay';
+let ImageBlock = class ImageBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isCompactTile = false;
+        this.isListTile = false;
+        this.loggedIn = false;
+        this.suppressBlurring = false;
+        this.viewSize = 'desktop';
+    }
+    render() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier))
+            return nothing;
+        return html `
+      <div class=${classMap(this.baseClass)}>
+        <item-image
+          .model=${this.model}
+          .baseImageUrl=${this.baseImageUrl}
+          .isListTile=${this.isListTile}
+          .isCompactTile=${this.isCompactTile}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
+          style="--imgHeight: 100%; --imgWidth: 100%"
+        >
+        </item-image>
+        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}
+      </div>
+    `;
+    }
+    get baseClass() {
+        var _a, _b;
+        return {
+            container: true,
+            list: this.isListTile && !this.isCompactTile,
+            'list-compact': this.isListTile && this.isCompactTile,
+            collection: ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'collection', // fill the image in container
+            [this.viewSize]: true,
+            'search-image': ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'search',
+        };
+    }
+    get iconOverlayTemplate() {
+        // Only list tiles use the icon overlay
+        if (!this.isListTile)
+            return nothing;
+        const { overlayType } = this;
+        if (!overlayType)
+            return nothing;
+        return html `
+      <icon-overlay
+        class=${this.isCompactTile ? 'list-compact' : 'list-detail'}
+        .type=${this.overlayType}
+      >
+      </icon-overlay>
+    `;
+    }
+    get textOverlayTemplate() {
+        // List tiles do not require the text overlay
+        if (this.isListTile)
+            return nothing;
+        const { overlayType } = this;
+        if (!overlayType)
+            return nothing;
+        return html ` <text-overlay .type=${this.overlayType}></text-overlay> `;
+    }
+    get overlayType() {
+        var _a, _b;
+        if (this.suppressBlurring)
+            return undefined;
+        // Prioritize showing the login-required overlay if needed.
+        // Otherwise, if a content warning is required, show that overlay instead.
+        // If neither flag is present, no overlay should be shown.
+        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !this.loggedIn) {
+            return 'login-required';
+        }
+        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
+            return 'content-warning';
+        }
+        return undefined;
+    }
+    static get styles() {
+        const imageBlockBackgroundColor = css `var(--imageBlockBackgroundColor, #f1f1f4)`;
+        return css `
+      div {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        background-color: ${imageBlockBackgroundColor};
+        border-radius: 4px;
+      }
+
+      .grid {
+        height: var(--imgBlockHeight, 16rem);
+        flex: 1;
+        position: initial;
+        padding: 5px;
+        border-radius: 4px 4px 0 0;
+      }
+
+      .collection.grid,
+      .grid.search-image {
+        display: block;
+      }
+
+      /** tile-list view */
+      .list {
+        border-radius: 0;
+        background-color: var(--imageBlockListBackgroundColor, #ebebee);
+        box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
+      }
+
+      .list.desktop {
+        width: 100px;
+        max-width: 100%;
+        height: 100px;
+        max-width: 100%;
+        display: inline-block;
+        position: relative;
+        text-align: center;
+      }
+
+      .list.mobile {
+        width: var(--image-width, 90px);
+        height: 90px;
+      }
+
+      /** tile-list-compact view */
+      .container.list-compact {
+        display: block;
+        text-align: center;
+      }
+
+      .list-compact.desktop {
+        width: 45px;
+        height: 45px;
+      }
+
+      .list-compact.mobile {
+        width: 30px;
+        height: 30px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ImageBlock.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "isListTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "suppressBlurring", void 0);
+__decorate([
+    property({ type: Object })
+], ImageBlock.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ImageBlock.prototype, "viewSize", void 0);
+ImageBlock = __decorate([
+    customElement('image-block')
+], ImageBlock);
+export { ImageBlock };
+//# sourceMappingURL=image-block.js.map

package/dist/src/tiles/image-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel, TileOverlayType } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) suppressBlurring = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      container: true,\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      collection: this.model?.mediatype === 'collection', // fill the image in container\n      [this.viewSize]: true,\n      'search-image': this.model?.mediatype === 'search',\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    // Only list tiles use the icon overlay\n    if (!this.isListTile) return nothing;\n\n    const { overlayType } = this;\n    if (!overlayType) return nothing;\n\n    return html`\n      <icon-overlay\n        class=${this.isCompactTile ? 'list-compact' : 'list-detail'}\n        .type=${this.overlayType}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    // List tiles do not require the text overlay\n    if (this.isListTile) return nothing;\n\n    const { overlayType } = this;\n    if (!overlayType) return nothing;\n\n    return html` <text-overlay .type=${this.overlayType}></text-overlay> `;\n  }\n\n  private get overlayType(): TileOverlayType | undefined {\n    if (this.suppressBlurring) return undefined;\n\n    // Prioritize showing the login-required overlay if needed.\n    // Otherwise, if a content warning is required, show that overlay instead.\n    // If neither flag is present, no overlay should be shown.\n    if (this.model?.loginRequired && !this.loggedIn) {\n      return 'login-required';\n    }\n    if (this.model?.contentWarning) {\n      return 'content-warning';\n    }\n    return undefined;\n  }\n\n  static get styles(): CSSResultGroup {\n    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;\n\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        background-color: ${imageBlockBackgroundColor};\n        border-radius: 4px;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        position: initial;\n        padding: 5px;\n        border-radius: 4px 4px 0 0;\n      }\n\n      .collection.grid,\n      .grid.search-image {\n        display: block;\n      }\n\n      /** tile-list view */\n      .list {\n        border-radius: 0;\n        background-color: var(--imageBlockListBackgroundColor, #ebebee);\n        box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);\n      }\n\n      .list.desktop {\n        width: 100px;\n        max-width: 100%;\n        height: 100px;\n        max-width: 100%;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: var(--image-width, 90px);\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .container.list-compact {\n        display: block;\n        text-align: center;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/item-image.d.ts

@@ -0,0 +1,40 @@
+import { CSSResultGroup, LitElement } from 'lit';
+import type { TileModel } from '../models';
+export declare class ItemImage extends LitElement {
+    model?: TileModel;
+    baseImageUrl?: string;
+    isListTile: boolean;
+    isCompactTile: boolean;
+    loggedIn: boolean;
+    suppressBlurring: boolean;
+    private isWaveform;
+    private isNotFound;
+    private baseImage;
+    render(): import("lit").TemplateResult<1>;
+    private get imageTemplate();
+    /**
+     * Helpers
+     */
+    private get imageSrc();
+    private get notFoundSrc();
+    private get hashBasedGradient();
+    private hashStrToInt;
+    /**
+     * Classes
+     */
+    private get itemBaseClass();
+    private get itemImageClass();
+    /**
+     * Helper function to determine if account tile image
+     */
+    private get isAccountImage();
+    /**
+     * Event listener sets isWaveform true if image is waveform
+     */
+    private onLoad;
+    private onError;
+    /**
+     * CSS
+     */
+    static get styles(): CSSResultGroup;
+}