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

package/dist/src/sort-filter-bar/sort-filter-bar.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { localized, msg, str } from '@lit/localize';
+import { msg, str } from '@lit/localize';
 import { defaultSortAvailability, SORT_OPTIONS, SortField, } from '../models';
 import { sortUpIcon } from './img/sort-toggle-up';
 import { sortDownIcon } from './img/sort-toggle-down';
@@ -9,6 +9,7 @@ import { sortDisabledIcon } from './img/sort-toggle-disabled';
 import { tileIcon } from './img/tile';
 import { listIcon } from './img/list';
 import { compactIcon } from './img/compact';
+import { GRID_ZOOM_COLUMNS } from '../utils/grid-zoom';
 import { srOnlyStyle } from '../styles/sr-only';
 import '@internetarchive/ia-dropdown';
 import './alpha-bar';
@@ -27,6 +28,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         this.selectedTitleFilter = null;
         /** The currently selected creator letter filter, or null if none is set */
         this.selectedCreatorFilter = null;
+        /** Whether to show the grid zoom slider (a prototype). */
+        this.showGridZoomSlider = false;
+        /** The grid zoom level (an index into the zoom levels, smallest column count first). */
+        this.gridZoomLevel = 0;
         /**
          * Map defining which sortable fields should be included on the sort bar.
          *
@@ -64,29 +69,33 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     render() {
         return html `
       <div id="container">
-        <section id="sort-bar" aria-label=${msg('Sorting options')}>
-          <slot name="sort-options-left"></slot>
-          <div id="sort-options">
-            ${!this.enableSortOptionsSlot
+        <div id="sort-bar-row">
+          <section id="sort-bar" aria-label="Sorting options">
+            <slot name="sort-options-left"></slot>
+            <div id="sort-options">
+              ${!this.enableSortOptionsSlot
             ? html `
-                  <div class="sort-direction-container">
-                    ${this.sortDirectionSelectorTemplate}
-                  </div>
-                  <span class="sort-by-text">${msg('Sort by:')}</span>
-                  <div id="sort-selector-container">
-                    ${this.sortSelectorTemplate}
-                  </div>
-                `
+                    <div class="sort-direction-container">
+                      ${this.sortDirectionSelectorTemplate}
+                    </div>
+                    <span class="sort-by-text">${msg('Sort by:')}</span>
+                    <div id="sort-selector-container">
+                      ${this.sortSelectorTemplate}
+                    </div>
+                  `
             : html `<slot name="sort-options"></slot>`}
-          </div>
-          <slot name="sort-options-right"></slot>
+            </div>
+            <slot name="sort-options-right"></slot>
 
-          ${this.suppressDisplayModes
+            ${this.showGridZoomSlider ? this.gridZoomSliderTemplate : nothing}
+            ${this.suppressDisplayModes
             ? nothing
             : html `<div id="display-style-selector">
-                ${this.displayOptionTemplate}
-              </div>`}
-        </section>
+                  ${this.displayOptionTemplate}
+                </div>`}
+          </section>
+          <slot name="sort-bar-end"></slot>
+        </div>
 
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
         ${this.alphaBarTemplate}
@@ -94,6 +103,9 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     `;
     }
     willUpdate(changed) {
+        if (changed.has('gridZoomLevel')) {
+            this.pendingSliderValue = undefined;
+        }
         if (changed.has('selectedSort') || changed.has('defaultSortField')) {
             // If the sort is changed from its default without a direction set,
             // we adopt the default sort direction for that sort type.
@@ -260,6 +272,39 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.emitCreatorLetterChangedEvent();
         }
     }
+    /**
+     * The grid zoom slider. Moving right makes the tiles bigger, so its value counts
+     * down from the highest level (the most columns) to level 0 (the fewest).
+     */
+    get gridZoomSliderTemplate() {
+        const maxValue = GRID_ZOOM_COLUMNS.length - 1;
+        const columns = GRID_ZOOM_COLUMNS[this.gridZoomLevel];
+        return html `
+      <div id="grid-zoom">
+        <input
+          type="range"
+          id="grid-zoom-slider"
+          min="0"
+          max=${maxValue}
+          step="1"
+          .value=${String(this.pendingSliderValue ?? maxValue - this.gridZoomLevel)}
+          aria-label=${msg('Tile size')}
+          aria-valuetext=${columns === 1
+            ? msg('1 column')
+            : msg(str `${columns} columns`)}
+          data-testid="grid-zoom-slider"
+          @input=${this.gridZoomSliderInput}
+        />
+      </div>
+    `;
+    }
+    gridZoomSliderInput(e) {
+        const value = Number(e.target.value);
+        this.pendingSliderValue = value;
+        this.dispatchEvent(new CustomEvent('gridZoomLevelChanged', {
+            detail: { level: GRID_ZOOM_COLUMNS.length - 1 - value },
+        }));
+    }
     /** Template for rendering the three display mode options */
     /** Added data-testid for Playwright testing * */
     get displayOptionTemplate() {
@@ -272,7 +317,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.displayMode = 'grid';
         }}
             class=${this.displayMode === 'grid' ? 'active' : ''}
-            title=${msg('Tile view')}
+            title="Tile view"
             data-testid="grid-button"
           >
             ${tileIcon}
@@ -285,7 +330,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.displayMode = 'list-detail';
         }}
             class=${this.displayMode === 'list-detail' ? 'active' : ''}
-            title=${msg('List view')}
+            title="List view"
             data-testid="list-detail-button"
           >
             ${listIcon}
@@ -298,7 +343,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.displayMode = 'list-compact';
         }}
             class=${this.displayMode === 'list-compact' ? 'active' : ''}
-            title=${msg('Compact list view')}
+            title="Compact list view"
             data-testid="list-compact-button"
           >
             ${compactIcon}
@@ -384,7 +429,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         return html ` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
       .letterCounts=${this.prefixFilterCountMap?.title}
-      ariaLandmarkLabel=${msg('Filter by title letter')}
+      ariaLandmarkLabel="Filter by title letter"
       @letterChanged=${this.titleLetterChanged}
     ></alpha-bar>`;
     }
@@ -392,7 +437,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         return html ` <alpha-bar
       .selectedLetter=${this.selectedCreatorFilter}
       .letterCounts=${this.prefixFilterCountMap?.creator}
-      ariaLandmarkLabel=${msg('Filter by creator letter')}
+      ariaLandmarkLabel="Filter by creator letter"
       @letterChanged=${this.creatorLetterChanged}
     ></alpha-bar>`;
     }
@@ -440,15 +485,30 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           position: relative;
         }
 
-        #sort-bar {
+        /*
+         * The sort-bar-end slot shares this row with the sort bar but sits
+         * outside its "Sorting options" landmark. When the slotted content
+         * doesn't fit beside the sort controls, it wraps onto its own line at
+         * the right rather than overflowing the row.
+         */
+        #sort-bar-row {
           display: flex;
-          justify-content: flex-start;
+          flex-wrap: wrap;
+          justify-content: flex-end;
           align-items: center;
           padding-bottom: 1px;
           border-bottom: 1px solid #2c2c2c;
           font-size: 1.4rem;
         }
 
