@internetarchive/collection-browser 4.8.1-webdev-9227.4 → 4.9.1-webdev-9670.0

package/dist/src/tiles/tile-dispatcher.js

@@ -4,7 +4,7 @@ import { css, html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { localized, msg } from '@lit/localize';
+import { msg } from '@lit/localize';
 import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
@@ -17,6 +17,7 @@ import { BaseTileComponent } from './base-tile-component';
 import { HoverPaneController, } from './hover/hover-pane-controller';
 import { srOnlyStyle } from '../styles/sr-only';
 import { tileActionStyles } from '../styles/tile-action-styles';
+import { PREVIEW_PANE_DELAY_MS, TilePreviewController, } from './preview/tile-preview-controller';
 let TileDispatcher = class TileDispatcher extends BaseTileComponent {
     constructor() {
         /*
@@ -43,6 +44,13 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         this.layoutType = 'default';
         /** Whether this tile should include a hover pane at all (for applicable tile modes) */
         this.enableHoverPane = false;
+        /** Whether hovering, focusing or long-pressing this tile starts a live preview */
+        this.enableTilePreview = false;
+        this.tilePreviewOptions = {};
+        this.previewController = new TilePreviewController(this, {
+            enabled: () => this.shouldPreview,
+        });
+        this.manageCheckTitle = msg('Remove this item from the list');
         /**
          * When the mouse enters the grid-mode tile actions area, dispatch a
          * synthetic mouseleave on the host to cancel the hover pane's show timer
@@ -89,6 +97,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
             this.hoverPaneController = new HoverPaneController(this, {
                 mobileBreakpoint: this.mobileBreakpoint,
                 enableLongPress: false,
+                // A playing preview gets the tile to itself; the info pane follows later.
+                showDelay: () => (this.shouldPreview ? PREVIEW_PANE_DELAY_MS : 300),
             });
         }
     }
@@ -116,7 +126,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         return html `
       <a
         href=${this.linkTileHref}
-        aria-label=${this.model?.title ?? msg('Untitled item')}
+        aria-label=${this.model?.title ?? 'Untitled item'}
         aria-describedby="link-aria-description"
         aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}
         title=${this.shouldPrepareHoverPane
@@ -150,8 +160,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
       <div class="manage-check">
         <input
           type="checkbox"
-          title=${this.manageCheckTitle ??
-            msg('Remove this item from the list')}
+          title=${this.manageCheckTitle}
           ?checked=${this.model?.checked}
           @change=${this.handleLinkClicked}
         />
@@ -170,6 +179,18 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
             !this.model?.captureDates // don't show hover panes on web archive tiles
         );
     }
+    /** Only plain item tiles preview: not collections, accounts, searches or gated items. */
+    get shouldPreview() {
+        const { model } = this;
+        return (this.enableTilePreview &&
+            this.tileDisplayMode === 'grid' &&
+            !this.isManageView &&
+            !!model?.identifier &&
+            !['collection', 'account', 'search'].includes(model.mediatype) &&
+            !model.captureDates &&
+            (this.suppressBlurring ||
+                (!model.contentWarning && !(model.loginRequired && !this.loggedIn))));
+    }
     get isHoverEnabled() {
         return window.matchMedia('(hover: hover)').matches;
     }
@@ -210,6 +231,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         });
     }
     updated(props) {
+        if (!this.shouldPreview)
+            this.previewController.deactivate();
         if (props.has('resizeObserver')) {
             const previousObserver = props.get('resizeObserver');
             this.stopResizeObservation(previousObserver);
@@ -342,6 +365,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${this.shouldShowInfoButton}
               ?useLocalTime=${this.useLocalTime}
+              ?previewActive=${this.previewController.active}
+              .previewOptions=${this.tilePreviewOptions}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </item-tile>`;
@@ -557,6 +582,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TileDispatcher.prototype, "enableHoverPane", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "enableTilePreview", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "tilePreviewOptions", void 0);
 __decorate([
     property({ type: String })
 ], TileDispatcher.prototype, "manageCheckTitle", void 0);
@@ -570,8 +601,7 @@ __decorate([
     query('.tile-link')
 ], TileDispatcher.prototype, "tileLinkElement", void 0);
 TileDispatcher = TileDispatcher_1 = __decorate([
-    customElement('tile-dispatcher'),
-    localized()
+    customElement('tile-dispatcher')
 ], TileDispatcher);
 export { TileDispatcher };
 //# sourceMappingURL=tile-dispatcher.js.map

package/dist/src/tiles/tile-dispatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { localized, msg } from '@lit/localize';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport { LayoutType } from './models';\nimport {\n  HoverPaneController,\n  HoverPaneControllerInterface,\n  HoverPaneProperties,\n  HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\nimport { srOnlyStyle } from '../styles/sr-only';\nimport { tileActionStyles } from '../styles/tile-action-styles';\n\n@customElement('tile-dispatcher')\n@localized()\nexport class TileDispatcher\n  extends BaseTileComponent\n  implements\n    SharedResizeObserverResizeHandlerInterface,\n    HoverPaneProviderInterface\n{\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - tileActions: TileAction[] = [];\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   *  - suppressTileBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Boolean }) isManageView = false;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @property({ type: Boolean }) showTvClips = false;\n\n  /** What type of simplified layout to use in grid mode, if any */\n  @property({ type: String }) layoutType: LayoutType = 'default';\n\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n  @property({ type: Boolean }) enableHoverPane = false;\n\n  /** Title for the manage checkbox. Defaults to a localized \"Remove this item from the list\". */\n  @property({ type: String }) manageCheckTitle?: string;\n\n  private hoverPaneController?: HoverPaneControllerInterface;\n\n  @query('#container')\n  private container!: HTMLDivElement;\n\n  @query('tile-hover-pane')\n  private hoverPane?: TileHoverPane;\n\n  @query('.tile-link')\n  private tileLinkElement?: HTMLAnchorElement;\n\n  acquireFocus(): void {\n    this.tileLinkElement?.focus();\n  }\n\n  releaseFocus(): void {\n    this.tileLinkElement?.blur();\n  }\n\n  /** Maps each display mode to whether hover panes should appear in that mode */\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n    TileDisplayMode,\n    boolean\n  > = {\n    grid: true,\n    'list-compact': true,\n    'list-detail': false,\n    'list-header': false,\n  };\n\n  render() {\n    const isGridMode = this.tileDisplayMode === 'grid';\n    const hasTileActions = isGridMode && this.showGridTileActions;\n    const hoverPaneTemplate =\n      this.hoverPaneController?.getTemplate() ?? nothing;\n    const containerClasses = classMap({\n      hoverable: isGridMode,\n      'has-tile-actions': hasTileActions,\n    });\n    return html`\n      <div id=\"container\" class=${containerClasses}>\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n        ${this.gridTileActionsTemplate} ${this.manageCheckTemplate}\n        ${hoverPaneTemplate}\n      </div>\n    `;\n  }\n\n  protected firstUpdated(): void {\n    if (this.shouldPrepareHoverPane) {\n      this.hoverPaneController = new HoverPaneController(this, {\n        mobileBreakpoint: this.mobileBreakpoint,\n        enableLongPress: false,\n      });\n    }\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n      this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam ?? defaultSortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n        .tileActions=${this.tileActions}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=${this.linkTileHref}\n        aria-label=${this.model?.title ?? msg('Untitled item')}\n        aria-describedby=\"link-aria-description\"\n        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\n        title=${this.shouldPrepareHoverPane\n          ? nothing // Don't show title tooltips when we have the tile info popups\n          : ifDefined(this.model?.title)}\n        @click=${this.handleLinkClicked}\n        @contextmenu=${this.handleLinkContextMenu}\n        class=\"tile-link\"\n      >\n        ${this.tile}\n      </a>\n      <div id=\"link-aria-description\" class=\"sr-only\">\n        ${msg('Press Down Arrow to preview item details')}\n      </div>\n    `;\n  }\n\n  private get linkTileHref(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    return this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      this.model.mediatype === 'collection',\n    );\n  }\n\n  private get manageCheckTemplate() {\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n    return html`\n      <div class=\"manage-check\">\n        <input\n          type=\"checkbox\"\n          title=${this.manageCheckTitle ??\n          msg('Remove this item from the list')}\n          ?checked=${this.model?.checked}\n          @change=${this.handleLinkClicked}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Whether hover pane behavior should be prepared for this tile\n   * (e.g., whether mouse listeners should be attached, etc.)\n   */\n  private get shouldPrepareHoverPane(): boolean {\n    return (\n      this.enableHoverPane &&\n      !!this.tileDisplayMode &&\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n      !this.model?.captureDates // don't show hover panes on web archive tiles\n    );\n  }\n\n  private get isHoverEnabled(): boolean {\n    return window.matchMedia('(hover: hover)').matches;\n  }\n\n  /**\n   * Whether the info button should be shown on this tile.\n   * Only shown on touch/non-hover devices where a hover pane is available,\n   * so the button always has something to toggle.\n   */\n  private get shouldShowInfoButton(): boolean {\n    return !this.isHoverEnabled && this.shouldPrepareHoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPane(): TileHoverPane | undefined {\n    return this.hoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPaneProps(): HoverPaneProperties {\n    return this;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver',\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  /**\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n   * In manage view, it also checks/unchecks the tile.\n   */\n  private handleLinkClicked(e: Event): void {\n    if (this.isManageView) {\n      e.preventDefault();\n      if (this.model) this.model.checked = !this.model.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('resultSelected', { detail: this.model }),\n    );\n  }\n\n  /**\n   * Handler for when the tile link is right-clicked.\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n   */\n  private handleLinkContextMenu(e: Event): void {\n    if (this.isManageView && this.linkTileHref !== nothing) {\n      e.preventDefault();\n      window.open(this.linkTileHref, '_blank');\n    }\n  }\n\n  private tileInfoButtonPressed(\n    e: CustomEvent<{ x: number; y: number }>,\n  ): void {\n    this.hoverPaneController?.toggleHoverPane({\n      coords: e.detail,\n      enableTouchBackdrop: true,\n    });\n  }\n\n  /** Whether tile action buttons should be rendered in grid mode */\n  private get showGridTileActions(): boolean {\n    return (\n      this.tileActions.length > 0 &&\n      !this.isManageView &&\n      this.tileDisplayMode === 'grid'\n    );\n  }\n\n  /**\n   * Template for the grid-mode action buttons. Rendered alongside the inner\n   * tile link inside the dispatcher's shadow root so the action buttons can\n   * suppress the hover pane on hover.\n   */\n  private get gridTileActionsTemplate() {\n    if (!this.showGridTileActions) return nothing;\n\n    return html`\n      <div\n        class=\"tile-actions grid-tile-actions\"\n        @mouseenter=${this.handleGridActionsMouseEnter}\n        @mousemove=${(e: Event) => e.stopPropagation()}\n      >\n        ${this.tileActions.map(\n          action => html`\n            <button\n              class=\"tile-action-btn\"\n              @click=${(e: Event) => this.handleTileActionClick(e, action)}\n            >\n              ${action.label}\n            </button>\n          `,\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * When the mouse enters the grid-mode tile actions area, dispatch a\n   * synthetic mouseleave on the host to cancel the hover pane's show timer\n   * and hide any visible pane.\n   */\n  private handleGridActionsMouseEnter = (): void => {\n    this.dispatchEvent(new MouseEvent('mouseleave', { bubbles: false }));\n  };\n\n  private get tile() {\n    const {\n      model,\n      collectionPagePath,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      creatorFilter,\n      mobileBreakpoint,\n      defaultSortParam,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              .layoutType=${this.layoutType}\n              ?showInfoButton=${this.shouldShowInfoButton}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${this.shouldShowInfoButton}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </account-tile>`;\n          case 'search':\n            return html`<search-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${false}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </search-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam}\n              .defaultSortParam=${defaultSortParam}\n              .creatorFilter=${creatorFilter}\n              .loggedIn=${this.loggedIn}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              .layoutType=${this.layoutType}\n              ?showTvClips=${this.showTvClips}\n              ?showInfoButton=${this.shouldShowInfoButton}\n              ?useLocalTime=${this.useLocalTime}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .defaultSortParam=${defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          .tileActions=${this.isManageView ? [] : this.tileActions}\n          ?useLocalTime=${this.useLocalTime}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .collectionTitles=${this.collectionTitles}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .defaultSortParam=${defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          .tileActions=${this.isManageView ? [] : this.tileActions}\n          ?useLocalTime=${this.useLocalTime}\n        >\n        </tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return [\n      srOnlyStyle,\n      tileActionStyles,\n      css`\n        :host {\n          display: block;\n          height: 100%;\n        }\n\n        collection-tile {\n          --tileBorderColor: #555555;\n          --tileBackgroundColor: #666666;\n          --imageBlockBackgroundColor: #666666;\n        }\n\n        account-tile {\n          --tileBorderColor: #dddddd;\n          --imageBlockBackgroundColor: #fcf5e6;\n        }\n\n        item-tile {\n          --tileBorderColor: #dddddd;\n          --imageBlockBackgroundColor: #f1f1f4;\n        }\n\n        search-tile {\n          --tileBorderColor: #555555;\n          --tileBackgroundColor: #666666;\n          --imageBlockBackgroundColor: #666666;\n          --iconFillColor: #2c2c2c;\n        }\n\n        #container {\n          position: relative;\n          height: 100%;\n          border-radius: 4px;\n        }\n\n        /*\n         * When tile actions are present, the container takes on the role of\n         * the tile's visual card so the tile content and action row appear\n         * as a single unified element. The inner tile's own shadow/radius\n         * are disabled via CSS variable overrides to avoid visual\n         * duplication, and the action row sits as a footer inside the same\n         * card.\n         */\n        #container.has-tile-actions {\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n          box-shadow: var(--tileShadow, 1px 1px 2px 0);\n          --tileBoxShadow: none;\n          --tileCornerRadius: 0;\n        }\n\n        #container.has-tile-actions .tile-link {\n          flex: 1;\n          min-height: 0;\n          overflow: hidden;\n          border-radius: 0;\n        }\n\n        /* Normal hover shadow lives on the inner anchor for plain tiles */\n        #container.hoverable:not(.has-tile-actions) a:focus,\n        #container.hoverable:not(.has-tile-actions) a:hover {\n          box-shadow: var(\n            --tileHoverBoxShadow,\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\n          );\n          transition: box-shadow 0.1s ease;\n        }\n\n        /*\n         * When the container owns the card visuals, the hover shadow needs\n         * to move up to the container so it wraps the action row too.\n         */\n        #container.hoverable.has-tile-actions:hover {\n          box-shadow: var(\n            --tileHoverBoxShadow,\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\n          );\n          transition: box-shadow 0.1s ease;\n        }\n\n        a {\n          display: block;\n          height: 100%;\n          color: unset;\n          text-decoration: none;\n          transition: transform 0.05s ease;\n          border-radius: 4px;\n          outline: none;\n        }\n\n        a :first-child {\n          display: block;\n          height: 100%;\n        }\n\n        .manage-check {\n          position: absolute;\n          right: 0;\n          top: 0;\n          border: 5px solid #2c2c2c;\n          border-radius: 3px;\n          background-color: #2c2c2c;\n          z-index: 1;\n        }\n\n        .manage-check > input[type='checkbox'] {\n          display: block;\n          margin: 0;\n        }\n\n        #touch-backdrop {\n          position: fixed;\n          width: 100vw;\n          height: 100vh;\n          top: 0;\n          left: 0;\n          z-index: 2;\n          background: transparent;\n        }\n\n        tile-hover-pane {\n          position: absolute;\n          top: 0;\n          left: -9999px;\n          z-index: 2;\n        }\n\n        /*\n         * Grid-mode action row sits flush against the bottom of the card —\n         * the buttons' own borders form the visible bottom edge. The outer\n         * buttons get rounded bottom corners to match the container so the\n         * red border traces cleanly around the card's bottom corners.\n         */\n        .grid-tile-actions .tile-action-btn:first-child {\n          border-bottom-left-radius: 4px;\n        }\n\n        .grid-tile-actions .tile-action-btn:last-child {\n          border-bottom-right-radius: 4px;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport { LayoutType } from './models';\nimport {\n  HoverPaneController,\n  HoverPaneControllerInterface,\n  HoverPaneProperties,\n  HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\nimport { srOnlyStyle } from '../styles/sr-only';\nimport { tileActionStyles } from '../styles/tile-action-styles';\nimport {\n  PREVIEW_PANE_DELAY_MS,\n  TilePreviewController,\n} from './preview/tile-preview-controller';\nimport type { TilePreviewOptions } from './preview/tile-preview-media';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends BaseTileComponent\n  implements\n    SharedResizeObserverResizeHandlerInterface,\n    HoverPaneProviderInterface\n{\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - tileActions: TileAction[] = [];\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   *  - suppressTileBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Boolean }) isManageView = false;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @property({ type: Boolean }) showTvClips = false;\n\n  /** What type of simplified layout to use in grid mode, if any */\n  @property({ type: String }) layoutType: LayoutType = 'default';\n\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n  @property({ type: Boolean }) enableHoverPane = false;\n\n  /** Whether hovering, focusing or long-pressing this tile starts a live preview */\n  @property({ type: Boolean }) enableTilePreview = false;\n\n  @property({ type: Object }) tilePreviewOptions: TilePreviewOptions = {};\n\n  private previewController = new TilePreviewController(this, {\n    enabled: () => this.shouldPreview,\n  });\n\n  @property({ type: String }) manageCheckTitle = msg(\n    'Remove this item from the list',\n  );\n\n  private hoverPaneController?: HoverPaneControllerInterface;\n\n  @query('#container')\n  private container!: HTMLDivElement;\n\n  @query('tile-hover-pane')\n  private hoverPane?: TileHoverPane;\n\n  @query('.tile-link')\n  private tileLinkElement?: HTMLAnchorElement;\n\n  acquireFocus(): void {\n    this.tileLinkElement?.focus();\n  }\n\n  releaseFocus(): void {\n    this.tileLinkElement?.blur();\n  }\n\n  /** Maps each display mode to whether hover panes should appear in that mode */\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n    TileDisplayMode,\n    boolean\n  > = {\n    grid: true,\n    'list-compact': true,\n    'list-detail': false,\n    'list-header': false,\n  };\n\n  render() {\n    const isGridMode = this.tileDisplayMode === 'grid';\n    const hasTileActions = isGridMode && this.showGridTileActions;\n    const hoverPaneTemplate =\n      this.hoverPaneController?.getTemplate() ?? nothing;\n    const containerClasses = classMap({\n      hoverable: isGridMode,\n      'has-tile-actions': hasTileActions,\n    });\n    return html`\n      <div id=\"container\" class=${containerClasses}>\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n        ${this.gridTileActionsTemplate} ${this.manageCheckTemplate}\n        ${hoverPaneTemplate}\n      </div>\n    `;\n  }\n\n  protected firstUpdated(): void {\n    if (this.shouldPrepareHoverPane) {\n      this.hoverPaneController = new HoverPaneController(this, {\n        mobileBreakpoint: this.mobileBreakpoint,\n        enableLongPress: false,\n        // A playing preview gets the tile to itself; the info pane follows later.\n        showDelay: () => (this.shouldPreview ? PREVIEW_PANE_DELAY_MS : 300),\n      });\n    }\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n      this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam ?? defaultSortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n        .tileActions=${this.tileActions}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=${this.linkTileHref}\n        aria-label=${this.model?.title ?? 'Untitled item'}\n        aria-describedby=\"link-aria-description\"\n        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\n        title=${this.shouldPrepareHoverPane\n          ? nothing // Don't show title tooltips when we have the tile info popups\n          : ifDefined(this.model?.title)}\n        @click=${this.handleLinkClicked}\n        @contextmenu=${this.handleLinkContextMenu}\n        class=\"tile-link\"\n      >\n        ${this.tile}\n      </a>\n      <div id=\"link-aria-description\" class=\"sr-only\">\n        ${msg('Press Down Arrow to preview item details')}\n      </div>\n    `;\n  }\n\n  private get linkTileHref(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    return this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      this.model.mediatype === 'collection',\n    );\n  }\n\n  private get manageCheckTemplate() {\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n    return html`\n      <div class=\"manage-check\">\n        <input\n          type=\"checkbox\"\n          title=${this.manageCheckTitle}\n          ?checked=${this.model?.checked}\n          @change=${this.handleLinkClicked}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Whether hover pane behavior should be prepared for this tile\n   * (e.g., whether mouse listeners should be attached, etc.)\n   */\n  private get shouldPrepareHoverPane(): boolean {\n    return (\n      this.enableHoverPane &&\n      !!this.tileDisplayMode &&\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n      !this.model?.captureDates // don't show hover panes on web archive tiles\n    );\n  }\n\n  /** Only plain item tiles preview: not collections, accounts, searches or gated items. */\n  private get shouldPreview(): boolean {\n    const { model } = this;\n    return (\n      this.enableTilePreview &&\n      this.tileDisplayMode === 'grid' &&\n      !this.isManageView &&\n      !!model?.identifier &&\n      !['collection', 'account', 'search'].includes(model.mediatype) &&\n      !model.captureDates &&\n      (this.suppressBlurring ||\n        (!model.contentWarning && !(model.loginRequired && !this.loggedIn)))\n    );\n  }\n\n  private get isHoverEnabled(): boolean {\n    return window.matchMedia('(hover: hover)').matches;\n  }\n\n  /**\n   * Whether the info button should be shown on this tile.\n   * Only shown on touch/non-hover devices where a hover pane is available,\n   * so the button always has something to toggle.\n   */\n  private get shouldShowInfoButton(): boolean {\n    return !this.isHoverEnabled && this.shouldPrepareHoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPane(): TileHoverPane | undefined {\n    return this.hoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPaneProps(): HoverPaneProperties {\n    return this;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (!this.shouldPreview) this.previewController.deactivate();\n\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver',\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  /**\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n   * In manage view, it also checks/unchecks the tile.\n   */\n  private handleLinkClicked(e: Event): void {\n    if (this.isManageView) {\n      e.preventDefault();\n      if (this.model) this.model.checked = !this.model.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('resultSelected', { detail: this.model }),\n    );\n  }\n\n  /**\n   * Handler for when the tile link is right-clicked.\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n   */\n  private handleLinkContextMenu(e: Event): void {\n    if (this.isManageView && this.linkTileHref !== nothing) {\n      e.preventDefault();\n      window.open(this.linkTileHref, '_blank');\n    }\n  }\n\n  private tileInfoButtonPressed(\n    e: CustomEvent<{ x: number; y: number }>,\n  ): void {\n    this.hoverPaneController?.toggleHoverPane({\n      coords: e.detail,\n      enableTouchBackdrop: true,\n    });\n  }\n\n  /** Whether tile action buttons should be rendered in grid mode */\n  private get showGridTileActions(): boolean {\n    return (\n      this.tileActions.length > 0 &&\n      !this.isManageView &&\n      this.tileDisplayMode === 'grid'\n    );\n  }\n\n  /**\n   * Template for the grid-mode action buttons. Rendered alongside the inner\n   * tile link inside the dispatcher's shadow root so the action buttons can\n   * suppress the hover pane on hover.\n   */\n  private get gridTileActionsTemplate() {\n    if (!this.showGridTileActions) return nothing;\n\n    return html`\n      <div\n        class=\"tile-actions grid-tile-actions\"\n        @mouseenter=${this.handleGridActionsMouseEnter}\n        @mousemove=${(e: Event) => e.stopPropagation()}\n      >\n        ${this.tileActions.map(\n          action => html`\n            <button\n              class=\"tile-action-btn\"\n              @click=${(e: Event) => this.handleTileActionClick(e, action)}\n            >\n              ${action.label}\n            </button>\n          `,\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * When the mouse enters the grid-mode tile actions area, dispatch a\n   * synthetic mouseleave on the host to cancel the hover pane's show timer\n   * and hide any visible pane.\n   */\n  private handleGridActionsMouseEnter = (): void => {\n    this.dispatchEvent(new MouseEvent('mouseleave', { bubbles: false }));\n  };\n\n  private get tile() {\n    const {\n      model,\n      collectionPagePath,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      creatorFilter,\n      mobileBreakpoint,\n      defaultSortParam,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              .layoutType=${this.layoutType}\n              ?showInfoButton=${this.shouldShowInfoButton}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${this.shouldShowInfoButton}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </account-tile>`;\n          case 'search':\n            return html`<search-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${false}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </search-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam}\n              .defaultSortParam=${defaultSortParam}\n              .creatorFilter=${creatorFilter}\n              .loggedIn=${this.loggedIn}\n              .suppressBlurring=${this.suppressBlurring}\n              .isManageView=${this.isManageView}\n              .layoutType=${this.layoutType}\n              ?showTvClips=${this.showTvClips}\n              ?showInfoButton=${this.shouldShowInfoButton}\n              ?useLocalTime=${this.useLocalTime}\n              ?previewActive=${this.previewController.active}\n              .previewOptions=${this.tilePreviewOptions}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .defaultSortParam=${defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          .tileActions=${this.isManageView ? [] : this.tileActions}\n          ?useLocalTime=${this.useLocalTime}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .collectionTitles=${this.collectionTitles}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .defaultSortParam=${defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          .tileActions=${this.isManageView ? [] : this.tileActions}\n          ?useLocalTime=${this.useLocalTime}\n        >\n        </tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return [\n      srOnlyStyle,\n      tileActionStyles,\n      css`\n        :host {\n          display: block;\n          height: 100%;\n        }\n\n        collection-tile {\n          --tileBorderColor: #555555;\n          --tileBackgroundColor: #666666;\n          --imageBlockBackgroundColor: #666666;\n        }\n\n        account-tile {\n          --tileBorderColor: #dddddd;\n          --imageBlockBackgroundColor: #fcf5e6;\n        }\n\n        item-tile {\n          --tileBorderColor: #dddddd;\n          --imageBlockBackgroundColor: #f1f1f4;\n        }\n\n        search-tile {\n          --tileBorderColor: #555555;\n          --tileBackgroundColor: #666666;\n          --imageBlockBackgroundColor: #666666;\n          --iconFillColor: #2c2c2c;\n        }\n\n        #container {\n          position: relative;\n          height: 100%;\n          border-radius: 4px;\n        }\n\n        /*\n         * When tile actions are present, the container takes on the role of\n         * the tile's visual card so the tile content and action row appear\n         * as a single unified element. The inner tile's own shadow/radius\n         * are disabled via CSS variable overrides to avoid visual\n         * duplication, and the action row sits as a footer inside the same\n         * card.\n         */\n        #container.has-tile-actions {\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n          box-shadow: var(--tileShadow, 1px 1px 2px 0);\n          --tileBoxShadow: none;\n          --tileCornerRadius: 0;\n        }\n\n        #container.has-tile-actions .tile-link {\n          flex: 1;\n          min-height: 0;\n          overflow: hidden;\n          border-radius: 0;\n        }\n\n        /* Normal hover shadow lives on the inner anchor for plain tiles */\n        #container.hoverable:not(.has-tile-actions) a:focus,\n        #container.hoverable:not(.has-tile-actions) a:hover {\n          box-shadow: var(\n            --tileHoverBoxShadow,\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\n          );\n          transition: box-shadow 0.1s ease;\n        }\n\n        /*\n         * When the container owns the card visuals, the hover shadow needs\n         * to move up to the container so it wraps the action row too.\n         */\n        #container.hoverable.has-tile-actions:hover {\n          box-shadow: var(\n            --tileHoverBoxShadow,\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\n          );\n          transition: box-shadow 0.1s ease;\n        }\n\n        a {\n          display: block;\n          height: 100%;\n          color: unset;\n          text-decoration: none;\n          transition: transform 0.05s ease;\n          border-radius: 4px;\n          outline: none;\n        }\n\n        a :first-child {\n          display: block;\n          height: 100%;\n        }\n\n        .manage-check {\n          position: absolute;\n          right: 0;\n          top: 0;\n          border: 5px solid #2c2c2c;\n          border-radius: 3px;\n          background-color: #2c2c2c;\n          z-index: 1;\n        }\n\n        .manage-check > input[type='checkbox'] {\n          display: block;\n          margin: 0;\n        }\n\n        #touch-backdrop {\n          position: fixed;\n          width: 100vw;\n          height: 100vh;\n          top: 0;\n          left: 0;\n          z-index: 2;\n          background: transparent;\n        }\n\n        tile-hover-pane {\n          position: absolute;\n          top: 0;\n          left: -9999px;\n          z-index: 2;\n        }\n\n        /*\n         * Grid-mode action row sits flush against the bottom of the card —\n         * the buttons' own borders form the visible bottom edge. The outer\n         * buttons get rounded bottom corners to match the container so the\n         * red border traces cleanly around the card's bottom corners.\n         */\n        .grid-tile-actions .tile-action-btn:first-child {\n          border-bottom-left-radius: 4px;\n        }\n\n        .grid-tile-actions .tile-action-btn:last-child {\n          border-bottom-right-radius: 4px;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/tile-mediatype-icon.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { localized } from '@lit/localize';
 import { mediatypeConfig, } from '../mediatype/mediatype-config';
 const TV_COMMERCIAL_COLLECTION = 'tv_ads';
 const TV_FACT_CHECK_COLLECTION = 'factchecked';
@@ -118,8 +117,7 @@ __decorate([
     property({ type: Boolean })
 ], TileMediatypeIcon.prototype, "showText", void 0);
 TileMediatypeIcon = __decorate([
-    customElement('tile-mediatype-icon'),
-    localized()
+    customElement('tile-mediatype-icon')
 ], TileMediatypeIcon);
 export { TileMediatypeIcon };
 //# sourceMappingURL=tile-mediatype-icon.js.map

package/dist/src/tiles/tile-mediatype-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/tile-mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { localized } from '@lit/localize';\n\nimport {\n  mediatypeConfig,\n  MediatypeConfigKey,\n} from '../mediatype/mediatype-config';\nimport type { TileModel } from '../models';\n\nconst TV_COMMERCIAL_COLLECTION = 'tv_ads';\nconst TV_FACT_CHECK_COLLECTION = 'factchecked';\nconst TV_COLLECTIONS = new Set(['tvnews', 'tvarchive', 'television']);\nconst RADIO_COLLECTIONS = new Set(['radio', 'radioprogram']);\n\n@customElement('tile-mediatype-icon')\n@localized()\nexport class TileMediatypeIcon extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Boolean }) showText = false;\n\n  /**\n   * Returns the appropriate mediatype config key for the current mediatype/collections.\n   */\n  private get displayMediatype(): MediatypeConfigKey {\n    if (this.isTvItem) return this.tvDisplayMediatype;\n    if (this.isRadioItem) return 'radio';\n    return this.model?.mediatype ?? 'none';\n  }\n\n  /**\n   * Returns the appropriate TV mediatype, depending on the current collections.\n   */\n  private get tvDisplayMediatype(): MediatypeConfigKey {\n    if (this.isTvCommercial) {\n      return 'tvCommercial';\n    } else if (this.model?.isTvSearchResult && this.isTvFactCheck) {\n      return 'tvFactCheck';\n    } else if (this.model?.isTvSearchResult && this.isTvQuote) {\n      return 'tvQuote';\n    }\n\n    return 'tv';\n  }\n\n  /**\n   * Whether this represents a TV item\n   */\n  private get isTvItem(): boolean {\n    return !!(\n      this.model?.mediatype === 'movies' &&\n      this.model?.collections.some(id => TV_COLLECTIONS.has(id))\n    );\n  }\n\n  private get isTvCommercial(): boolean {\n    // Contains one or more TV ad identifiers or is in the tv_ads collection\n    return !!(\n      this.model?.adIds?.length ||\n      this.model?.collections.includes(TV_COMMERCIAL_COLLECTION)\n    );\n  }\n\n  private get isTvFactCheck(): boolean {\n    // Contains one or more fact-check URLs or is in the factchecked collection\n    return !!(\n      this.model?.factChecks?.length ||\n      this.model?.collections.includes(TV_FACT_CHECK_COLLECTION)\n    );\n  }\n\n  private get isTvQuote(): boolean {\n    return !!this.model?.isClip;\n  }\n\n  /**\n   * Whether this represents a radio item\n   */\n  private get isRadioItem(): boolean {\n    return !!(\n      this.model?.mediatype === 'audio' &&\n      this.model?.collections.some(id => RADIO_COLLECTIONS.has(id))\n    );\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        title=\"${config.text}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #icon {\n        height: var(--iconHeight, 25px);\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n        pointer-events: none;\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/tile-mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport {\n  mediatypeConfig,\n  MediatypeConfigKey,\n} from '../mediatype/mediatype-config';\nimport type { TileModel } from '../models';\n\nconst TV_COMMERCIAL_COLLECTION = 'tv_ads';\nconst TV_FACT_CHECK_COLLECTION = 'factchecked';\nconst TV_COLLECTIONS = new Set(['tvnews', 'tvarchive', 'television']);\nconst RADIO_COLLECTIONS = new Set(['radio', 'radioprogram']);\n\n@customElement('tile-mediatype-icon')\nexport class TileMediatypeIcon extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Boolean }) showText = false;\n\n  /**\n   * Returns the appropriate mediatype config key for the current mediatype/collections.\n   */\n  private get displayMediatype(): MediatypeConfigKey {\n    if (this.isTvItem) return this.tvDisplayMediatype;\n    if (this.isRadioItem) return 'radio';\n    return this.model?.mediatype ?? 'none';\n  }\n\n  /**\n   * Returns the appropriate TV mediatype, depending on the current collections.\n   */\n  private get tvDisplayMediatype(): MediatypeConfigKey {\n    if (this.isTvCommercial) {\n      return 'tvCommercial';\n    } else if (this.model?.isTvSearchResult && this.isTvFactCheck) {\n      return 'tvFactCheck';\n    } else if (this.model?.isTvSearchResult && this.isTvQuote) {\n      return 'tvQuote';\n    }\n\n    return 'tv';\n  }\n\n  /**\n   * Whether this represents a TV item\n   */\n  private get isTvItem(): boolean {\n    return !!(\n      this.model?.mediatype === 'movies' &&\n      this.model?.collections.some(id => TV_COLLECTIONS.has(id))\n    );\n  }\n\n  private get isTvCommercial(): boolean {\n    // Contains one or more TV ad identifiers or is in the tv_ads collection\n    return !!(\n      this.model?.adIds?.length ||\n      this.model?.collections.includes(TV_COMMERCIAL_COLLECTION)\n    );\n  }\n\n  private get isTvFactCheck(): boolean {\n    // Contains one or more fact-check URLs or is in the factchecked collection\n    return !!(\n      this.model?.factChecks?.length ||\n      this.model?.collections.includes(TV_FACT_CHECK_COLLECTION)\n    );\n  }\n\n  private get isTvQuote(): boolean {\n    return !!this.model?.isClip;\n  }\n\n  /**\n   * Whether this represents a radio item\n   */\n  private get isRadioItem(): boolean {\n    return !!(\n      this.model?.mediatype === 'audio' &&\n      this.model?.collections.some(id => RADIO_COLLECTIONS.has(id))\n    );\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        title=\"${config.text}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #icon {\n        height: var(--iconHeight, 25px);\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n        pointer-events: none;\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}

package/dist/src/utils/format-count.d.ts

@@ -2,8 +2,6 @@ export type NumberFormat = 'short' | 'long';
 export type LabelFormat = 'short' | 'long';
 /**
  * Format a "count" number into short "icon" or longer text string.
- * For positive numbers only. Uses `Intl.NumberFormat` so both the digit
- * grouping and the abbreviation word/letter (e.g. "K" vs "mil") follow the
- * given locale's conventions.
+ * For positive numbers only.
  */
 export declare function formatCount(count: number | undefined, numberFormat?: NumberFormat, labelFormat?: LabelFormat, locale?: string): string;

package/dist/src/utils/format-count.js

@@ -2,35 +2,75 @@
  * Replaces Petabox www/common/Util::number_format()
  * For positive numbers only.
  */
-import { getLocale } from './get-locale';
+import { msg, str } from '@lit/localize';
 /**
- * Whether a number should be abbreviated to a compact form (e.g. "77K")
- * rather than shown in full. Millions and up always abbreviate; thousands
- * only abbreviate when the caller asked for the short NumberFormat.
+ * Return the magnitude of a number.
  */
-function shouldAbbreviate(number, numberFormat) {
-    if (number >= 1_000_000)
-        return true;
-    return numberFormat === 'short' && number >= 1_000;
+function magnitude(number, numberFormat) {
+    let divisor = 1;
+    if (number >= 1_000_000_000) {
+        divisor = 1_000_000_000;
+    }
+    else if (number >= 1_000_000) {
+        divisor = 1_000_000;
+    }
+    else if (number >= 1_000 && numberFormat === 'short') {
+        divisor = 1_000;
+    }
+    return divisor;
+}
+/**
+ * Round a number given passed magnitude.
+ * Significant digits of value less than 10 get a decimal.
+ */
+function round(number = 0, divisor) {
+    const result = number / divisor;
+    const roundToOne = result < 10;
+    let rounded = 0;
+    if (roundToOne) {
+        rounded = Math.round((result + Number.EPSILON) * 10) / 10;
+    }
+    else {
+        rounded = Math.round(result);
+    }
+    return rounded;
+}
+/**
+ * Return a label for a number and format.
+ */
+function labelize(rounded, divisor, format, locale) {
+    switch (divisor) {
+        case 1_000_000_000:
+            if (format === 'short') {
+                return msg(str `${rounded}B`);
+            }
+            return msg(str `${rounded} billion`);
+        case 1_000_000:
+            if (format === 'short') {
+                return msg(str `${rounded}M`);
+            }
+            return msg(str `${rounded} million`);
+        case 1_000:
+            if (format === 'short') {
+                return msg(str `${rounded}K`);
+            }
+            return msg(str `${rounded} thousand`);
+        default:
+            return new Intl.NumberFormat(locale).format(rounded);
+    }
 }
 /**
  * Format a "count" number into short "icon" or longer text string.
- * For positive numbers only. Uses `Intl.NumberFormat` so both the digit
- * grouping and the abbreviation word/letter (e.g. "K" vs "mil") follow the
- * given locale's conventions.
+ * For positive numbers only.
  */
-export function formatCount(count, numberFormat = 'long', labelFormat = 'short', locale = getLocale()) {
+export function formatCount(count, numberFormat = 'long', labelFormat = 'short', locale = 'en-US') {
     // Return blank if undefined
     const number = count ?? -1;
     if (number < 0) {
         return '';
     }
-    if (shouldAbbreviate(number, numberFormat)) {
-        return new Intl.NumberFormat(locale, {
-            notation: 'compact',
-            compactDisplay: labelFormat === 'short' ? 'short' : 'long',
-        }).format(number);
-    }
-    return new Intl.NumberFormat(locale).format(number);
+    const divisor = magnitude(number, numberFormat);
+    const rounded = round(number, divisor);
+    return labelize(rounded, divisor, labelFormat, locale);
 }
 //# sourceMappingURL=format-count.js.map

package/dist/src/utils/format-count.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-count.js","sourceRoot":"","sources":["../../../src/utils/format-count.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,MAAc,EAAE,YAA0B;IAClE,IAAI,MAAM,IAAI,SAAS;QAAE,OAAO,IAAI,CAAC;IACrC,OAAO,YAAY,KAAK,OAAO,IAAI,MAAM,IAAI,KAAK,CAAC;AACrD,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,eAA6B,MAAM,EACnC,cAA2B,OAAO,EAClC,SAAiB,SAAS,EAAE;IAE5B,4BAA4B;IAC5B,MAAM,MAAM,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC;IAC3B,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,IAAI,gBAAgB,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE,CAAC;QAC3C,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;YACnC,QAAQ,EAAE,SAAS;YACnB,cAAc,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;SAC3D,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IACD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,CAAC","sourcesContent":["/*\n * Replaces Petabox www/common/Util::number_format()\n * For positive numbers only.\n */\nimport { getLocale } from './get-locale';\n\nexport type NumberFormat =\n  | 'short' // 1.2 [K | thousand]\n  | 'long'; // 1,200 [No label for numbers < 1,000,000]\nexport type LabelFormat =\n  | 'short' // [1.2]K\n  | 'long'; // [1.2] thousand\n\n/**\n * Whether a number should be abbreviated to a compact form (e.g. \"77K\")\n * rather than shown in full. Millions and up always abbreviate; thousands\n * only abbreviate when the caller asked for the short NumberFormat.\n */\nfunction shouldAbbreviate(number: number, numberFormat: NumberFormat): boolean {\n  if (number >= 1_000_000) return true;\n  return numberFormat === 'short' && number >= 1_000;\n}\n\n/**\n * Format a \"count\" number into short \"icon\" or longer text string.\n * For positive numbers only. Uses `Intl.NumberFormat` so both the digit\n * grouping and the abbreviation word/letter (e.g. \"K\" vs \"mil\") follow the\n * given locale's conventions.\n */\nexport function formatCount(\n  count: number | undefined,\n  numberFormat: NumberFormat = 'long',\n  labelFormat: LabelFormat = 'short',\n  locale: string = getLocale(),\n): string {\n  // Return blank if undefined\n  const number = count ?? -1;\n  if (number < 0) {\n    return '';\n  }\n  if (shouldAbbreviate(number, numberFormat)) {\n    return new Intl.NumberFormat(locale, {\n      notation: 'compact',\n      compactDisplay: labelFormat === 'short' ? 'short' : 'long',\n    }).format(number);\n  }\n  return new Intl.NumberFormat(locale).format(number);\n}\n"]}
+{"version":3,"file":"format-count.js","sourceRoot":"","sources":["../../../src/utils/format-count.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAUzC;;GAEG;AACH,SAAS,SAAS,CAAC,MAAc,EAAE,YAA0B;IAC3D,IAAI,OAAO,GAAY,CAAC,CAAC;IACzB,IAAI,MAAM,IAAI,aAAa,EAAE,CAAC;QAC5B,OAAO,GAAG,aAAa,CAAC;IAC1B,CAAC;SAAM,IAAI,MAAM,IAAI,SAAS,EAAE,CAAC;QAC/B,OAAO,GAAG,SAAS,CAAC;IACtB,CAAC;SAAM,IAAI,MAAM,IAAI,KAAK,IAAI,YAAY,KAAK,OAAO,EAAE,CAAC;QACvD,OAAO,GAAG,KAAK,CAAC;IAClB,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;GAGG;AACH,SAAS,KAAK,CAAC,SAAiB,CAAC,EAAE,OAAgB;IACjD,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAChC,MAAM,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/B,IAAI,OAAO,GAAW,CAAC,CAAC;IACxB,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAC5D,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;GAEG;AACH,SAAS,QAAQ,CACf,OAAe,EACf,OAAgB,EAChB,MAAmB,EACnB,MAAc;IAEd,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,aAAa;YAChB,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBACvB,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,GAAG,CAAC,CAAC;YAC/B,CAAC;YACD,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,UAAU,CAAC,CAAC;QACtC,KAAK,SAAS;YACZ,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBACvB,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,GAAG,CAAC,CAAC;YAC/B,CAAC;YACD,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,UAAU,CAAC,CAAC;QACtC,KAAK,KAAK;YACR,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBACvB,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,GAAG,CAAC,CAAC;YAC/B,CAAC;YACD,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,WAAW,CAAC,CAAC;QAEvC;YACE,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzD,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,eAA6B,MAAM,EACnC,cAA2B,OAAO,EAClC,SAAiB,OAAO;IAExB,4BAA4B;IAC5B,MAAM,MAAM,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC;IAC3B,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC","sourcesContent":["/*\n * Replaces Petabox www/common/Util::number_format()\n * For positive numbers only.\n */\nimport { msg, str } from '@lit/localize';\n\nexport type NumberFormat =\n  | 'short' // 1.2 [K | thousand]\n  | 'long'; // 1,200 [No label for numbers < 1,000,000]\nexport type LabelFormat =\n  | 'short' // [1.2]K\n  | 'long'; // [1.2] thousand\ntype Divisor = 1_000_000_000 | 1_000_000 | 1_000 | 1;\n\n/**\n * Return the magnitude of a number.\n */\nfunction magnitude(number: number, numberFormat: NumberFormat): Divisor {\n  let divisor: Divisor = 1;\n  if (number >= 1_000_000_000) {\n    divisor = 1_000_000_000;\n  } else if (number >= 1_000_000) {\n    divisor = 1_000_000;\n  } else if (number >= 1_000 && numberFormat === 'short') {\n    divisor = 1_000;\n  }\n  return divisor;\n}\n\n/**\n * Round a number given passed magnitude.\n * Significant digits of value less than 10 get a decimal.\n */\nfunction round(number: number = 0, divisor: Divisor): number {\n  const result = number / divisor;\n  const roundToOne = result < 10;\n  let rounded: number = 0;\n  if (roundToOne) {\n    rounded = Math.round((result + Number.EPSILON) * 10) / 10;\n  } else {\n    rounded = Math.round(result);\n  }\n  return rounded;\n}\n\n/**\n * Return a label for a number and format.\n */\nfunction labelize(\n  rounded: number,\n  divisor: Divisor,\n  format: LabelFormat,\n  locale: string,\n): string {\n  switch (divisor) {\n    case 1_000_000_000:\n      if (format === 'short') {\n        return msg(str`${rounded}B`);\n      }\n      return msg(str`${rounded} billion`);\n    case 1_000_000:\n      if (format === 'short') {\n        return msg(str`${rounded}M`);\n      }\n      return msg(str`${rounded} million`);\n    case 1_000:\n      if (format === 'short') {\n        return msg(str`${rounded}K`);\n      }\n      return msg(str`${rounded} thousand`);\n\n    default:\n      return new Intl.NumberFormat(locale).format(rounded);\n  }\n}\n\n/**\n * Format a \"count\" number into short \"icon\" or longer text string.\n * For positive numbers only.\n */\nexport function formatCount(\n  count: number | undefined,\n  numberFormat: NumberFormat = 'long',\n  labelFormat: LabelFormat = 'short',\n  locale: string = 'en-US',\n): string {\n  // Return blank if undefined\n  const number = count ?? -1;\n  if (number < 0) {\n    return '';\n  }\n  const divisor = magnitude(number, numberFormat);\n  const rounded = round(number, divisor);\n  return labelize(rounded, divisor, labelFormat, locale);\n}\n"]}

package/dist/src/utils/format-unit-size.d.ts

@@ -1,2 +1,2 @@
 import { nothing } from 'lit';
-export declare function formatUnitSize(size: number | undefined, nDecimals: number, locale?: string): string | typeof nothing;
+export declare function formatUnitSize(size: number | undefined, nDecimals: number, separator?: string): string | typeof nothing;

package/dist/src/utils/format-unit-size.js

@@ -2,36 +2,33 @@
  * Replaces Petabox www/common/Util::humanSize()
  */
 import { nothing } from 'lit';
-import { msg, str } from '@lit/localize';
-import { getLocale } from './get-locale';
-/**
- * Labels a formatted size with its unit, one entry per power of 1024 starting
- * at bytes. Each entry is a function so the label is read in the current
- * locale at call time.
- */
-const unitLabels = [
-    (size, singular) => singular ? msg(str `${size} byte`) : msg(str `${size} bytes`),
-    (size, singular) => singular ? msg(str `${size} kilobyte`) : msg(str `${size} kilobytes`),
-    (size, singular) => singular ? msg(str `${size} megabyte`) : msg(str `${size} megabytes`),
-    (size, singular) => singular ? msg(str `${size} gigabyte`) : msg(str `${size} gigabytes`),
-    (size, singular) => singular ? msg(str `${size} terabyte`) : msg(str `${size} terabytes`),
-    (size, singular) => singular ? msg(str `${size} petabyte`) : msg(str `${size} petabytes`),
-    (size, singular) => singular ? msg(str `${size} exabyte`) : msg(str `${size} exabytes`),
-    (size, singular) => singular ? msg(str `${size} zettabyte`) : msg(str `${size} zettabytes`),
-    (size, singular) => singular ? msg(str `${size} yottabyte`) : msg(str `${size} yottabytes`),
-];
-export function formatUnitSize(size, nDecimals, locale = getLocale()) {
+var unitSizes;
+(function (unitSizes) {
+    unitSizes[unitSizes["bytes"] = 0] = "bytes";
+    unitSizes[unitSizes["kilobytes"] = 1] = "kilobytes";
+    unitSizes[unitSizes["megabytes"] = 2] = "megabytes";
+    unitSizes[unitSizes["gigabytes"] = 3] = "gigabytes";
+    unitSizes[unitSizes["terabytes"] = 4] = "terabytes";
+    unitSizes[unitSizes["petabytes"] = 5] = "petabytes";
+    unitSizes[unitSizes["exabytes"] = 6] = "exabytes";
+    unitSizes[unitSizes["zettabytes"] = 7] = "zettabytes";
+    unitSizes[unitSizes["yottabytes"] = 8] = "yottabytes";
+})(unitSizes || (unitSizes = {}));
+export function formatUnitSize(size, nDecimals, separator = ' ') {
     let itemSize = size;
     if (itemSize === undefined)
         return nothing; // early return.
     let unitIndex = 0;
     // convert byte to highest possible unit
-    while (itemSize > 1024 && unitIndex < unitLabels.length - 1) {
+    while (itemSize > 1024) {
         itemSize /= 1024;
         unitIndex += 1;
     }
     const magnitude = 10 ** nDecimals;
     itemSize = Math.round(itemSize * magnitude) / magnitude;
-    return unitLabels[unitIndex](new Intl.NumberFormat(locale).format(itemSize), itemSize === 1);
+    let unitText = unitSizes[unitIndex];
+    // convert plural to singular.
+    unitText = itemSize === 1 ? unitText.slice(0, -1) : unitText;
+    return `${itemSize.toLocaleString() + separator + unitText}`;
 }
 //# sourceMappingURL=format-unit-size.js.map

package/dist/src/utils/format-unit-size.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-unit-size.js","sourceRoot":"","sources":["../../../src/utils/format-unit-size.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Replaces Petabox www/common/Util::humanSize()\n */\nimport { nothing } from 'lit';\nimport { msg, str } from '@lit/localize';\nimport { getLocale } from './get-locale';\n\n/**\n * Labels a formatted size with its unit, one entry per power of 1024 starting\n * at bytes. Each entry is a function so the label is read in the current\n * locale at call time.\n */\nconst unitLabels: ((size: string, singular: boolean) => string)[] = [\n  (size, singular) =>\n    singular ? msg(str`${size} byte`) : msg(str`${size} bytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} kilobyte`) : msg(str`${size} kilobytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} megabyte`) : msg(str`${size} megabytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} gigabyte`) : msg(str`${size} gigabytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} terabyte`) : msg(str`${size} terabytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} petabyte`) : msg(str`${size} petabytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} exabyte`) : msg(str`${size} exabytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} zettabyte`) : msg(str`${size} zettabytes`),\n  (size, singular) =>\n    singular ? msg(str`${size} yottabyte`) : msg(str`${size} yottabytes`),\n];\n\nexport function formatUnitSize(\n  size: number | undefined,\n  nDecimals: number,\n  locale: string = getLocale(),\n) {\n  let itemSize = size;\n  if (itemSize === undefined) return nothing; // early return.\n\n  let unitIndex = 0;\n\n  // convert byte to highest possible unit\n  while (itemSize > 1024 && unitIndex < unitLabels.length - 1) {\n    itemSize /= 1024;\n    unitIndex += 1;\n  }\n\n  const magnitude = 10 ** nDecimals;\n  itemSize = Math.round(itemSize * magnitude) / magnitude;\n\n  return unitLabels[unitIndex](\n    new Intl.NumberFormat(locale).format(itemSize),\n    itemSize === 1,\n  );\n}\n"]}
+{"version":3,"file":"format-unit-size.js","sourceRoot":"","sources":["../../../src/utils/format-unit-size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAE9B,IAAK,SAUJ;AAVD,WAAK,SAAS;IACZ,2CAAO,CAAA;IACP,mDAAW,CAAA;IACX,mDAAW,CAAA;IACX,mDAAW,CAAA;IACX,mDAAW,CAAA;IACX,mDAAW,CAAA;IACX,iDAAU,CAAA;IACV,qDAAY,CAAA;IACZ,qDAAY,CAAA;AACd,CAAC,EAVI,SAAS,KAAT,SAAS,QAUb;AAED,MAAM,UAAU,cAAc,CAC5B,IAAwB,EACxB,SAAiB,EACjB,YAAoB,GAAG;IAEvB,IAAI,QAAQ,GAAG,IAAI,CAAC;IACpB,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,OAAO,CAAC,CAAC,gBAAgB;IAE5D,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,wCAAwC;IACxC,OAAO,QAAQ,GAAG,IAAI,EAAE,CAAC;QACvB,QAAQ,IAAI,IAAI,CAAC;QACjB,SAAS,IAAI,CAAC,CAAC;IACjB,CAAC;IAED,MAAM,SAAS,GAAG,EAAE,IAAI,SAAS,CAAC;IAClC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAExD,IAAI,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,8BAA8B;IAC9B,QAAQ,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE7D,OAAO,GAAG,QAAQ,CAAC,cAAc,EAAE,GAAG,SAAS,GAAG,QAAQ,EAAE,CAAC;AAC/D,CAAC","sourcesContent":["/*\n * Replaces Petabox www/common/Util::humanSize()\n */\nimport { nothing } from 'lit';\n\nenum unitSizes {\n  'bytes',\n  'kilobytes',\n  'megabytes',\n  'gigabytes',\n  'terabytes',\n  'petabytes',\n  'exabytes',\n  'zettabytes',\n  'yottabytes',\n}\n\nexport function formatUnitSize(\n  size: number | undefined,\n  nDecimals: number,\n  separator: string = ' ',\n) {\n  let itemSize = size;\n  if (itemSize === undefined) return nothing; // early return.\n\n  let unitIndex = 0;\n\n  // convert byte to highest possible unit\n  while (itemSize > 1024) {\n    itemSize /= 1024;\n    unitIndex += 1;\n  }\n\n  const magnitude = 10 ** nDecimals;\n  itemSize = Math.round(itemSize * magnitude) / magnitude;\n\n  let unitText = unitSizes[unitIndex];\n\n  // convert plural to singular.\n  unitText = itemSize === 1 ? unitText.slice(0, -1) : unitText;\n\n  return `${itemSize.toLocaleString() + separator + unitText}`;\n}\n"]}

package/dist/src/utils/grid-zoom-controller.d.ts

@@ -0,0 +1,69 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+/** What the controller needs from the element that owns the grid. */
+export interface GridZoomHost<Anchor = unknown> {
+    /** The element the gestures are listened on and the preview transform is applied to. */
+    getSurface(): HTMLElement | undefined;
+    /** How many columns the grid is showing right now. */
+    getColumns(): number;
+    /** The zoom level that is currently in effect. */
+    getLevel(): number;
+    /** Notes what is under `focal` (viewport coordinates) before anything is scaled. */
+    captureAnchor(focal: Point): Anchor | undefined;
+    /**
+     * Switches the layout to `level`, keeping the captured anchor under `focal`.
+     * Resolves once the new layout is in place.
+     */
+    commitLevel(level: number, focal: Point, anchor?: Anchor): Promise<void>;
+}
+/**
+ * Turns pinch gestures, ctrl+wheel (trackpad pinch in Chrome/Firefox), Safari
+ * gesture events and ctrl/cmd +/- into zoom level changes on the tile grid.
+ *
+ * While a gesture is in progress the grid is scaled with a CSS transform
+ * around the pinch point. When it ends, the transform eases to the size of the
+ * level it snapped to, then the real layout is swapped in.
+ */
+export declare class GridZoomController<Anchor = unknown> {
+    private host;
+    private surface?;
+    private source?;
+    private startColumns;
+    private scale;
+    private focal;
+    private anchor?;
+    private settling;
+    /** The latest level asked for while a zoom was still settling. */
+    private pendingLevel?;
+    private pointers;
+    private startDistance;
+    private wheelTimer;
+    private hovering;
+    private lastPointer?;
+    constructor(host: GridZoomHost<Anchor>);
+    /** Starts listening. Safe to call again after the surface element has changed. */
+    connect(): void;
+    disconnect(): void;
+    /** Moves to `level` with the same animated settle a pinch gets. */
+    zoomToLevel(level: number, focal?: Point): Promise<void>;
+    private begin;
+    private update;
+    /**
+     * Ends the gesture, snapping to the level its scale is closest to. When
+     * `forcedRatio` is given (zooming to a specific level), that level is used.
+     */
+    private finish;
+    private clearTransform;
+    private viewportCenter;
+    private pointerDown;
+    private pointerMove;
+    private pointerEnd;
+    private pointerLeave;
+    private wheel;
+    private safariStart;
+    private safariChange;
+    private safariEnd;
+    private keyDown;
+}