@internetarchive/collection-browser 2.7.12 → 2.7.13-alpha2

package/dist/src/tiles/grid/tile-stats.d.ts

@@ -1,11 +1,11 @@
-import { CSSResultGroup, LitElement } from 'lit';
-export declare class TileStats extends LitElement {
-    mediatype?: string;
-    itemCount?: number;
-    viewCount?: number;
-    viewLabel?: string;
-    favCount?: number;
-    commentCount?: number;
-    render(): import("lit-html").TemplateResult<1>;
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class TileStats extends LitElement {
+    mediatype?: string;
+    itemCount?: number;
+    viewCount?: number;
+    viewLabel?: string;
+    favCount?: number;
+    commentCount?: number;
+    render(): import("lit").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/grid/tile-stats.js

@@ -1,21 +1,21 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
-import { reviewsIcon } from '../../assets/img/icons/reviews';
-import { uploadIcon } from '../../assets/img/icons/upload';
-import { viewsIcon } from '../../assets/img/icons/views';
-import { srOnlyStyle } from '../../styles/sr-only';
-import { formatCount } from '../../utils/format-count';
-let TileStats = class TileStats extends LitElement {
-    render() {
-        var _a, _b, _c, _d, _e;
-        const formattedFavCount = formatCount(this.favCount, 'short', 'short');
-        const formattedReviewCount = formatCount(this.commentCount, 'short', 'short');
-        const uploadsOrViewsTitle = this.mediatype === 'account'
-            ? `${(_a = this.itemCount) !== null && _a !== void 0 ? _a : 0} uploads`
-            : `${(_b = this.viewCount) !== null && _b !== void 0 ? _b : 0} ${(_c = this.viewLabel) !== null && _c !== void 0 ? _c : 'all-time views'}`;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
+import { reviewsIcon } from '../../assets/img/icons/reviews';
+import { uploadIcon } from '../../assets/img/icons/upload';
+import { viewsIcon } from '../../assets/img/icons/views';
+import { srOnlyStyle } from '../../styles/sr-only';
+import { formatCount } from '../../utils/format-count';
+let TileStats = class TileStats extends LitElement {
+    render() {
+        var _a, _b, _c, _d, _e;
+        const formattedFavCount = formatCount(this.favCount, 'short', 'short');
+        const formattedReviewCount = formatCount(this.commentCount, 'short', 'short');
+        const uploadsOrViewsTitle = this.mediatype === 'account'
+            ? `${(_a = this.itemCount) !== null && _a !== void 0 ? _a : 0} uploads`
+            : `${(_b = this.viewCount) !== null && _b !== void 0 ? _b : 0} ${(_c = this.viewLabel) !== null && _c !== void 0 ? _c : 'all-time views'}`;
         return html `
       <div class="item-stats">
         <p class="sr-only">
@@ -30,13 +30,13 @@ let TileStats = class TileStats extends LitElement {
             ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
             <p class="status-text">
               <span class="sr-only">
-                ${this.mediatype === 'account'
-            ? msg('Uploads:')
+                ${this.mediatype === 'account'
+            ? msg('Uploads:')
             : msg('Views:')}
               </span>
-              ${formatCount(this.mediatype === 'account'
-            ? (_d = this.itemCount) !== null && _d !== void 0 ? _d : 0
-            : (_e = this.viewCount) !== null && _e !== void 0 ? _e : 0, 'short', 'short')}
+              ${formatCount(this.mediatype === 'account'
+            ? ((_d = this.itemCount) !== null && _d !== void 0 ? _d : 0)
+            : ((_e = this.viewCount) !== null && _e !== void 0 ? _e : 0), 'short', 'short')}
             </p>
           </li>
           <li class="col" title="${formattedFavCount} favorites">
@@ -55,11 +55,11 @@ let TileStats = class TileStats extends LitElement {
           </li>
         </ul>
       </div>
-    `;
-    }
-    static get styles() {
-        return [
-            srOnlyStyle,
+    `;
+    }
+    static get styles() {
+        return [
+            srOnlyStyle,
             css `
         mediatype-icon {
           --iconHeight: 25px;
@@ -121,30 +121,30 @@ let TileStats = class TileStats extends LitElement {
           display: block;
           text-align: center;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String })
-], TileStats.prototype, "mediatype", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "itemCount", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "viewCount", void 0);
-__decorate([
-    property({ type: String })
-], TileStats.prototype, "viewLabel", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "favCount", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "commentCount", void 0);
-TileStats = __decorate([
-    customElement('tile-stats')
-], TileStats);
-export { TileStats };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], TileStats.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "itemCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "viewCount", void 0);
+__decorate([
+    property({ type: String })
+], TileStats.prototype, "viewLabel", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "favCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "commentCount", void 0);
+TileStats = __decorate([
+    customElement('tile-stats')
+], TileStats);
+export { TileStats };
 //# sourceMappingURL=tile-stats.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg } from '@lit/localize';\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: String }) viewLabel?: string;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n    const formattedReviewCount = formatCount(\n      this.commentCount,\n      'short',\n      'short'\n    );\n\n    const uploadsOrViewsTitle =\n      this.mediatype === 'account'\n        ? `${this.itemCount ?? 0} uploads`\n        : `${this.viewCount ?? 0} ${this.viewLabel ?? 'all-time views'}`;\n\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">${msg('Mediatype:')}</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account'\n                  ? msg('Uploads:')\n                  : msg('Views:')}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account'\n                  ? this.itemCount ?? 0\n                  : this.viewCount ?? 0,\n                'short',\n                'short'\n              )}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedFavCount} favorites\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">${msg('Favorites:')}</span>\n              ${formattedFavCount}\n            </p>\n          </li>\n          <li class=\"col reviews\" title=\"${formattedReviewCount} reviews\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">${msg('Reviews:')}</span>\n              ${formattedReviewCount}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset; // unset all property values\n          list-style-type: none; // remove default list-style\n        }\n\n        li {\n          list-style-type: none; // remove default list-style\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg } from '@lit/localize';\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: String }) viewLabel?: string;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n    const formattedReviewCount = formatCount(\n      this.commentCount,\n      'short',\n      'short',\n    );\n\n    const uploadsOrViewsTitle =\n      this.mediatype === 'account'\n        ? `${this.itemCount ?? 0} uploads`\n        : `${this.viewCount ?? 0} ${this.viewLabel ?? 'all-time views'}`;\n\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">${msg('Mediatype:')}</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account'\n                  ? msg('Uploads:')\n                  : msg('Views:')}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account'\n                  ? (this.itemCount ?? 0)\n                  : (this.viewCount ?? 0),\n                'short',\n                'short',\n              )}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedFavCount} favorites\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">${msg('Favorites:')}</span>\n              ${formattedFavCount}\n            </p>\n          </li>\n          <li class=\"col reviews\" title=\"${formattedReviewCount} reviews\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">${msg('Reviews:')}</span>\n              ${formattedReviewCount}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset; // unset all property values\n          list-style-type: none; // remove default list-style\n        }\n\n        li {\n          list-style-type: none; // remove default list-style\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

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