+        #sort-bar {
+          flex: auto;
+          min-width: 0;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
         #sort-options {
           display: flex;
           align-items: center;
@@ -542,6 +602,19 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           flex: 0;
         }
 
+        #grid-zoom {
+          display: flex;
+          align-items: center;
+          margin-right: 10px;
+        }
+
+        #grid-zoom-slider {
+          width: 90px;
+          margin: 0;
+          cursor: pointer;
+          accent-color: var(--ia-theme-primary-text-color, #2c2c2c);
+        }
+
         #display-style-selector button {
           background: none;
           color: inherit;
@@ -620,6 +693,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SortFilterBar.prototype, "selectedCreatorFilter", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortFilterBar.prototype, "showGridZoomSlider", void 0);
+__decorate([
+    property({ type: Number })
+], SortFilterBar.prototype, "gridZoomLevel", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "pendingSliderValue", void 0);
 __decorate([
     property({ type: Object })
 ], SortFilterBar.prototype, "sortFieldAvailability", void 0);
@@ -642,8 +724,7 @@ __decorate([
     query('#sort-dropdown')
 ], SortFilterBar.prototype, "sortOptionsDropdown", void 0);
 SortFilterBar = __decorate([
-    customElement('sort-filter-bar'),
-    localized()
+    customElement('sort-filter-bar')
 ], SortFilterBar);
 export { SortFilterBar };
 //# sourceMappingURL=sort-filter-bar.js.map

