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

package/dist/src/manage/manage-bar.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { msg, str } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
@@ -9,10 +9,6 @@ import './remove-items-modal-content';
 let ManageBar = class ManageBar extends LitElement {
     constructor() {
         super(...arguments);
-        /**
-         * The label displayed in front of the management buttons
-         */
-        this.label = msg('Select items to remove');
         /**
          * Array of items that have been selected for management
          */
@@ -37,7 +33,9 @@ let ManageBar = class ManageBar extends LitElement {
     render() {
         return html `
       <div class="manage-container">
-        <span class="manage-label">${this.label}</span>
+        <span class="manage-label"
+          >${this.label ?? msg('Select items to remove')}</span
+        >
         <div class="manage-buttons">
           <button class="ia-button dark" @click=${this.cancelClicked}>
             ${msg('Cancel')}
@@ -79,22 +77,22 @@ let ManageBar = class ManageBar extends LitElement {
      */
     get manageViewModalMsg() {
         const pluralize = this.selectedItems.length > 1;
-        const subject = pluralize ? 'these items' : 'this item';
-        let listName = '';
         switch (this.profileElement) {
             case 'uploads':
-                listName = 'uploads list';
-                break;
+                return pluralize
+                    ? msg('Note: It may take a few minutes for these items to stop appearing in your uploads list.')
+                    : msg('Note: It may take a few minutes for this item to stop appearing in your uploads list.');
             case 'web_archives':
-                listName = 'web archives list';
-                break;
+                return pluralize
+                    ? msg('Note: It may take a few minutes for these items to stop appearing in your web archives list.')
+                    : msg('Note: It may take a few minutes for this item to stop appearing in your web archives list.');
             case 'favorites':
-                listName = 'favorites list';
-                break;
+                return pluralize
+                    ? msg('Note: It may take a few minutes for these items to stop appearing in your favorites list.')
+                    : msg('Note: It may take a few minutes for this item to stop appearing in your favorites list.');
             default:
                 return '';
         }
-        return msg(str `Note: It may take a few minutes for ${subject} to stop appearing in your ${listName}.`);
     }
     cancelClicked() {
         this.dispatchEvent(new CustomEvent('cancel'));
@@ -247,7 +245,8 @@ __decorate([
     property({ type: Boolean })
 ], ManageBar.prototype, "removeAllowed", void 0);
 ManageBar = __decorate([
-    customElement('manage-bar')
+    customElement('manage-bar'),
+    localized()
 ], ManageBar);
 export { ManageBar };
 //# sourceMappingURL=manage-bar.js.map

package/dist/src/manage/manage-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"manage-bar.js","sourceRoot":"","sources":["../../../src/manage/manage-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg, str } from '@lit/localize';\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  ModalConfig,\n  type ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { ManageableItem } from '../models';\nimport { PageElementName } from '@internetarchive/search-service';\nimport iaButtonStyle from '../styles/ia-button';\nimport './remove-items-modal-content';\n\n@customElement('manage-bar')\nexport class ManageBar extends LitElement {\n  /**\n   * The label displayed in front of the management buttons\n   */\n  @property({ type: String }) label = msg('Select items to remove');\n\n  /**\n   * The shared modal manager component for displaying modal dialogs on this page\n   */\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  /**\n   * Array of items that have been selected for management\n   */\n  @property({ type: Array }) selectedItems: Array<ManageableItem> = [];\n\n  /**\n   * Which section of the profile page searches are for (e.g., uploads, reviews, ...)\n   */\n  @property({ type: String }) profileElement?: PageElementName;\n\n  /**\n   * Whether to show the \"Select All\" button (default false)\n   */\n  @property({ type: Boolean }) showSelectAll = false;\n\n  /**\n   * Whether to show the \"Unselect All\" button (default false)\n   */\n  @property({ type: Boolean }) showUnselectAll = false;\n\n  /**\n   * Whether to show \"Item Manager the items\" button (default false)\n   */\n  @property({ type: Boolean }) showItemManageButton = false;\n\n  /**\n   * Whether to active delete button for selectable items\n   */\n  @property({ type: Boolean }) removeAllowed = false;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"manage-container\">\n        <span class=\"manage-label\">${this.label}</span>\n        <div class=\"manage-buttons\">\n          <button class=\"ia-button dark\" @click=${this.cancelClicked}>\n            ${msg('Cancel')}\n          </button>\n          <button\n            class=\"ia-button danger\"\n            ?disabled=${!this.removeAllowed}\n            @click=${this.showRemoveItemsModal}\n          >\n            ${msg('Remove selected items')} (${this.selectedItems.length})...\n          </button>\n          ${when(\n            this.showItemManageButton,\n            () =>\n              html` <button\n                class=\"ia-button warning\"\n                ?disabled=${!this.removeAllowed}\n                @click=${this.manageItemsClicked}\n              >\n                ${msg('Item Manager the items')} (${this.selectedItems.length})\n              </button>`,\n          )}\n          <div class=\"selection-buttons\">\n            ${when(\n              this.showSelectAll,\n              () =>\n                html` <button\n                  class=\"ia-button link select-all-btn\"\n                  @click=${this.selectAllClicked}\n                >\n                  ${msg('Select all')}\n                </button>`,\n            )}\n            ${when(\n              this.showUnselectAll,\n              () =>\n                html` <button\n                  class=\"ia-button link unselect-all-btn\"\n                  @click=${this.unselectAllClicked}\n                >\n                  ${msg('Unselect all')}\n                </button>`,\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Message to show in the manage view modal, depending on context.\n   */\n  private get manageViewModalMsg(): string {\n    const pluralize = this.selectedItems.length > 1;\n    const subject = pluralize ? 'these items' : 'this item';\n\n    let listName = '';\n\n    switch (this.profileElement) {\n      case 'uploads':\n        listName = 'uploads list';\n        break;\n      case 'web_archives':\n        listName = 'web archives list';\n        break;\n      case 'favorites':\n        listName = 'favorites list';\n        break;\n      default:\n        return '';\n    }\n\n    return msg(\n      str`Note: It may take a few minutes for ${subject} to stop appearing in your ${listName}.`,\n    );\n  }\n\n  private cancelClicked(): void {\n    this.dispatchEvent(new CustomEvent('cancel'));\n  }\n\n  private removeItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('removeItems'));\n  }\n\n  private manageItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('manageItems'));\n  }\n\n  private selectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('selectAll'));\n  }\n\n  private unselectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('unselectAll'));\n  }\n\n  /**\n   * Shows a modal dialog confirming the list of items to be removed\n   * @param items Which items to list in the modal\n   */\n  private showRemoveItemsModal(): void {\n    const customModalContent = html`\n      <remove-items-modal-content\n        .items=${this.selectedItems}\n        .message=${this.manageViewModalMsg}\n        @confirm=${() => this.removeItemsClicked()}\n      ></remove-items-modal-content>\n    `;\n\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Are you sure you want to remove these items?')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that item removal is being processed\n   */\n  showRemoveItemsProcessingModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Removing selected items...')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that an error occurred while removing items\n   */\n  showRemoveItemsErrorModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#691916',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Error: unable to remove items')}`,\n      message: html`${msg(\n        'An error occurred while removing items. Please try again in a few minutes.',\n      )}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      ${iaButtonStyle}\n      .manage-container {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        padding: 20px 0 20px;\n        flex-wrap: wrap;\n      }\n\n      .manage-label {\n        display: inline-block;\n        font-weight: bold;\n        font-size: 1.8rem;\n        padding-right: 10px;\n      }\n\n      .manage-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        column-gap: 5px;\n      }\n\n      .selection-buttons {\n        display: inherit;\n      }\n\n      .ia-button,\n      button {\n        padding: 6px 12px;\n        font-size: 1.4rem;\n        margin: 3px 0;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"manage-bar.js","sourceRoot":"","sources":["../../../src/manage/manage-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { localized, msg } from '@lit/localize';\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  ModalConfig,\n  type ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { ManageableItem } from '../models';\nimport { PageElementName } from '@internetarchive/search-service';\nimport iaButtonStyle from '../styles/ia-button';\nimport './remove-items-modal-content';\n\n@customElement('manage-bar')\n@localized()\nexport class ManageBar extends LitElement {\n  /**\n   * The label displayed in front of the management buttons. Defaults to a\n   * localized \"Select items to remove\".\n   */\n  @property({ type: String }) label?: string;\n\n  /**\n   * The shared modal manager component for displaying modal dialogs on this page\n   */\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  /**\n   * Array of items that have been selected for management\n   */\n  @property({ type: Array }) selectedItems: Array<ManageableItem> = [];\n\n  /**\n   * Which section of the profile page searches are for (e.g., uploads, reviews, ...)\n   */\n  @property({ type: String }) profileElement?: PageElementName;\n\n  /**\n   * Whether to show the \"Select All\" button (default false)\n   */\n  @property({ type: Boolean }) showSelectAll = false;\n\n  /**\n   * Whether to show the \"Unselect All\" button (default false)\n   */\n  @property({ type: Boolean }) showUnselectAll = false;\n\n  /**\n   * Whether to show \"Item Manager the items\" button (default false)\n   */\n  @property({ type: Boolean }) showItemManageButton = false;\n\n  /**\n   * Whether to active delete button for selectable items\n   */\n  @property({ type: Boolean }) removeAllowed = false;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"manage-container\">\n        <span class=\"manage-label\"\n          >${this.label ?? msg('Select items to remove')}</span\n        >\n        <div class=\"manage-buttons\">\n          <button class=\"ia-button dark\" @click=${this.cancelClicked}>\n            ${msg('Cancel')}\n          </button>\n          <button\n            class=\"ia-button danger\"\n            ?disabled=${!this.removeAllowed}\n            @click=${this.showRemoveItemsModal}\n          >\n            ${msg('Remove selected items')} (${this.selectedItems.length})...\n          </button>\n          ${when(\n            this.showItemManageButton,\n            () =>\n              html` <button\n                class=\"ia-button warning\"\n                ?disabled=${!this.removeAllowed}\n                @click=${this.manageItemsClicked}\n              >\n                ${msg('Item Manager the items')} (${this.selectedItems.length})\n              </button>`,\n          )}\n          <div class=\"selection-buttons\">\n            ${when(\n              this.showSelectAll,\n              () =>\n                html` <button\n                  class=\"ia-button link select-all-btn\"\n                  @click=${this.selectAllClicked}\n                >\n                  ${msg('Select all')}\n                </button>`,\n            )}\n            ${when(\n              this.showUnselectAll,\n              () =>\n                html` <button\n                  class=\"ia-button link unselect-all-btn\"\n                  @click=${this.unselectAllClicked}\n                >\n                  ${msg('Unselect all')}\n                </button>`,\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Message to show in the manage view modal, depending on context.\n   */\n  private get manageViewModalMsg(): string {\n    const pluralize = this.selectedItems.length > 1;\n\n    switch (this.profileElement) {\n      case 'uploads':\n        return pluralize\n          ? msg(\n              'Note: It may take a few minutes for these items to stop appearing in your uploads list.',\n            )\n          : msg(\n              'Note: It may take a few minutes for this item to stop appearing in your uploads list.',\n            );\n      case 'web_archives':\n        return pluralize\n          ? msg(\n              'Note: It may take a few minutes for these items to stop appearing in your web archives list.',\n            )\n          : msg(\n              'Note: It may take a few minutes for this item to stop appearing in your web archives list.',\n            );\n      case 'favorites':\n        return pluralize\n          ? msg(\n              'Note: It may take a few minutes for these items to stop appearing in your favorites list.',\n            )\n          : msg(\n              'Note: It may take a few minutes for this item to stop appearing in your favorites list.',\n            );\n      default:\n        return '';\n    }\n  }\n\n  private cancelClicked(): void {\n    this.dispatchEvent(new CustomEvent('cancel'));\n  }\n\n  private removeItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('removeItems'));\n  }\n\n  private manageItemsClicked(): void {\n    this.dispatchEvent(new CustomEvent('manageItems'));\n  }\n\n  private selectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('selectAll'));\n  }\n\n  private unselectAllClicked(): void {\n    this.dispatchEvent(new CustomEvent('unselectAll'));\n  }\n\n  /**\n   * Shows a modal dialog confirming the list of items to be removed\n   * @param items Which items to list in the modal\n   */\n  private showRemoveItemsModal(): void {\n    const customModalContent = html`\n      <remove-items-modal-content\n        .items=${this.selectedItems}\n        .message=${this.manageViewModalMsg}\n        @confirm=${() => this.removeItemsClicked()}\n      ></remove-items-modal-content>\n    `;\n\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Are you sure you want to remove these items?')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that item removal is being processed\n   */\n  showRemoveItemsProcessingModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Removing selected items...')}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  /**\n   * Shows a modal dialog indicating that an error occurred while removing items\n   */\n  showRemoveItemsErrorModal(): void {\n    const config = new ModalConfig({\n      showProcessingIndicator: false,\n      processingImageMode: 'processing',\n      bodyColor: '#fff',\n      headerColor: '#691916',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true,\n      title: html`${msg('Error: unable to remove items')}`,\n      message: html`${msg(\n        'An error occurred while removing items. Please try again in a few minutes.',\n      )}`,\n    });\n\n    this.modalManager?.classList.add('remove-items');\n    this.modalManager?.showModal({\n      config,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('remove-items');\n      },\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      ${iaButtonStyle}\n      .manage-container {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        padding: 20px 0 20px;\n        flex-wrap: wrap;\n      }\n\n      .manage-label {\n        display: inline-block;\n        font-weight: bold;\n        font-size: 1.8rem;\n        padding-right: 10px;\n      }\n\n      .manage-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        column-gap: 5px;\n      }\n\n      .selection-buttons {\n        display: inherit;\n      }\n\n      .ia-button,\n      button {\n        padding: 6px 12px;\n        font-size: 1.4rem;\n        margin: 3px 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/manage/remove-items-modal-content.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { map } from 'lit/directives/map.js';
 let RemoveItemsModalContent = class RemoveItemsModalContent extends LitElement {
     constructor() {
@@ -98,7 +98,8 @@ __decorate([
     property({ type: String })
 ], RemoveItemsModalContent.prototype, "message", void 0);
 RemoveItemsModalContent = __decorate([
-    customElement('remove-items-modal-content')
+    customElement('remove-items-modal-content'),
+    localized()
 ], RemoveItemsModalContent);
 export { RemoveItemsModalContent };
 //# sourceMappingURL=remove-items-modal-content.js.map

package/dist/src/manage/remove-items-modal-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-items-modal-content.js","sourceRoot":"","sources":["../../../src/manage/remove-items-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAA6B,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAIrC,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QACuB,UAAK,GAAqB,EAAE,CAAC;IA6F3D,CAAC;IAzFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,GAAG,CACH,IAAI,CAAC,KAAK,EACV,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;yCAEM,KAAK,IAAI,YAAY;wCACtB,IAAI,IAAI,EAAE;;WAEvC,CACF;;QAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,OAAO;;kDAE3B,IAAI,CAAC,qBAAqB;YAChE,GAAG,CAAC,cAAc,CAAC;;;KAG1B,CAAC;IACJ,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAA8B,SAAS,EAAE;YACtD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;IACJ,CAAC;CACF,CAAA;AA7F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA8B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AAHlC,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CA8FnC","sourcesContent":["import { LitElement, html, css, nothing, TemplateResult, CSSResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { map } from 'lit/directives/map.js';\nimport type { ManageableItem } from '../models';\n\n@customElement('remove-items-modal-content')\nexport class RemoveItemsModalContent extends LitElement {\n  @property({ type: Object }) items: ManageableItem[] = [];\n\n  @property({ type: String }) message?: string;\n\n  render(): TemplateResult {\n    return html`\n      <ul>\n        ${map(\n          this.items,\n          ({ title, date }) => html`\n            <li>\n              <span class=\"item-title\">${title ?? '[untitled]'}</span>\n              <span class=\"item-date\">${date ?? ''}</span>\n            </li>\n          `,\n        )}\n      </ul>\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : nothing}\n      <div class=\"button-bar\">\n        <button class=\"remove-items-btn\" @click=${this.removeItemsBtnClicked}>\n          ${msg('Remove items')}\n        </button>\n      </div>\n    `;\n  }\n\n  private removeItemsBtnClicked(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ items: ManageableItem[] }>('confirm', {\n        detail: {\n          items: this.items,\n        },\n      }),\n    );\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      ul {\n        margin: 0;\n        padding: 0 10px;\n        font-size: 1.4rem;\n        list-style-type: none;\n        max-height: min(400px, 40vh);\n        overflow-y: auto;\n      }\n\n      li {\n        display: flex;\n        justify-content: space-between;\n        padding: 2px 0;\n      }\n      li:not(:last-of-type) {\n        border-bottom: 1px solid rgb(232, 232, 232);\n      }\n\n      .item-title {\n        word-break: break-word;\n      }\n\n      .item-date {\n        white-space: nowrap;\n      }\n\n      .message {\n        font-size: 1.4rem;\n        padding: 5px 10px;\n      }\n\n      .button-bar {\n        display: flex;\n        justify-content: center;\n        margin: 10px 5px;\n      }\n\n      .remove-items-btn {\n        margin-bottom: 10px;\n        padding: 10px;\n        border: 1px solid var(--primaryErrorCTABorder, #d43f3a);\n        border-radius: 4px;\n        color: white;\n        background: var(--primaryErrorCTAFill, #d9534f);\n        appearance: none;\n        cursor: pointer;\n      }\n      .remove-items-btn:hover {\n        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.9);\n      }\n      .remove-items-btn:active {\n        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.7);\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"remove-items-modal-content.js","sourceRoot":"","sources":["../../../src/manage/remove-items-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAA6B,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAKrC,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QACuB,UAAK,GAAqB,EAAE,CAAC;IA6F3D,CAAC;IAzFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,GAAG,CACH,IAAI,CAAC,KAAK,EACV,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;yCAEM,KAAK,IAAI,YAAY;wCACtB,IAAI,IAAI,EAAE;;WAEvC,CACF;;QAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,OAAO;;kDAE3B,IAAI,CAAC,qBAAqB;YAChE,GAAG,CAAC,cAAc,CAAC;;;KAG1B,CAAC;IACJ,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAA8B,SAAS,EAAE;YACtD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;IACJ,CAAC;CACF,CAAA;AA7F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA8B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AAHlC,uBAAuB;IAFnC,aAAa,CAAC,4BAA4B,CAAC;IAC3C,SAAS,EAAE;GACC,uBAAuB,CA8FnC","sourcesContent":["import { LitElement, html, css, nothing, TemplateResult, CSSResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { localized, msg } from '@lit/localize';\nimport { map } from 'lit/directives/map.js';\nimport type { ManageableItem } from '../models';\n\n@customElement('remove-items-modal-content')\n@localized()\nexport class RemoveItemsModalContent extends LitElement {\n  @property({ type: Object }) items: ManageableItem[] = [];\n\n  @property({ type: String }) message?: string;\n\n  render(): TemplateResult {\n    return html`\n      <ul>\n        ${map(\n          this.items,\n          ({ title, date }) => html`\n            <li>\n              <span class=\"item-title\">${title ?? '[untitled]'}</span>\n              <span class=\"item-date\">${date ?? ''}</span>\n            </li>\n          `,\n        )}\n      </ul>\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : nothing}\n      <div class=\"button-bar\">\n        <button class=\"remove-items-btn\" @click=${this.removeItemsBtnClicked}>\n          ${msg('Remove items')}\n        </button>\n      </div>\n    `;\n  }\n\n  private removeItemsBtnClicked(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ items: ManageableItem[] }>('confirm', {\n        detail: {\n          items: this.items,\n        },\n      }),\n    );\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      ul {\n        margin: 0;\n        padding: 0 10px;\n        font-size: 1.4rem;\n        list-style-type: none;\n        max-height: min(400px, 40vh);\n        overflow-y: auto;\n      }\n\n      li {\n        display: flex;\n        justify-content: space-between;\n        padding: 2px 0;\n      }\n      li:not(:last-of-type) {\n        border-bottom: 1px solid rgb(232, 232, 232);\n      }\n\n      .item-title {\n        word-break: break-word;\n      }\n\n      .item-date {\n        white-space: nowrap;\n      }\n\n      .message {\n        font-size: 1.4rem;\n        padding: 5px 10px;\n      }\n\n      .button-bar {\n        display: flex;\n        justify-content: center;\n        margin: 10px 5px;\n      }\n\n      .remove-items-btn {\n        margin-bottom: 10px;\n        padding: 10px;\n        border: 1px solid var(--primaryErrorCTABorder, #d43f3a);\n        border-radius: 4px;\n        color: white;\n        background: var(--primaryErrorCTAFill, #d9534f);\n        appearance: none;\n        cursor: pointer;\n      }\n      .remove-items-btn:hover {\n        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.9);\n      }\n      .remove-items-btn:active {\n        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.7);\n      }\n    `;\n  }\n}\n"]}

package/dist/src/mediatype/mediatype-config.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { msg } from '@lit/localize';
 import { accountIcon } from '../assets/img/icons/mediatype/account';
 import { audioIcon } from '../assets/img/icons/mediatype/audio';
 import { collectionIcon } from '../assets/img/icons/mediatype/collection';
@@ -20,42 +21,58 @@ export const mediatypeConfig = {
     account: {
         color: '#000000',
         icon: accountIcon,
-        text: 'Account',
+        get text() {
+            return msg('Account');
+        },
     },
     audio: {
         color: '#00adef',
         icon: audioIcon,
-        text: 'Audio',
+        get text() {
+            return msg('Audio');
+        },
     },
     collection: {
         color: '#4666ff',
         icon: collectionIcon,
-        text: 'Collection',
+        get text() {
+            return msg('Collection');
+        },
     },
     data: {
         color: '#333333',
         icon: dataIcon,
-        text: 'Data',
+        get text() {
+            return msg('Data');
+        },
     },
     etree: {
         color: '#00adef',
         icon: etreeIcon,
-        text: 'E-tree',
+        get text() {
+            return msg('E-tree');
+        },
     },
     film: {
         color: '#bf1b2c',
         icon: filmIcon,
-        text: 'Film',
+        get text() {
+            return msg('Film');
+        },
     },
     image: {
         color: '#aa99c9',
         icon: imagesIcon,
-        text: 'Image',
+        get text() {
+            return msg('Image');
+        },
     },
     movies: {
         color: '#f1644b',
         icon: filmIcon,
-        text: 'Movie',
+        get text() {
+            return msg('Movie');
+        },
     },
     none: {
         color: '#00000000',
@@ -65,52 +82,72 @@ export const mediatypeConfig = {
     radio: {
         color: '#8fdaef',
         icon: radioIcon,
-        text: 'Radio',
+        get text() {
+            return msg('Radio');
+        },
     },
     software: {
         color: '#9ecc4f',
         icon: softwareIcon,
-        text: 'Software',
+        get text() {
+            return msg('Software');
+        },
     },
     texts: {
         color: '#faab3c',
         icon: textsIcon,
-        text: 'Text',
+        get text() {
+            return msg('Text');
+        },
     },
     tv: {
         color: '#f1644b',
         icon: tvIcon,
-        text: 'TV',
+        get text() {
+            return msg('TV');
+        },
     },
     tvCommercial: {
         color: '#84b648',
         icon: tvCommercialIcon,
-        text: 'TV Political Ad',
+        get text() {
+            return msg('TV Political Ad');
+        },
     },
     tvFactCheck: {
         color: '#f1644b',
         icon: tvFactCheckIcon,
-        text: 'TV Fact Check',
+        get text() {
+            return msg('TV Fact Check');
+        },
     },
     tvQuote: {
         color: '#fe7a5f',
         icon: tvQuoteIcon,
-        text: 'TV Quote',
+        get text() {
+            return msg('TV Quote');
+        },
     },
     video: {
         color: '#f1644b',
         icon: videoIcon,
-        text: 'Video',
+        get text() {
+            return msg('Video');
+        },
     },
     web: {
         color: '#ffcd27',
         icon: webIcon,
-        text: 'Web',
+        get text() {
+            return msg('Web');
+        },
     },
     search: {
         color: '#000000',
         icon: searchIcon,
-        text: 'Search',
+        get text() {
+            return msg('Search');
+        },
     },
 };
 //# sourceMappingURL=mediatype-config.js.map

package/dist/src/mediatype/mediatype-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediatype-config.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { tvCommercialIcon } from '../assets/img/icons/mediatype/tv-commercial';\nimport { tvFactCheckIcon } from '../assets/img/icons/mediatype/tv-fact-check';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\nimport { tvQuoteIcon } from '../assets/img/icons/mediatype/tv-quote';\n\n/**\n * Union of keys with valid mediatype config entries\n */\nexport type MediatypeConfigKey =\n  | 'account'\n  | 'audio'\n  | 'collection'\n  | 'data'\n  | 'etree'\n  | 'film'\n  | 'image'\n  | 'movies'\n  | 'none'\n  | 'radio'\n  | 'search'\n  | 'software'\n  | 'texts'\n  | 'tv'\n  | 'tvCommercial'\n  | 'tvFactCheck'\n  | 'tvQuote'\n  | 'video'\n  | 'web';\n\nexport type MediatypeConfig = {\n  color: string;\n  icon: TemplateResult;\n  text: string;\n};\n\nexport const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {\n  account: {\n    color: '#000000',\n    icon: accountIcon,\n    text: 'Account',\n  },\n  audio: {\n    color: '#00adef',\n    icon: audioIcon,\n    text: 'Audio',\n  },\n  collection: {\n    color: '#4666ff',\n    icon: collectionIcon,\n    text: 'Collection',\n  },\n  data: {\n    color: '#333333',\n    icon: dataIcon,\n    text: 'Data',\n  },\n  etree: {\n    color: '#00adef',\n    icon: etreeIcon,\n    text: 'E-tree',\n  },\n  film: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    text: 'Film',\n  },\n  image: {\n    color: '#aa99c9',\n    icon: imagesIcon,\n    text: 'Image',\n  },\n  movies: {\n    color: '#f1644b',\n    icon: filmIcon,\n    text: 'Movie',\n  },\n  none: {\n    color: '#00000000',\n    icon: html``, // Empty\n    text: '',\n  },\n  radio: {\n    color: '#8fdaef',\n    icon: radioIcon,\n    text: 'Radio',\n  },\n  software: {\n    color: '#9ecc4f',\n    icon: softwareIcon,\n    text: 'Software',\n  },\n  texts: {\n    color: '#faab3c',\n    icon: textsIcon,\n    text: 'Text',\n  },\n  tv: {\n    color: '#f1644b',\n    icon: tvIcon,\n    text: 'TV',\n  },\n  tvCommercial: {\n    color: '#84b648',\n    icon: tvCommercialIcon,\n    text: 'TV Political Ad',\n  },\n  tvFactCheck: {\n    color: '#f1644b',\n    icon: tvFactCheckIcon,\n    text: 'TV Fact Check',\n  },\n  tvQuote: {\n    color: '#fe7a5f',\n    icon: tvQuoteIcon,\n    text: 'TV Quote',\n  },\n  video: {\n    color: '#f1644b',\n    icon: videoIcon,\n    text: 'Video',\n  },\n  web: {\n    color: '#ffcd27',\n    icon: webIcon,\n    text: 'Web',\n  },\n  search: {\n    color: '#000000',\n    icon: searchIcon,\n    text: 'Search',\n  },\n};\n"]}
+{"version":3,"file":"mediatype-config.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { msg } from '@lit/localize';\nimport { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { tvCommercialIcon } from '../assets/img/icons/mediatype/tv-commercial';\nimport { tvFactCheckIcon } from '../assets/img/icons/mediatype/tv-fact-check';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\nimport { tvQuoteIcon } from '../assets/img/icons/mediatype/tv-quote';\n\n/**\n * Union of keys with valid mediatype config entries\n */\nexport type MediatypeConfigKey =\n  | 'account'\n  | 'audio'\n  | 'collection'\n  | 'data'\n  | 'etree'\n  | 'film'\n  | 'image'\n  | 'movies'\n  | 'none'\n  | 'radio'\n  | 'search'\n  | 'software'\n  | 'texts'\n  | 'tv'\n  | 'tvCommercial'\n  | 'tvFactCheck'\n  | 'tvQuote'\n  | 'video'\n  | 'web';\n\nexport type MediatypeConfig = {\n  color: string;\n  icon: TemplateResult;\n  text: string;\n};\n\nexport const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {\n  account: {\n    color: '#000000',\n    icon: accountIcon,\n    get text() {\n      return msg('Account');\n    },\n  },\n  audio: {\n    color: '#00adef',\n    icon: audioIcon,\n    get text() {\n      return msg('Audio');\n    },\n  },\n  collection: {\n    color: '#4666ff',\n    icon: collectionIcon,\n    get text() {\n      return msg('Collection');\n    },\n  },\n  data: {\n    color: '#333333',\n    icon: dataIcon,\n    get text() {\n      return msg('Data');\n    },\n  },\n  etree: {\n    color: '#00adef',\n    icon: etreeIcon,\n    get text() {\n      return msg('E-tree');\n    },\n  },\n  film: {\n    color: '#bf1b2c',\n    icon: filmIcon,\n    get text() {\n      return msg('Film');\n    },\n  },\n  image: {\n    color: '#aa99c9',\n    icon: imagesIcon,\n    get text() {\n      return msg('Image');\n    },\n  },\n  movies: {\n    color: '#f1644b',\n    icon: filmIcon,\n    get text() {\n      return msg('Movie');\n    },\n  },\n  none: {\n    color: '#00000000',\n    icon: html``, // Empty\n    text: '',\n  },\n  radio: {\n    color: '#8fdaef',\n    icon: radioIcon,\n    get text() {\n      return msg('Radio');\n    },\n  },\n  software: {\n    color: '#9ecc4f',\n    icon: softwareIcon,\n    get text() {\n      return msg('Software');\n    },\n  },\n  texts: {\n    color: '#faab3c',\n    icon: textsIcon,\n    get text() {\n      return msg('Text');\n    },\n  },\n  tv: {\n    color: '#f1644b',\n    icon: tvIcon,\n    get text() {\n      return msg('TV');\n    },\n  },\n  tvCommercial: {\n    color: '#84b648',\n    icon: tvCommercialIcon,\n    get text() {\n      return msg('TV Political Ad');\n    },\n  },\n  tvFactCheck: {\n    color: '#f1644b',\n    icon: tvFactCheckIcon,\n    get text() {\n      return msg('TV Fact Check');\n    },\n  },\n  tvQuote: {\n    color: '#fe7a5f',\n    icon: tvQuoteIcon,\n    get text() {\n      return msg('TV Quote');\n    },\n  },\n  video: {\n    color: '#f1644b',\n    icon: videoIcon,\n    get text() {\n      return msg('Video');\n    },\n  },\n  web: {\n    color: '#ffcd27',\n    icon: webIcon,\n    get text() {\n      return msg('Web');\n    },\n  },\n  search: {\n    color: '#000000',\n    icon: searchIcon,\n    get text() {\n      return msg('Search');\n    },\n  },\n};\n"]}

package/dist/src/models.js

@@ -5,8 +5,12 @@ import { resolveMediatype } from './utils/resolve-mediatype';
 import { loginRequiredIcon } from './assets/img/icons/login-required';
 import { restrictedIcon } from './assets/img/icons/restricted';
 export const TILE_OVERLAY_TEXT = {
-    'login-required': msg('Log in to view this item'),
-    'content-warning': msg('Content may be inappropriate'),
+    get 'login-required'() {
+        return msg('Log in to view this item');
+    },
+    get 'content-warning'() {
+        return msg('Content may be inappropriate');
+    },
 };
 export const TILE_OVERLAY_ICONS = {
     'login-required': loginRequiredIcon,
@@ -219,7 +223,9 @@ export const SORT_OPTIONS = {
         shownInSortBar: true,
         shownInURL: false,
         handledBySearchService: false,
-        displayName: 'Relevance',
+        get displayName() {
+            return msg('Relevance');
+        },
         urlNames: ['_score'],
     },
     [SortField.alltimeview]: {
@@ -230,7 +236,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'downloads',
-        displayName: 'All-time views',
+        get displayName() {
+            return msg('All-time views');
+        },
         urlNames: ['downloads'],
     },
     [SortField.weeklyview]: {
@@ -241,7 +249,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'week',
-        displayName: 'Weekly views',
+        get displayName() {
+            return msg('Weekly views');
+        },
         urlNames: ['week'],
     },
     [SortField.title]: {
@@ -252,7 +262,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'titleSorter',
-        displayName: 'Title',
+        get displayName() {
+            return msg('Title');
+        },
         urlNames: ['title', 'titleSorter'],
     },
     [SortField.date]: {
@@ -263,7 +275,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'date',
-        displayName: 'Date published',
+        get displayName() {
+            return msg('Date published');
+        },
         urlNames: ['date'],
     },
     [SortField.datearchived]: {
@@ -274,7 +288,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'publicdate',
-        displayName: 'Date archived',
+        get displayName() {
+            return msg('Date archived');
+        },
         urlNames: ['publicdate'],
     },
     [SortField.datereviewed]: {
@@ -285,7 +301,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'reviewdate',
-        displayName: 'Date reviewed',
+        get displayName() {
+            return msg('Date reviewed');
+        },
         urlNames: ['reviewdate'],
     },
     [SortField.dateadded]: {
@@ -296,7 +314,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'addeddate',
-        displayName: 'Date added',
+        get displayName() {
+            return msg('Date added');
+        },
         urlNames: ['addeddate'],
     },
     [SortField.datefavorited]: {
@@ -307,7 +327,9 @@ export const SORT_OPTIONS = {
         shownInURL: false,
         handledBySearchService: false,
         searchServiceKey: 'favoritedate',
-        displayName: 'Date favorited',
+        get displayName() {
+            return msg('Date favorited');
+        },
         urlNames: ['favoritedate'],
     },
     [SortField.creator]: {
@@ -318,7 +340,9 @@ export const SORT_OPTIONS = {
         shownInURL: true,
         handledBySearchService: true,
         searchServiceKey: 'creatorSorter',
-        displayName: 'Creator',
+        get displayName() {
+            return msg('Creator');
+        },
         urlNames: ['creator', 'creatorSorter'],
     },
 };
@@ -417,33 +441,77 @@ export const tvFacetDisplayOrder = [
  * Human-readable titles for each facet group.
  */
 export const facetTitles = {
-    subject: 'Subject',
-    lending: 'Availability',
-    mediatype: 'Media Type',
-    language: 'Language',
-    creator: 'Creator',
-    collection: 'Collection',
-    year: 'Year',
-    clip_type: 'Clip Type',
-    program: 'Program',
-    person: 'Person',
-    sponsor: 'Sponsor',
+    get subject() {
+        return msg('Subject');
+    },
+    get lending() {
+        return msg('Availability');
+    },
+    get mediatype() {
+        return msg('Media Type');
+    },
+    get language() {
+        return msg('Language');
+    },
+    get creator() {
+        return msg('Creator');
+    },
+    get collection() {
+        return msg('Collection');
+    },
+    get year() {
+        return msg('Year');
+    },
+    get clip_type() {
+        return msg('Clip Type');
+    },
+    get program() {
+        return msg('Program');
+    },
+    get person() {
+        return msg('Person');
+    },
+    get sponsor() {
+        return msg('Sponsor');
+    },
 };
 /**
  * Human-readable plural titles for each facet group, for referring to its values.
  */
 export const facetPluralTitles = {
-    subject: 'Subjects',
-    lending: 'Availability',
-    mediatype: 'Media Types',
-    language: 'Languages',
-    creator: 'Creators',
-    collection: 'Collections',
-    year: 'Years',
-    clip_type: 'Clip Types',
-    program: 'Programs',
-    person: 'People',
-    sponsor: 'Sponsors',
+    get subject() {
+        return msg('Subjects');
+    },
+    get lending() {
+        return msg('Availability');
+    },
+    get mediatype() {
+        return msg('Media Types');
+    },
+    get language() {
+        return msg('Languages');
+    },
+    get creator() {
+        return msg('Creators');
+    },
+    get collection() {
+        return msg('Collections');
+    },
+    get year() {
+        return msg('Years');
+    },
+    get clip_type() {
+        return msg('Clip Types');
+    },
+    get program() {
+        return msg('Programs');
+    },
+    get person() {
+        return msg('People');
+    },
+    get sponsor() {
+        return msg('Sponsors');
+    },
 };
 /**
  * The default sort type to use for each facet type
@@ -500,14 +568,26 @@ export const lendingFacetKeysVisibility = {
 };
 export const customFacetDisplayNames = {
     lending: {
-        is_lendable: 'Lending Library',
-        available_to_borrow: 'Borrow 14 Days',
-        is_readable: 'Always Available',
+        get is_lendable() {
+            return msg('Lending Library');
+        },
+        get available_to_borrow() {
+            return msg('Borrow 14 Days');
+        },
+        get is_readable() {
+            return msg('Always Available');
+        },
     },
     clip_type: {
-        quote: 'Quote',
-        commercial: 'Political Ad',
-        'fact check': 'Fact Check',
+        get quote() {
+            return msg('Quote');
+        },
+        get commercial() {
+            return msg('Political Ad');
+        },
+        get 'fact check'() {
+            return msg('Fact Check');
+        },
     },
 };
 /**