@internetarchive/collection-browser 4.8.0 → 4.8.1-webdev-9227.1

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 { 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')\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=\"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=\"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        #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 { 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=\"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=\"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        #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"]}

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 { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { BaseTileComponent } from '../base-tile-component';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import '../image-block';
@@ -103,7 +103,8 @@ __decorate([
     property({ type: Boolean })
 ], AccountTile.prototype, "showInfoButton", void 0);
 AccountTile = __decorate([
-    customElement('account-tile')
+    customElement('account-tile'),
+    localized()
 ], 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,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"]}
+{"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"]}

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

@@ -2,7 +2,7 @@ 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 { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { formatUnitSize } from '../../utils/format-unit-size';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
@@ -172,7 +172,8 @@ __decorate([
     property({ type: String })
 ], CollectionTile.prototype, "layoutType", void 0);
 CollectionTile = __decorate([
-    customElement('collection-tile')
+    customElement('collection-tile'),
+    localized()
 ], 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 { 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    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"]}
+{"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 } 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')\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 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.js

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { map } from 'lit/directives/map.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { BaseTileComponent } from '../base-tile-component';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
@@ -312,7 +312,8 @@ __decorate([
     property({ type: String })
 ], ItemTile.prototype, "layoutType", void 0);
 ItemTile = __decorate([
-    customElement('item-tile')
+    customElement('item-tile'),
+    localized()
 ], ItemTile);
 export { ItemTile };
 //# sourceMappingURL=item-tile.js.map

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

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

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

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';
 import { reviewsIcon } from '../../assets/img/icons/reviews';
 import { uploadIcon } from '../../assets/img/icons/upload';
@@ -197,7 +197,8 @@ __decorate([
     property({ type: Number })
 ], TileStats.prototype, "tvClipCount", void 0);
 TileStats = __decorate([
-    customElement('tile-stats')
+    customElement('tile-stats'),
+    localized()
 ], TileStats);
 export { TileStats };
 //# sourceMappingURL=tile-stats.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg, str } from '@lit/localize';\nimport { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { quoteIcon } from '../../assets/img/icons/quote';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\nimport { TileModel } from '../../models';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  /** The tile model these stats represent */\n  @property({ type: Object }) model?: TileModel;\n\n  /** The mediatype of the item these stats represent */\n  @property({ type: String }) mediatype?: string;\n\n  /** The number of uploaded items, if representing an account */\n  @property({ type: Number }) itemCount?: number;\n\n  /** The number of times the item has been viewed */\n  @property({ type: Number }) viewCount?: number;\n\n  /** The text label describing the type of views (default \"all-time views\") */\n  @property({ type: String }) viewLabel?: string;\n\n  /** The number of times the item has been favorited */\n  @property({ type: Number }) favCount?: number;\n\n  /** The number of times the item has been reviewed */\n  @property({ type: Number }) commentCount?: number;\n\n  /** Whether to show the number of TV clips in place of reviews */\n  @property({ type: Boolean }) showTvClips = false;\n\n  /** The number of times the TV item has been clipped */\n  @property({ type: Number }) tvClipCount?: number;\n\n  render() {\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          ${this.mediatypeIconColumnTemplate}\n          ${this.mediatype === 'account'\n            ? this.uploadsColumnTemplate\n            : this.viewsColumnTemplate}\n          ${this.favoritesColumnTemplate}\n          ${this.showTvClips\n            ? this.tvClipsColumnTemplate\n            : this.reviewsColumnTemplate}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Template for the mediatype icon column.\n   */\n  private get mediatypeIconColumnTemplate(): TemplateResult {\n    return html`\n      <li class=\"col\">\n        <p class=\"sr-only\">${msg('Mediatype:')}</p>\n        <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>\n      </li>\n    `;\n  }\n\n  /**\n   * Helper method to construct a template for one of the tile stat columns,\n   * given its stat count, labels, and icon.\n   *\n   * @param count The numeric count to show for the stat. If undefined, will be treated as 0.\n   * @param label The textual label describing the stat (used in the title and screenreader text).\n   * @param icon The icon visually representing the stat.\n   * @param classes Any additional CSS classes the stat column should have (optional).\n   */\n  private columnTemplate(\n    count: number | undefined,\n    label: string,\n    icon: TemplateResult,\n    classes: string[] = [],\n  ): TemplateResult {\n    const formattedCount = formatCount(count ?? 0, 'short', 'short');\n    const title = msg(str`${formattedCount} ${label}`);\n    const srLabel = label + ':';\n\n    return html`\n      <li class=\"col ${classes.join(' ')}\" title=${title}>\n        ${icon}\n        <p class=\"status-text\">\n          <span class=\"sr-only\">${srLabel}</span>\n          ${formattedCount}\n        </p>\n      </li>\n    `;\n  }\n\n  /**\n   * Template for the views count column.\n   */\n  private get viewsColumnTemplate(): TemplateResult {\n    const label = this.viewLabel ?? msg('all-time views');\n    return this.columnTemplate(this.viewCount, label, viewsIcon);\n  }\n\n  /**\n   * Template for the uploads count column (replaces views for account tiles).\n   */\n  private get uploadsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);\n  }\n\n  /**\n   * Template for the favorites count column.\n   */\n  private get favoritesColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.favCount, msg('favorites'), favIcon);\n  }\n\n  /**\n   * Template for the reviews count column.\n   */\n  private get reviewsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [\n      'reviews',\n    ]);\n  }\n\n  /**\n   * Template for the TV clips count column (replaces reviews for TV tiles).\n   */\n  private get tvClipsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        tile-mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset;\n          list-style-type: none;\n        }\n\n        li {\n          list-style-type: none;\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { localized, msg, str } from '@lit/localize';\nimport { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { quoteIcon } from '../../assets/img/icons/quote';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\nimport { TileModel } from '../../models';\n\n@customElement('tile-stats')\n@localized()\nexport class TileStats extends LitElement {\n  /** The tile model these stats represent */\n  @property({ type: Object }) model?: TileModel;\n\n  /** The mediatype of the item these stats represent */\n  @property({ type: String }) mediatype?: string;\n\n  /** The number of uploaded items, if representing an account */\n  @property({ type: Number }) itemCount?: number;\n\n  /** The number of times the item has been viewed */\n  @property({ type: Number }) viewCount?: number;\n\n  /** The text label describing the type of views (default \"all-time views\") */\n  @property({ type: String }) viewLabel?: string;\n\n  /** The number of times the item has been favorited */\n  @property({ type: Number }) favCount?: number;\n\n  /** The number of times the item has been reviewed */\n  @property({ type: Number }) commentCount?: number;\n\n  /** Whether to show the number of TV clips in place of reviews */\n  @property({ type: Boolean }) showTvClips = false;\n\n  /** The number of times the TV item has been clipped */\n  @property({ type: Number }) tvClipCount?: number;\n\n  render() {\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          ${this.mediatypeIconColumnTemplate}\n          ${this.mediatype === 'account'\n            ? this.uploadsColumnTemplate\n            : this.viewsColumnTemplate}\n          ${this.favoritesColumnTemplate}\n          ${this.showTvClips\n            ? this.tvClipsColumnTemplate\n            : this.reviewsColumnTemplate}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Template for the mediatype icon column.\n   */\n  private get mediatypeIconColumnTemplate(): TemplateResult {\n    return html`\n      <li class=\"col\">\n        <p class=\"sr-only\">${msg('Mediatype:')}</p>\n        <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>\n      </li>\n    `;\n  }\n\n  /**\n   * Helper method to construct a template for one of the tile stat columns,\n   * given its stat count, labels, and icon.\n   *\n   * @param count The numeric count to show for the stat. If undefined, will be treated as 0.\n   * @param label The textual label describing the stat (used in the title and screenreader text).\n   * @param icon The icon visually representing the stat.\n   * @param classes Any additional CSS classes the stat column should have (optional).\n   */\n  private columnTemplate(\n    count: number | undefined,\n    label: string,\n    icon: TemplateResult,\n    classes: string[] = [],\n  ): TemplateResult {\n    const formattedCount = formatCount(count ?? 0, 'short', 'short');\n    const title = msg(str`${formattedCount} ${label}`);\n    const srLabel = label + ':';\n\n    return html`\n      <li class=\"col ${classes.join(' ')}\" title=${title}>\n        ${icon}\n        <p class=\"status-text\">\n          <span class=\"sr-only\">${srLabel}</span>\n          ${formattedCount}\n        </p>\n      </li>\n    `;\n  }\n\n  /**\n   * Template for the views count column.\n   */\n  private get viewsColumnTemplate(): TemplateResult {\n    const label = this.viewLabel ?? msg('all-time views');\n    return this.columnTemplate(this.viewCount, label, viewsIcon);\n  }\n\n  /**\n   * Template for the uploads count column (replaces views for account tiles).\n   */\n  private get uploadsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);\n  }\n\n  /**\n   * Template for the favorites count column.\n   */\n  private get favoritesColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.favCount, msg('favorites'), favIcon);\n  }\n\n  /**\n   * Template for the reviews count column.\n   */\n  private get reviewsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [\n      'reviews',\n    ]);\n  }\n\n  /**\n   * Template for the TV clips count column (replaces reviews for TV tiles).\n   */\n  private get tvClipsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        tile-mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset;\n          list-style-type: none;\n        }\n\n        li {\n          list-style-type: none;\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/list/tile-list-compact-header.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { BaseTileComponent } from '../base-tile-component';
 let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponent {
     /*
@@ -104,7 +104,8 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
     }
 };
 TileListCompactHeader = __decorate([
-    customElement('tile-list-compact-header')
+    customElement('tile-list-compact-header'),
+    localized()
 ], TileListCompactHeader);
 export { TileListCompactHeader };
 //# sourceMappingURL=tile-list-compact-header.js.map

package/dist/src/tiles/list/tile-list-compact-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAGpD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,iBAAiB;IAC1D;;;;;;;;;;;;;;OAcG;IAEH,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC;YAC7B,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;YACnC,OAAO,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;YACrC,aAAa,EAAE,UAAU;SAC1B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yCAC0B,aAAa;;UAE5C,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAC,CAAC,OAAO;0BAC5C,GAAG,CAAC,OAAO,CAAC;4BACV,GAAG,CAAC,SAAS,CAAC;;YAE9B,IAAI,CAAC,oBAAoB,CAAC,SAAS,IAAI,GAAG,CAAC,WAAW,CAAC;;yBAE1C,GAAG,CAAC,MAAM,CAAC;0BACV,IAAI,CAAC,oBAAoB,CAAC,UAAU;;KAEzD,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC,CAAC;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;CACF,CAAA;AAxGY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAwGjC","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends BaseTileComponent {\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   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   */\n\n  render() {\n    const hasActions = this.tileActions.length > 0;\n    const headerClasses = classMap({\n      mobile: this.classSize === 'mobile',\n      desktop: this.classSize === 'desktop',\n      'has-actions': hasActions,\n    });\n\n    return html`\n      <div id=\"list-line-header\" class=${headerClasses}>\n        <div id=\"thumb\"></div>\n        ${hasActions ? html`<div id=\"actions-header\"></div>` : nothing}\n        <div id=\"title\">${msg('Title')}</div>\n        <div id=\"creator\">${msg('Creator')}</div>\n        <div id=\"date\">\n          ${this.displayValueProvider.dateLabel || msg('Published')}\n        </div>\n        <div id=\"icon\">${msg('Type')}</div>\n        <div id=\"views\">${this.displayValueProvider.viewsLabel}</div>\n      </div>\n    `;\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: flex-end;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 115px;\n      }\n\n      /*\n       * When tile actions are present in the rows below, reserve a matching\n       * column here so the columns stay aligned with each row.\n       */\n      #list-line-header.mobile.has-actions {\n        grid-template-columns:\n          36px var(--tileActionColumnWidth, 90px) 3fr 2fr\n          68px 35px;\n      }\n\n      #list-line-header.desktop.has-actions {\n        grid-template-columns:\n          51px var(--tileActionColumnWidth, 100px) 3fr 2fr\n          95px 30px 115px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAIpD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,iBAAiB;IAC1D;;;;;;;;;;;;;;OAcG;IAEH,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC;YAC7B,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;YACnC,OAAO,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;YACrC,aAAa,EAAE,UAAU;SAC1B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yCAC0B,aAAa;;UAE5C,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAC,CAAC,OAAO;0BAC5C,GAAG,CAAC,OAAO,CAAC;4BACV,GAAG,CAAC,SAAS,CAAC;;YAE9B,IAAI,CAAC,oBAAoB,CAAC,SAAS,IAAI,GAAG,CAAC,WAAW,CAAC;;yBAE1C,GAAG,CAAC,MAAM,CAAC;0BACV,IAAI,CAAC,oBAAoB,CAAC,UAAU;;KAEzD,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC,CAAC;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;CACF,CAAA;AAxGY,qBAAqB;IAFjC,aAAa,CAAC,0BAA0B,CAAC;IACzC,SAAS,EAAE;GACC,qBAAqB,CAwGjC","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\n@customElement('tile-list-compact-header')\n@localized()\nexport class TileListCompactHeader extends BaseTileComponent {\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   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   */\n\n  render() {\n    const hasActions = this.tileActions.length > 0;\n    const headerClasses = classMap({\n      mobile: this.classSize === 'mobile',\n      desktop: this.classSize === 'desktop',\n      'has-actions': hasActions,\n    });\n\n    return html`\n      <div id=\"list-line-header\" class=${headerClasses}>\n        <div id=\"thumb\"></div>\n        ${hasActions ? html`<div id=\"actions-header\"></div>` : nothing}\n        <div id=\"title\">${msg('Title')}</div>\n        <div id=\"creator\">${msg('Creator')}</div>\n        <div id=\"date\">\n          ${this.displayValueProvider.dateLabel || msg('Published')}\n        </div>\n        <div id=\"icon\">${msg('Type')}</div>\n        <div id=\"views\">${this.displayValueProvider.viewsLabel}</div>\n      </div>\n    `;\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: flex-end;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 115px;\n      }\n\n      /*\n       * When tile actions are present in the rows below, reserve a matching\n       * column here so the columns stay aligned with each row.\n       */\n      #list-line-header.mobile.has-actions {\n        grid-template-columns:\n          36px var(--tileActionColumnWidth, 90px) 3fr 2fr\n          68px 35px;\n      }\n\n      #list-line-header.desktop.has-actions {\n        grid-template-columns:\n          51px var(--tileActionColumnWidth, 100px) 3fr 2fr\n          95px 30px 115px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/list/tile-list-compact.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
+import { localized } from '@lit/localize';
 import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import DOMPurify from 'dompurify';
@@ -247,7 +248,8 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
     }
 };
 TileListCompact = __decorate([
-    customElement('tile-list-compact')
+    customElement('tile-list-compact'),
+    localized()
 ], TileListCompact);
 export { TileListCompact };
 //# sourceMappingURL=tile-list-compact.js.map

package/dist/src/tiles/list/tile-list-compact.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { tileActionStyles } from '../../styles/tile-action-styles';\n\nimport '../image-block';\nimport '../tile-mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends BaseTileComponent {\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   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  render() {\n    const hasActions = this.tileActions.length > 0;\n    const lineClasses = classMap({\n      mobile: this.classSize === 'mobile',\n      desktop: this.classSize === 'desktop',\n      'has-actions': hasActions,\n    });\n\n    return html`\n      <div id=\"list-line\" class=${lineClasses}>\n        <image-block\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isCompactTile=${true}\n          .isListTile=${true}\n          .viewSize=${this.classSize}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n        >\n        </image-block>\n        ${hasActions\n          ? html`<div id=\"actions\">\n              ${this.renderTileActions('list-compact')}\n            </div>`\n          : nothing}\n        <a href=${this.href} id=\"title\"\n          >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n        >\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? this.displayValueProvider.accountLabel\n            : this.creator}\n        </div>\n        <div id=\"date\">\n          ${this.getFormattedDate(this.date, this.dateFormatSize)}\n        </div>\n        <div id=\"icon\">\n          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>\n        </div>\n        <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n      </div>\n    `;\n  }\n\n  private get href(): 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 creator(): string | typeof nothing {\n    return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    // Note on 'publicdate' vs. 'date':\n    // The search engine metadata uses 'publicdate' as the key for the date the item\n    // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n    // In contrast, the search engine metadata uses 'date' to refer to the actual\n    // publication date of the underlying media (\"Date Published\" in the UI).\n    // Refer to the full metadata schema for more info.\n    switch (this.effectiveSort?.field) {\n      case 'publicdate':\n        return this.model?.dateArchived;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.datePublished;\n    }\n  }\n\n  private get views(): number | undefined {\n    return this.effectiveSort?.field === 'week'\n      ? this.model?.weeklyViewCount // weekly views\n      : this.model?.viewCount; // all-time views\n  }\n\n  /**\n   * Returns the active sort param if one is set, or the default sort param otherwise.\n   */\n  private get effectiveSort(): SortParam | null {\n    return this.sortParam ?? this.defaultSortParam;\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get dateFormatSize(): DateFormat {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    if (\n      (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date\n      isFirstMillisecondOfUTCYear(this.model?.datePublished)\n    ) {\n      return 'year-only';\n    }\n    return this.formatSize;\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.effectiveSort?.field as string,\n    );\n  }\n\n  static get styles() {\n    return [\n      tileActionStyles,\n      css`\n        html {\n          font-size: unset;\n        }\n\n        div {\n          font-size: 14px;\n        }\n\n        #list-line {\n          display: grid;\n          column-gap: 10px;\n          border-top: 1px solid #ddd;\n          align-items: center;\n          line-height: 20px;\n          padding-top: 5px;\n          margin-bottom: -5px;\n        }\n\n        #list-line.mobile {\n          grid-template-columns: 36px 3fr 2fr 68px 35px;\n        }\n\n        #list-line.desktop {\n          grid-template-columns: 51px 3fr 2fr 95px 30px 115px;\n        }\n\n        /*\n         * When tile actions are present, insert an extra column for them\n         * between the thumbnail and the title.\n         */\n        #list-line.mobile.has-actions {\n          grid-template-columns:\n            36px var(--tileActionColumnWidth, 90px)\n            3fr 2fr 68px 35px;\n        }\n\n        #list-line.desktop.has-actions {\n          grid-template-columns:\n            51px var(--tileActionColumnWidth, 100px)\n            3fr 2fr 95px 30px 115px;\n        }\n\n        #actions {\n          /* The flex container inside is what holds the action buttons */\n          display: flex;\n        }\n\n        #list-line:hover #title {\n          text-decoration: underline;\n        }\n\n        #title {\n          text-decoration: none;\n        }\n\n        #title:link {\n          color: var(--ia-theme-link-color, #4b64ff);\n        }\n\n        #title,\n        #creator {\n          text-overflow: ellipsis;\n          overflow: hidden;\n          white-space: nowrap;\n        }\n\n        #icon {\n          margin-left: 2px;\n        }\n\n        #views {\n          text-align: right;\n          padding-right: 8px;\n        }\n\n        .mobile #views {\n          display: none;\n        }\n\n        .mobile tile-mediatype-icon {\n          --iconHeight: 14px;\n          --iconWidth: 14px;\n        }\n\n        .desktop #icon {\n          --iconHeight: 20px;\n          --iconWidth: 20px;\n        }\n\n        item-image {\n          --imgHeight: 100%;\n          --imgWidth: 100%;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { localized } from '@lit/localize';\nimport { customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { tileActionStyles } from '../../styles/tile-action-styles';\n\nimport '../image-block';\nimport '../tile-mediatype-icon';\n\n@customElement('tile-list-compact')\n@localized()\nexport class TileListCompact extends BaseTileComponent {\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   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  render() {\n    const hasActions = this.tileActions.length > 0;\n    const lineClasses = classMap({\n      mobile: this.classSize === 'mobile',\n      desktop: this.classSize === 'desktop',\n      'has-actions': hasActions,\n    });\n\n    return html`\n      <div id=\"list-line\" class=${lineClasses}>\n        <image-block\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isCompactTile=${true}\n          .isListTile=${true}\n          .viewSize=${this.classSize}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n        >\n        </image-block>\n        ${hasActions\n          ? html`<div id=\"actions\">\n              ${this.renderTileActions('list-compact')}\n            </div>`\n          : nothing}\n        <a href=${this.href} id=\"title\"\n          >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n        >\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? this.displayValueProvider.accountLabel\n            : this.creator}\n        </div>\n        <div id=\"date\">\n          ${this.getFormattedDate(this.date, this.dateFormatSize)}\n        </div>\n        <div id=\"icon\">\n          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>\n        </div>\n        <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n      </div>\n    `;\n  }\n\n  private get href(): 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 creator(): string | typeof nothing {\n    return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    // Note on 'publicdate' vs. 'date':\n    // The search engine metadata uses 'publicdate' as the key for the date the item\n    // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n    // In contrast, the search engine metadata uses 'date' to refer to the actual\n    // publication date of the underlying media (\"Date Published\" in the UI).\n    // Refer to the full metadata schema for more info.\n    switch (this.effectiveSort?.field) {\n      case 'publicdate':\n        return this.model?.dateArchived;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.datePublished;\n    }\n  }\n\n  private get views(): number | undefined {\n    return this.effectiveSort?.field === 'week'\n      ? this.model?.weeklyViewCount // weekly views\n      : this.model?.viewCount; // all-time views\n  }\n\n  /**\n   * Returns the active sort param if one is set, or the default sort param otherwise.\n   */\n  private get effectiveSort(): SortParam | null {\n    return this.sortParam ?? this.defaultSortParam;\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get dateFormatSize(): DateFormat {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    if (\n      (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date\n      isFirstMillisecondOfUTCYear(this.model?.datePublished)\n    ) {\n      return 'year-only';\n    }\n    return this.formatSize;\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.effectiveSort?.field as string,\n    );\n  }\n\n  static get styles() {\n    return [\n      tileActionStyles,\n      css`\n        html {\n          font-size: unset;\n        }\n\n        div {\n          font-size: 14px;\n        }\n\n        #list-line {\n          display: grid;\n          column-gap: 10px;\n          border-top: 1px solid #ddd;\n          align-items: center;\n          line-height: 20px;\n          padding-top: 5px;\n          margin-bottom: -5px;\n        }\n\n        #list-line.mobile {\n          grid-template-columns: 36px 3fr 2fr 68px 35px;\n        }\n\n        #list-line.desktop {\n          grid-template-columns: 51px 3fr 2fr 95px 30px 115px;\n        }\n\n        /*\n         * When tile actions are present, insert an extra column for them\n         * between the thumbnail and the title.\n         */\n        #list-line.mobile.has-actions {\n          grid-template-columns:\n            36px var(--tileActionColumnWidth, 90px)\n            3fr 2fr 68px 35px;\n        }\n\n        #list-line.desktop.has-actions {\n          grid-template-columns:\n            51px var(--tileActionColumnWidth, 100px)\n            3fr 2fr 95px 30px 115px;\n        }\n\n        #actions {\n          /* The flex container inside is what holds the action buttons */\n          display: flex;\n        }\n\n        #list-line:hover #title {\n          text-decoration: underline;\n        }\n\n        #title {\n          text-decoration: none;\n        }\n\n        #title:link {\n          color: var(--ia-theme-link-color, #4b64ff);\n        }\n\n        #title,\n        #creator {\n          text-overflow: ellipsis;\n          overflow: hidden;\n          white-space: nowrap;\n        }\n\n        #icon {\n          margin-left: 2px;\n        }\n\n        #views {\n          text-align: right;\n          padding-right: 8px;\n        }\n\n        .mobile #views {\n          display: none;\n        }\n\n        .mobile tile-mediatype-icon {\n          --iconHeight: 14px;\n          --iconWidth: 14px;\n        }\n\n        .desktop #icon {\n          --iconHeight: 20px;\n          --iconWidth: 20px;\n        }\n\n        item-image {\n          --imgHeight: 100%;\n          --imgWidth: 100%;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -5,7 +5,7 @@ import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import DOMPurify from 'dompurify';
 import { suppressedCollections } from '../../models';
 import { BaseTileComponent } from '../base-tile-component';
@@ -613,7 +613,8 @@ __decorate([
     state()
 ], TileList.prototype, "collectionLinks", void 0);
 TileList = __decorate([
-    customElement('tile-list')
+    customElement('tile-list'),
+    localized()
 ], TileList);
 export { TileList };
 //# sourceMappingURL=tile-list.js.map