@internetarchive/collection-browser 3.5.2-webdev-8178.0 → 3.5.3-alpha-webdev8156.0

package/dist/src/tiles/grid/item-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { SimpleLayoutType } from '../models';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - defaultSortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  @property({ type: Boolean }) showTvClips = false;\n\n  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\n\n  render() {\n    const itemTitle = this.model?.title;\n    const containerClasses = classMap({\n      container: true,\n      simple: this.simpleLayoutType !== 'none',\n      'stats-only': this.simpleLayoutType === 'stats-only',\n      'snippets-only': this.simpleLayoutType === 'snippets-only',\n    });\n\n    return html`\n      <div class=${containerClasses}>\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.imageBlockTemplate}\n\n            <div id=\"title\">\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\n                ${itemTitle}\n              </h3>\n            </div>\n\n            ${this.volumeIssueTemplate}\n            ${this.isSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate}\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n            ${this.reviewBlockTemplate}\n          </div>\n\n          ${this.tileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get creatorTemplate(): TemplateResult | typeof nothing {\n    const displayedCreator =\n      this.displayValueProvider.firstCreatorMatchingFilter;\n    if (!displayedCreator) return nothing;\n\n    return html`\n      <div class=\"created-by\">\n        <span class=\"truncated\" title=${displayedCreator}>\n          by&nbsp;${displayedCreator}\n        </span>\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .loggedIn=${this.loggedIn}\n        .suppressBlurring=${this.suppressBlurring}\n        .isCompactTile=${false}\n        .isListTile=${false}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n    let format: DateFormat = 'long';\n    switch (this.effectiveSort?.field) {\n      case 'date': {\n        const datePublished = this.model?.datePublished;\n        sortedValue = { field: 'published', value: datePublished };\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\n          format = 'year-only';\n        }\n        break;\n      }\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    if (!sortedValue?.value) {\n      return nothing;\n    }\n\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>${sortedValue.field} ${formattedDate}</span>\n      </div>\n    `;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.review) return nothing;\n\n    const { reviewtitle, reviewbody, stars } = this.model.review;\n    return html`\n      <review-block\n        viewsize=\"grid\"\n        title=${ifDefined(reviewtitle)}\n        body=${ifDefined(reviewbody)}\n        starRating=${ifDefined(stars)}\n      >\n      </review-block>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')\n      return nothing;\n\n    return html`\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n      </text-snippet-block>\n    `;\n  }\n\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.volume || !this.model?.issue) return nothing;\n\n    return html`\n      <div class=\"volume-issue\">\n        <span class=\"truncated\" title=\"volume|issue\">\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\n        </span>\n      </div>\n    `;\n  }\n\n  private get webArchivesCaptureDatesTemplate():\n    | TemplateResult\n    | typeof nothing {\n    if (!this.model?.captureDates || !this.model.title) return nothing;\n\n    return html`\n      <ul class=\"capture-dates\">\n        ${map(\n          this.model.captureDates,\n          date =>\n            html`<li>\n              ${this.displayValueProvider.webArchivesCaptureLink(\n                this.model!.title,\n                date,\n              )}\n            </li>`,\n        )}\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for the stats row along the bottom of the tile.\n   */\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\n    if (this.simpleLayoutType === 'snippets-only') return nothing;\n\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\n    const [viewCount, viewLabel] =\n      effectiveSort?.field === 'week'\n        ? [this.model?.weeklyViewCount, 'weekly views']\n        : [this.model?.viewCount, 'all-time views'];\n\n    return html`\n      <tile-stats\n        .model=${this.model}\n        .mediatype=${this.model?.mediatype}\n        .viewCount=${viewCount}\n        .viewLabel=${viewLabel}\n        .favCount=${this.model?.favCount}\n        .commentCount=${this.model?.commentCount}\n        .tvClipCount=${this.model?.tvClipCount}\n        .showTvClips=${this.showTvClips}\n      >\n      </tile-stats>\n    `;\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.effectiveSort?.field as string,\n    );\n  }\n\n  /**\n   * Returns the active sort param if one is set, or the default sort param otherwise.\n   */\n  private get effectiveSort(): SortParam | null {\n    return this.sortParam ?? this.defaultSortParam;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  private infoButtonPressed(e: PointerEvent): void {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        a:link {\n          text-decoration: none;\n          color: var(--ia-theme-link-color, #4b64ff);\n        }\n        a:hover {\n          text-decoration: underline;\n        }\n\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .simple #title > .truncated {\n          -webkit-line-clamp: 2;\n        }\n\n        .simple .created-by > .truncated,\n        .simple .date-sorted-by > .truncated,\n        .simple .volume-issue > .truncated {\n          -webkit-line-clamp: 1;\n        }\n\n        .simple.snippets-only .item-info {\n          padding-bottom: 5px;\n        }\n\n        .simple.snippets-only text-snippet-block {\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\n        }\n\n        .capture-dates {\n          margin: 0;\n          padding: 0 5px;\n          list-style-type: none;\n        }\n\n        review-block,\n        text-snippet-block {\n          --containerLeftMargin: 5px;\n          --containerTopMargin: 5px;\n        }\n\n        /**\n         * iOS Safari long-press on tiles (to bring up hover pane)\n         * gets messy without this\n         */\n        @media screen and (pointer: coarse) and (hover: none) {\n          .container {\n            -webkit-touch-callout: none;\n          }\n\n          .truncated {\n            -webkit-touch-callout: default;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { map } from 'lit/directives/map.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { msg } from '@lit/localize';\r\n\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\r\nimport { SimpleLayoutType } from '../models';\r\n\r\nimport '../image-block';\r\nimport '../review-block';\r\nimport '../text-snippet-block';\r\nimport '../item-image';\r\nimport '../tile-mediatype-icon';\r\nimport './tile-stats';\r\n\r\n@customElement('item-tile')\r\nexport class ItemTile extends BaseTileComponent {\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: Boolean }) showInfoButton = false;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n  render() {\r\n    const itemTitle = this.model?.title;\r\n    const containerClasses = classMap({\r\n      container: true,\r\n      simple: this.simpleLayoutType !== 'none',\r\n      'stats-only': this.simpleLayoutType === 'stats-only',\r\n      'snippets-only': this.simpleLayoutType === 'snippets-only',\r\n    });\r\n\r\n    return html`\r\n      <div class=${containerClasses}>\r\n        ${this.infoButtonTemplate}\r\n        <div class=\"tile-details\">\r\n          <div class=\"item-info\">\r\n            ${this.imageBlockTemplate}\r\n\r\n            <div id=\"title\">\r\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\r\n                ${itemTitle}\r\n              </h3>\r\n            </div>\r\n\r\n            ${this.volumeIssueTemplate}\r\n            ${this.isSortedByDate\r\n              ? this.sortedDateInfoTemplate\r\n              : this.creatorTemplate}\r\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\r\n            ${this.reviewBlockTemplate}\r\n          </div>\r\n\r\n          ${this.tileStatsTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Templates\r\n   */\r\n  private get creatorTemplate(): TemplateResult | typeof nothing {\r\n    const displayedCreator =\r\n      this.displayValueProvider.firstCreatorMatchingFilter;\r\n    if (!displayedCreator) return nothing;\r\n\r\n    return html`\r\n      <div class=\"created-by\">\r\n        <span class=\"truncated\" title=${displayedCreator}>\r\n          by&nbsp;${displayedCreator}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get imageBlockTemplate(): TemplateResult {\r\n    return html`\r\n      <image-block\r\n        .model=${this.model}\r\n        .baseImageUrl=${this.baseImageUrl}\r\n        .loggedIn=${this.loggedIn}\r\n        .suppressBlurring=${this.suppressBlurring}\r\n        .isCompactTile=${false}\r\n        .isListTile=${false}\r\n        .viewSize=${'grid'}\r\n      >\r\n      </image-block>\r\n    `;\r\n  }\r\n\r\n  private get sortedDateInfoTemplate() {\r\n    let sortedValue;\r\n    let format: DateFormat = 'long';\r\n    switch (this.effectiveSort?.field) {\r\n      case 'date': {\r\n        const datePublished = this.model?.datePublished;\r\n        sortedValue = { field: 'published', value: datePublished };\r\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\r\n          format = 'year-only';\r\n        }\r\n        break;\r\n      }\r\n      case 'reviewdate':\r\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\r\n        break;\r\n      case 'addeddate':\r\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\r\n        break;\r\n      case 'publicdate':\r\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (!sortedValue?.value) {\r\n      return nothing;\r\n    }\r\n\r\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\r\n    return html`\r\n      <div class=\"date-sorted-by truncated\">\r\n        <span>${sortedValue.field} ${formattedDate}</span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\r\n    // &#9432; is an information icon\r\n    return this.showInfoButton\r\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\r\n          &#9432;\r\n          <span class=\"sr-only\">${msg('More info')}</span>\r\n        </button>`\r\n      : nothing;\r\n  }\r\n\r\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.review) return nothing;\r\n\r\n    const { reviewtitle, reviewbody, stars } = this.model.review;\r\n    return html`\r\n      <review-block\r\n        viewsize=\"grid\"\r\n        title=${ifDefined(reviewtitle)}\r\n        body=${ifDefined(reviewbody)}\r\n        starRating=${ifDefined(stars)}\r\n      >\r\n      </review-block>\r\n    `;\r\n  }\r\n\r\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')\r\n      return nothing;\r\n\r\n    return html`\r\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\r\n      </text-snippet-block>\r\n    `;\r\n  }\r\n\r\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.volume || !this.model?.issue) return nothing;\r\n\r\n    return html`\r\n      <div class=\"volume-issue\">\r\n        <span class=\"truncated\" title=\"volume|issue\">\r\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get webArchivesCaptureDatesTemplate():\r\n    | TemplateResult\r\n    | typeof nothing {\r\n    if (!this.model?.captureDates || !this.model.title) return nothing;\r\n\r\n    return html`\r\n      <ul class=\"capture-dates\">\r\n        ${map(\r\n          this.model.captureDates,\r\n          date =>\r\n            html`<li>\r\n              ${this.displayValueProvider.webArchivesCaptureLink(\r\n                this.model!.title,\r\n                date,\r\n              )}\r\n            </li>`,\r\n        )}\r\n      </ul>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the stats row along the bottom of the tile.\r\n   */\r\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\r\n    if (this.simpleLayoutType === 'snippets-only') return nothing;\r\n\r\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\r\n    const [viewCount, viewLabel] =\r\n      effectiveSort?.field === 'week'\r\n        ? [this.model?.weeklyViewCount, 'weekly views']\r\n        : [this.model?.viewCount, 'all-time views'];\r\n\r\n    return html`\r\n      <tile-stats\r\n        .model=${this.model}\r\n        .mediatype=${this.model?.mediatype}\r\n        .viewCount=${viewCount}\r\n        .viewLabel=${viewLabel}\r\n        .favCount=${this.model?.favCount}\r\n        .commentCount=${this.model?.commentCount}\r\n        .tvClipCount=${this.model?.tvClipCount}\r\n        .showTvClips=${this.showTvClips}\r\n      >\r\n      </tile-stats>\r\n    `;\r\n  }\r\n\r\n  private get isSortedByDate(): boolean {\r\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n      this.effectiveSort?.field as string,\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the active sort param if one is set, or the default sort param otherwise.\r\n   */\r\n  private get effectiveSort(): SortParam | null {\r\n    return this.sortParam ?? this.defaultSortParam;\r\n  }\r\n\r\n  private get hasSnippets(): boolean {\r\n    return !!this.model?.snippets?.length;\r\n  }\r\n\r\n  private infoButtonPressed(e: PointerEvent): void {\r\n    e.preventDefault();\r\n    const event = new CustomEvent<{ x: number; y: number }>(\r\n      'infoButtonPressed',\r\n      { detail: { x: e.clientX, y: e.clientY } },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * CSS\r\n   */\r\n  static get styles(): CSSResultGroup {\r\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\r\n\r\n    return [\r\n      baseTileStyles,\r\n      css`\r\n        a:link {\r\n          text-decoration: none;\r\n          color: var(--ia-theme-link-color, #4b64ff);\r\n        }\r\n        a:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        .container {\r\n          border: 1px solid ${tileBorderColor};\r\n        }\r\n\r\n        .simple #title > .truncated {\r\n          -webkit-line-clamp: 2;\r\n        }\r\n\r\n        .simple .created-by > .truncated,\r\n        .simple .date-sorted-by > .truncated,\r\n        .simple .volume-issue > .truncated {\r\n          -webkit-line-clamp: 1;\r\n        }\r\n\r\n        .simple.snippets-only .item-info {\r\n          padding-bottom: 5px;\r\n        }\r\n\r\n        .simple.snippets-only text-snippet-block {\r\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\r\n        }\r\n\r\n        .capture-dates {\r\n          margin: 0;\r\n          padding: 0 5px;\r\n          list-style-type: none;\r\n        }\r\n\r\n        review-block,\r\n        text-snippet-block {\r\n          --containerLeftMargin: 5px;\r\n          --containerTopMargin: 5px;\r\n        }\r\n\r\n        /**\r\n         * iOS Safari long-press on tiles (to bring up hover pane)\r\n         * gets messy without this\r\n         */\r\n        @media screen and (pointer: coarse) and (hover: none) {\r\n          .container {\r\n            -webkit-touch-callout: none;\r\n          }\r\n\r\n          .truncated {\r\n            -webkit-touch-callout: default;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

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

@@ -122,6 +122,13 @@ export declare class HoverPaneController implements HoverPaneControllerInterface
     private forceTouchBackdrop;
     /** A record of the last mouse position on the host element, for positioning the hover pane */
     private lastPointerClientPos;
+    /**
+     * A flag to track whether the host element is being clicked by a pointer device, so that we
+     * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent
+     * the hover pane from appearing immediately at its `host` positioning on click, which can
+     * obstruct the host element itself (due to the ordering of events fired).
+     */
+    private clicking;
     constructor(
     /** The host element to which this controller should attach listeners */
     host: ReactiveControllerHost & HoverPaneProviderInterface & HTMLElement, 
@@ -171,6 +178,7 @@ export declare class HoverPaneController implements HoverPaneControllerInterface
     private detachListeners;
     private handleFocus;
     private handleBlur;
+    private handlePointerDown;
     private handleKeyDown;
     private handleKeyUp;
     /**

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

@@ -56,18 +56,29 @@ export class HoverPaneController {
         this.forceTouchBackdrop = false;
         /** A record of the last mouse position on the host element, for positioning the hover pane */
         this.lastPointerClientPos = { x: 0, y: 0 };
+        /**
+         * A flag to track whether the host element is being clicked by a pointer device, so that we
+         * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent
+         * the hover pane from appearing immediately at its `host` positioning on click, which can
+         * obstruct the host element itself (due to the ordering of events fired).
+         */
+        this.clicking = false;
         this.handleFocus = () => {
-            if (this.hoverPaneState === 'hidden') {
+            if (!this.clicking && this.hoverPaneState === 'hidden') {
                 this.showHoverPane({
                     anchor: 'host',
                 });
             }
+            this.clicking = false;
         };
         this.handleBlur = () => {
             if (this.hoverPaneState !== 'hidden') {
                 this.fadeOutHoverPane();
             }
         };
+        this.handlePointerDown = () => {
+            this.clicking = true;
+        };
         this.handleKeyDown = (e) => {
             if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
                 this.hoverPaneState !== 'hidden') {
@@ -204,25 +215,25 @@ export class HoverPaneController {
     getTemplate() {
         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=${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>
+            ? 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;
     }
@@ -247,15 +258,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;
     }
@@ -340,6 +351,7 @@ export class HoverPaneController {
         // keyboard navigation listeners
         this.host.addEventListener('focus', this.handleFocus);
         this.host.addEventListener('blur', this.handleBlur);
+        this.host.addEventListener('pointerdown', this.handlePointerDown);
         this.host.addEventListener('keyup', this.handleKeyUp);
         this.host.addEventListener('keydown', this.handleKeyDown);
         if (this.isHoverEnabled) {

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';\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"]}
+{"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  /**\r\n   * A flag to track whether the host element is being clicked by a pointer device, so that we\r\n   * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent\r\n   * the hover pane from appearing immediately at its `host` positioning on click, which can\r\n   * obstruct the host element itself (due to the ordering of events fired).\r\n   */\r\n  private clicking = false;\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('pointerdown', this.handlePointerDown);\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.clicking && this.hoverPaneState === 'hidden') {\r\n      this.showHoverPane({\r\n        anchor: 'host',\r\n      });\r\n    }\r\n    this.clicking = false;\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 handlePointerDown = (): void => {\r\n    this.clicking = true;\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/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/tiles/models.ts"],"names":[],"mappings":"","sourcesContent":["export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/tiles/models.ts"],"names":[],"mappings":"","sourcesContent":["export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';\r\n"]}