package/dist/src/sort-filter-bar/sort-filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { localized, msg, str } from '@lit/localize';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n  CollectionDisplayMode,\n  defaultSortAvailability,\n  PrefixFilterCounts,\n  PrefixFilterType,\n  SORT_OPTIONS,\n  SortField,\n  SortOption,\n} from '../models';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nimport '@internetarchive/ia-dropdown';\nimport './alpha-bar';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\n@localized()\nexport class SortFilterBar extends LitElement {\n  /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  /** The default sort direction to use if none is set */\n  @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n  /** The default sort field to use if none is set */\n  @property({ type: String }) defaultSortField: Exclude<\n    SortField,\n    SortField.default\n  > = SortField.relevance;\n\n  /** The current sort direction (asc/desc), or null if none is set */\n  @property({ type: String }) sortDirection: SortDirection | null = null;\n\n  /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n  @property({ type: String }) selectedSort: SortField = SortField.default;\n\n  /** The currently selected title letter filter, or null if none is set */\n  @property({ type: String }) selectedTitleFilter: string | null = null;\n\n  /** The currently selected creator letter filter, or null if none is set */\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n  /**\n   * Map defining which sortable fields should be included on the sort bar.\n   *\n   * E.g.,\n   * ```\n   * {\n   *   [SortField.relevance]: true,\n   *   [SortField.date]: false,\n   *   [SortField.title]: true,\n   *   ...\n   * }\n   * ```\n   */\n  @property({ type: Object }) sortFieldAvailability = defaultSortAvailability;\n\n  /** Whether to replace the default sort options with a slot for customization (default `false`) */\n  @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n    false;\n\n  /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n  @property({ type: Boolean, reflect: true })\n  suppressDisplayModes: boolean = false;\n\n  /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n  @property({ type: Object }) prefixFilterCountMap?: Record<\n    PrefixFilterType,\n    PrefixFilterCounts\n  >;\n\n  /**\n   * Which of the alphabet bars (title/creator) should be shown, or null if one\n   * should not currently be rendered.\n   */\n  @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n  /**\n   * Whether the transparent backdrop to catch clicks outside the dropdown menu\n   * should be rendered.\n   */\n  @state() dropdownBackdropVisible = false;\n\n  /** The single, consolidated dropdown component containing all available options */\n  @query('#sort-dropdown')\n  private sortOptionsDropdown!: IaDropdown;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <section id=\"sort-bar\" aria-label=${msg('Sorting options')}>\n          <slot name=\"sort-options-left\"></slot>\n          <div id=\"sort-options\">\n            ${!this.enableSortOptionsSlot\n              ? html`\n                  <div class=\"sort-direction-container\">\n                    ${this.sortDirectionSelectorTemplate}\n                  </div>\n                  <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n                  <div id=\"sort-selector-container\">\n                    ${this.sortSelectorTemplate}\n                  </div>\n                `\n              : html`<slot name=\"sort-options\"></slot>`}\n          </div>\n          <slot name=\"sort-options-right\"></slot>\n\n          ${this.suppressDisplayModes\n            ? nothing\n            : html`<div id=\"display-style-selector\">\n                ${this.displayOptionTemplate}\n              </div>`}\n        </section>\n\n        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n        ${this.alphaBarTemplate}\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues) {\n    if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n      // If the sort is changed from its default without a direction set,\n      // we adopt the default sort direction for that sort type.\n      if (\n        this.selectedSort &&\n        this.selectedSort !== SortField.default &&\n        this.sortDirection === null\n      ) {\n        const sortOption = SORT_OPTIONS[this.finalizedSortField];\n        this.sortDirection = sortOption.defaultSortDirection;\n      }\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\n    }\n\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n      this.alphaSelectorVisible = 'title';\n    }\n\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n      this.alphaSelectorVisible = 'creator';\n    }\n\n    if (changed.has('dropdownBackdropVisible')) {\n      this.setupEscapeListeners();\n    }\n  }\n\n  private setupEscapeListeners() {\n    if (this.dropdownBackdropVisible) {\n      document.addEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener,\n      );\n    } else {\n      document.removeEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener,\n      );\n    }\n  }\n\n  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeDropdown();\n    }\n  };\n\n  /**\n   * Template to render the alphabet bar, or `nothing` if it should not be rendered\n   * for the current sort\n   */\n  private get alphaBarTemplate(): TemplateResult | typeof nothing {\n    if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n    if (this.alphaSelectorVisible === null) {\n      if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n      if (this.selectedSort === 'title') return this.titleSelectorBar;\n    } else {\n      return this.alphaSelectorVisible === 'creator'\n        ? this.creatorSelectorBar\n        : this.titleSelectorBar;\n    }\n\n    return nothing;\n  }\n\n  /** Template to render the sort direction toggle button */\n  private get sortDirectionSelectorTemplate(): TemplateResult {\n    const oppositeSortDirectionReadable =\n      this.sortDirection === 'asc' ? msg('descending') : msg('ascending');\n    const buttonLabel = this.canChangeSortDirection\n      ? msg(str`Change to ${oppositeSortDirectionReadable} sort`)\n      : msg('Directions are not available for the current sort option');\n\n    return html`\n      <button\n        class=\"sort-direction-selector\"\n        title=${buttonLabel}\n        ?disabled=${!this.canChangeSortDirection}\n        @click=${this.handleSortDirectionClicked}\n      >\n        <span class=\"sr-only\">${buttonLabel}</span>\n        ${this.sortDirectionIcon}\n      </button>\n    `;\n  }\n\n  /** Template to render the sort direction button's icon in the correct current state */\n  private get sortDirectionIcon(): TemplateResult {\n    // Show a fully disabled icon for sort options without direction support\n    if (!this.canChangeSortDirection) {\n      return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n    }\n\n    // For all other sorts, show the ascending/descending direction\n    return html`\n      <div class=\"sort-direction-icon\">\n        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n      </div>\n    `;\n  }\n\n  /** The template to render all the sort options in a single dropdown */\n  private get sortSelectorTemplate() {\n    const displayedOptions = Object.values(SORT_OPTIONS).filter(\n      opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n    );\n\n    return html`\n      <div id=\"sort-dropdown-container\">\n        ${this.getSortDropdown({\n          displayName: SORT_OPTIONS[this.finalizedSortField].displayName,\n          id: 'sort-dropdown',\n          selected: true,\n          dropdownOptions: displayedOptions.map(opt =>\n            this.getDropdownOption(opt.field),\n          ),\n          selectedOption: this.finalizedSortField,\n          onOptionSelected: this.sortOptionSelected,\n          onDropdownClick: () => {\n            this.dropdownBackdropVisible = this.sortOptionsDropdown.open;\n            this.sortOptionsDropdown.classList.toggle(\n              'open',\n              this.sortOptionsDropdown.open,\n            );\n          },\n        })}\n      </div>\n    `;\n  }\n\n  /**\n   * Generates a dropdown component containing multiple grouped sort options.\n   *\n   * @param options.displayName The name to use for the dropdown's visible label\n   * @param options.id The id to apply to the dropdown element\n   * @param options.dropdownOptions An array of option objects used to populate the dropdown\n   * @param options.selectedOption The id of the option that should be initially selected\n   * @param options.selected A boolean indicating whether this dropdown should use its\n   *  selected appearance\n   * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\n   * @param options.onDropdownClick A handler for click events on the dropdown\n   */\n  private getSortDropdown(options: {\n    displayName: string;\n    id: string;\n    dropdownOptions: optionInterface[];\n    selectedOption?: string;\n    selected: boolean;\n    onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n    onDropdownClick?: (e: PointerEvent) => void;\n  }): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=${options.id}\n        class=${options.selected ? 'selected' : ''}\n        displayCaret\n        closeOnSelect\n        includeSelectedOption\n        .openViaButton=${options.selected}\n        .options=${options.dropdownOptions}\n        .selectedOption=${options.selectedOption ?? ''}\n        @optionSelected=${options.onOptionSelected ?? nothing}\n        @click=${options.onDropdownClick ?? nothing}\n      >\n        <span\n          class=\"dropdown-label\"\n          slot=\"dropdown-label\"\n          data-title=${options.displayName}\n        >\n          ${options.displayName}\n        </span>\n      </ia-dropdown>\n    `;\n  }\n\n  /** Generates a single dropdown option object for the given sort field */\n  private getDropdownOption(sortField: SortField): optionInterface {\n    return {\n      id: sortField,\n      label: html`\n        <span class=\"dropdown-option-label\">\n          ${SORT_OPTIONS[sortField].displayName}\n        </span>\n      `,\n    };\n  }\n\n  /** Handler for when a new sort dropdown option is selected */\n  private sortOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\n    this.dropdownBackdropVisible = false;\n\n    const sortField = e.detail.option.id as SortField;\n    this.setSelectedSort(sortField);\n\n    this.alphaSelectorVisible = null;\n    if (sortField !== 'title' && this.selectedTitleFilter) {\n      this.selectedTitleFilter = null;\n      this.emitTitleLetterChangedEvent();\n    }\n    if (sortField !== 'creator' && this.selectedCreatorFilter) {\n      this.selectedCreatorFilter = null;\n      this.emitCreatorLetterChangedEvent();\n    }\n  }\n\n  /** Template for rendering the three display mode options */\n  /** Added data-testid for Playwright testing * */\n  private get displayOptionTemplate() {\n    return html`\n      <ul>\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${() => {\n              this.displayMode = 'grid';\n            }}\n            class=${this.displayMode === 'grid' ? 'active' : ''}\n            title=${msg('Tile view')}\n            data-testid=\"grid-button\"\n          >\n            ${tileIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-detail-button\"\n            @click=${() => {\n              this.displayMode = 'list-detail';\n            }}\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\n            title=${msg('List view')}\n            data-testid=\"list-detail-button\"\n          >\n            ${listIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-compact-button\"\n            @click=${() => {\n              this.displayMode = 'list-compact';\n            }}\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\n            title=${msg('Compact list view')}\n            data-testid=\"list-compact-button\"\n          >\n            ${compactIcon}\n          </button>\n        </li>\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for rendering the transparent backdrop to capture clicks outside the\n   * dropdown menu while it is open.\n   */\n  private get dropdownBackdrop() {\n    return html`\n      <div\n        id=\"sort-selector-backdrop\"\n        @keyup=${this.closeDropdown}\n        @click=${this.closeDropdown}\n      ></div>\n    `;\n  }\n\n  /** Closes the sorting dropdown component's menus */\n  private closeDropdown() {\n    this.dropdownBackdropVisible = false;\n\n    if (!this.sortOptionsDropdown) return;\n    this.sortOptionsDropdown.open = false;\n    this.sortOptionsDropdown.classList.remove('open');\n  }\n\n  setSortDirection(sortDirection: SortDirection) {\n    this.sortDirection = sortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** Toggles the current sort direction between 'asc' and 'desc' */\n  private toggleSortDirection() {\n    this.setSortDirection(\n      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',\n    );\n  }\n\n  private handleSortDirectionClicked(): void {\n    if (\n      !this.sortDirection &&\n      this.defaultSortField &&\n      this.defaultSortDirection\n    ) {\n      // When the sort direction is merely defaulted (not set by the user), clicking\n      // the toggled button should \"promote\" the default sort to an explicitly-set one\n      // and then toggle it as usual.\n      this.selectedSort = this.defaultSortField;\n      this.sortDirection = this.defaultSortDirection;\n    }\n\n    this.toggleSortDirection();\n  }\n\n  setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    // Apply this field's default sort direction\n    const sortOption = SORT_OPTIONS[sort];\n    this.sortDirection = sortOption.defaultSortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** The current sort field, or the default one if no explicit sort is set */\n  private get finalizedSortField(): SortField {\n    const resolvedField =\n      this.selectedSort === SortField.default\n        ? this.defaultSortField\n        : this.selectedSort;\n    if (this.sortFieldAvailability[resolvedField]) return resolvedField;\n\n    // Fall back to the first available sort option shown in the sort bar, if\n    // the requested one isn't available\n    return this.firstAvailableOption?.field ?? resolvedField;\n  }\n\n  /** The current sort direction, or the default one if no explicit direction is set */\n  private get finalizedSortDirection(): SortDirection | null {\n    return this.sortDirection === null\n      ? this.defaultSortDirection\n      : this.sortDirection;\n  }\n\n  /** The first option shown in the sort dropdown, or undefined if none are available */\n  private get firstAvailableOption(): SortOption | undefined {\n    return Object.values(SORT_OPTIONS).find(\n      opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n    );\n  }\n\n  /** Whether the sort direction button should be enabled for the current sort */\n  private get canChangeSortDirection(): boolean {\n    return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedTitleFilter}\n      .letterCounts=${this.prefixFilterCountMap?.title}\n      ariaLandmarkLabel=${msg('Filter by title letter')}\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedCreatorFilter}\n      .letterCounts=${this.prefixFilterCountMap?.creator}\n      ariaLandmarkLabel=${msg('Filter by creator letter')}\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>,\n  ) {\n    this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n    this.emitTitleLetterChangedEvent();\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>,\n  ) {\n    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private emitTitleLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'titleLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedTitleFilter },\n      },\n    );\n    this.dispatchEvent(event);\n  }\n\n  private emitCreatorLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'creatorLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedCreatorFilter },\n      },\n    );\n    this.dispatchEvent(event);\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent<{\n      displayMode?: CollectionDisplayMode;\n    }>('displayModeChanged', {\n      detail: { displayMode: this.displayMode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitSortChangedEvent() {\n    const event = new CustomEvent<{\n      selectedSort: SortField;\n      sortDirection: SortDirection | null;\n    }>('sortChanged', {\n      detail: {\n        selectedSort: this.selectedSort,\n        sortDirection: this.sortDirection,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles() {\n    const disabledIconColor = css`#bbbbbb`;\n\n    return [\n      srOnlyStyle,\n      css`\n        #container {\n          position: relative;\n        }\n\n        #sort-bar {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n          padding-bottom: 1px;\n          border-bottom: 1px solid #2c2c2c;\n          font-size: 1.4rem;\n        }\n\n        #sort-options {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\n        }\n\n        ul {\n          list-style: none;\n          display: flex;\n          align-items: center;\n          margin: 0;\n          padding: 0;\n        }\n\n        li {\n          padding: 0;\n        }\n\n        .sort-by-text {\n          margin-right: 5px;\n          font-weight: bold;\n          white-space: nowrap;\n        }\n\n        .sort-direction-container {\n          display: flex;\n          align-self: stretch;\n          flex: 0;\n          margin: 0 3px;\n        }\n\n        .sort-direction-selector {\n          display: flex;\n          justify-content: center;\n          width: 30px;\n          margin: 0 5px 0 0;\n          padding: 7px 8px;\n          max-height: fit-content;\n          border-radius: 5px;\n          background: white;\n          border: 1px solid rgb(25, 72, 128);\n          appearance: none;\n          cursor: pointer;\n        }\n\n        .sort-direction-selector:disabled {\n          cursor: not-allowed;\n          border-color: ${disabledIconColor};\n        }\n\n        .sort-direction-icon {\n          display: flex;\n          align-items: center;\n          background: none;\n          color: inherit;\n          border: none;\n          padding: 0;\n          outline: inherit;\n          width: 12px;\n          height: 12px;\n        }\n\n        .sort-direction-icon > svg {\n          flex: 1;\n        }\n\n        #sort-selector-container {\n          flex: 1;\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n        }\n\n        #sort-dropdown-container {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n        }\n\n        #sort-selector-backdrop {\n          position: fixed;\n          top: 0;\n          left: 0;\n          width: 100vw;\n          height: 100vh;\n          z-index: 1;\n          background-color: transparent;\n        }\n\n        #display-style-selector {\n          flex: 0;\n        }\n\n        #display-style-selector button {\n          background: none;\n          color: inherit;\n          border: none;\n          appearance: none;\n          cursor: pointer;\n          -webkit-appearance: none;\n          fill: ${disabledIconColor};\n        }\n\n        #display-style-selector button.active {\n          fill: var(--ia-theme-primary-text-color, #2c2c2c);\n        }\n\n        #display-style-selector button svg {\n          width: 24px;\n          height: 24px;\n        }\n\n        ia-dropdown {\n          --dropdownTextColor: white;\n          --dropdownOffsetTop: 0;\n          --dropdownBorderTopWidth: 0;\n          --dropdownBorderTopLeftRadius: 0;\n          --dropdownBorderTopRightRadius: 0;\n          --dropdownWhiteSpace: nowrap;\n          --dropdownListZIndex: 2;\n          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n          --dropdownSelectedTextColor: white;\n          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n          --caretHeight: 9px;\n          --caretWidth: 12px;\n          --caretPadding: 0 5px 0 0;\n        }\n        ia-dropdown.selected .dropdown-label {\n          font-weight: bold;\n        }\n        ia-dropdown.open {\n          z-index: 2;\n        }\n\n        .dropdown-label {\n          display: inline-block;\n          height: 100%;\n          padding-left: 5px;\n          font-size: 1.4rem;\n          font-family: var(--ia-theme-base-font-family);\n          line-height: 2;\n          color: var(--ia-theme-primary-text-color, #2c2c2c);\n          white-space: nowrap;\n          user-select: none;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { msg, str } from '@lit/localize';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n  CollectionDisplayMode,\n  defaultSortAvailability,\n  PrefixFilterCounts,\n  PrefixFilterType,\n  SORT_OPTIONS,\n  SortField,\n  SortOption,\n} from '../models';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { GRID_ZOOM_COLUMNS } from '../utils/grid-zoom';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nimport '@internetarchive/ia-dropdown';\nimport './alpha-bar';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar extends LitElement {\n  /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  /** The default sort direction to use if none is set */\n  @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n  /** The default sort field to use if none is set */\n  @property({ type: String }) defaultSortField: Exclude<\n    SortField,\n    SortField.default\n  > = SortField.relevance;\n\n  /** The current sort direction (asc/desc), or null if none is set */\n  @property({ type: String }) sortDirection: SortDirection | null = null;\n\n  /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n  @property({ type: String }) selectedSort: SortField = SortField.default;\n\n  /** The currently selected title letter filter, or null if none is set */\n  @property({ type: String }) selectedTitleFilter: string | null = null;\n\n  /** The currently selected creator letter filter, or null if none is set */\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n  /** Whether to show the grid zoom slider (a prototype). */\n  @property({ type: Boolean }) showGridZoomSlider = false;\n\n  /** The grid zoom level (an index into the zoom levels, smallest column count first). */\n  @property({ type: Number }) gridZoomLevel = 0;\n\n  /** The slider's value while the viewer is moving it, until the grid catches up. */\n  @state() private pendingSliderValue?: number;\n\n  /**\n   * Map defining which sortable fields should be included on the sort bar.\n   *\n   * E.g.,\n   * ```\n   * {\n   *   [SortField.relevance]: true,\n   *   [SortField.date]: false,\n   *   [SortField.title]: true,\n   *   ...\n   * }\n   * ```\n   */\n  @property({ type: Object }) sortFieldAvailability = defaultSortAvailability;\n\n  /** Whether to replace the default sort options with a slot for customization (default `false`) */\n  @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n    false;\n\n  /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n  @property({ type: Boolean, reflect: true })\n  suppressDisplayModes: boolean = false;\n\n  /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n  @property({ type: Object }) prefixFilterCountMap?: Record<\n    PrefixFilterType,\n    PrefixFilterCounts\n  >;\n\n  /**\n   * Which of the alphabet bars (title/creator) should be shown, or null if one\n   * should not currently be rendered.\n   */\n  @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n  /**\n   * Whether the transparent backdrop to catch clicks outside the dropdown menu\n   * should be rendered.\n   */\n  @state() dropdownBackdropVisible = false;\n\n  /** The single, consolidated dropdown component containing all available options */\n  @query('#sort-dropdown')\n  private sortOptionsDropdown!: IaDropdown;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <div id=\"sort-bar-row\">\n          <section id=\"sort-bar\" aria-label=\"Sorting options\">\n            <slot name=\"sort-options-left\"></slot>\n            <div id=\"sort-options\">\n              ${!this.enableSortOptionsSlot\n                ? html`\n                    <div class=\"sort-direction-container\">\n                      ${this.sortDirectionSelectorTemplate}\n                    </div>\n                    <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n                    <div id=\"sort-selector-container\">\n                      ${this.sortSelectorTemplate}\n                    </div>\n                  `\n                : html`<slot name=\"sort-options\"></slot>`}\n            </div>\n            <slot name=\"sort-options-right\"></slot>\n\n            ${this.showGridZoomSlider ? this.gridZoomSliderTemplate : nothing}\n            ${this.suppressDisplayModes\n              ? nothing\n              : html`<div id=\"display-style-selector\">\n                  ${this.displayOptionTemplate}\n                </div>`}\n          </section>\n          <slot name=\"sort-bar-end\"></slot>\n        </div>\n\n        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n        ${this.alphaBarTemplate}\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues) {\n    if (changed.has('gridZoomLevel')) {\n      this.pendingSliderValue = undefined;\n    }\n    if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n      // If the sort is changed from its default without a direction set,\n      // we adopt the default sort direction for that sort type.\n      if (\n        this.selectedSort &&\n        this.selectedSort !== SortField.default &&\n        this.sortDirection === null\n      ) {\n        const sortOption = SORT_OPTIONS[this.finalizedSortField];\n        this.sortDirection = sortOption.defaultSortDirection;\n      }\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\n    }\n\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n      this.alphaSelectorVisible = 'title';\n    }\n\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n      this.alphaSelectorVisible = 'creator';\n    }\n\n    if (changed.has('dropdownBackdropVisible')) {\n      this.setupEscapeListeners();\n    }\n  }\n\n  private setupEscapeListeners() {\n    if (this.dropdownBackdropVisible) {\n      document.addEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener,\n      );\n    } else {\n      document.removeEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener,\n      );\n    }\n  }\n\n  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeDropdown();\n    }\n  };\n\n  /**\n   * Template to render the alphabet bar, or `nothing` if it should not be rendered\n   * for the current sort\n   */\n  private get alphaBarTemplate(): TemplateResult | typeof nothing {\n    if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n    if (this.alphaSelectorVisible === null) {\n      if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n      if (this.selectedSort === 'title') return this.titleSelectorBar;\n    } else {\n      return this.alphaSelectorVisible === 'creator'\n        ? this.creatorSelectorBar\n        : this.titleSelectorBar;\n    }\n\n    return nothing;\n  }\n\n  /** Template to render the sort direction toggle button */\n  private get sortDirectionSelectorTemplate(): TemplateResult {\n    const oppositeSortDirectionReadable =\n      this.sortDirection === 'asc' ? msg('descending') : msg('ascending');\n    const buttonLabel = this.canChangeSortDirection\n      ? msg(str`Change to ${oppositeSortDirectionReadable} sort`)\n      : msg('Directions are not available for the current sort option');\n\n    return html`\n      <button\n        class=\"sort-direction-selector\"\n        title=${buttonLabel}\n        ?disabled=${!this.canChangeSortDirection}\n        @click=${this.handleSortDirectionClicked}\n      >\n        <span class=\"sr-only\">${buttonLabel}</span>\n        ${this.sortDirectionIcon}\n      </button>\n    `;\n  }\n\n  /** Template to render the sort direction button's icon in the correct current state */\n  private get sortDirectionIcon(): TemplateResult {\n    // Show a fully disabled icon for sort options without direction support\n    if (!this.canChangeSortDirection) {\n      return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n    }\n\n    // For all other sorts, show the ascending/descending direction\n    return html`\n      <div class=\"sort-direction-icon\">\n        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n      </div>\n    `;\n  }\n\n  /** The template to render all the sort options in a single dropdown */\n  private get sortSelectorTemplate() {\n    const displayedOptions = Object.values(SORT_OPTIONS).filter(\n      opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n    );\n\n    return html`\n      <div id=\"sort-dropdown-container\">\n        ${this.getSortDropdown({\n          displayName: SORT_OPTIONS[this.finalizedSortField].displayName,\n          id: 'sort-dropdown',\n          selected: true,\n          dropdownOptions: displayedOptions.map(opt =>\n            this.getDropdownOption(opt.field),\n          ),\n          selectedOption: this.finalizedSortField,\n          onOptionSelected: this.sortOptionSelected,\n          onDropdownClick: () => {\n            this.dropdownBackdropVisible = this.sortOptionsDropdown.open;\n            this.sortOptionsDropdown.classList.toggle(\n              'open',\n              this.sortOptionsDropdown.open,\n            );\n          },\n        })}\n      </div>\n    `;\n  }\n\n  /**\n   * Generates a dropdown component containing multiple grouped sort options.\n   *\n   * @param options.displayName The name to use for the dropdown's visible label\n   * @param options.id The id to apply to the dropdown element\n   * @param options.dropdownOptions An array of option objects used to populate the dropdown\n   * @param options.selectedOption The id of the option that should be initially selected\n   * @param options.selected A boolean indicating whether this dropdown should use its\n   *  selected appearance\n   * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\n   * @param options.onDropdownClick A handler for click events on the dropdown\n   */\n  private getSortDropdown(options: {\n    displayName: string;\n    id: string;\n    dropdownOptions: optionInterface[];\n    selectedOption?: string;\n    selected: boolean;\n    onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n    onDropdownClick?: (e: PointerEvent) => void;\n  }): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=${options.id}\n        class=${options.selected ? 'selected' : ''}\n        displayCaret\n        closeOnSelect\n        includeSelectedOption\n        .openViaButton=${options.selected}\n        .options=${options.dropdownOptions}\n        .selectedOption=${options.selectedOption ?? ''}\n        @optionSelected=${options.onOptionSelected ?? nothing}\n        @click=${options.onDropdownClick ?? nothing}\n      >\n        <span\n          class=\"dropdown-label\"\n          slot=\"dropdown-label\"\n          data-title=${options.displayName}\n        >\n          ${options.displayName}\n        </span>\n      </ia-dropdown>\n    `;\n  }\n\n  /** Generates a single dropdown option object for the given sort field */\n  private getDropdownOption(sortField: SortField): optionInterface {\n    return {\n      id: sortField,\n      label: html`\n        <span class=\"dropdown-option-label\">\n          ${SORT_OPTIONS[sortField].displayName}\n        </span>\n      `,\n    };\n  }\n\n  /** Handler for when a new sort dropdown option is selected */\n  private sortOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\n    this.dropdownBackdropVisible = false;\n\n    const sortField = e.detail.option.id as SortField;\n    this.setSelectedSort(sortField);\n\n    this.alphaSelectorVisible = null;\n    if (sortField !== 'title' && this.selectedTitleFilter) {\n      this.selectedTitleFilter = null;\n      this.emitTitleLetterChangedEvent();\n    }\n    if (sortField !== 'creator' && this.selectedCreatorFilter) {\n      this.selectedCreatorFilter = null;\n      this.emitCreatorLetterChangedEvent();\n    }\n  }\n\n  /**\n   * The grid zoom slider. Moving right makes the tiles bigger, so its value counts\n   * down from the highest level (the most columns) to level 0 (the fewest).\n   */\n  private get gridZoomSliderTemplate() {\n    const maxValue = GRID_ZOOM_COLUMNS.length - 1;\n    const columns = GRID_ZOOM_COLUMNS[this.gridZoomLevel];\n    return html`\n      <div id=\"grid-zoom\">\n        <input\n          type=\"range\"\n          id=\"grid-zoom-slider\"\n          min=\"0\"\n          max=${maxValue}\n          step=\"1\"\n          .value=${String(\n            this.pendingSliderValue ?? maxValue - this.gridZoomLevel,\n          )}\n          aria-label=${msg('Tile size')}\n          aria-valuetext=${columns === 1\n            ? msg('1 column')\n            : msg(str`${columns} columns`)}\n          data-testid=\"grid-zoom-slider\"\n          @input=${this.gridZoomSliderInput}\n        />\n      </div>\n    `;\n  }\n\n  private gridZoomSliderInput(e: Event): void {\n    const value = Number((e.target as HTMLInputElement).value);\n    this.pendingSliderValue = value;\n    this.dispatchEvent(\n      new CustomEvent<{ level: number }>('gridZoomLevelChanged', {\n        detail: { level: GRID_ZOOM_COLUMNS.length - 1 - value },\n      }),\n    );\n  }\n\n  /** Template for rendering the three display mode options */\n  /** Added data-testid for Playwright testing * */\n  private get displayOptionTemplate() {\n    return html`\n      <ul>\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${() => {\n              this.displayMode = 'grid';\n            }}\n            class=${this.displayMode === 'grid' ? 'active' : ''}\n            title=\"Tile view\"\n            data-testid=\"grid-button\"\n          >\n            ${tileIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-detail-button\"\n            @click=${() => {\n              this.displayMode = 'list-detail';\n            }}\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\n            title=\"List view\"\n            data-testid=\"list-detail-button\"\n          >\n            ${listIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-compact-button\"\n            @click=${() => {\n              this.displayMode = 'list-compact';\n            }}\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\n            title=\"Compact list view\"\n            data-testid=\"list-compact-button\"\n          >\n            ${compactIcon}\n          </button>\n        </li>\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for rendering the transparent backdrop to capture clicks outside the\n   * dropdown menu while it is open.\n   */\n  private get dropdownBackdrop() {\n    return html`\n      <div\n        id=\"sort-selector-backdrop\"\n        @keyup=${this.closeDropdown}\n        @click=${this.closeDropdown}\n      ></div>\n    `;\n  }\n\n  /** Closes the sorting dropdown component's menus */\n  private closeDropdown() {\n    this.dropdownBackdropVisible = false;\n\n    if (!this.sortOptionsDropdown) return;\n    this.sortOptionsDropdown.open = false;\n    this.sortOptionsDropdown.classList.remove('open');\n  }\n\n  setSortDirection(sortDirection: SortDirection) {\n    this.sortDirection = sortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** Toggles the current sort direction between 'asc' and 'desc' */\n  private toggleSortDirection() {\n    this.setSortDirection(\n      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',\n    );\n  }\n\n  private handleSortDirectionClicked(): void {\n    if (\n      !this.sortDirection &&\n      this.defaultSortField &&\n      this.defaultSortDirection\n    ) {\n      // When the sort direction is merely defaulted (not set by the user), clicking\n      // the toggled button should \"promote\" the default sort to an explicitly-set one\n      // and then toggle it as usual.\n      this.selectedSort = this.defaultSortField;\n      this.sortDirection = this.defaultSortDirection;\n    }\n\n    this.toggleSortDirection();\n  }\n\n  setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    // Apply this field's default sort direction\n    const sortOption = SORT_OPTIONS[sort];\n    this.sortDirection = sortOption.defaultSortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** The current sort field, or the default one if no explicit sort is set */\n  private get finalizedSortField(): SortField {\n    const resolvedField =\n      this.selectedSort === SortField.default\n        ? this.defaultSortField\n        : this.selectedSort;\n    if (this.sortFieldAvailability[resolvedField]) return resolvedField;\n\n    // Fall back to the first available sort option shown in the sort bar, if\n    // the requested one isn't available\n    return this.firstAvailableOption?.field ?? resolvedField;\n  }\n\n  /** The current sort direction, or the default one if no explicit direction is set */\n  private get finalizedSortDirection(): SortDirection | null {\n    return this.sortDirection === null\n      ? this.defaultSortDirection\n      : this.sortDirection;\n  }\n\n  /** The first option shown in the sort dropdown, or undefined if none are available */\n  private get firstAvailableOption(): SortOption | undefined {\n    return Object.values(SORT_OPTIONS).find(\n      opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n    );\n  }\n\n  /** Whether the sort direction button should be enabled for the current sort */\n  private get canChangeSortDirection(): boolean {\n    return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedTitleFilter}\n      .letterCounts=${this.prefixFilterCountMap?.title}\n      ariaLandmarkLabel=\"Filter by title letter\"\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedCreatorFilter}\n      .letterCounts=${this.prefixFilterCountMap?.creator}\n      ariaLandmarkLabel=\"Filter by creator letter\"\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>,\n  ) {\n    this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n    this.emitTitleLetterChangedEvent();\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>,\n  ) {\n    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private emitTitleLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'titleLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedTitleFilter },\n      },\n    );\n    this.dispatchEvent(event);\n  }\n\n  private emitCreatorLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'creatorLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedCreatorFilter },\n      },\n    );\n    this.dispatchEvent(event);\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent<{\n      displayMode?: CollectionDisplayMode;\n    }>('displayModeChanged', {\n      detail: { displayMode: this.displayMode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitSortChangedEvent() {\n    const event = new CustomEvent<{\n      selectedSort: SortField;\n      sortDirection: SortDirection | null;\n    }>('sortChanged', {\n      detail: {\n        selectedSort: this.selectedSort,\n        sortDirection: this.sortDirection,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles() {\n    const disabledIconColor = css`#bbbbbb`;\n\n    return [\n      srOnlyStyle,\n      css`\n        #container {\n          position: relative;\n        }\n\n        /*\n         * The sort-bar-end slot shares this row with the sort bar but sits\n         * outside its \"Sorting options\" landmark. When the slotted content\n         * doesn't fit beside the sort controls, it wraps onto its own line at\n         * the right rather than overflowing the row.\n         */\n        #sort-bar-row {\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: flex-end;\n          align-items: center;\n          padding-bottom: 1px;\n          border-bottom: 1px solid #2c2c2c;\n          font-size: 1.4rem;\n        }\n\n        #sort-bar {\n          flex: auto;\n          min-width: 0;\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n        }\n\n        #sort-options {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\n        }\n\n        ul {\n          list-style: none;\n          display: flex;\n          align-items: center;\n          margin: 0;\n          padding: 0;\n        }\n\n        li {\n          padding: 0;\n        }\n\n        .sort-by-text {\n          margin-right: 5px;\n          font-weight: bold;\n          white-space: nowrap;\n        }\n\n        .sort-direction-container {\n          display: flex;\n          align-self: stretch;\n          flex: 0;\n          margin: 0 3px;\n        }\n\n        .sort-direction-selector {\n          display: flex;\n          justify-content: center;\n          width: 30px;\n          margin: 0 5px 0 0;\n          padding: 7px 8px;\n          max-height: fit-content;\n          border-radius: 5px;\n          background: white;\n          border: 1px solid rgb(25, 72, 128);\n          appearance: none;\n          cursor: pointer;\n        }\n\n        .sort-direction-selector:disabled {\n          cursor: not-allowed;\n          border-color: ${disabledIconColor};\n        }\n\n        .sort-direction-icon {\n          display: flex;\n          align-items: center;\n          background: none;\n          color: inherit;\n          border: none;\n          padding: 0;\n          outline: inherit;\n          width: 12px;\n          height: 12px;\n        }\n\n        .sort-direction-icon > svg {\n          flex: 1;\n        }\n\n        #sort-selector-container {\n          flex: 1;\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n        }\n\n        #sort-dropdown-container {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n        }\n\n        #sort-selector-backdrop {\n          position: fixed;\n          top: 0;\n          left: 0;\n          width: 100vw;\n          height: 100vh;\n          z-index: 1;\n          background-color: transparent;\n        }\n\n        #display-style-selector {\n          flex: 0;\n        }\n\n        #grid-zoom {\n          display: flex;\n          align-items: center;\n          margin-right: 10px;\n        }\n\n        #grid-zoom-slider {\n          width: 90px;\n          margin: 0;\n          cursor: pointer;\n          accent-color: var(--ia-theme-primary-text-color, #2c2c2c);\n        }\n\n        #display-style-selector button {\n          background: none;\n          color: inherit;\n          border: none;\n          appearance: none;\n          cursor: pointer;\n          -webkit-appearance: none;\n          fill: ${disabledIconColor};\n        }\n\n        #display-style-selector button.active {\n          fill: var(--ia-theme-primary-text-color, #2c2c2c);\n        }\n\n        #display-style-selector button svg {\n          width: 24px;\n          height: 24px;\n        }\n\n        ia-dropdown {\n          --dropdownTextColor: white;\n          --dropdownOffsetTop: 0;\n          --dropdownBorderTopWidth: 0;\n          --dropdownBorderTopLeftRadius: 0;\n          --dropdownBorderTopRightRadius: 0;\n          --dropdownWhiteSpace: nowrap;\n          --dropdownListZIndex: 2;\n          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n          --dropdownSelectedTextColor: white;\n          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n          --caretHeight: 9px;\n          --caretWidth: 12px;\n          --caretPadding: 0 5px 0 0;\n        }\n        ia-dropdown.selected .dropdown-label {\n          font-weight: bold;\n        }\n        ia-dropdown.open {\n          z-index: 2;\n        }\n\n        .dropdown-label {\n          display: inline-block;\n          height: 100%;\n          padding-left: 5px;\n          font-size: 1.4rem;\n          font-family: var(--ia-theme-base-font-family);\n          line-height: 2;\n          color: var(--ia-theme-primary-text-color, #2c2c2c);\n          white-space: nowrap;\n          user-select: none;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { localized, msg } from '@lit/localize';
+import { msg } from '@lit/localize';
 import { BaseTileComponent } from '../base-tile-component';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import '../image-block';
@@ -103,8 +103,7 @@ __decorate([
     property({ type: Boolean })
 ], AccountTile.prototype, "showInfoButton", void 0);
 AccountTile = __decorate([
-    customElement('account-tile'),
-    localized()
+    customElement('account-tile')
 ], AccountTile);
 export { AccountTile };
 //# sourceMappingURL=account-tile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAIf,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,iBAAiB;IAA3C;QACL;;;;;;;;;;;;;;WAcG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAqFtD,CAAC;IAnFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;4BACE,IAAI,CAAC,gBAAgB;;;KAG5C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK,EAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,oBAAoB,CAAC,YAAY;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,KAAK,EAAE,SAAS;mBACrB,IAAI,CAAC,KAAK,EAAE,SAAS;kBACtB,IAAI,CAAC,KAAK,EAAE,QAAQ;sBAChB,IAAI,CAAC,KAAK,EAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AArF8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAjBzC,WAAW;IAFvB,aAAa,CAAC,cAAc,CAAC;IAC7B,SAAS,EAAE;GACC,WAAW,CAsGvB","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { localized, msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\n@localized()\nexport class AccountTile extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getAvatarTemplate} ${this.getTitleTemplate}\n            ${this.getArchivistTemplate}\n          </div>\n          ${this.getTileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getAvatarTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n        .suppressBlurring=${this.suppressBlurring}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.identifier}</h4>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>${this.displayValueProvider.accountLabel}</span>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`<tile-stats\n      .mediatype=${this.model?.mediatype}\n      .itemCount=${this.model?.itemCount}\n      .favCount=${this.model?.favCount}\n      .commentCount=${this.model?.commentCount}\n    >\n    </tile-stats>`;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles() {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,iBAAiB;IAA3C;QACL;;;;;;;;;;;;;;WAcG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAqFtD,CAAC;IAnFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;4BACE,IAAI,CAAC,gBAAgB;;;KAG5C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK,EAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,oBAAoB,CAAC,YAAY;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,KAAK,EAAE,SAAS;mBACrB,IAAI,CAAC,KAAK,EAAE,SAAS;kBACtB,IAAI,CAAC,KAAK,EAAE,QAAQ;sBAChB,IAAI,CAAC,KAAK,EAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AArF8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAjBzC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAsGvB","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getAvatarTemplate} ${this.getTitleTemplate}\n            ${this.getArchivistTemplate}\n          </div>\n          ${this.getTileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getAvatarTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n        .suppressBlurring=${this.suppressBlurring}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.identifier}</h4>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>${this.displayValueProvider.accountLabel}</span>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`<tile-stats\n      .mediatype=${this.model?.mediatype}\n      .itemCount=${this.model?.itemCount}\n      .favCount=${this.model?.favCount}\n      .commentCount=${this.model?.commentCount}\n    >\n    </tile-stats>`;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles() {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -2,10 +2,9 @@ import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { localized, msg, str } from '@lit/localize';
+import { msg } from '@lit/localize';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { formatUnitSize } from '../../utils/format-unit-size';
-import { getLocale } from '../../utils/get-locale';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import { BaseTileComponent } from '../base-tile-component';
 import '../image-block';
@@ -35,6 +34,11 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
             container: true,
             minimal: this.layoutType === 'minimal',
         });
