@internetarchive/collection-browser 3.4.1-alpha-webdev7761.4 → 3.4.1

package/dist/src/expanded-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"expanded-date-picker.js","sourceRoot":"","sources":["../../src/expanded-date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  CSSResultGroup,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport {\n  BarScalingOption,\n  BinSnappingInterval,\n} from '@internetarchive/histogram-date-range';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\n\nimport '@internetarchive/histogram-date-range';\n\n@customElement('expanded-date-picker')\nexport class ExpandedDatePicker extends LitElement {\n  @property({ type: String }) minDate?: string;\n\n  @property({ type: String }) maxDate?: string;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Array }) buckets?: number[];\n\n  @property({ type: String }) customDateFormat?: string;\n\n  @property({ type: String }) customTooltipDateFormat?: string;\n\n  @property({ type: String }) customTooltipLabel?: string;\n\n  @property({ type: String }) binSnapping: BinSnappingInterval = 'none';\n\n  @property({ type: String }) barScaling: BarScalingOption = 'logarithmic';\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\">\n        <histogram-date-range\n          id=\"date-picker\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .minSelectedDate=${this.minSelectedDate ?? this.minDate}\n          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}\n          dateFormat=${ifDefined(this.customDateFormat)}\n          tooltipDateFormat=${ifDefined(this.customTooltipDateFormat)}\n          tooltipLabel=${ifDefined(this.customTooltipLabel)}\n          .binSnapping=${this.binSnapping}\n          .barScaling=${this.barScaling ?? nothing}\n          .updateDelay=${0}\n          updateWhileFocused\n          missingDataMessage=\"...\"\n          .width=${560}\n          .height=${120}\n          .bins=${this.buckets}\n          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n        >\n          <button\n            id=\"apply-btn\"\n            slot=\"inputs-right-side\"\n            @click=${this.applyBtnClicked}\n          >\n            ${msg('Apply date range')}\n          </button>\n        </histogram-date-range>\n      </div>\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this.setupEscapeListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeEscapeListener();\n  }\n\n  /**\n   * Add an event listener to close the date picker modal when the Esc key is pressed\n   */\n  private setupEscapeListener() {\n    document.addEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Remove the Esc key listener that was previously added\n   */\n  private removeEscapeListener() {\n    document.removeEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Closes the modal dialog if the given event is pressing the Esc key.\n   * Arrow function to ensure `this` remains bound to the current component.\n   */\n  private boundEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeModal();\n    }\n  };\n\n  /**\n   * When the histogram is updated, keep track of the newly selected date range.\n   * We don't commit to the new range until the apply button is clicked.\n   */\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>,\n  ): void {\n    this.minSelectedDate = e.detail.minDate;\n    this.maxSelectedDate = e.detail.maxDate;\n  }\n\n  /**\n   * When the Apply button is clicked, emit the current date range and close the modal.\n   */\n  private applyBtnClicked(): void {\n    const event = new CustomEvent('histogramDateRangeApplied', {\n      detail: {\n        minDate: this.minSelectedDate,\n        maxDate: this.maxSelectedDate,\n      },\n    });\n    this.dispatchEvent(event);\n    this.closeModal();\n\n    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.histogramChangedFromModal,\n      label: window.location.href,\n    });\n  }\n\n  /**\n   * Closes the modal associated with this component (if it exists) and dispatches a\n   * modalClosed event.\n   */\n  private closeModal(): void {\n    if (this.modalManager) {\n      this.modalManager.closeModal();\n      this.dispatchEvent(new CustomEvent('modalClosed'));\n    }\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #container {\n        display: flex;\n        justify-content: center;\n        padding: 40px 10px 10px;\n        overflow: hidden;\n      }\n\n      #date-picker {\n        --histogramDateRangeInputWidth: 50px;\n        --histogramDateRangeInputRowMargin: 5px 0 0 0;\n      }\n\n      #apply-btn {\n        margin: 0 0 0 5px;\n        padding: 8px 10px;\n        border: 0;\n        border-radius: 4px;\n        background: var(--primaryButtonBGColor, #194880);\n        color: white;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"expanded-date-picker.js","sourceRoot":"","sources":["../../src/expanded-date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  CSSResultGroup,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport {\n  BarScalingOption,\n  BinSnappingInterval,\n} from '@internetarchive/histogram-date-range';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\n\nimport '@internetarchive/histogram-date-range';\n\n@customElement('expanded-date-picker')\nexport class ExpandedDatePicker extends LitElement {\n  @property({ type: String }) minDate?: string;\n\n  @property({ type: String }) maxDate?: string;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Array }) buckets?: number[];\n\n  @property({ type: String }) customDateFormat?: string;\n\n  @property({ type: String }) customTooltipDateFormat?: string;\n\n  @property({ type: String }) customTooltipLabel?: string;\n\n  @property({ type: String }) binSnapping: BinSnappingInterval = 'none';\n\n  @property({ type: String }) barScaling: BarScalingOption = 'logarithmic';\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\">\n        <histogram-date-range\n          id=\"date-picker\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .minSelectedDate=${this.minSelectedDate ?? this.minDate}\n          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}\n          dateFormat=${ifDefined(this.customDateFormat)}\n          tooltipDateFormat=${ifDefined(this.customTooltipDateFormat)}\n          tooltipLabel=${ifDefined(this.customTooltipLabel)}\n          .binSnapping=${this.binSnapping}\n          .barScaling=${this.barScaling ?? nothing}\n          .updateDelay=${0}\n          updateWhileFocused\n          missingDataMessage=\"...\"\n          .width=${560}\n          .height=${120}\n          .bins=${this.buckets}\n          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n        >\n          <button\n            id=\"apply-btn\"\n            slot=\"inputs-right-side\"\n            @click=${this.applyBtnClicked}\n          >\n            ${msg('Apply date range')}\n          </button>\n        </histogram-date-range>\n      </div>\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this.setupEscapeListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeEscapeListener();\n  }\n\n  /**\n   * Add an event listener to close the date picker modal when the Esc key is pressed\n   */\n  private setupEscapeListener() {\n    document.addEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Remove the Esc key listener that was previously added\n   */\n  private removeEscapeListener() {\n    document.removeEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Closes the modal dialog if the given event is pressing the Esc key.\n   * Arrow function to ensure `this` remains bound to the current component.\n   */\n  private boundEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeModal();\n    }\n  };\n\n  /**\n   * When the histogram is updated, keep track of the newly selected date range.\n   * We don't commit to the new range until the apply button is clicked.\n   */\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>,\n  ): void {\n    this.minSelectedDate = e.detail.minDate;\n    this.maxSelectedDate = e.detail.maxDate;\n  }\n\n  /**\n   * When the Apply button is clicked, emit the current date range and close the modal.\n   */\n  private applyBtnClicked(): void {\n    const event = new CustomEvent('histogramDateRangeApplied', {\n      detail: {\n        minDate: this.minSelectedDate,\n        maxDate: this.maxSelectedDate,\n      },\n    });\n    this.dispatchEvent(event);\n    this.closeModal();\n\n    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.histogramChangedFromModal,\n      label: window.location.href,\n    });\n  }\n\n  /**\n   * Closes the modal associated with this component (if it exists) and dispatches a\n   * modalClosed event.\n   */\n  private closeModal(): void {\n    if (this.modalManager) {\n      this.modalManager.closeModal();\n      this.dispatchEvent(new CustomEvent('modalClosed'));\n    }\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #container {\n        display: flex;\n        justify-content: center;\n        padding: 40px 10px 10px;\n        overflow: hidden;\n      }\n\n      #date-picker {\n        --histogramDateRangeInputWidth: 50px;\n        --histogramDateRangeInputRowMargin: 5px 0 0 0;\n      }\n\n      #apply-btn {\n        margin: 0 0 0 5px;\n        padding: 8px 10px;\n        border: 0;\n        border-radius: 4px;\n        background: var(--primaryButtonBGColor, #194880);\n        color: white;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/language-code-handler/language-code-handler.js

@@ -10,12 +10,12 @@ export class LanguageCodeHandler {
             return '';
         const languageCode = split[0];
         const languageName = codeToLanguageMap[languageCode];
-        return languageName ?? languageCodes;
+        return languageName !== null && languageName !== void 0 ? languageName : languageCodes;
     }
     /** @inheritdoc */
     getCodeStringFromLanguageName(languageName) {
         const languageCodes = Object.keys(codeToLanguageMap).filter(code => codeToLanguageMap[code] === languageName);
-        const stringifiedCodes = languageCodes?.join(this.delimeter);
+        const stringifiedCodes = languageCodes === null || languageCodes === void 0 ? void 0 : languageCodes.join(this.delimeter);
         return stringifiedCodes;
     }
     /** @inheritdoc */

package/dist/src/language-code-handler/language-code-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"language-code-handler.js","sourceRoot":"","sources":["../../../src/language-code-handler/language-code-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAqC5D,MAAM,OAAO,mBAAmB;IAAhC;QACU,cAAS,GAAG,GAAG,CAAC;IAyB1B,CAAC;IAvBC,kBAAkB;IAClB,6BAA6B,CAAC,aAAqB;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,0BAA0B,CAAC,aAAa,CAAC,CAAC;QAC7D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,CAAC;QAClC,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,YAAY,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACrD,OAAO,YAAY,IAAI,aAAa,CAAC;IACvC,CAAC;IAED,kBAAkB;IAClB,6BAA6B,CAAC,YAAoB;QAChD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,MAAM,CACzD,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,YAAY,CACjD,CAAC;QACF,MAAM,gBAAgB,GAAG,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,kBAAkB;IAClB,0BAA0B,CAAC,aAAqB;QAC9C,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAClD,OAAO,KAAK,CAAC;IACf,CAAC;CACF","sourcesContent":["import { codeToLanguageMap } from './language-code-mapping';\n\n// To serialize the list of potential language codes, we store\n// the string in the format `en-us|en|en-gb` with `|` being the separator.\n// This allows us to generate a query of `language:(en-us OR en OR en-gb)`\n// when we deserialize the string.\nexport interface LanguageCodeHandlerInterface {\n  /**\n   * This takes a list of codes in the format `en-us|en|en-gb` and\n   * returns the first language code in the list.\n   *\n   * The codes in the string should always represent the same language name.\n   * eg `en-us`, `en-gb`, and `en` should always be \"English\"\n   *\n   * @param languageCodes\n   */\n  getLanguageNameFromCodeString(languageCodes: string): string;\n\n  /**\n   * This creates a serialized string of language codes for the given language.\n   *\n   * eg. `English` becomes `en-us|en|en-gb|.....`\n   *\n   * @param languageName\n   */\n  getCodeStringFromLanguageName(languageName: string): string;\n\n  /**\n   * Get an array of langauge codes from a serialized string.\n   *\n   * eg. `en-us|en|en-gb` becomes `['en-us', 'en', 'en-gb']`\n   *\n   * @param languageCodes\n   */\n  getCodeArrayFromCodeString(languageCodes: string): string[];\n}\n\nexport class LanguageCodeHandler implements LanguageCodeHandlerInterface {\n  private delimeter = '|';\n\n  /** @inheritdoc */\n  getLanguageNameFromCodeString(languageCodes: string): string {\n    const split = this.getCodeArrayFromCodeString(languageCodes);\n    if (split.length === 0) return '';\n    const languageCode = split[0];\n    const languageName = codeToLanguageMap[languageCode];\n    return languageName ?? languageCodes;\n  }\n\n  /** @inheritdoc */\n  getCodeStringFromLanguageName(languageName: string): string {\n    const languageCodes = Object.keys(codeToLanguageMap).filter(\n      code => codeToLanguageMap[code] === languageName,\n    );\n    const stringifiedCodes = languageCodes?.join(this.delimeter);\n    return stringifiedCodes;\n  }\n\n  /** @inheritdoc */\n  getCodeArrayFromCodeString(languageCodes: string): string[] {\n    const split = languageCodes.split(this.delimeter);\n    return split;\n  }\n}\n"]}
+{"version":3,"file":"language-code-handler.js","sourceRoot":"","sources":["../../../src/language-code-handler/language-code-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAqC5D,MAAM,OAAO,mBAAmB;IAAhC;QACU,cAAS,GAAG,GAAG,CAAC;IAyB1B,CAAC;IAvBC,kBAAkB;IAClB,6BAA6B,CAAC,aAAqB;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,0BAA0B,CAAC,aAAa,CAAC,CAAC;QAC7D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,CAAC;QAClC,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,YAAY,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;QACrD,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,aAAa,CAAC;IACvC,CAAC;IAED,kBAAkB;IAClB,6BAA6B,CAAC,YAAoB;QAChD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,MAAM,CACzD,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,YAAY,CACjD,CAAC;QACF,MAAM,gBAAgB,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,kBAAkB;IAClB,0BAA0B,CAAC,aAAqB;QAC9C,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAClD,OAAO,KAAK,CAAC;IACf,CAAC;CACF","sourcesContent":["import { codeToLanguageMap } from './language-code-mapping';\n\n// To serialize the list of potential language codes, we store\n// the string in the format `en-us|en|en-gb` with `|` being the separator.\n// This allows us to generate a query of `language:(en-us OR en OR en-gb)`\n// when we deserialize the string.\nexport interface LanguageCodeHandlerInterface {\n  /**\n   * This takes a list of codes in the format `en-us|en|en-gb` and\n   * returns the first language code in the list.\n   *\n   * The codes in the string should always represent the same language name.\n   * eg `en-us`, `en-gb`, and `en` should always be \"English\"\n   *\n   * @param languageCodes\n   */\n  getLanguageNameFromCodeString(languageCodes: string): string;\n\n  /**\n   * This creates a serialized string of language codes for the given language.\n   *\n   * eg. `English` becomes `en-us|en|en-gb|.....`\n   *\n   * @param languageName\n   */\n  getCodeStringFromLanguageName(languageName: string): string;\n\n  /**\n   * Get an array of langauge codes from a serialized string.\n   *\n   * eg. `en-us|en|en-gb` becomes `['en-us', 'en', 'en-gb']`\n   *\n   * @param languageCodes\n   */\n  getCodeArrayFromCodeString(languageCodes: string): string[];\n}\n\nexport class LanguageCodeHandler implements LanguageCodeHandlerInterface {\n  private delimeter = '|';\n\n  /** @inheritdoc */\n  getLanguageNameFromCodeString(languageCodes: string): string {\n    const split = this.getCodeArrayFromCodeString(languageCodes);\n    if (split.length === 0) return '';\n    const languageCode = split[0];\n    const languageName = codeToLanguageMap[languageCode];\n    return languageName ?? languageCodes;\n  }\n\n  /** @inheritdoc */\n  getCodeStringFromLanguageName(languageName: string): string {\n    const languageCodes = Object.keys(codeToLanguageMap).filter(\n      code => codeToLanguageMap[code] === languageName,\n    );\n    const stringifiedCodes = languageCodes?.join(this.delimeter);\n    return stringifiedCodes;\n  }\n\n  /** @inheritdoc */\n  getCodeArrayFromCodeString(languageCodes: string): string[] {\n    const split = languageCodes.split(this.delimeter);\n    return split;\n  }\n}\n"]}

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

@@ -94,6 +94,7 @@ let ManageBar = class ManageBar extends LitElement {
      * @param items Which items to list in the modal
      */
     showRemoveItemsModal() {
+        var _a, _b;
         const customModalContent = html `
       <remove-items-modal-content
         .items=${this.selectedItems}
@@ -110,12 +111,13 @@ let ManageBar = class ManageBar extends LitElement {
             closeOnBackdropClick: true,
             title: html `${msg('Are you sure you want to remove these items?')}`,
         });
-        this.modalManager?.classList.add('remove-items');
-        this.modalManager?.showModal({
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.add('remove-items');
+        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
             config,
             customModalContent,
             userClosedModalCallback: () => {
-                this.modalManager?.classList.remove('remove-items');
+                var _a;
+                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('remove-items');
             },
         });
     }
@@ -123,6 +125,7 @@ let ManageBar = class ManageBar extends LitElement {
      * Shows a modal dialog indicating that item removal is being processed
      */
     showRemoveItemsProcessingModal() {
+        var _a, _b;
         const config = new ModalConfig({
             showProcessingIndicator: true,
             processingImageMode: 'processing',
@@ -132,11 +135,12 @@ let ManageBar = class ManageBar extends LitElement {
             closeOnBackdropClick: true,
             title: html `${msg('Removing selected items...')}`,
         });
-        this.modalManager?.classList.add('remove-items');
-        this.modalManager?.showModal({
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.add('remove-items');
+        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
             config,
             userClosedModalCallback: () => {
-                this.modalManager?.classList.remove('remove-items');
+                var _a;
+                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('remove-items');
             },
         });
     }
@@ -144,6 +148,7 @@ let ManageBar = class ManageBar extends LitElement {
      * Shows a modal dialog indicating that an error occurred while removing items
      */
     showRemoveItemsErrorModal() {
+        var _a, _b;
         const config = new ModalConfig({
             showProcessingIndicator: false,
             processingImageMode: 'processing',
@@ -154,11 +159,12 @@ let ManageBar = class ManageBar extends LitElement {
             title: html `${msg('Error: unable to remove items')}`,
             message: html `${msg('An error occurred while removing items. Please try again in a few minutes.')}`,
         });
-        this.modalManager?.classList.add('remove-items');
-        this.modalManager?.showModal({
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.add('remove-items');
+        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
             config,
             userClosedModalCallback: () => {
-                this.modalManager?.classList.remove('remove-items');
+                var _a;
+                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('remove-items');
             },
         });
     }

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 } 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 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: Object }) selectedItems: Array<ManageableItem> = [];\n\n  /**\n   * Message shows as note in the modal when removing items\n   */\n  @property({ type: String }) manageViewModalMsg?: string;\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  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 { 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 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: Object }) selectedItems: Array<ManageableItem> = [];\n\n  /**\n   * Message shows as note in the modal when removing items\n   */\n  @property({ type: String }) manageViewModalMsg?: string;\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  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

@@ -13,8 +13,8 @@ let RemoveItemsModalContent = class RemoveItemsModalContent extends LitElement {
       <ul>
         ${map(this.items, ({ title, date }) => html `
             <li>
-              <span class="item-title">${title ?? '[untitled]'}</span>
-              <span class="item-date">${date ?? ''}</span>
+              <span class="item-title">${title !== null && title !== void 0 ? title : '[untitled]'}</span>
+              <span class="item-date">${date !== null && date !== void 0 ? date : ''}</span>
             </li>
           `)}
       </ul>

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,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,aAAL,KAAK,cAAL,KAAK,GAAI,YAAY;wCACtB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,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"]}

package/dist/src/models.d.ts

@@ -199,7 +199,7 @@ export type FacetLoadStrategy = 'eager' | 'lazy-mobile' | 'opt-in-or-login' | 'o
 /**
  * Union of the facet types that are available in the sidebar.
  */
-export type FacetOption = 'subject' | 'lending' | 'mediatype' | 'language' | 'creator' | 'collection' | 'year' | 'clip_type' | 'program' | 'person' | 'sponsor';
+export type FacetOption = 'subject' | 'lending' | 'mediatype' | 'language' | 'creator' | 'collection' | 'year' | 'program' | 'person' | 'sponsor';
 export type SelectedFacetState = 'selected' | 'hidden';
 export type FacetState = SelectedFacetState | 'none';
 export interface FacetBucket {
@@ -238,7 +238,11 @@ export declare const getDefaultSelectedFacets: () => Required<SelectedFacets>;
 /**
  * For TV search results, what types of TV clips to restrict the results to.
  */
-export type TvClipFilterType = 'commercial' | 'fact check' | 'quote';
+export type TvClipFilterType = 'all' | 'commercials' | 'factchecks' | 'quotes';
+/**
+ * Map from TV clip filter types to their corresponding URL params
+ */
+export declare const tvClipFiltersToURLParams: Record<TvClipFilterType, string>;
 /**
  * Map from allowed TV filtering parameters in the URL to their corresponding filter type
  */

package/dist/src/models.js

@@ -17,42 +17,43 @@ export const TILE_OVERLAY_ICONS = {
  */
 export class TileModel {
     constructor(result, hitRequestSource = 'unknown') {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
         const flags = this.getFlags(result);
-        this.adIds = result.ad_id?.values;
-        this.averageRating = result.avg_rating?.value;
-        this.captureDates = result.capture_dates?.values;
+        this.adIds = (_a = result.ad_id) === null || _a === void 0 ? void 0 : _a.values;
+        this.averageRating = (_b = result.avg_rating) === null || _b === void 0 ? void 0 : _b.value;
+        this.captureDates = (_c = result.capture_dates) === null || _c === void 0 ? void 0 : _c.values;
         this.checked = false;
-        this.collections = result.collection?.values ?? [];
-        this.collectionFilesCount = result.collection_files_count?.value ?? 0;
-        this.collectionSize = result.collection_size?.value ?? 0;
-        this.commentCount = result.num_reviews?.value ?? 0;
-        this.creator = result.creator?.value;
-        this.creators = result.creator?.values ?? [];
-        this.dateAdded = result.addeddate?.value;
-        this.dateArchived = result.publicdate?.value;
-        this.datePublished = result.date?.value;
-        this.dateReviewed = result.reviewdate?.value;
-        this.description = result.description?.values.join('\n');
-        this.factChecks = result.factcheck?.values;
-        this.favCount = result.num_favorites?.value ?? 0;
+        this.collections = (_e = (_d = result.collection) === null || _d === void 0 ? void 0 : _d.values) !== null && _e !== void 0 ? _e : [];
+        this.collectionFilesCount = (_g = (_f = result.collection_files_count) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : 0;
+        this.collectionSize = (_j = (_h = result.collection_size) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 0;
+        this.commentCount = (_l = (_k = result.num_reviews) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 0;
+        this.creator = (_m = result.creator) === null || _m === void 0 ? void 0 : _m.value;
+        this.creators = (_p = (_o = result.creator) === null || _o === void 0 ? void 0 : _o.values) !== null && _p !== void 0 ? _p : [];
+        this.dateAdded = (_q = result.addeddate) === null || _q === void 0 ? void 0 : _q.value;
+        this.dateArchived = (_r = result.publicdate) === null || _r === void 0 ? void 0 : _r.value;
+        this.datePublished = (_s = result.date) === null || _s === void 0 ? void 0 : _s.value;
+        this.dateReviewed = (_t = result.reviewdate) === null || _t === void 0 ? void 0 : _t.value;
+        this.description = (_u = result.description) === null || _u === void 0 ? void 0 : _u.values.join('\n');
+        this.factChecks = (_v = result.factcheck) === null || _v === void 0 ? void 0 : _v.values;
+        this.favCount = (_x = (_w = result.num_favorites) === null || _w === void 0 ? void 0 : _w.value) !== null && _x !== void 0 ? _x : 0;
         this.hitRequestSource = hitRequestSource;
-        this.hitType = result.rawMetadata?.hit_type;
-        this.href = collapseRepeatedQuotes(result.review?.__href__ ?? result.__href__?.value);
+        this.hitType = (_y = result.rawMetadata) === null || _y === void 0 ? void 0 : _y.hit_type;
+        this.href = collapseRepeatedQuotes((_0 = (_z = result.review) === null || _z === void 0 ? void 0 : _z.__href__) !== null && _0 !== void 0 ? _0 : (_1 = result.__href__) === null || _1 === void 0 ? void 0 : _1.value);
         this.identifier = TileModel.cleanIdentifier(result.identifier);
-        this.isClip = result.is_clip?.value;
-        this.issue = result.issue?.value;
-        this.itemCount = result.item_count?.value ?? 0;
+        this.isClip = (_2 = result.is_clip) === null || _2 === void 0 ? void 0 : _2.value;
+        this.issue = (_3 = result.issue) === null || _3 === void 0 ? void 0 : _3.value;
+        this.itemCount = (_5 = (_4 = result.item_count) === null || _4 === void 0 ? void 0 : _4.value) !== null && _5 !== void 0 ? _5 : 0;
         this.mediatype = resolveMediatype(result);
         this.review = result.review;
-        this.snippets = result.highlight?.values ?? [];
-        this.source = result.source?.value;
-        this.subjects = result.subject?.values ?? [];
-        this.thumbnailUrl = result.__img__?.value;
-        this.title = result.title?.value ?? '';
-        this.tvClipCount = result.num_clips?.value ?? 0;
-        this.volume = result.volume?.value;
-        this.viewCount = result.downloads?.value;
-        this.weeklyViewCount = result.week?.value;
+        this.snippets = (_7 = (_6 = result.highlight) === null || _6 === void 0 ? void 0 : _6.values) !== null && _7 !== void 0 ? _7 : [];
+        this.source = (_8 = result.source) === null || _8 === void 0 ? void 0 : _8.value;
+        this.subjects = (_10 = (_9 = result.subject) === null || _9 === void 0 ? void 0 : _9.values) !== null && _10 !== void 0 ? _10 : [];
+        this.thumbnailUrl = (_11 = result.__img__) === null || _11 === void 0 ? void 0 : _11.value;
+        this.title = (_13 = (_12 = result.title) === null || _12 === void 0 ? void 0 : _12.value) !== null && _13 !== void 0 ? _13 : '';
+        this.tvClipCount = (_15 = (_14 = result.num_clips) === null || _14 === void 0 ? void 0 : _14.value) !== null && _15 !== void 0 ? _15 : 0;
+        this.volume = (_16 = result.volume) === null || _16 === void 0 ? void 0 : _16.value;
+        this.viewCount = (_17 = result.downloads) === null || _17 === void 0 ? void 0 : _17.value;
+        this.weeklyViewCount = (_18 = result.week) === null || _18 === void 0 ? void 0 : _18.value;
         this.loginRequired = flags.loginRequired;
         this.contentWarning = flags.contentWarning;
     }
@@ -111,14 +112,15 @@ export class TileModel {
      * (login required and/or content warning)
      */
     getFlags(result) {
+        var _a, _b, _c, _d;
         const flags = {
             loginRequired: false,
             contentWarning: false,
         };
         // Check if item and item in "modifying" collection, setting above flags
-        if (result.collection?.values.length &&
-            result.mediatype?.value !== 'collection') {
-            for (const collection of result.collection?.values ?? []) {
+        if (((_a = result.collection) === null || _a === void 0 ? void 0 : _a.values.length) &&
+            ((_b = result.mediatype) === null || _b === void 0 ? void 0 : _b.value) !== 'collection') {
+            for (const collection of (_d = (_c = result.collection) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : []) {
                 if (collection === 'loggedin') {
                     flags.loginRequired = true;
                     if (flags.contentWarning)
@@ -134,11 +136,12 @@ export class TileModel {
         return flags;
     }
     static cleanIdentifier(identifier) {
+        var _a;
         // Some identifiers (e.g., from Whisper) represent documents rather than items, and
         // are suffixed with values that need to be stripped. Those values are separated
         // from the item identifier itself with '|'.
-        const barIndex = identifier?.indexOf('|') ?? -1;
-        const cleaned = barIndex > 0 ? identifier?.slice(0, barIndex) : identifier;
+        const barIndex = (_a = identifier === null || identifier === void 0 ? void 0 : identifier.indexOf('|')) !== null && _a !== void 0 ? _a : -1;
+        const cleaned = barIndex > 0 ? identifier === null || identifier === void 0 ? void 0 : identifier.slice(0, barIndex) : identifier;
         return cleaned;
     }
 }
@@ -327,7 +330,8 @@ export const SORT_OPTIONS = {
  * the "unrecognized" SortOption if none matches.
  */
 export function sortOptionFromAPIString(sortName) {
-    return (Object.values(SORT_OPTIONS).find(opt => opt.urlNames.some(name => sortName === name)) ?? SORT_OPTIONS[SortField.unrecognized]);
+    var _a;
+    return ((_a = Object.values(SORT_OPTIONS).find(opt => opt.urlNames.some(name => sortName === name))) !== null && _a !== void 0 ? _a : SORT_OPTIONS[SortField.unrecognized]);
 }
 export const defaultSortAvailability = {
     [SortField.relevance]: true,
@@ -375,18 +379,26 @@ export const getDefaultSelectedFacets = () => ({
     creator: {},
     collection: {},
     year: {},
-    clip_type: {},
     program: {},
     person: {},
     sponsor: {},
 });
+/**
+ * Map from TV clip filter types to their corresponding URL params
+ */
+export const tvClipFiltersToURLParams = {
+    all: '',
+    commercials: 'only_commercials',
+    factchecks: 'only_factchecks',
+    quotes: 'only_quotes',
+};
 /**
  * Map from allowed TV filtering parameters in the URL to their corresponding filter type
  */
 export const tvClipURLParamsToFilters = {
-    only_commercials: 'commercial',
-    only_factchecks: 'fact check',
-    only_quotes: 'quote',
+    only_commercials: 'commercials',
+    only_factchecks: 'factchecks',
+    only_quotes: 'quotes',
 };
 /**
  * Facet display order when presenting results for all search types *except* TV (see below).
@@ -408,11 +420,10 @@ export const tvFacetDisplayOrder = [
     'creator',
     'year',
     'subject',
-    // 'collection',
+    'collection',
     'person',
-    // 'sponsor',
+    'sponsor',
     'language',
-    'clip_type',
 ];
 /**
  * Human-readable titles for each facet group.
@@ -425,7 +436,6 @@ export const facetTitles = {
     creator: 'Creator',
     collection: 'Collection',
     year: 'Year',
-    clip_type: 'Clip Type',
     program: 'Program',
     person: 'Person',
     sponsor: 'Sponsor',
@@ -441,7 +451,6 @@ export const defaultFacetSort = {
     creator: AggregationSortType.COUNT,
     collection: AggregationSortType.COUNT,
     year: AggregationSortType.NUMERIC, // Year facets are ordered by their numeric value by default
-    clip_type: AggregationSortType.COUNT,
     program: AggregationSortType.COUNT,
     person: AggregationSortType.COUNT,
     sponsor: AggregationSortType.COUNT,
@@ -458,7 +467,6 @@ export const valueFacetSort = {
     creator: AggregationSortType.ALPHABETICAL,
     collection: AggregationSortType.ALPHABETICAL,
     year: AggregationSortType.NUMERIC, // Year facets' values should be compared numerically, not lexicographically (year 2001 > year 3)
-    clip_type: AggregationSortType.ALPHABETICAL,
     program: AggregationSortType.ALPHABETICAL,
     person: AggregationSortType.ALPHABETICAL,
     sponsor: AggregationSortType.ALPHABETICAL,