+        if (this.layoutType === 'thumbnail-only') {
+            return html `<div class=${containerClasses}>
+        ${this.getImageBlockTemplate}
+      </div>`;
+        }
         return html `
       <div class=${containerClasses}>
         ${this.infoButtonTemplate}
@@ -76,14 +80,10 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
     `;
     }
     get getItemsTemplate() {
-        const itemCount = this.model?.itemCount;
-        const formattedCount = itemCount === undefined
-            ? undefined
-            : new Intl.NumberFormat(getLocale()).format(itemCount);
-        const itemsLabel = itemCount === 1
-            ? msg(str `${formattedCount} item`)
-            : msg(str `${formattedCount} items`);
-        return html `<span id="item-count">${itemsLabel}</span>`;
+        const collectionItems = this.model?.itemCount?.toLocaleString();
+        return html `<span id="item-count"
+      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
+    >`;
     }
     get getSizeTemplate() {
         const collectionSize = this.model?.collectionSize ?? 0;
@@ -177,8 +177,7 @@ __decorate([
     property({ type: String })
 ], CollectionTile.prototype, "layoutType", void 0);
 CollectionTile = __decorate([
-    customElement('collection-tile'),
-    localized()
+    customElement('collection-tile')
 ], CollectionTile);
 export { CollectionTile };
 //# sourceMappingURL=collection-tile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg, str } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { getLocale } from '../../utils/get-locale';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { LayoutType } from '../models';\nimport '../image-block';\n\n@customElement('collection-tile')\n@localized()\nexport class CollectionTile extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  @property({ type: String }) layoutType: LayoutType = 'default';\n\n  render() {\n    const containerClasses = classMap({\n      container: true,\n      minimal: this.layoutType === 'minimal',\n    });\n\n    return html`\n      <div class=${containerClasses}>\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n          </div>\n        </div>\n\n        ${this.getTileStatsTemplate}\n      </div>\n    `;\n  }\n\n  private get getImageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n        .suppressBlurring=${this.suppressBlurring}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h3 class=\"truncated\">${this.model?.title}</h3>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`\n      <div id=\"item-stats\">\n        <div id=\"item-mediatype\">${collectionIcon}</div>\n\n        <div id=\"stats-row\">\n          ${this.getItemsTemplate} ${this.getSizeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getItemsTemplate() {\n    const itemCount = this.model?.itemCount;\n    const formattedCount =\n      itemCount === undefined\n        ? undefined\n        : new Intl.NumberFormat(getLocale()).format(itemCount);\n    const itemsLabel =\n      itemCount === 1\n        ? msg(str`${formattedCount} item`)\n        : msg(str`${formattedCount} items`);\n\n    return html`<span id=\"item-count\">${itemsLabel}</span>`;\n  }\n\n  private get getSizeTemplate() {\n    const collectionSize = this.model?.collectionSize ?? 0;\n\n    return collectionSize\n      ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\n      : ``;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n    const whiteColor = css`#fff`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          background-color: ${tileBackgroundColor};\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .item-info {\n          flex-grow: initial;\n        }\n\n        h4.truncated,\n        h3.truncated {\n          color: ${whiteColor};\n        }\n\n        #item-mediatype svg {\n          filter: invert(100%);\n          height: 2.5rem;\n          align-items: baseline;\n        }\n\n        .container:hover > #title {\n          text-decoration: underline;\n        }\n\n        /* this is a workaround for Safari 15 where the hover effects are not working */\n        image-block:hover > #title {\n          text-decoration: underline;\n        }\n\n        #item-stats {\n          display: flex;\n          padding: 0 5px 5px;\n          align-items: center;\n        }\n\n        #stats-row {\n          display: flex;\n          align-items: baseline;\n          color: ${whiteColor};\n          flex-direction: column;\n          margin-left: 10px;\n        }\n\n        .minimal #item-stats {\n          display: none;\n        }\n\n        .minimal .truncated {\n          -webkit-line-clamp: initial;\n        }\n\n        .minimal .item-info {\n          padding-bottom: 5px;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { LayoutType } from '../models';\nimport '../image-block';\n\n@customElement('collection-tile')\nexport class CollectionTile extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  @property({ type: String }) layoutType: LayoutType = 'default';\n\n  render() {\n    const containerClasses = classMap({\n      container: true,\n      minimal: this.layoutType === 'minimal',\n    });\n\n    if (this.layoutType === 'thumbnail-only') {\n      return html`<div class=${containerClasses}>\n        ${this.getImageBlockTemplate}\n      </div>`;\n    }\n\n    return html`\n      <div class=${containerClasses}>\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n          </div>\n        </div>\n\n        ${this.getTileStatsTemplate}\n      </div>\n    `;\n  }\n\n  private get getImageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n        .suppressBlurring=${this.suppressBlurring}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h3 class=\"truncated\">${this.model?.title}</h3>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`\n      <div id=\"item-stats\">\n        <div id=\"item-mediatype\">${collectionIcon}</div>\n\n        <div id=\"stats-row\">\n          ${this.getItemsTemplate} ${this.getSizeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getItemsTemplate() {\n    const collectionItems = this.model?.itemCount?.toLocaleString();\n\n    return html`<span id=\"item-count\"\n      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span\n    >`;\n  }\n\n  private get getSizeTemplate() {\n    const collectionSize = this.model?.collectionSize ?? 0;\n\n    return collectionSize\n      ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\n      : ``;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n    const whiteColor = css`#fff`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          background-color: ${tileBackgroundColor};\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .item-info {\n          flex-grow: initial;\n        }\n\n        h4.truncated,\n        h3.truncated {\n          color: ${whiteColor};\n        }\n\n        #item-mediatype svg {\n          filter: invert(100%);\n          height: 2.5rem;\n          align-items: baseline;\n        }\n\n        .container:hover > #title {\n          text-decoration: underline;\n        }\n\n        /* this is a workaround for Safari 15 where the hover effects are not working */\n        image-block:hover > #title {\n          text-decoration: underline;\n        }\n\n        #item-stats {\n          display: flex;\n          padding: 0 5px 5px;\n          align-items: center;\n        }\n\n        #stats-row {\n          display: flex;\n          align-items: baseline;\n          color: ${whiteColor};\n          flex-direction: column;\n          margin-left: 10px;\n        }\n\n        .minimal #item-stats {\n          display: none;\n        }\n\n        .minimal .truncated {\n          -webkit-line-clamp: initial;\n        }\n\n        .minimal .item-info {\n          padding-bottom: 5px;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -7,10 +7,14 @@ import '../text-snippet-block';
 import '../item-image';
 import '../tile-mediatype-icon';
 import './tile-stats';
+import type { TilePreviewOptions } from '../preview/tile-preview-media';
 export declare class ItemTile extends BaseTileComponent {
     showInfoButton: boolean;
     showTvClips: boolean;
     layoutType: LayoutType;
+    /** Whether a live preview is showing over the tile's image */
+    previewActive: boolean;
+    previewOptions: TilePreviewOptions;
     render(): TemplateResult<1>;
     /**
      * Templates