@internetarchive/collection-browser 3.5.3 → 4.0.0

package/dist/src/app-root.d.ts

@@ -43,6 +43,7 @@ export declare class AppRoot extends LitElement {
     private searchTypeFromSelectedOption;
     private loginChanged;
     private outlineChanged;
+    private minimalTilesChanged;
     private toggleDevTools;
     private toggleFacetGroupOutline;
     private datePickerChanged;

package/dist/src/app-root.js

@@ -336,6 +336,14 @@ let AppRoot = class AppRoot extends LitElement {
               />
               <label for="show-outline-check">Show cell outlines</label>
             </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="minimal-tiles-check"
+                @click=${this.minimalTilesChanged}
+              />
+              <label for="minimal-tiles-check">Minimal tile layouts</label>
+            </div>
           </fieldset>
 
           <fieldset class="user-profile-controls">
@@ -516,6 +524,19 @@ let AppRoot = class AppRoot extends LitElement {
             this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
         }
     }
+    minimalTilesChanged(e) {
+        const target = e.target;
+        const scroller = this.collectionBrowser?.shadowRoot.querySelector('infinite-scroller');
+        const tileDispatchers = [
+            ...scroller.shadowRoot.querySelectorAll('tile-dispatcher'),
+        ];
+        if (target.checked) {
+            tileDispatchers?.forEach(tile => (tile.layoutType = 'minimal'));
+        }
+        else {
+            tileDispatchers?.forEach(tile => (tile.layoutType = 'default'));
+        }
+    }
     toggleDevTools() {
         const pageUrl = new URL(window.location.href);
         const { searchParams } = pageUrl;

package/dist/src/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  AnalyticsEvent,\r\n  AnalyticsManager,\r\n} from '@internetarchive/analytics-manager';\r\nimport {\r\n  SearchService,\r\n  SearchServiceInterface,\r\n  SearchType,\r\n} from '@internetarchive/search-service';\r\nimport { html, css, LitElement, PropertyValues, nothing } from 'lit';\r\nimport { customElement, property, query, state } from 'lit/decorators.js';\r\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\r\n\r\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\r\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\r\nimport type { CollectionBrowser } from '../src/collection-browser';\r\n\r\nimport '../src/collection-browser';\r\n\r\n@customElement('app-root')\r\nexport class AppRoot extends LitElement {\r\n  private searchService: SearchServiceInterface =\r\n    this.initSearchServiceFromUrlParams();\r\n\r\n  private resizeObserver = new SharedResizeObserver();\r\n\r\n  @state() private toggleSlots: boolean = false;\r\n\r\n  @state() private currentPage?: number;\r\n\r\n  @state() private searchQuery?: string;\r\n\r\n  @state() private withinCollection?: string;\r\n\r\n  @state() private cellWidth: number = 18;\r\n\r\n  @state() private cellHeight: number = 29;\r\n\r\n  @state() private rowGap: number = 1.7;\r\n\r\n  @state() private colGap: number = 1.7;\r\n\r\n  @state() private suppressFacets: boolean = false;\r\n\r\n  @state() private lazyLoadFacets: boolean = false;\r\n\r\n  @state() private loggedIn: boolean = false;\r\n\r\n  @state() private searchType: SearchType = SearchType.METADATA;\r\n\r\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\r\n\r\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\r\n\r\n  @query('#base-collection-field')\r\n  private baseCollectionField!: HTMLInputElement;\r\n\r\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\r\n\r\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\r\n\r\n  @query('modal-manager') private modalManager!: ModalManagerInterface;\r\n\r\n  private analyticsManager = new AnalyticsManager();\r\n\r\n  private analyticsHandler: AnalyticsManagerInterface = {\r\n    sendPing: this.sendAnalytics.bind(this),\r\n    sendEvent: this.sendAnalytics.bind(this),\r\n    sendEventNoSampling: this.sendAnalytics.bind(this),\r\n  };\r\n\r\n  private sendAnalytics(ae: AnalyticsEvent) {\r\n    console.log('Analytics Received ----', ae);\r\n    this.latestAction = ae;\r\n    this.analyticsManager?.sendEvent(ae);\r\n  }\r\n\r\n  private initSearchServiceFromUrlParams() {\r\n    const params = new URL(window.location.href).searchParams;\r\n    return new SearchService({\r\n      includeCredentials: false,\r\n      baseUrl: params.get('search_base_url') ?? undefined,\r\n      servicePath: params.get('search_service_path') ?? undefined,\r\n      debuggingEnabled: !!params.get('debugging'),\r\n    });\r\n  }\r\n\r\n  private searchPressed(e: Event) {\r\n    e.preventDefault();\r\n    this.searchQuery = this.baseQueryField.value;\r\n    this.collectionBrowser.searchType = this.searchType;\r\n\r\n    this.goToCurrentPage();\r\n  }\r\n\r\n  private collectionChanged(e: Event) {\r\n    e.preventDefault();\r\n    this.withinCollection = this.baseCollectionField.value;\r\n    this.collectionBrowser.withinCollection = this.withinCollection;\r\n\r\n    this.goToCurrentPage();\r\n  }\r\n\r\n  private goToCurrentPage() {\r\n    const page = this.currentPage ?? 1;\r\n    if (page > 1) {\r\n      this.collectionBrowser.goToPage(page);\r\n    }\r\n  }\r\n\r\n  private changePagePressed(e: Event) {\r\n    e.preventDefault();\r\n    this.currentPage = this.pageNumberInput.valueAsNumber;\r\n    this.collectionBrowser.goToPage(this.currentPage);\r\n  }\r\n\r\n  protected override updated(changed: PropertyValues): void {\r\n    if (changed.has('currentPage') && this.currentPage) {\r\n      this.pageNumberInput.value = this.currentPage.toString();\r\n    }\r\n\r\n    if (changed.has('searchQuery')) {\r\n      this.queryUpdated();\r\n    }\r\n  }\r\n\r\n  private queryUpdated() {\r\n    this.collectionBrowser.baseQuery = this.searchQuery;\r\n  }\r\n\r\n  private get getClass() {\r\n    const searchParams = new URLSearchParams(window.location.search);\r\n\r\n    return searchParams.get('hide-dev-tools') ? 'hidden' : '';\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"dev-tool-container\">\r\n        <div id=\"dev-tools\" class=${this.getClass}>\r\n          <div id=\"search-and-page-inputs\">\r\n            <form @submit=${this.searchPressed}>\r\n              <label for=\"base-query-field\"> Query: </label>\r\n              <input\r\n                type=\"text\"\r\n                id=\"base-query-field\"\r\n                .value=${this.searchQuery ?? ''}\r\n              />\r\n              <input type=\"submit\" value=\"Search\" />\r\n            </form>\r\n            <form @submit=${this.changePagePressed}>\r\n              <label for=\"page-number-input\"> Page: </label>\r\n              <input type=\"number\" value=\"1\" id=\"page-number-input\" />\r\n              <input type=\"submit\" value=\"Go\" />\r\n            </form>\r\n          </div>\r\n          <div>\r\n            <form @submit=${this.collectionChanged}>\r\n              <label for=\"base-collection-field\"> Within collection: </label>\r\n              <input\r\n                type=\"text\"\r\n                id=\"base-collection-field\"\r\n                .value=${this.withinCollection ?? ''}\r\n              />\r\n              <input type=\"submit\" value=\"Search\" />\r\n            </form>\r\n          </div>\r\n\r\n          <div id=\"search-types\">\r\n            Search type:\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"default-search\"\r\n                name=\"search-type\"\r\n                value=\"default\"\r\n                .checked=${this.searchType === SearchType.DEFAULT}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"default-search\">Default</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"metadata-search\"\r\n                name=\"search-type\"\r\n                value=\"metadata\"\r\n                .checked=${this.searchType === SearchType.METADATA}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"metadata-search\">Metadata</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"fulltext-search\"\r\n                name=\"search-type\"\r\n                value=\"fulltext\"\r\n                .checked=${this.searchType === SearchType.FULLTEXT}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"fulltext-search\">Full text</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"tv-search\"\r\n                name=\"search-type\"\r\n                value=\"tv\"\r\n                .checked=${this.searchType === SearchType.TV}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"tv-search\">TV</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"radio-search\"\r\n                name=\"search-type\"\r\n                value=\"radio\"\r\n                .checked=${this.searchType === SearchType.RADIO}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"radio-search\">Radio</label>\r\n            </span>\r\n          </div>\r\n\r\n          <div id=\"toggle-controls\">\r\n            <button\r\n              @click=${() => {\r\n                const details =\r\n                  this.shadowRoot?.getElementById('cell-size-control');\r\n                details?.classList.toggle('hidden');\r\n                const rowGapControls =\r\n                  this.shadowRoot?.getElementById('cell-gap-control');\r\n                rowGapControls?.classList.toggle('hidden');\r\n              }}\r\n            >\r\n              Toggle Cell Controls\r\n            </button>\r\n            <button\r\n              @click=${() => {\r\n                const details = this.shadowRoot?.getElementById(\r\n                  'latest-event-details',\r\n                );\r\n                details?.classList.toggle('hidden');\r\n              }}\r\n            >\r\n              Last Event Captured\r\n            </button>\r\n          </div>\r\n\r\n          <div id=\"last-event\">\r\n            <pre id=\"latest-event-details\" class=\"hidden\">\r\n              ${JSON.stringify(this.latestAction, null, 2)}\r\n            </pre\r\n            >\r\n          </div>\r\n\r\n          <fieldset class=\"cell-controls\">\r\n            <legend>Cell Controls</legend>\r\n            <div>\r\n              <label for=\"cell-width-slider\">Cell width:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"10\"\r\n                max=\"100\"\r\n                value=\"18\"\r\n                step=\"0.1\"\r\n                id=\"cell-width-slider\"\r\n                @input=${this.widthChanged}\r\n              />\r\n              <span>${this.cellWidth}rem</span>\r\n            </div>\r\n            <div>\r\n              <label for=\"cell-height-slider\">Cell height:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"10\"\r\n                max=\"100\"\r\n                value=\"29\"\r\n                step=\"0.1\"\r\n                id=\"cell-height-slider\"\r\n                @input=${this.heightChanged}\r\n              />\r\n              <span>${this.cellHeight}rem</span>\r\n            </div>\r\n            <div>\r\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"0\"\r\n                max=\"5\"\r\n                value=\"1.7\"\r\n                step=\"0.1\"\r\n                id=\"cell-row-gap-slider\"\r\n                @input=${this.rowGapChanged}\r\n              />\r\n              <span>${this.rowGap}rem</span>\r\n            </div>\r\n            <div>\r\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"0\"\r\n                max=\"5\"\r\n                value=\"1.7\"\r\n                step=\"0.1\"\r\n                id=\"cell-col-gap-slider\"\r\n                @input=${this.colGapChanged}\r\n              />\r\n              <span>${this.colGap}rem</span>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"other-controls\">\r\n            <legend>Other Controls</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"simulate-login\"\r\n                @click=${this.loginChanged}\r\n              />\r\n              <label for=\"simulate-login\">Simulate login</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-date-picker\"\r\n                checked\r\n                @click=${this.datePickerChanged}\r\n              />\r\n              <label for=\"enable-date-picker\">Enable date picker</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-facets\"\r\n                checked\r\n                @click=${this.facetsChanged}\r\n              />\r\n              <label for=\"enable-facets\">Enable facets</label>\r\n            </div>\r\n            <div class=\"checkbox-control indent\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"lazy-load-facets\"\r\n                ?disabled=${this.suppressFacets}\r\n                @click=${this.lazyLoadFacetsChanged}\r\n              />\r\n              <label for=\"lazy-load-facets\">Lazy load facets</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-management\"\r\n                @click=${this.manageModeCheckboxChanged}\r\n              />\r\n              <label for=\"enable-management\">Enable manage mode</label>\r\n            </div>\r\n            <div class=\"checkbox-control indent\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-search-management\"\r\n                @click=${this.SearchManageModeCheckboxChanged}\r\n              />\r\n              <label for=\"enable-search-management\">Search</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-smart-facet-bar\"\r\n                @click=${this.smartFacetBarCheckboxChanged}\r\n              />\r\n              <label for=\"enable-smart-facet-bar\">Enable smart facet bar</label>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"cb-visual-appearance\">\r\n            <legend>CB Visual Appearance</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"show-facet-group-outline-check\"\r\n                @click=${this.toggleFacetGroupOutline}\r\n              />\r\n              <label for=\"show-facet-group-outline-check\">\r\n                Show facet group outlines\r\n              </label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"show-outline-check\"\r\n                @click=${this.outlineChanged}\r\n              />\r\n              <label for=\"show-outline-check\">Show cell outlines</label>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"user-profile-controls\">\r\n            <legend>User Profile Controls</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-facet-top-slot\"\r\n                @click=${this.facetTopSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-facet-top-slot\">Show facet top slot</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-cb-top-slot\"\r\n                @click=${this.cbTopSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-cb-top-slot\">Show CB top slot</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-sortbar-left-slot\"\r\n                @click=${this.sortBarLeftSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-sortbar-left-slot\"\r\n                >Show sortbar left slot</label\r\n              >\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-sortbar-right-slot\"\r\n                @click=${this.sortBarRightSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-sortbar-right-slot\"\r\n                >Show sortbar right slot</label\r\n              >\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-result-last-tile-slot\"\r\n                @click=${this.resultLastTileSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-result-last-tile-slot\">\r\n                Show result last tile slot\r\n              </label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-replaced-sort-options\"\r\n                @click=${this.replaceSortOptionsChanged}\r\n              />\r\n              <label for=\"enable-replaced-sort-options\">\r\n                Show replaced sort options\r\n              </label>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"user-profile-controls\">\r\n            <legend>Set Placeholder Types</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                id=\"enable-loading-placeholder\"\r\n                type=\"radio\"\r\n                @click=${() => this.setPlaceholderType('loading-placeholder')}\r\n                name=\"placeholder-radio\"\r\n              />\r\n              <label for=\"enable-loading-placeholder\"\r\n                >Loading Placeholder</label\r\n              >\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                id=\"enable-empty-placeholder\"\r\n                type=\"radio\"\r\n                @click=${() => this.setPlaceholderType('error-placeholder')}\r\n                value=\"empty-placeholder\"\r\n                name=\"placeholder-radio\"\r\n              />\r\n              <label for=\"enable-empty-placeholder\">Empty Placeholder</label>\r\n            </div>\r\n          </fieldset>\r\n        </div>\r\n        <button id=\"toggle-dev-tools-btn\" @click=${this.toggleDevTools}>\r\n          Toggle Search Controls\r\n        </button>\r\n      </div>\r\n      <div id=\"collection-browser-container\">\r\n        <collection-browser\r\n          facetPaneVisible\r\n          .baseNavigationUrl=${'https://archive.org'}\r\n          .baseImageUrl=${'https://archive.org'}\r\n          .searchService=${this.searchService}\r\n          .resizeObserver=${this.resizeObserver}\r\n          .showHistogramDatePicker=${true}\r\n          .suppressFacets=${this.suppressFacets}\r\n          .lazyLoadFacets=${this.lazyLoadFacets}\r\n          .loggedIn=${this.loggedIn}\r\n          .modalManager=${this.modalManager}\r\n          .analyticsHandler=${this.analyticsHandler}\r\n          .pageContext=${'search'}\r\n          @visiblePageChanged=${this.visiblePageChanged}\r\n          @baseQueryChanged=${this.baseQueryChanged}\r\n          @searchTypeChanged=${this.searchTypeChanged}\r\n          @manageModeChanged=${this.manageModeChanged}\r\n          @itemRemovalRequested=${this.handleItemRemovalRequest}\r\n          @itemManagerRequested=${this.handleItemManagerRequest}\r\n        >\r\n          ${this.toggleSlots\r\n            ? html`<div slot=\"sortbar-left-slot\">Sort Slot</div>`\r\n            : nothing}\r\n          ${this.toggleSlots\r\n            ? html`<div slot=\"facet-top-slot\">Facet Slot</div>`\r\n            : nothing}\r\n        </collection-browser>\r\n      </div>\r\n      <modal-manager></modal-manager>\r\n    `;\r\n  }\r\n\r\n  private async setPlaceholderType(type: string) {\r\n    switch (type) {\r\n      case 'loading-placeholder':\r\n        this.collectionBrowser.baseQuery = '';\r\n        this.collectionBrowser.suppressPlaceholders = true;\r\n        this.collectionBrowser.clearResultsOnEmptyQuery = true;\r\n        this.requestUpdate();\r\n        await this.collectionBrowser.updateComplete;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {\r\n    this.searchQuery = e.detail.baseQuery;\r\n  }\r\n\r\n  /** Handler for search type changes coming from collection browser */\r\n  private searchTypeChanged(e: CustomEvent<SearchType>): void {\r\n    this.searchType = e.detail;\r\n  }\r\n\r\n  /** Handler for user input selecting a search type */\r\n  private searchTypeSelected(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.searchType = this.searchTypeFromSelectedOption(target.value);\r\n  }\r\n\r\n  private searchTypeFromSelectedOption(option: string): SearchType {\r\n    switch (option) {\r\n      case 'metadata':\r\n        return SearchType.METADATA;\r\n      case 'fulltext':\r\n        return SearchType.FULLTEXT;\r\n      case 'tv':\r\n        return SearchType.TV;\r\n      case 'radio':\r\n        return SearchType.RADIO;\r\n      default:\r\n        return SearchType.DEFAULT;\r\n    }\r\n  }\r\n\r\n  private loginChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    if (target.checked) {\r\n      this.loggedIn = true;\r\n    } else {\r\n      this.loggedIn = false;\r\n    }\r\n  }\r\n\r\n  private outlineChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    if (target.checked) {\r\n      this.collectionBrowser.style.setProperty(\r\n        '--infiniteScrollerCellOutline',\r\n        '1px solid #33D1FF',\r\n      );\r\n    } else {\r\n      this.collectionBrowser.style.removeProperty(\r\n        '--infiniteScrollerCellOutline',\r\n      );\r\n    }\r\n  }\r\n\r\n  private toggleDevTools() {\r\n    const pageUrl = new URL(window.location.href);\r\n    const { searchParams } = pageUrl;\r\n\r\n    if (searchParams.get('hide-dev-tools')) {\r\n      searchParams.delete('hide-dev-tools');\r\n    } else {\r\n      searchParams.set('hide-dev-tools', 'true');\r\n    }\r\n\r\n    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');\r\n\r\n    if (window.history.replaceState) {\r\n      window.history.replaceState(\r\n        {\r\n          path: pageUrl.toString(),\r\n        },\r\n        '',\r\n        pageUrl.toString(),\r\n      );\r\n    }\r\n  }\r\n\r\n  private toggleFacetGroupOutline(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    if (target.checked) {\r\n      this.collectionBrowser.classList.add('showFacetGroupOutlines');\r\n      this.modalManager.classList.add('showFacetGroupOutlines');\r\n    } else {\r\n      this.collectionBrowser.classList.remove('showFacetGroupOutlines');\r\n      this.modalManager.classList.remove('showFacetGroupOutlines');\r\n    }\r\n  }\r\n\r\n  private datePickerChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.showHistogramDatePicker = target.checked;\r\n\r\n    // When disabling the date picker from the demo app, also clear any existing date range params\r\n    if (!this.collectionBrowser.showHistogramDatePicker) {\r\n      this.collectionBrowser.minSelectedDate = undefined;\r\n      this.collectionBrowser.maxSelectedDate = undefined;\r\n    }\r\n  }\r\n\r\n  private facetsChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.suppressFacets = !target.checked;\r\n  }\r\n\r\n  private lazyLoadFacetsChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.lazyLoadFacets = target.checked;\r\n  }\r\n\r\n  /**\r\n   * Handler for when collection browser's manage mode changes.\r\n   * This lets us disable the checkbox in the dev panel when the user cancels out\r\n   * of manage mode from within collection browser.\r\n   */\r\n  private manageModeChanged(e: CustomEvent<boolean>): void {\r\n    const manageCheckbox = this.shadowRoot?.querySelector(\r\n      '#enable-management',\r\n    ) as HTMLInputElement;\r\n    if (manageCheckbox) manageCheckbox.checked = e.detail;\r\n  }\r\n\r\n  /**\r\n   * Handler for item removal\r\n   */\r\n  private handleItemRemovalRequest(e: CustomEvent) {\r\n    this.collectionBrowser.showRemoveItemsProcessingModal();\r\n    console.log('itemRemovalRequested: ', e.detail.items);\r\n\r\n    setTimeout(() => {\r\n      // execute item-removal-service, and response is successfully deleted\r\n      const status = false;\r\n\r\n      if (status) {\r\n        // looking for success?\r\n        this.collectionBrowser.isManageView = false;\r\n        this.modalManager?.closeModal();\r\n        this.modalManager?.classList.remove('remove-items');\r\n      } else {\r\n        // looking for failure?\r\n        this.collectionBrowser.showRemoveItemsErrorModal();\r\n      }\r\n    }, 2000); // let's wait to see processing modal\r\n  }\r\n\r\n  /**\r\n   * Handler when item manage requested\r\n   */\r\n  private handleItemManagerRequest(e: CustomEvent) {\r\n    console.log('itemManagerRequested: ', e.detail.items);\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Enable manage mode\" checkbox is changed.\r\n   */\r\n  private manageModeCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.isManageView = target.checked;\r\n    this.collectionBrowser.manageViewLabel =\r\n      'Select items to remove (customizable texts)';\r\n  }\r\n\r\n  /**\r\n   * Handler when the dev panel's \"Enable manage mode -> Search\" checkbox is changed.\r\n   */\r\n  private SearchManageModeCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.pageContext = target.checked\r\n      ? 'search'\r\n      : 'collection';\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Enable smart facet bar\" checkbox is changed.\r\n   */\r\n  private smartFacetBarCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.showSmartFacetBar = target.checked;\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show facet top slot\" checkbox is changed.\r\n   */\r\n  private facetTopSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const p = document.createElement('p');\r\n    p.style.setProperty('border', '1px solid #000');\r\n    p.textContent = 'New stuff as a child.';\r\n    p.style.setProperty('height', '20rem');\r\n    p.style.backgroundColor = '#00000';\r\n    p.setAttribute('slot', 'facet-top-slot');\r\n\r\n    if (target.checked) {\r\n      this.collectionBrowser.appendChild(p);\r\n    } else {\r\n      this.collectionBrowser.removeChild(\r\n        this.collectionBrowser.lastElementChild as Element,\r\n      );\r\n    }\r\n  }\r\n\r\n  private toggleSlotOptions() {\r\n    this.toggleSlots = !this.toggleSlots;\r\n  }\r\n\r\n  private resultLastTileSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const div = document.createElement('div');\r\n    const title = document.createElement('h3');\r\n    title.textContent = 'Upload';\r\n\r\n    div.setAttribute('slot', 'result-last-tile');\r\n    div.setAttribute('class', 'result-last-tile');\r\n    div.appendChild(title);\r\n\r\n    if (target.checked) {\r\n      this.collectionBrowser.appendChild(div);\r\n    } else {\r\n      this.collectionBrowser.removeChild(\r\n        this.collectionBrowser.lastElementChild as Element,\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show cb top slot\" checkbox is changed.\r\n   */\r\n  private cbTopSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const p = document.createElement('p');\r\n    p.style.setProperty('border', '1px solid #000');\r\n    p.textContent = 'My Favorite list header.';\r\n    p.style.setProperty('height', '10rem');\r\n    p.style.backgroundColor = '#00000';\r\n    p.setAttribute('slot', 'cb-top-slot');\r\n\r\n    if (target.checked) {\r\n      this.collectionBrowser.appendChild(p);\r\n    } else {\r\n      this.collectionBrowser.removeChild(\r\n        this.collectionBrowser.lastElementChild as Element,\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show sort bar top left slot\" checkbox is changed.\r\n   */\r\n  private sortBarLeftSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    if (target.checked) {\r\n      const div = document.createElement('div');\r\n      div.style.setProperty('border', '1px solid #000');\r\n      div.textContent = 'Btn';\r\n      div.style.setProperty('height', '3rem');\r\n      div.style.setProperty('width', '3rem');\r\n      div.setAttribute('slot', 'sort-options-left');\r\n\r\n      this.collectionBrowser.appendChild(div);\r\n    } else {\r\n      const slottedEl = this.collectionBrowser.querySelector(\r\n        '[slot=\"sort-options-left\"]',\r\n      );\r\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show sort bar top right slot\" checkbox is changed.\r\n   */\r\n  private sortBarRightSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    if (target.checked) {\r\n      const div = document.createElement('div');\r\n      div.style.setProperty('border', '1px solid #000');\r\n      div.textContent = 'Search bar';\r\n      div.style.setProperty('height', '3rem');\r\n      div.style.setProperty('width', '15rem');\r\n      div.setAttribute('slot', 'sort-options-right');\r\n\r\n      this.collectionBrowser.appendChild(div);\r\n    } else {\r\n      const slottedEl = this.collectionBrowser.querySelector(\r\n        '[slot=\"sort-options-right\"]',\r\n      );\r\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\r\n    }\r\n  }\r\n\r\n  private rowGapChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.rowGap = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserRowGap',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private colGapChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.colGap = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserColGap',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private widthChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.cellWidth = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserCellMinWidth',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private heightChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.cellHeight = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserCellMinHeight',\r\n      `${input.value}rem`,\r\n    );\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserCellMaxHeight',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\r\n    const { pageNumber } = e.detail;\r\n    if (pageNumber === this.currentPage) return;\r\n    this.currentPage = pageNumber;\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Replace sort options\" checkbox is changed.\r\n   */\r\n  private replaceSortOptionsChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    if (target.checked) {\r\n      const p = document.createElement('p');\r\n      p.style.setProperty('border', '1px solid #000');\r\n      p.textContent = 'New stuff as a child.';\r\n      p.style.setProperty('height', '20px');\r\n      p.setAttribute('slot', 'sort-options');\r\n\r\n      this.collectionBrowser.appendChild(p);\r\n      this.collectionBrowser.enableSortOptionsSlot = true;\r\n    } else {\r\n      const slottedEl = this.collectionBrowser.querySelector(\r\n        '[slot=\"sort-options\"]',\r\n      );\r\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\r\n      this.collectionBrowser.enableSortOptionsSlot = false;\r\n    }\r\n  }\r\n\r\n  static styles = css`\r\n    :host {\r\n      display: block;\r\n      --primaryButtonBGColor: #194880;\r\n      --ia-theme-link-color: #4b64ff;\r\n    }\r\n\r\n    /* add the following styles to ensure proper modal visibility */\r\n    body.modal-manager-open {\r\n      overflow: hidden;\r\n    }\r\n    modal-manager {\r\n      display: none;\r\n    }\r\n    modal-manager[mode='open'] {\r\n      display: block;\r\n    }\r\n    modal-manager.remove-items {\r\n      --modalWidth: 58rem;\r\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\r\n      --modalTitleLineHeight: 4rem;\r\n      --modalTitleFontSize: 1.8rem;\r\n    }\r\n    modal-manager.more-search-facets {\r\n      --modalWidth: 85rem;\r\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\r\n      --modalTitleLineHeight: 4rem;\r\n      --modalTitleFontSize: 1.8rem;\r\n      --modalCornerRadius: 0;\r\n      --modalBottomPadding: 0;\r\n      --modalBottomMargin: 0;\r\n      --modalScrollOffset: 0;\r\n      --modalCornerRadius: 0.5rem;\r\n    }\r\n    modal-manager.expanded-date-picker {\r\n      --modalWidth: 58rem;\r\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\r\n      --modalTitleLineHeight: 4rem;\r\n      --modalTitleFontSize: 1.8rem;\r\n      --modalCornerRadius: 0;\r\n      --modalBottomPadding: 0;\r\n      --modalBottomMargin: 0;\r\n      --modalScrollOffset: 0;\r\n      --modalCornerRadius: 0.5rem;\r\n    }\r\n\r\n    input,\r\n    button {\r\n      font-size: 1.6rem;\r\n    }\r\n\r\n    modal-manager.showFacetGroupOutlines,\r\n    collection-browser.showFacetGroupOutlines {\r\n      --facet-row-border-top: 1px solid red;\r\n      --facet-row-border-bottom: 1px solid blue;\r\n    }\r\n\r\n    collection-browser {\r\n      /* Same as production */\r\n      max-width: 135rem;\r\n      margin: auto;\r\n    }\r\n\r\n    #collection-browser-container {\r\n      /* Same as production */\r\n      padding-left: 0.5rem;\r\n      margin-bottom: 2rem;\r\n    }\r\n\r\n    #base-query-field {\r\n      width: 300px;\r\n    }\r\n\r\n    .dev-tool-container {\r\n      position: relative;\r\n    }\r\n    #dev-tools {\r\n      position: relative;\r\n      top: 0;\r\n      left: 0;\r\n      z-index: 1;\r\n      -webkit-backdrop-filter: blur(10px);\r\n      backdrop-filter: blur(10px);\r\n      padding: 0.5rem 1rem;\r\n      border: 1px solid black;\r\n      font-size: 1.4rem;\r\n      background: #ffffffb3;\r\n    }\r\n\r\n    #dev-tools > * {\r\n      display: flex;\r\n    }\r\n\r\n    #toggle-dev-tools-btn {\r\n      position: fixed;\r\n      left: 77.4%;\r\n      top: 0;\r\n      background: red;\r\n      padding: 5px;\r\n      color: white;\r\n      font-size: 1.4rem;\r\n      margin: 0;\r\n      z-index: 1;\r\n      cursor: pointer;\r\n    }\r\n\r\n    #search-and-page-inputs {\r\n      flex-wrap: wrap;\r\n      row-gap: 2px;\r\n    }\r\n\r\n    #search-and-page-inputs > form {\r\n      margin-right: 1rem;\r\n    }\r\n\r\n    #search-and-page-inputs label {\r\n      display: inline-block;\r\n      min-width: 50px;\r\n    }\r\n\r\n    #page-number-input {\r\n      width: 75px;\r\n    }\r\n\r\n    .search-type {\r\n      margin-right: 1rem;\r\n    }\r\n\r\n    .cell-controls {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n    }\r\n    .cell-controls div {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    .cell-controls input[type='range'] {\r\n      width: 120px;\r\n    }\r\n    #cell-controls label {\r\n      display: inline-block;\r\n      width: 10rem;\r\n    }\r\n\r\n    #cell-size-control,\r\n    #cell-gap-control {\r\n      flex-basis: calc(50% - 1rem);\r\n      flex-grow: 1;\r\n    }\r\n\r\n    #cell-gap-control {\r\n      margin-left: 1rem;\r\n    }\r\n\r\n    #checkbox-controls {\r\n      padding-top: 0.5rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .checkbox-control {\r\n      flex-basis: 50%;\r\n    }\r\n    .checkbox-control.indent {\r\n      margin-left: 10px;\r\n    }\r\n    .checkbox-control label {\r\n      user-select: none;\r\n    }\r\n\r\n    #last-event {\r\n      background-color: aliceblue;\r\n      padding: 5px;\r\n      margin: 5px auto;\r\n    }\r\n\r\n    .hidden {\r\n      display: none;\r\n    }\r\n\r\n    #toggle-controls {\r\n      background-color: lightskyblue;\r\n      padding: 5px;\r\n      margin: 5px auto;\r\n    }\r\n\r\n    #search-types {\r\n      margin: 5px auto;\r\n      background-color: aliceblue;\r\n      font-size: 1.6rem;\r\n    }\r\n\r\n    // slots\r\n    div[slot='cb-top-slot'] {\r\n      height: 50px;\r\n      border: 1px solid red;\r\n      background: bisque;\r\n    }\r\n    div[slot='facet-top-slot'] {\r\n      border: 1px solid red;\r\n      width: 100%;\r\n      height: 150px;\r\n      background-color: darkseagreen;\r\n    }\r\n    div[slot='sort-slot-left'] {\r\n      height: 50px;\r\n      border: 1px solid red;\r\n      background: bisque;\r\n    }\r\n\r\n    /* user profile controls */\r\n    .user-profile-controls {\r\n      width: fit-content;\r\n    }\r\n\r\n    fieldset {\r\n      display: inline-block !important;\r\n    }\r\n\r\n    .result-last-tile {\r\n      border-radius: 4px;\r\n      background-color: white;\r\n      border: 3px dashed #555;\r\n      box-shadow: none;\r\n      display: grid;\r\n      align-content: center;\r\n    }\r\n    .result-last-tile:hover {\r\n      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;\r\n      transition: box-shadow 0.1s ease 0s;\r\n      cursor: pointer;\r\n      border: 3px dashed #4b64ff;\r\n    }\r\n    .result-last-tile h3 {\r\n      margin-bottom: 4rem;\r\n      margin: 0px auto;\r\n      font-size: 2.8rem;\r\n      color: rgb(44, 44, 44);\r\n      font-weight: 200;\r\n      text-align: center;\r\n    }\r\n  `;\r\n}\r\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  AnalyticsEvent,\r\n  AnalyticsManager,\r\n} from '@internetarchive/analytics-manager';\r\nimport {\r\n  SearchService,\r\n  SearchServiceInterface,\r\n  SearchType,\r\n} from '@internetarchive/search-service';\r\nimport { html, css, LitElement, PropertyValues, nothing } from 'lit';\r\nimport { customElement, property, query, state } from 'lit/decorators.js';\r\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\r\n\r\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\r\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\r\nimport type { CollectionBrowser } from '../src/collection-browser';\r\n\r\nimport '../src/collection-browser';\r\nimport { InfiniteScroller } from '@internetarchive/infinite-scroller';\r\nimport { TileDispatcher } from './tiles/tile-dispatcher';\r\n\r\n@customElement('app-root')\r\nexport class AppRoot extends LitElement {\r\n  private searchService: SearchServiceInterface =\r\n    this.initSearchServiceFromUrlParams();\r\n\r\n  private resizeObserver = new SharedResizeObserver();\r\n\r\n  @state() private toggleSlots: boolean = false;\r\n\r\n  @state() private currentPage?: number;\r\n\r\n  @state() private searchQuery?: string;\r\n\r\n  @state() private withinCollection?: string;\r\n\r\n  @state() private cellWidth: number = 18;\r\n\r\n  @state() private cellHeight: number = 29;\r\n\r\n  @state() private rowGap: number = 1.7;\r\n\r\n  @state() private colGap: number = 1.7;\r\n\r\n  @state() private suppressFacets: boolean = false;\r\n\r\n  @state() private lazyLoadFacets: boolean = false;\r\n\r\n  @state() private loggedIn: boolean = false;\r\n\r\n  @state() private searchType: SearchType = SearchType.METADATA;\r\n\r\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\r\n\r\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\r\n\r\n  @query('#base-collection-field')\r\n  private baseCollectionField!: HTMLInputElement;\r\n\r\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\r\n\r\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\r\n\r\n  @query('modal-manager') private modalManager!: ModalManagerInterface;\r\n\r\n  private analyticsManager = new AnalyticsManager();\r\n\r\n  private analyticsHandler: AnalyticsManagerInterface = {\r\n    sendPing: this.sendAnalytics.bind(this),\r\n    sendEvent: this.sendAnalytics.bind(this),\r\n    sendEventNoSampling: this.sendAnalytics.bind(this),\r\n  };\r\n\r\n  private sendAnalytics(ae: AnalyticsEvent) {\r\n    console.log('Analytics Received ----', ae);\r\n    this.latestAction = ae;\r\n    this.analyticsManager?.sendEvent(ae);\r\n  }\r\n\r\n  private initSearchServiceFromUrlParams() {\r\n    const params = new URL(window.location.href).searchParams;\r\n    return new SearchService({\r\n      includeCredentials: false,\r\n      baseUrl: params.get('search_base_url') ?? undefined,\r\n      servicePath: params.get('search_service_path') ?? undefined,\r\n      debuggingEnabled: !!params.get('debugging'),\r\n    });\r\n  }\r\n\r\n  private searchPressed(e: Event) {\r\n    e.preventDefault();\r\n    this.searchQuery = this.baseQueryField.value;\r\n    this.collectionBrowser.searchType = this.searchType;\r\n\r\n    this.goToCurrentPage();\r\n  }\r\n\r\n  private collectionChanged(e: Event) {\r\n    e.preventDefault();\r\n    this.withinCollection = this.baseCollectionField.value;\r\n    this.collectionBrowser.withinCollection = this.withinCollection;\r\n\r\n    this.goToCurrentPage();\r\n  }\r\n\r\n  private goToCurrentPage() {\r\n    const page = this.currentPage ?? 1;\r\n    if (page > 1) {\r\n      this.collectionBrowser.goToPage(page);\r\n    }\r\n  }\r\n\r\n  private changePagePressed(e: Event) {\r\n    e.preventDefault();\r\n    this.currentPage = this.pageNumberInput.valueAsNumber;\r\n    this.collectionBrowser.goToPage(this.currentPage);\r\n  }\r\n\r\n  protected override updated(changed: PropertyValues): void {\r\n    if (changed.has('currentPage') && this.currentPage) {\r\n      this.pageNumberInput.value = this.currentPage.toString();\r\n    }\r\n\r\n    if (changed.has('searchQuery')) {\r\n      this.queryUpdated();\r\n    }\r\n  }\r\n\r\n  private queryUpdated() {\r\n    this.collectionBrowser.baseQuery = this.searchQuery;\r\n  }\r\n\r\n  private get getClass() {\r\n    const searchParams = new URLSearchParams(window.location.search);\r\n\r\n    return searchParams.get('hide-dev-tools') ? 'hidden' : '';\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"dev-tool-container\">\r\n        <div id=\"dev-tools\" class=${this.getClass}>\r\n          <div id=\"search-and-page-inputs\">\r\n            <form @submit=${this.searchPressed}>\r\n              <label for=\"base-query-field\"> Query: </label>\r\n              <input\r\n                type=\"text\"\r\n                id=\"base-query-field\"\r\n                .value=${this.searchQuery ?? ''}\r\n              />\r\n              <input type=\"submit\" value=\"Search\" />\r\n            </form>\r\n            <form @submit=${this.changePagePressed}>\r\n              <label for=\"page-number-input\"> Page: </label>\r\n              <input type=\"number\" value=\"1\" id=\"page-number-input\" />\r\n              <input type=\"submit\" value=\"Go\" />\r\n            </form>\r\n          </div>\r\n          <div>\r\n            <form @submit=${this.collectionChanged}>\r\n              <label for=\"base-collection-field\"> Within collection: </label>\r\n              <input\r\n                type=\"text\"\r\n                id=\"base-collection-field\"\r\n                .value=${this.withinCollection ?? ''}\r\n              />\r\n              <input type=\"submit\" value=\"Search\" />\r\n            </form>\r\n          </div>\r\n\r\n          <div id=\"search-types\">\r\n            Search type:\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"default-search\"\r\n                name=\"search-type\"\r\n                value=\"default\"\r\n                .checked=${this.searchType === SearchType.DEFAULT}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"default-search\">Default</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"metadata-search\"\r\n                name=\"search-type\"\r\n                value=\"metadata\"\r\n                .checked=${this.searchType === SearchType.METADATA}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"metadata-search\">Metadata</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"fulltext-search\"\r\n                name=\"search-type\"\r\n                value=\"fulltext\"\r\n                .checked=${this.searchType === SearchType.FULLTEXT}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"fulltext-search\">Full text</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"tv-search\"\r\n                name=\"search-type\"\r\n                value=\"tv\"\r\n                .checked=${this.searchType === SearchType.TV}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"tv-search\">TV</label>\r\n            </span>\r\n            <span class=\"search-type\">\r\n              <input\r\n                type=\"radio\"\r\n                id=\"radio-search\"\r\n                name=\"search-type\"\r\n                value=\"radio\"\r\n                .checked=${this.searchType === SearchType.RADIO}\r\n                @click=${this.searchTypeSelected}\r\n              />\r\n              <label for=\"radio-search\">Radio</label>\r\n            </span>\r\n          </div>\r\n\r\n          <div id=\"toggle-controls\">\r\n            <button\r\n              @click=${() => {\r\n                const details =\r\n                  this.shadowRoot?.getElementById('cell-size-control');\r\n                details?.classList.toggle('hidden');\r\n                const rowGapControls =\r\n                  this.shadowRoot?.getElementById('cell-gap-control');\r\n                rowGapControls?.classList.toggle('hidden');\r\n              }}\r\n            >\r\n              Toggle Cell Controls\r\n            </button>\r\n            <button\r\n              @click=${() => {\r\n                const details = this.shadowRoot?.getElementById(\r\n                  'latest-event-details',\r\n                );\r\n                details?.classList.toggle('hidden');\r\n              }}\r\n            >\r\n              Last Event Captured\r\n            </button>\r\n          </div>\r\n\r\n          <div id=\"last-event\">\r\n            <pre id=\"latest-event-details\" class=\"hidden\">\r\n              ${JSON.stringify(this.latestAction, null, 2)}\r\n            </pre\r\n            >\r\n          </div>\r\n\r\n          <fieldset class=\"cell-controls\">\r\n            <legend>Cell Controls</legend>\r\n            <div>\r\n              <label for=\"cell-width-slider\">Cell width:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"10\"\r\n                max=\"100\"\r\n                value=\"18\"\r\n                step=\"0.1\"\r\n                id=\"cell-width-slider\"\r\n                @input=${this.widthChanged}\r\n              />\r\n              <span>${this.cellWidth}rem</span>\r\n            </div>\r\n            <div>\r\n              <label for=\"cell-height-slider\">Cell height:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"10\"\r\n                max=\"100\"\r\n                value=\"29\"\r\n                step=\"0.1\"\r\n                id=\"cell-height-slider\"\r\n                @input=${this.heightChanged}\r\n              />\r\n              <span>${this.cellHeight}rem</span>\r\n            </div>\r\n            <div>\r\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"0\"\r\n                max=\"5\"\r\n                value=\"1.7\"\r\n                step=\"0.1\"\r\n                id=\"cell-row-gap-slider\"\r\n                @input=${this.rowGapChanged}\r\n              />\r\n              <span>${this.rowGap}rem</span>\r\n            </div>\r\n            <div>\r\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\r\n              <input\r\n                type=\"range\"\r\n                min=\"0\"\r\n                max=\"5\"\r\n                value=\"1.7\"\r\n                step=\"0.1\"\r\n                id=\"cell-col-gap-slider\"\r\n                @input=${this.colGapChanged}\r\n              />\r\n              <span>${this.colGap}rem</span>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"other-controls\">\r\n            <legend>Other Controls</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"simulate-login\"\r\n                @click=${this.loginChanged}\r\n              />\r\n              <label for=\"simulate-login\">Simulate login</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-date-picker\"\r\n                checked\r\n                @click=${this.datePickerChanged}\r\n              />\r\n              <label for=\"enable-date-picker\">Enable date picker</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-facets\"\r\n                checked\r\n                @click=${this.facetsChanged}\r\n              />\r\n              <label for=\"enable-facets\">Enable facets</label>\r\n            </div>\r\n            <div class=\"checkbox-control indent\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"lazy-load-facets\"\r\n                ?disabled=${this.suppressFacets}\r\n                @click=${this.lazyLoadFacetsChanged}\r\n              />\r\n              <label for=\"lazy-load-facets\">Lazy load facets</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-management\"\r\n                @click=${this.manageModeCheckboxChanged}\r\n              />\r\n              <label for=\"enable-management\">Enable manage mode</label>\r\n            </div>\r\n            <div class=\"checkbox-control indent\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-search-management\"\r\n                @click=${this.SearchManageModeCheckboxChanged}\r\n              />\r\n              <label for=\"enable-search-management\">Search</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-smart-facet-bar\"\r\n                @click=${this.smartFacetBarCheckboxChanged}\r\n              />\r\n              <label for=\"enable-smart-facet-bar\">Enable smart facet bar</label>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"cb-visual-appearance\">\r\n            <legend>CB Visual Appearance</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"show-facet-group-outline-check\"\r\n                @click=${this.toggleFacetGroupOutline}\r\n              />\r\n              <label for=\"show-facet-group-outline-check\">\r\n                Show facet group outlines\r\n              </label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"show-outline-check\"\r\n                @click=${this.outlineChanged}\r\n              />\r\n              <label for=\"show-outline-check\">Show cell outlines</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"minimal-tiles-check\"\r\n                @click=${this.minimalTilesChanged}\r\n              />\r\n              <label for=\"minimal-tiles-check\">Minimal tile layouts</label>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"user-profile-controls\">\r\n            <legend>User Profile Controls</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-facet-top-slot\"\r\n                @click=${this.facetTopSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-facet-top-slot\">Show facet top slot</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-cb-top-slot\"\r\n                @click=${this.cbTopSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-cb-top-slot\">Show CB top slot</label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-sortbar-left-slot\"\r\n                @click=${this.sortBarLeftSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-sortbar-left-slot\"\r\n                >Show sortbar left slot</label\r\n              >\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-sortbar-right-slot\"\r\n                @click=${this.sortBarRightSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-sortbar-right-slot\"\r\n                >Show sortbar right slot</label\r\n              >\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-result-last-tile-slot\"\r\n                @click=${this.resultLastTileSlotCheckboxChanged}\r\n              />\r\n              <label for=\"enable-result-last-tile-slot\">\r\n                Show result last tile slot\r\n              </label>\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"enable-replaced-sort-options\"\r\n                @click=${this.replaceSortOptionsChanged}\r\n              />\r\n              <label for=\"enable-replaced-sort-options\">\r\n                Show replaced sort options\r\n              </label>\r\n            </div>\r\n          </fieldset>\r\n\r\n          <fieldset class=\"user-profile-controls\">\r\n            <legend>Set Placeholder Types</legend>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                id=\"enable-loading-placeholder\"\r\n                type=\"radio\"\r\n                @click=${() => this.setPlaceholderType('loading-placeholder')}\r\n                name=\"placeholder-radio\"\r\n              />\r\n              <label for=\"enable-loading-placeholder\"\r\n                >Loading Placeholder</label\r\n              >\r\n            </div>\r\n            <div class=\"checkbox-control\">\r\n              <input\r\n                id=\"enable-empty-placeholder\"\r\n                type=\"radio\"\r\n                @click=${() => this.setPlaceholderType('error-placeholder')}\r\n                value=\"empty-placeholder\"\r\n                name=\"placeholder-radio\"\r\n              />\r\n              <label for=\"enable-empty-placeholder\">Empty Placeholder</label>\r\n            </div>\r\n          </fieldset>\r\n        </div>\r\n        <button id=\"toggle-dev-tools-btn\" @click=${this.toggleDevTools}>\r\n          Toggle Search Controls\r\n        </button>\r\n      </div>\r\n      <div id=\"collection-browser-container\">\r\n        <collection-browser\r\n          facetPaneVisible\r\n          .baseNavigationUrl=${'https://archive.org'}\r\n          .baseImageUrl=${'https://archive.org'}\r\n          .searchService=${this.searchService}\r\n          .resizeObserver=${this.resizeObserver}\r\n          .showHistogramDatePicker=${true}\r\n          .suppressFacets=${this.suppressFacets}\r\n          .lazyLoadFacets=${this.lazyLoadFacets}\r\n          .loggedIn=${this.loggedIn}\r\n          .modalManager=${this.modalManager}\r\n          .analyticsHandler=${this.analyticsHandler}\r\n          .pageContext=${'search'}\r\n          @visiblePageChanged=${this.visiblePageChanged}\r\n          @baseQueryChanged=${this.baseQueryChanged}\r\n          @searchTypeChanged=${this.searchTypeChanged}\r\n          @manageModeChanged=${this.manageModeChanged}\r\n          @itemRemovalRequested=${this.handleItemRemovalRequest}\r\n          @itemManagerRequested=${this.handleItemManagerRequest}\r\n        >\r\n          ${this.toggleSlots\r\n            ? html`<div slot=\"sortbar-left-slot\">Sort Slot</div>`\r\n            : nothing}\r\n          ${this.toggleSlots\r\n            ? html`<div slot=\"facet-top-slot\">Facet Slot</div>`\r\n            : nothing}\r\n        </collection-browser>\r\n      </div>\r\n      <modal-manager></modal-manager>\r\n    `;\r\n  }\r\n\r\n  private async setPlaceholderType(type: string) {\r\n    switch (type) {\r\n      case 'loading-placeholder':\r\n        this.collectionBrowser.baseQuery = '';\r\n        this.collectionBrowser.suppressPlaceholders = true;\r\n        this.collectionBrowser.clearResultsOnEmptyQuery = true;\r\n        this.requestUpdate();\r\n        await this.collectionBrowser.updateComplete;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {\r\n    this.searchQuery = e.detail.baseQuery;\r\n  }\r\n\r\n  /** Handler for search type changes coming from collection browser */\r\n  private searchTypeChanged(e: CustomEvent<SearchType>): void {\r\n    this.searchType = e.detail;\r\n  }\r\n\r\n  /** Handler for user input selecting a search type */\r\n  private searchTypeSelected(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.searchType = this.searchTypeFromSelectedOption(target.value);\r\n  }\r\n\r\n  private searchTypeFromSelectedOption(option: string): SearchType {\r\n    switch (option) {\r\n      case 'metadata':\r\n        return SearchType.METADATA;\r\n      case 'fulltext':\r\n        return SearchType.FULLTEXT;\r\n      case 'tv':\r\n        return SearchType.TV;\r\n      case 'radio':\r\n        return SearchType.RADIO;\r\n      default:\r\n        return SearchType.DEFAULT;\r\n    }\r\n  }\r\n\r\n  private loginChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    if (target.checked) {\r\n      this.loggedIn = true;\r\n    } else {\r\n      this.loggedIn = false;\r\n    }\r\n  }\r\n\r\n  private outlineChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    if (target.checked) {\r\n      this.collectionBrowser.style.setProperty(\r\n        '--infiniteScrollerCellOutline',\r\n        '1px solid #33D1FF',\r\n      );\r\n    } else {\r\n      this.collectionBrowser.style.removeProperty(\r\n        '--infiniteScrollerCellOutline',\r\n      );\r\n    }\r\n  }\r\n\r\n  private minimalTilesChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    const scroller = this.collectionBrowser?.shadowRoot!.querySelector(\r\n      'infinite-scroller',\r\n    ) as InfiniteScroller;\r\n    const tileDispatchers = [\r\n      ...scroller.shadowRoot!.querySelectorAll('tile-dispatcher'),\r\n    ] as TileDispatcher[];\r\n\r\n    if (target.checked) {\r\n      tileDispatchers?.forEach(tile => (tile.layoutType = 'minimal'));\r\n    } else {\r\n      tileDispatchers?.forEach(tile => (tile.layoutType = 'default'));\r\n    }\r\n  }\r\n\r\n  private toggleDevTools() {\r\n    const pageUrl = new URL(window.location.href);\r\n    const { searchParams } = pageUrl;\r\n\r\n    if (searchParams.get('hide-dev-tools')) {\r\n      searchParams.delete('hide-dev-tools');\r\n    } else {\r\n      searchParams.set('hide-dev-tools', 'true');\r\n    }\r\n\r\n    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');\r\n\r\n    if (window.history.replaceState) {\r\n      window.history.replaceState(\r\n        {\r\n          path: pageUrl.toString(),\r\n        },\r\n        '',\r\n        pageUrl.toString(),\r\n      );\r\n    }\r\n  }\r\n\r\n  private toggleFacetGroupOutline(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    if (target.checked) {\r\n      this.collectionBrowser.classList.add('showFacetGroupOutlines');\r\n      this.modalManager.classList.add('showFacetGroupOutlines');\r\n    } else {\r\n      this.collectionBrowser.classList.remove('showFacetGroupOutlines');\r\n      this.modalManager.classList.remove('showFacetGroupOutlines');\r\n    }\r\n  }\r\n\r\n  private datePickerChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.showHistogramDatePicker = target.checked;\r\n\r\n    // When disabling the date picker from the demo app, also clear any existing date range params\r\n    if (!this.collectionBrowser.showHistogramDatePicker) {\r\n      this.collectionBrowser.minSelectedDate = undefined;\r\n      this.collectionBrowser.maxSelectedDate = undefined;\r\n    }\r\n  }\r\n\r\n  private facetsChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.suppressFacets = !target.checked;\r\n  }\r\n\r\n  private lazyLoadFacetsChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.lazyLoadFacets = target.checked;\r\n  }\r\n\r\n  /**\r\n   * Handler for when collection browser's manage mode changes.\r\n   * This lets us disable the checkbox in the dev panel when the user cancels out\r\n   * of manage mode from within collection browser.\r\n   */\r\n  private manageModeChanged(e: CustomEvent<boolean>): void {\r\n    const manageCheckbox = this.shadowRoot?.querySelector(\r\n      '#enable-management',\r\n    ) as HTMLInputElement;\r\n    if (manageCheckbox) manageCheckbox.checked = e.detail;\r\n  }\r\n\r\n  /**\r\n   * Handler for item removal\r\n   */\r\n  private handleItemRemovalRequest(e: CustomEvent) {\r\n    this.collectionBrowser.showRemoveItemsProcessingModal();\r\n    console.log('itemRemovalRequested: ', e.detail.items);\r\n\r\n    setTimeout(() => {\r\n      // execute item-removal-service, and response is successfully deleted\r\n      const status = false;\r\n\r\n      if (status) {\r\n        // looking for success?\r\n        this.collectionBrowser.isManageView = false;\r\n        this.modalManager?.closeModal();\r\n        this.modalManager?.classList.remove('remove-items');\r\n      } else {\r\n        // looking for failure?\r\n        this.collectionBrowser.showRemoveItemsErrorModal();\r\n      }\r\n    }, 2000); // let's wait to see processing modal\r\n  }\r\n\r\n  /**\r\n   * Handler when item manage requested\r\n   */\r\n  private handleItemManagerRequest(e: CustomEvent) {\r\n    console.log('itemManagerRequested: ', e.detail.items);\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Enable manage mode\" checkbox is changed.\r\n   */\r\n  private manageModeCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.isManageView = target.checked;\r\n    this.collectionBrowser.manageViewLabel =\r\n      'Select items to remove (customizable texts)';\r\n  }\r\n\r\n  /**\r\n   * Handler when the dev panel's \"Enable manage mode -> Search\" checkbox is changed.\r\n   */\r\n  private SearchManageModeCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.pageContext = target.checked\r\n      ? 'search'\r\n      : 'collection';\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Enable smart facet bar\" checkbox is changed.\r\n   */\r\n  private smartFacetBarCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n    this.collectionBrowser.showSmartFacetBar = target.checked;\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show facet top slot\" checkbox is changed.\r\n   */\r\n  private facetTopSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const p = document.createElement('p');\r\n    p.style.setProperty('border', '1px solid #000');\r\n    p.textContent = 'New stuff as a child.';\r\n    p.style.setProperty('height', '20rem');\r\n    p.style.backgroundColor = '#00000';\r\n    p.setAttribute('slot', 'facet-top-slot');\r\n\r\n    if (target.checked) {\r\n      this.collectionBrowser.appendChild(p);\r\n    } else {\r\n      this.collectionBrowser.removeChild(\r\n        this.collectionBrowser.lastElementChild as Element,\r\n      );\r\n    }\r\n  }\r\n\r\n  private toggleSlotOptions() {\r\n    this.toggleSlots = !this.toggleSlots;\r\n  }\r\n\r\n  private resultLastTileSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const div = document.createElement('div');\r\n    const title = document.createElement('h3');\r\n    title.textContent = 'Upload';\r\n\r\n    div.setAttribute('slot', 'result-last-tile');\r\n    div.setAttribute('class', 'result-last-tile');\r\n    div.appendChild(title);\r\n\r\n    if (target.checked) {\r\n      this.collectionBrowser.appendChild(div);\r\n    } else {\r\n      this.collectionBrowser.removeChild(\r\n        this.collectionBrowser.lastElementChild as Element,\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show cb top slot\" checkbox is changed.\r\n   */\r\n  private cbTopSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    const p = document.createElement('p');\r\n    p.style.setProperty('border', '1px solid #000');\r\n    p.textContent = 'My Favorite list header.';\r\n    p.style.setProperty('height', '10rem');\r\n    p.style.backgroundColor = '#00000';\r\n    p.setAttribute('slot', 'cb-top-slot');\r\n\r\n    if (target.checked) {\r\n      this.collectionBrowser.appendChild(p);\r\n    } else {\r\n      this.collectionBrowser.removeChild(\r\n        this.collectionBrowser.lastElementChild as Element,\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show sort bar top left slot\" checkbox is changed.\r\n   */\r\n  private sortBarLeftSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    if (target.checked) {\r\n      const div = document.createElement('div');\r\n      div.style.setProperty('border', '1px solid #000');\r\n      div.textContent = 'Btn';\r\n      div.style.setProperty('height', '3rem');\r\n      div.style.setProperty('width', '3rem');\r\n      div.setAttribute('slot', 'sort-options-left');\r\n\r\n      this.collectionBrowser.appendChild(div);\r\n    } else {\r\n      const slottedEl = this.collectionBrowser.querySelector(\r\n        '[slot=\"sort-options-left\"]',\r\n      );\r\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Show sort bar top right slot\" checkbox is changed.\r\n   */\r\n  private sortBarRightSlotCheckboxChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    if (target.checked) {\r\n      const div = document.createElement('div');\r\n      div.style.setProperty('border', '1px solid #000');\r\n      div.textContent = 'Search bar';\r\n      div.style.setProperty('height', '3rem');\r\n      div.style.setProperty('width', '15rem');\r\n      div.setAttribute('slot', 'sort-options-right');\r\n\r\n      this.collectionBrowser.appendChild(div);\r\n    } else {\r\n      const slottedEl = this.collectionBrowser.querySelector(\r\n        '[slot=\"sort-options-right\"]',\r\n      );\r\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\r\n    }\r\n  }\r\n\r\n  private rowGapChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.rowGap = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserRowGap',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private colGapChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.colGap = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserColGap',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private widthChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.cellWidth = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserCellMinWidth',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private heightChanged(e: Event) {\r\n    const input = e.target as HTMLInputElement;\r\n    this.cellHeight = parseFloat(input.value);\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserCellMinHeight',\r\n      `${input.value}rem`,\r\n    );\r\n    this.collectionBrowser.style.setProperty(\r\n      '--collectionBrowserCellMaxHeight',\r\n      `${input.value}rem`,\r\n    );\r\n  }\r\n\r\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\r\n    const { pageNumber } = e.detail;\r\n    if (pageNumber === this.currentPage) return;\r\n    this.currentPage = pageNumber;\r\n  }\r\n\r\n  /**\r\n   * Handler for when the dev panel's \"Replace sort options\" checkbox is changed.\r\n   */\r\n  private replaceSortOptionsChanged(e: Event) {\r\n    const target = e.target as HTMLInputElement;\r\n\r\n    if (target.checked) {\r\n      const p = document.createElement('p');\r\n      p.style.setProperty('border', '1px solid #000');\r\n      p.textContent = 'New stuff as a child.';\r\n      p.style.setProperty('height', '20px');\r\n      p.setAttribute('slot', 'sort-options');\r\n\r\n      this.collectionBrowser.appendChild(p);\r\n      this.collectionBrowser.enableSortOptionsSlot = true;\r\n    } else {\r\n      const slottedEl = this.collectionBrowser.querySelector(\r\n        '[slot=\"sort-options\"]',\r\n      );\r\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\r\n      this.collectionBrowser.enableSortOptionsSlot = false;\r\n    }\r\n  }\r\n\r\n  static styles = css`\r\n    :host {\r\n      display: block;\r\n      --primaryButtonBGColor: #194880;\r\n      --ia-theme-link-color: #4b64ff;\r\n    }\r\n\r\n    /* add the following styles to ensure proper modal visibility */\r\n    body.modal-manager-open {\r\n      overflow: hidden;\r\n    }\r\n    modal-manager {\r\n      display: none;\r\n    }\r\n    modal-manager[mode='open'] {\r\n      display: block;\r\n    }\r\n    modal-manager.remove-items {\r\n      --modalWidth: 58rem;\r\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\r\n      --modalTitleLineHeight: 4rem;\r\n      --modalTitleFontSize: 1.8rem;\r\n    }\r\n    modal-manager.more-search-facets {\r\n      --modalWidth: 85rem;\r\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\r\n      --modalTitleLineHeight: 4rem;\r\n      --modalTitleFontSize: 1.8rem;\r\n      --modalCornerRadius: 0;\r\n      --modalBottomPadding: 0;\r\n      --modalBottomMargin: 0;\r\n      --modalScrollOffset: 0;\r\n      --modalCornerRadius: 0.5rem;\r\n    }\r\n    modal-manager.expanded-date-picker {\r\n      --modalWidth: 58rem;\r\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\r\n      --modalTitleLineHeight: 4rem;\r\n      --modalTitleFontSize: 1.8rem;\r\n      --modalCornerRadius: 0;\r\n      --modalBottomPadding: 0;\r\n      --modalBottomMargin: 0;\r\n      --modalScrollOffset: 0;\r\n      --modalCornerRadius: 0.5rem;\r\n    }\r\n\r\n    input,\r\n    button {\r\n      font-size: 1.6rem;\r\n    }\r\n\r\n    modal-manager.showFacetGroupOutlines,\r\n    collection-browser.showFacetGroupOutlines {\r\n      --facet-row-border-top: 1px solid red;\r\n      --facet-row-border-bottom: 1px solid blue;\r\n    }\r\n\r\n    collection-browser {\r\n      /* Same as production */\r\n      max-width: 135rem;\r\n      margin: auto;\r\n    }\r\n\r\n    #collection-browser-container {\r\n      /* Same as production */\r\n      padding-left: 0.5rem;\r\n      margin-bottom: 2rem;\r\n    }\r\n\r\n    #base-query-field {\r\n      width: 300px;\r\n    }\r\n\r\n    .dev-tool-container {\r\n      position: relative;\r\n    }\r\n    #dev-tools {\r\n      position: relative;\r\n      top: 0;\r\n      left: 0;\r\n      z-index: 1;\r\n      -webkit-backdrop-filter: blur(10px);\r\n      backdrop-filter: blur(10px);\r\n      padding: 0.5rem 1rem;\r\n      border: 1px solid black;\r\n      font-size: 1.4rem;\r\n      background: #ffffffb3;\r\n    }\r\n\r\n    #dev-tools > * {\r\n      display: flex;\r\n    }\r\n\r\n    #toggle-dev-tools-btn {\r\n      position: fixed;\r\n      left: 77.4%;\r\n      top: 0;\r\n      background: red;\r\n      padding: 5px;\r\n      color: white;\r\n      font-size: 1.4rem;\r\n      margin: 0;\r\n      z-index: 1;\r\n      cursor: pointer;\r\n    }\r\n\r\n    #search-and-page-inputs {\r\n      flex-wrap: wrap;\r\n      row-gap: 2px;\r\n    }\r\n\r\n    #search-and-page-inputs > form {\r\n      margin-right: 1rem;\r\n    }\r\n\r\n    #search-and-page-inputs label {\r\n      display: inline-block;\r\n      min-width: 50px;\r\n    }\r\n\r\n    #page-number-input {\r\n      width: 75px;\r\n    }\r\n\r\n    .search-type {\r\n      margin-right: 1rem;\r\n    }\r\n\r\n    .cell-controls {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n    }\r\n    .cell-controls div {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    .cell-controls input[type='range'] {\r\n      width: 120px;\r\n    }\r\n    #cell-controls label {\r\n      display: inline-block;\r\n      width: 10rem;\r\n    }\r\n\r\n    #cell-size-control,\r\n    #cell-gap-control {\r\n      flex-basis: calc(50% - 1rem);\r\n      flex-grow: 1;\r\n    }\r\n\r\n    #cell-gap-control {\r\n      margin-left: 1rem;\r\n    }\r\n\r\n    #checkbox-controls {\r\n      padding-top: 0.5rem;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .checkbox-control {\r\n      flex-basis: 50%;\r\n    }\r\n    .checkbox-control.indent {\r\n      margin-left: 10px;\r\n    }\r\n    .checkbox-control label {\r\n      user-select: none;\r\n    }\r\n\r\n    #last-event {\r\n      background-color: aliceblue;\r\n      padding: 5px;\r\n      margin: 5px auto;\r\n    }\r\n\r\n    .hidden {\r\n      display: none;\r\n    }\r\n\r\n    #toggle-controls {\r\n      background-color: lightskyblue;\r\n      padding: 5px;\r\n      margin: 5px auto;\r\n    }\r\n\r\n    #search-types {\r\n      margin: 5px auto;\r\n      background-color: aliceblue;\r\n      font-size: 1.6rem;\r\n    }\r\n\r\n    // slots\r\n    div[slot='cb-top-slot'] {\r\n      height: 50px;\r\n      border: 1px solid red;\r\n      background: bisque;\r\n    }\r\n    div[slot='facet-top-slot'] {\r\n      border: 1px solid red;\r\n      width: 100%;\r\n      height: 150px;\r\n      background-color: darkseagreen;\r\n    }\r\n    div[slot='sort-slot-left'] {\r\n      height: 50px;\r\n      border: 1px solid red;\r\n      background: bisque;\r\n    }\r\n\r\n    /* user profile controls */\r\n    .user-profile-controls {\r\n      width: fit-content;\r\n    }\r\n\r\n    fieldset {\r\n      display: inline-block !important;\r\n    }\r\n\r\n    .result-last-tile {\r\n      border-radius: 4px;\r\n      background-color: white;\r\n      border: 3px dashed #555;\r\n      box-shadow: none;\r\n      display: grid;\r\n      align-content: center;\r\n    }\r\n    .result-last-tile:hover {\r\n      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;\r\n      transition: box-shadow 0.1s ease 0s;\r\n      cursor: pointer;\r\n      border: 3px dashed #4b64ff;\r\n    }\r\n    .result-last-tile h3 {\r\n      margin-bottom: 4rem;\r\n      margin: 0px auto;\r\n      font-size: 2.8rem;\r\n      color: rgb(44, 44, 44);\r\n      font-weight: 200;\r\n      text-align: center;\r\n    }\r\n  `;\r\n}\r\n"]}

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

@@ -1,8 +1,10 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { BaseTileComponent } from '../base-tile-component';
+import { LayoutType } from '../models';
 import '../image-block';
 export declare class CollectionTile extends BaseTileComponent {
     showInfoButton: boolean;
+    layoutType: LayoutType;
     render(): TemplateResult<1>;
     private get getImageBlockTemplate();
     private get getTitleTemplate();

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { formatUnitSize } from '../../utils/format-unit-size';
@@ -26,10 +27,15 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
          */
         super(...arguments);
         this.showInfoButton = false;
+        this.layoutType = 'default';
     }
     render() {
+        const containerClasses = classMap({
+            container: true,
+            minimal: this.layoutType === 'minimal',
+        });
         return html `
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -143,6 +149,18 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
           flex-direction: column;
           margin-left: 10px;
         }
+
+        .minimal #item-stats {
+          display: none;
+        }
+
+        .minimal .truncated {
+          -webkit-line-clamp: initial;
+        }
+
+        .minimal .item-info {
+          padding-bottom: 5px;
+        }
       `,
         ];
     }
@@ -150,6 +168,9 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
 __decorate([
     property({ type: Boolean })
 ], CollectionTile.prototype, "showInfoButton", void 0);
+__decorate([
+    property({ type: String })
+], CollectionTile.prototype, "layoutType", void 0);
 CollectionTile = __decorate([
     customElement('collection-tile')
 ], CollectionTile);

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

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

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

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { BaseTileComponent } from '../base-tile-component';
-import { SimpleLayoutType } from '../models';
+import { LayoutType } from '../models';
 import '../image-block';
 import '../review-block';
 import '../text-snippet-block';
@@ -10,7 +10,7 @@ import './tile-stats';
 export declare class ItemTile extends BaseTileComponent {
     showInfoButton: boolean;
     showTvClips: boolean;
-    simpleLayoutType: SimpleLayoutType;
+    layoutType: LayoutType;
     render(): TemplateResult<1>;
     /**
      * Templates

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

@@ -35,15 +35,16 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         super(...arguments);
         this.showInfoButton = false;
         this.showTvClips = false;
-        this.simpleLayoutType = 'none';
+        this.layoutType = 'default';
     }
     render() {
         const itemTitle = this.model?.title;
         const containerClasses = classMap({
             container: true,
-            simple: this.simpleLayoutType !== 'none',
-            'stats-only': this.simpleLayoutType === 'stats-only',
-            'snippets-only': this.simpleLayoutType === 'snippets-only',
+            simple: this.layoutType !== 'default',
+            'stats-only': this.layoutType === 'stats-only',
+            'snippets-only': this.layoutType === 'snippets-only',
+            minimal: this.layoutType === 'minimal',
         });
         return html `
       <div class=${containerClasses}>
@@ -158,8 +159,11 @@ let ItemTile = class ItemTile extends BaseTileComponent {
     `;
     }
     get textSnippetsTemplate() {
-        if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')
+        if (!this.hasSnippets)
             return nothing;
+        if (['stats-only', 'minimal'].includes(this.layoutType)) {
+            return nothing;
+        }
         return html `
       <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
       </text-snippet-block>
@@ -191,8 +195,9 @@ let ItemTile = class ItemTile extends BaseTileComponent {
      * Template for the stats row along the bottom of the tile.
      */
     get tileStatsTemplate() {
-        if (this.simpleLayoutType === 'snippets-only')
+        if (['snippets-only', 'minimal'].includes(this.layoutType)) {
             return nothing;
+        }
         const effectiveSort = this.sortParam ?? this.defaultSortParam;
         const [viewCount, viewLabel] = effectiveSort?.field === 'week'
             ? [this.model?.weeklyViewCount, 'weekly views']
@@ -258,7 +263,8 @@ let ItemTile = class ItemTile extends BaseTileComponent {
           -webkit-line-clamp: 1;
         }
 
-        .simple.snippets-only .item-info {
+        .simple.snippets-only .item-info,
+        .simple.minimal .item-info {
           padding-bottom: 5px;
         }
 
@@ -303,7 +309,7 @@ __decorate([
 ], ItemTile.prototype, "showTvClips", void 0);
 __decorate([
     property({ type: String })
-], ItemTile.prototype, "simpleLayoutType", void 0);
+], ItemTile.prototype, "layoutType", void 0);
 ItemTile = __decorate([
     customElement('item-tile')
 ], ItemTile);

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,iBAAiB;IAAxC;QACL;;;;;;;;;;;;;;;WAeG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;QAEvB,gBAAW,GAAG,KAAK,CAAC;QAErB,qBAAgB,GAAqB,MAAM,CAAC;IAuS1E,CAAC;IArSC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;QACpC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM;YACxC,YAAY,EAAE,IAAI,CAAC,gBAAgB,KAAK,YAAY;YACpD,eAAe,EAAE,IAAI,CAAC,gBAAgB,KAAK,eAAe;SAC3D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,gBAAgB;UACzB,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,kBAAkB;;;4CAGO,SAAS,CAAC,SAAS,CAAC;kBAC9C,SAAS;;;;cAIb,IAAI,CAAC,mBAAmB;cACxB,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAC,sBAAsB;YAC7B,CAAC,CAAC,IAAI,CAAC,eAAe;cACtB,IAAI,CAAC,+BAA+B,IAAI,IAAI,CAAC,oBAAoB;cACjE,IAAI,CAAC,mBAAmB;;;YAG1B,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,eAAe;QACzB,MAAM,gBAAgB,GACpB,IAAI,CAAC,oBAAoB,CAAC,0BAA0B,CAAC;QACvD,IAAI,CAAC,gBAAgB;YAAE,OAAO,OAAO,CAAC;QAEtC,OAAO,IAAI,CAAA;;wCAEyB,gBAAgB;oBACpC,gBAAgB;;;KAG/B,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,gBAAgB;yBACxB,KAAK;sBACR,KAAK;oBACP,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,sBAAsB;QAChC,IAAI,WAAW,CAAC;QAChB,IAAI,MAAM,GAAe,MAAM,CAAC;QAChC,QAAQ,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;YAClC,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC;gBAChD,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;gBAC3D,IAAI,2BAA2B,CAAC,aAAa,CAAC,EAAE,CAAC;oBAC/C,MAAM,GAAG,WAAW,CAAC;gBACvB,CAAC;gBACD,MAAM;YACR,CAAC;YACD,KAAK,YAAY;gBACf,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC;gBACrE,MAAM;YACR,KAAK,WAAW;gBACd,WAAW,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;gBAC/D,MAAM;YACR,KAAK,YAAY;gBACf,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC;gBACrE,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;YACxB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvE,OAAO,IAAI,CAAA;;gBAEC,WAAW,CAAC,KAAK,IAAI,aAAa;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;YAAE,OAAO,OAAO,CAAC;QAExC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7D,OAAO,IAAI,CAAA;;;gBAGC,SAAS,CAAC,WAAW,CAAC;eACvB,SAAS,CAAC,UAAU,CAAC;qBACf,SAAS,CAAC,KAAK,CAAC;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,oBAAoB;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,gBAAgB,KAAK,YAAY;YAC7D,OAAO,OAAO,CAAC;QAEjB,OAAO,IAAI,CAAA;sDACuC,IAAI,CAAC,KAAK,EAAE,QAAQ;;KAErE,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK;YAAE,OAAO,OAAO,CAAC;QAE9D,OAAO,IAAI,CAAA;;;wBAGS,IAAI,CAAC,KAAK,EAAE,MAAM,gBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK;;;KAGtE,CAAC;IACJ,CAAC;IAED,IAAY,+BAA+B;QAGzC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEnE,OAAO,IAAI,CAAA;;UAEL,GAAG,CACH,IAAI,CAAC,KAAK,CAAC,YAAY,EACvB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gBACA,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAChD,IAAI,CAAC,KAAM,CAAC,KAAK,EACjB,IAAI,CACL;kBACG,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,iBAAiB;QAC3B,IAAI,IAAI,CAAC,gBAAgB,KAAK,eAAe;YAAE,OAAO,OAAO,CAAC;QAE9D,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;QAC9D,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAC1B,aAAa,EAAE,KAAK,KAAK,MAAM;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE,cAAc,CAAC;YAC/C,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;QAEhD,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,KAAK,EAAE,SAAS;qBACrB,SAAS;qBACT,SAAS;oBACV,IAAI,CAAC,KAAK,EAAE,QAAQ;wBAChB,IAAI,CAAC,KAAK,EAAE,YAAY;uBACzB,IAAI,CAAC,KAAK,EAAE,WAAW;uBACvB,IAAI,CAAC,WAAW;;;KAGlC,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAC/D,IAAI,CAAC,aAAa,EAAE,KAAe,CACpC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;IACjD,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC;IACxC,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;;;;;;;;;8BAUqB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA3S8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAwB;AAEvB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAqB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA6C;AAtB7D,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA6TpB","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { map } from 'lit/directives/map.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { msg } from '@lit/localize';\r\n\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\r\nimport { SimpleLayoutType } from '../models';\r\n\r\nimport '../image-block';\r\nimport '../review-block';\r\nimport '../text-snippet-block';\r\nimport '../item-image';\r\nimport '../tile-mediatype-icon';\r\nimport './tile-stats';\r\n\r\n@customElement('item-tile')\r\nexport class ItemTile extends BaseTileComponent {\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: Boolean }) showInfoButton = false;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n  render() {\r\n    const itemTitle = this.model?.title;\r\n    const containerClasses = classMap({\r\n      container: true,\r\n      simple: this.simpleLayoutType !== 'none',\r\n      'stats-only': this.simpleLayoutType === 'stats-only',\r\n      'snippets-only': this.simpleLayoutType === 'snippets-only',\r\n    });\r\n\r\n    return html`\r\n      <div class=${containerClasses}>\r\n        ${this.infoButtonTemplate}\r\n        <div class=\"tile-details\">\r\n          <div class=\"item-info\">\r\n            ${this.imageBlockTemplate}\r\n\r\n            <div id=\"title\">\r\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\r\n                ${itemTitle}\r\n              </h3>\r\n            </div>\r\n\r\n            ${this.volumeIssueTemplate}\r\n            ${this.isSortedByDate\r\n              ? this.sortedDateInfoTemplate\r\n              : this.creatorTemplate}\r\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\r\n            ${this.reviewBlockTemplate}\r\n          </div>\r\n\r\n          ${this.tileStatsTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Templates\r\n   */\r\n  private get creatorTemplate(): TemplateResult | typeof nothing {\r\n    const displayedCreator =\r\n      this.displayValueProvider.firstCreatorMatchingFilter;\r\n    if (!displayedCreator) return nothing;\r\n\r\n    return html`\r\n      <div class=\"created-by\">\r\n        <span class=\"truncated\" title=${displayedCreator}>\r\n          by&nbsp;${displayedCreator}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get imageBlockTemplate(): TemplateResult {\r\n    return html`\r\n      <image-block\r\n        .model=${this.model}\r\n        .baseImageUrl=${this.baseImageUrl}\r\n        .loggedIn=${this.loggedIn}\r\n        .suppressBlurring=${this.suppressBlurring}\r\n        .isCompactTile=${false}\r\n        .isListTile=${false}\r\n        .viewSize=${'grid'}\r\n      >\r\n      </image-block>\r\n    `;\r\n  }\r\n\r\n  private get sortedDateInfoTemplate() {\r\n    let sortedValue;\r\n    let format: DateFormat = 'long';\r\n    switch (this.effectiveSort?.field) {\r\n      case 'date': {\r\n        const datePublished = this.model?.datePublished;\r\n        sortedValue = { field: 'published', value: datePublished };\r\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\r\n          format = 'year-only';\r\n        }\r\n        break;\r\n      }\r\n      case 'reviewdate':\r\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\r\n        break;\r\n      case 'addeddate':\r\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\r\n        break;\r\n      case 'publicdate':\r\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (!sortedValue?.value) {\r\n      return nothing;\r\n    }\r\n\r\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\r\n    return html`\r\n      <div class=\"date-sorted-by truncated\">\r\n        <span>${sortedValue.field} ${formattedDate}</span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\r\n    // &#9432; is an information icon\r\n    return this.showInfoButton\r\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\r\n          &#9432;\r\n          <span class=\"sr-only\">${msg('More info')}</span>\r\n        </button>`\r\n      : nothing;\r\n  }\r\n\r\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.review) return nothing;\r\n\r\n    const { reviewtitle, reviewbody, stars } = this.model.review;\r\n    return html`\r\n      <review-block\r\n        viewsize=\"grid\"\r\n        title=${ifDefined(reviewtitle)}\r\n        body=${ifDefined(reviewbody)}\r\n        starRating=${ifDefined(stars)}\r\n      >\r\n      </review-block>\r\n    `;\r\n  }\r\n\r\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')\r\n      return nothing;\r\n\r\n    return html`\r\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\r\n      </text-snippet-block>\r\n    `;\r\n  }\r\n\r\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.volume || !this.model?.issue) return nothing;\r\n\r\n    return html`\r\n      <div class=\"volume-issue\">\r\n        <span class=\"truncated\" title=\"volume|issue\">\r\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get webArchivesCaptureDatesTemplate():\r\n    | TemplateResult\r\n    | typeof nothing {\r\n    if (!this.model?.captureDates || !this.model.title) return nothing;\r\n\r\n    return html`\r\n      <ul class=\"capture-dates\">\r\n        ${map(\r\n          this.model.captureDates,\r\n          date =>\r\n            html`<li>\r\n              ${this.displayValueProvider.webArchivesCaptureLink(\r\n                this.model!.title,\r\n                date,\r\n              )}\r\n            </li>`,\r\n        )}\r\n      </ul>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the stats row along the bottom of the tile.\r\n   */\r\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\r\n    if (this.simpleLayoutType === 'snippets-only') return nothing;\r\n\r\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\r\n    const [viewCount, viewLabel] =\r\n      effectiveSort?.field === 'week'\r\n        ? [this.model?.weeklyViewCount, 'weekly views']\r\n        : [this.model?.viewCount, 'all-time views'];\r\n\r\n    return html`\r\n      <tile-stats\r\n        .model=${this.model}\r\n        .mediatype=${this.model?.mediatype}\r\n        .viewCount=${viewCount}\r\n        .viewLabel=${viewLabel}\r\n        .favCount=${this.model?.favCount}\r\n        .commentCount=${this.model?.commentCount}\r\n        .tvClipCount=${this.model?.tvClipCount}\r\n        .showTvClips=${this.showTvClips}\r\n      >\r\n      </tile-stats>\r\n    `;\r\n  }\r\n\r\n  private get isSortedByDate(): boolean {\r\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n      this.effectiveSort?.field as string,\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the active sort param if one is set, or the default sort param otherwise.\r\n   */\r\n  private get effectiveSort(): SortParam | null {\r\n    return this.sortParam ?? this.defaultSortParam;\r\n  }\r\n\r\n  private get hasSnippets(): boolean {\r\n    return !!this.model?.snippets?.length;\r\n  }\r\n\r\n  private infoButtonPressed(e: PointerEvent): void {\r\n    e.preventDefault();\r\n    const event = new CustomEvent<{ x: number; y: number }>(\r\n      'infoButtonPressed',\r\n      { detail: { x: e.clientX, y: e.clientY } },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * CSS\r\n   */\r\n  static get styles(): CSSResultGroup {\r\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\r\n\r\n    return [\r\n      baseTileStyles,\r\n      css`\r\n        a:link {\r\n          text-decoration: none;\r\n          color: var(--ia-theme-link-color, #4b64ff);\r\n        }\r\n        a:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        .container {\r\n          border: 1px solid ${tileBorderColor};\r\n        }\r\n\r\n        .simple #title > .truncated {\r\n          -webkit-line-clamp: 2;\r\n        }\r\n\r\n        .simple .created-by > .truncated,\r\n        .simple .date-sorted-by > .truncated,\r\n        .simple .volume-issue > .truncated {\r\n          -webkit-line-clamp: 1;\r\n        }\r\n\r\n        .simple.snippets-only .item-info {\r\n          padding-bottom: 5px;\r\n        }\r\n\r\n        .simple.snippets-only text-snippet-block {\r\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\r\n        }\r\n\r\n        .capture-dates {\r\n          margin: 0;\r\n          padding: 0 5px;\r\n          list-style-type: none;\r\n        }\r\n\r\n        review-block,\r\n        text-snippet-block {\r\n          --containerLeftMargin: 5px;\r\n          --containerTopMargin: 5px;\r\n        }\r\n\r\n        /**\r\n         * iOS Safari long-press on tiles (to bring up hover pane)\r\n         * gets messy without this\r\n         */\r\n        @media screen and (pointer: coarse) and (hover: none) {\r\n          .container {\r\n            -webkit-touch-callout: none;\r\n          }\r\n\r\n          .truncated {\r\n            -webkit-touch-callout: default;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { map } from 'lit/directives/map.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { msg } from '@lit/localize';\r\n\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\r\nimport { LayoutType } from '../models';\r\n\r\nimport '../image-block';\r\nimport '../review-block';\r\nimport '../text-snippet-block';\r\nimport '../item-image';\r\nimport '../tile-mediatype-icon';\r\nimport './tile-stats';\r\n\r\n@customElement('item-tile')\r\nexport class ItemTile extends BaseTileComponent {\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: Boolean }) showInfoButton = false;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  @property({ type: String }) layoutType: LayoutType = 'default';\r\n\r\n  render() {\r\n    const itemTitle = this.model?.title;\r\n    const containerClasses = classMap({\r\n      container: true,\r\n      simple: this.layoutType !== 'default',\r\n      'stats-only': this.layoutType === 'stats-only',\r\n      'snippets-only': this.layoutType === 'snippets-only',\r\n      minimal: this.layoutType === 'minimal',\r\n    });\r\n\r\n    return html`\r\n      <div class=${containerClasses}>\r\n        ${this.infoButtonTemplate}\r\n        <div class=\"tile-details\">\r\n          <div class=\"item-info\">\r\n            ${this.imageBlockTemplate}\r\n\r\n            <div id=\"title\">\r\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\r\n                ${itemTitle}\r\n              </h3>\r\n            </div>\r\n\r\n            ${this.volumeIssueTemplate}\r\n            ${this.isSortedByDate\r\n              ? this.sortedDateInfoTemplate\r\n              : this.creatorTemplate}\r\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\r\n            ${this.reviewBlockTemplate}\r\n          </div>\r\n\r\n          ${this.tileStatsTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Templates\r\n   */\r\n  private get creatorTemplate(): TemplateResult | typeof nothing {\r\n    const displayedCreator =\r\n      this.displayValueProvider.firstCreatorMatchingFilter;\r\n    if (!displayedCreator) return nothing;\r\n\r\n    return html`\r\n      <div class=\"created-by\">\r\n        <span class=\"truncated\" title=${displayedCreator}>\r\n          by&nbsp;${displayedCreator}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get imageBlockTemplate(): TemplateResult {\r\n    return html`\r\n      <image-block\r\n        .model=${this.model}\r\n        .baseImageUrl=${this.baseImageUrl}\r\n        .loggedIn=${this.loggedIn}\r\n        .suppressBlurring=${this.suppressBlurring}\r\n        .isCompactTile=${false}\r\n        .isListTile=${false}\r\n        .viewSize=${'grid'}\r\n      >\r\n      </image-block>\r\n    `;\r\n  }\r\n\r\n  private get sortedDateInfoTemplate() {\r\n    let sortedValue;\r\n    let format: DateFormat = 'long';\r\n    switch (this.effectiveSort?.field) {\r\n      case 'date': {\r\n        const datePublished = this.model?.datePublished;\r\n        sortedValue = { field: 'published', value: datePublished };\r\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\r\n          format = 'year-only';\r\n        }\r\n        break;\r\n      }\r\n      case 'reviewdate':\r\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\r\n        break;\r\n      case 'addeddate':\r\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\r\n        break;\r\n      case 'publicdate':\r\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (!sortedValue?.value) {\r\n      return nothing;\r\n    }\r\n\r\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\r\n    return html`\r\n      <div class=\"date-sorted-by truncated\">\r\n        <span>${sortedValue.field} ${formattedDate}</span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\r\n    // &#9432; is an information icon\r\n    return this.showInfoButton\r\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\r\n          &#9432;\r\n          <span class=\"sr-only\">${msg('More info')}</span>\r\n        </button>`\r\n      : nothing;\r\n  }\r\n\r\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.review) return nothing;\r\n\r\n    const { reviewtitle, reviewbody, stars } = this.model.review;\r\n    return html`\r\n      <review-block\r\n        viewsize=\"grid\"\r\n        title=${ifDefined(reviewtitle)}\r\n        body=${ifDefined(reviewbody)}\r\n        starRating=${ifDefined(stars)}\r\n      >\r\n      </review-block>\r\n    `;\r\n  }\r\n\r\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.hasSnippets) return nothing;\r\n    if (['stats-only', 'minimal'].includes(this.layoutType)) {\r\n      return nothing;\r\n    }\r\n\r\n    return html`\r\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\r\n      </text-snippet-block>\r\n    `;\r\n  }\r\n\r\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.volume || !this.model?.issue) return nothing;\r\n\r\n    return html`\r\n      <div class=\"volume-issue\">\r\n        <span class=\"truncated\" title=\"volume|issue\">\r\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get webArchivesCaptureDatesTemplate():\r\n    | TemplateResult\r\n    | typeof nothing {\r\n    if (!this.model?.captureDates || !this.model.title) return nothing;\r\n\r\n    return html`\r\n      <ul class=\"capture-dates\">\r\n        ${map(\r\n          this.model.captureDates,\r\n          date =>\r\n            html`<li>\r\n              ${this.displayValueProvider.webArchivesCaptureLink(\r\n                this.model!.title,\r\n                date,\r\n              )}\r\n            </li>`,\r\n        )}\r\n      </ul>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the stats row along the bottom of the tile.\r\n   */\r\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\r\n    if (['snippets-only', 'minimal'].includes(this.layoutType)) {\r\n      return nothing;\r\n    }\r\n\r\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\r\n    const [viewCount, viewLabel] =\r\n      effectiveSort?.field === 'week'\r\n        ? [this.model?.weeklyViewCount, 'weekly views']\r\n        : [this.model?.viewCount, 'all-time views'];\r\n\r\n    return html`\r\n      <tile-stats\r\n        .model=${this.model}\r\n        .mediatype=${this.model?.mediatype}\r\n        .viewCount=${viewCount}\r\n        .viewLabel=${viewLabel}\r\n        .favCount=${this.model?.favCount}\r\n        .commentCount=${this.model?.commentCount}\r\n        .tvClipCount=${this.model?.tvClipCount}\r\n        .showTvClips=${this.showTvClips}\r\n      >\r\n      </tile-stats>\r\n    `;\r\n  }\r\n\r\n  private get isSortedByDate(): boolean {\r\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n      this.effectiveSort?.field as string,\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the active sort param if one is set, or the default sort param otherwise.\r\n   */\r\n  private get effectiveSort(): SortParam | null {\r\n    return this.sortParam ?? this.defaultSortParam;\r\n  }\r\n\r\n  private get hasSnippets(): boolean {\r\n    return !!this.model?.snippets?.length;\r\n  }\r\n\r\n  private infoButtonPressed(e: PointerEvent): void {\r\n    e.preventDefault();\r\n    const event = new CustomEvent<{ x: number; y: number }>(\r\n      'infoButtonPressed',\r\n      { detail: { x: e.clientX, y: e.clientY } },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * CSS\r\n   */\r\n  static get styles(): CSSResultGroup {\r\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\r\n\r\n    return [\r\n      baseTileStyles,\r\n      css`\r\n        a:link {\r\n          text-decoration: none;\r\n          color: var(--ia-theme-link-color, #4b64ff);\r\n        }\r\n        a:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        .container {\r\n          border: 1px solid ${tileBorderColor};\r\n        }\r\n\r\n        .simple #title > .truncated {\r\n          -webkit-line-clamp: 2;\r\n        }\r\n\r\n        .simple .created-by > .truncated,\r\n        .simple .date-sorted-by > .truncated,\r\n        .simple .volume-issue > .truncated {\r\n          -webkit-line-clamp: 1;\r\n        }\r\n\r\n        .simple.snippets-only .item-info,\r\n        .simple.minimal .item-info {\r\n          padding-bottom: 5px;\r\n        }\r\n\r\n        .simple.snippets-only text-snippet-block {\r\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\r\n        }\r\n\r\n        .capture-dates {\r\n          margin: 0;\r\n          padding: 0 5px;\r\n          list-style-type: none;\r\n        }\r\n\r\n        review-block,\r\n        text-snippet-block {\r\n          --containerLeftMargin: 5px;\r\n          --containerTopMargin: 5px;\r\n        }\r\n\r\n        /**\r\n         * iOS Safari long-press on tiles (to bring up hover pane)\r\n         * gets messy without this\r\n         */\r\n        @media screen and (pointer: coarse) and (hover: none) {\r\n          .container {\r\n            -webkit-touch-callout: none;\r\n          }\r\n\r\n          .truncated {\r\n            -webkit-touch-callout: default;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/dist/src/tiles/models.d.ts

@@ -1 +1,8 @@
-export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';
+/**
+ * What type of simplified tile layout to use.
+ *  - `default`: Do not apply any layout simplifications.
+ *  - `stats-only`: Only show the tile stats row, but not text snippets.
+ *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.
+ *  - `minimal`: Show neither tile stats nor the text snippets.
+ */
+export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';

package/dist/src/tiles/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/tiles/models.ts"],"names":[],"mappings":"","sourcesContent":["export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';\r\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/tiles/models.ts"],"names":[],"mappings":"","sourcesContent":["/**\r\n * What type of simplified tile layout to use.\r\n *  - `default`: Do not apply any layout simplifications.\r\n *  - `stats-only`: Only show the tile stats row, but not text snippets.\r\n *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.\r\n *  - `minimal`: Show neither tile stats nor the text snippets.\r\n */\r\nexport type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';\r\n"]}

package/dist/src/tiles/tile-dispatcher.d.ts

@@ -12,7 +12,7 @@ import './list/tile-list-compact';
 import './list/tile-list-compact-header';
 import type { TileHoverPane } from './hover/tile-hover-pane';
 import { BaseTileComponent } from './base-tile-component';
-import { SimpleLayoutType } from './models';
+import { LayoutType } from './models';
 import { HoverPaneProperties, HoverPaneProviderInterface } from './hover/hover-pane-controller';
 export declare class TileDispatcher extends BaseTileComponent implements SharedResizeObserverResizeHandlerInterface, HoverPaneProviderInterface {
     tileDisplayMode?: TileDisplayMode;
@@ -20,8 +20,8 @@ export declare class TileDispatcher extends BaseTileComponent implements SharedR
     resizeObserver?: SharedResizeObserverInterface;
     collectionTitles?: CollectionTitles;
     showTvClips: boolean;
-    /** What type of simple layout to use in grid mode, if any */
-    simpleLayoutType: SimpleLayoutType;
+    /** What type of simplified layout to use in grid mode, if any */
+    layoutType: LayoutType;
     /** Whether this tile should include a hover pane at all (for applicable tile modes) */
     enableHoverPane: boolean;
     manageCheckTitle: string;

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

@@ -36,8 +36,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         super(...arguments);
         this.isManageView = false;
         this.showTvClips = false;
-        /** What type of simple layout to use in grid mode, if any */
-        this.simpleLayoutType = 'none';
+        /** What type of simplified layout to use in grid mode, if any */
+        this.layoutType = 'default';
         /** Whether this tile should include a hover pane at all (for applicable tile modes) */
         this.enableHoverPane = false;
         this.manageCheckTitle = msg('Remove this item from the list');
@@ -235,6 +235,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
               .creatorFilter=${creatorFilter}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
+              .layoutType=${this.layoutType}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -280,7 +281,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
               .loggedIn=${this.loggedIn}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
-              .simpleLayoutType=${this.simpleLayoutType}
+              .layoutType=${this.layoutType}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               ?useLocalTime=${this.useLocalTime}
@@ -441,7 +442,7 @@ __decorate([
 ], TileDispatcher.prototype, "showTvClips", void 0);
 __decorate([
     property({ type: String })
-], TileDispatcher.prototype, "simpleLayoutType", void 0);
+], TileDispatcher.prototype, "layoutType", void 0);
 __decorate([
     property({ type: Boolean })
 ], TileDispatcher.prototype, "enableHoverPane", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { msg } from '@lit/localize';\r\nimport type {\r\n  SharedResizeObserverInterface,\r\n  SharedResizeObserverResizeHandlerInterface,\r\n} from '@internetarchive/shared-resize-observer';\r\nimport type { TileDisplayMode } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './grid/collection-tile';\r\nimport './grid/item-tile';\r\nimport './grid/account-tile';\r\nimport './grid/search-tile';\r\nimport './hover/tile-hover-pane';\r\nimport './list/tile-list';\r\nimport './list/tile-list-compact';\r\nimport './list/tile-list-compact-header';\r\nimport type { TileHoverPane } from './hover/tile-hover-pane';\r\nimport { BaseTileComponent } from './base-tile-component';\r\nimport { SimpleLayoutType } from './models';\r\nimport {\r\n  HoverPaneController,\r\n  HoverPaneControllerInterface,\r\n  HoverPaneProperties,\r\n  HoverPaneProviderInterface,\r\n} from './hover/hover-pane-controller';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\n\r\n@customElement('tile-dispatcher')\r\nexport class TileDispatcher\r\n  extends BaseTileComponent\r\n  implements\r\n    SharedResizeObserverResizeHandlerInterface,\r\n    HoverPaneProviderInterface\r\n{\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressTileBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\r\n\r\n  @property({ type: Boolean }) isManageView = false;\r\n\r\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  /** What type of simple layout to use in grid mode, if any */\r\n  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\r\n  @property({ type: Boolean }) enableHoverPane = false;\r\n\r\n  @property({ type: String }) manageCheckTitle = msg(\r\n    'Remove this item from the list',\r\n  );\r\n\r\n  private hoverPaneController?: HoverPaneControllerInterface;\r\n\r\n  @query('#container')\r\n  private container!: HTMLDivElement;\r\n\r\n  @query('tile-hover-pane')\r\n  private hoverPane?: TileHoverPane;\r\n\r\n  @query('.tile-link')\r\n  private tileLinkElement?: HTMLAnchorElement;\r\n\r\n  acquireFocus(): void {\r\n    this.tileLinkElement?.focus();\r\n  }\r\n\r\n  releaseFocus(): void {\r\n    this.tileLinkElement?.blur();\r\n  }\r\n\r\n  /** Maps each display mode to whether hover panes should appear in that mode */\r\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\r\n    TileDisplayMode,\r\n    boolean\r\n  > = {\r\n    grid: true,\r\n    'list-compact': true,\r\n    'list-detail': false,\r\n    'list-header': false,\r\n  };\r\n\r\n  render() {\r\n    const isGridMode = this.tileDisplayMode === 'grid';\r\n    const hoverPaneTemplate =\r\n      this.hoverPaneController?.getTemplate() ?? nothing;\r\n    return html`\r\n      <div id=\"container\" class=${isGridMode ? 'hoverable' : ''}>\r\n        ${this.tileDisplayMode === 'list-header'\r\n          ? this.headerTemplate\r\n          : this.tileTemplate}\r\n        ${this.manageCheckTemplate} ${hoverPaneTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  protected firstUpdated(): void {\r\n    if (this.shouldPrepareHoverPane) {\r\n      this.hoverPaneController = new HoverPaneController(this, {\r\n        mobileBreakpoint: this.mobileBreakpoint,\r\n        enableLongPress: false,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get headerTemplate() {\r\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\r\n      this;\r\n    return html`\r\n      <tile-list-compact-header\r\n        class=\"header\"\r\n        .currentWidth=${currentWidth}\r\n        .sortParam=${sortParam ?? defaultSortParam}\r\n        .mobileBreakpoint=${mobileBreakpoint}\r\n      >\r\n      </tile-list-compact-header>\r\n    `;\r\n  }\r\n\r\n  private get tileTemplate() {\r\n    return html`\r\n      ${this.tileDisplayMode === 'list-detail'\r\n        ? this.tile\r\n        : this.linkTileTemplate}\r\n    `;\r\n  }\r\n\r\n  private get linkTileTemplate() {\r\n    return html`\r\n      <a\r\n        href=${this.linkTileHref}\r\n        aria-label=${this.model?.title ?? 'Untitled item'}\r\n        aria-describedby=\"link-aria-description\"\r\n        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\r\n        title=${this.shouldPrepareHoverPane\r\n          ? nothing // Don't show title tooltips when we have the tile info popups\r\n          : ifDefined(this.model?.title)}\r\n        @click=${this.handleLinkClicked}\r\n        @contextmenu=${this.handleLinkContextMenu}\r\n        class=\"tile-link\"\r\n      >\r\n        ${this.tile}\r\n      </a>\r\n      <div id=\"link-aria-description\" class=\"sr-only\">\r\n        ${msg('Press Down Arrow to preview item details')}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get linkTileHref(): string | typeof nothing {\r\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n      return nothing;\r\n\r\n    // Use the server-specified href if available.\r\n    // Otherwise, construct a details page URL from the item identifier.\r\n    if (this.model.href) {\r\n      return `${this.baseNavigationUrl}${this.model.href}`;\r\n    }\r\n\r\n    return this.displayValueProvider.itemPageUrl(\r\n      this.model.identifier,\r\n      this.model.mediatype === 'collection',\r\n    );\r\n  }\r\n\r\n  private get manageCheckTemplate() {\r\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\r\n\r\n    return html`\r\n      <div class=\"manage-check\">\r\n        <input\r\n          type=\"checkbox\"\r\n          title=${this.manageCheckTitle}\r\n          ?checked=${this.model?.checked}\r\n          @change=${this.handleLinkClicked}\r\n        />\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Whether hover pane behavior should be prepared for this tile\r\n   * (e.g., whether mouse listeners should be attached, etc.)\r\n   */\r\n  private get shouldPrepareHoverPane(): boolean {\r\n    return (\r\n      this.enableHoverPane &&\r\n      !!this.tileDisplayMode &&\r\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\r\n      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\r\n      !this.model?.captureDates // don't show hover panes on web archive tiles\r\n    );\r\n  }\r\n\r\n  private get isHoverEnabled(): boolean {\r\n    return window.matchMedia('(hover: hover)').matches;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getHoverPane(): TileHoverPane | undefined {\r\n    return this.hoverPane;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getHoverPaneProps(): HoverPaneProperties {\r\n    return this;\r\n  }\r\n\r\n  handleResize(entry: ResizeObserverEntry): void {\r\n    this.currentWidth = entry.contentRect.width;\r\n    this.currentHeight = entry.contentRect.height;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.stopResizeObservation(this.resizeObserver);\r\n  }\r\n\r\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\r\n    observer?.removeObserver({\r\n      handler: this,\r\n      target: this.container,\r\n    });\r\n  }\r\n\r\n  private startResizeObservation() {\r\n    this.stopResizeObservation(this.resizeObserver);\r\n    this.resizeObserver?.addObserver({\r\n      handler: this,\r\n      target: this.container,\r\n    });\r\n  }\r\n\r\n  updated(props: PropertyValues) {\r\n    if (props.has('resizeObserver')) {\r\n      const previousObserver = props.get(\r\n        'resizeObserver',\r\n      ) as SharedResizeObserverInterface;\r\n      this.stopResizeObservation(previousObserver);\r\n      this.startResizeObservation();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\r\n   * In manage view, it also checks/unchecks the tile.\r\n   */\r\n  private handleLinkClicked(e: Event): void {\r\n    if (this.isManageView) {\r\n      e.preventDefault();\r\n      if (this.model) this.model.checked = !this.model.checked;\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('resultSelected', { detail: this.model }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Handler for when the tile link is right-clicked.\r\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\r\n   */\r\n  private handleLinkContextMenu(e: Event): void {\r\n    if (this.isManageView && this.linkTileHref !== nothing) {\r\n      e.preventDefault();\r\n      window.open(this.linkTileHref, '_blank');\r\n    }\r\n  }\r\n\r\n  private tileInfoButtonPressed(\r\n    e: CustomEvent<{ x: number; y: number }>,\r\n  ): void {\r\n    this.hoverPaneController?.toggleHoverPane({\r\n      coords: e.detail,\r\n      enableTouchBackdrop: true,\r\n    });\r\n  }\r\n\r\n  private get tile() {\r\n    const {\r\n      model,\r\n      collectionPagePath,\r\n      baseNavigationUrl,\r\n      currentWidth,\r\n      currentHeight,\r\n      sortParam,\r\n      creatorFilter,\r\n      mobileBreakpoint,\r\n      defaultSortParam,\r\n    } = this;\r\n\r\n    if (!model) return nothing;\r\n\r\n    switch (this.tileDisplayMode) {\r\n      case 'grid':\r\n        switch (model.mediatype) {\r\n          case 'collection':\r\n            return html`<collection-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </collection-tile>`;\r\n          case 'account':\r\n            return html`<account-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </account-tile>`;\r\n          case 'search':\r\n            return html`<search-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${false}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </search-tile>`;\r\n          default:\r\n            return html`<item-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .currentWidth=${this.currentWidth}\r\n              .currentHeight=${this.currentHeight}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .sortParam=${sortParam}\r\n              .defaultSortParam=${defaultSortParam}\r\n              .creatorFilter=${creatorFilter}\r\n              .loggedIn=${this.loggedIn}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              .simpleLayoutType=${this.simpleLayoutType}\r\n              ?showTvClips=${this.showTvClips}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              ?useLocalTime=${this.useLocalTime}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </item-tile>`;\r\n        }\r\n      case 'list-compact':\r\n        return html`<tile-list-compact\r\n          .model=${model}\r\n          .collectionPagePath=${collectionPagePath}\r\n          .currentWidth=${currentWidth}\r\n          .currentHeight=${currentHeight}\r\n          .baseNavigationUrl=${baseNavigationUrl}\r\n          .sortParam=${sortParam}\r\n          .defaultSortParam=${defaultSortParam}\r\n          .creatorFilter=${creatorFilter}\r\n          .mobileBreakpoint=${mobileBreakpoint}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n          ?useLocalTime=${this.useLocalTime}\r\n        >\r\n        </tile-list-compact>`;\r\n      case 'list-detail':\r\n        return html`<tile-list\r\n          .model=${model}\r\n          .collectionPagePath=${collectionPagePath}\r\n          .collectionTitles=${this.collectionTitles}\r\n          .currentWidth=${currentWidth}\r\n          .currentHeight=${currentHeight}\r\n          .baseNavigationUrl=${baseNavigationUrl}\r\n          .sortParam=${sortParam}\r\n          .defaultSortParam=${defaultSortParam}\r\n          .creatorFilter=${creatorFilter}\r\n          .mobileBreakpoint=${mobileBreakpoint}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n          ?useLocalTime=${this.useLocalTime}\r\n        >\r\n        </tile-list>`;\r\n      default:\r\n        return nothing;\r\n    }\r\n  }\r\n\r\n  static get styles() {\r\n    return [\r\n      srOnlyStyle,\r\n      css`\r\n        :host {\r\n          display: block;\r\n          height: 100%;\r\n        }\r\n\r\n        collection-tile {\r\n          --tileBorderColor: #555555;\r\n          --tileBackgroundColor: #666666;\r\n          --imageBlockBackgroundColor: #666666;\r\n        }\r\n\r\n        account-tile {\r\n          --tileBorderColor: #dddddd;\r\n          --imageBlockBackgroundColor: #fcf5e6;\r\n        }\r\n\r\n        item-tile {\r\n          --tileBorderColor: #dddddd;\r\n          --imageBlockBackgroundColor: #f1f1f4;\r\n        }\r\n\r\n        search-tile {\r\n          --tileBorderColor: #555555;\r\n          --tileBackgroundColor: #666666;\r\n          --imageBlockBackgroundColor: #666666;\r\n          --iconFillColor: #2c2c2c;\r\n        }\r\n\r\n        #container {\r\n          position: relative;\r\n          height: 100%;\r\n          border-radius: 4px;\r\n        }\r\n\r\n        #container.hoverable a:focus,\r\n        #container.hoverable a:hover {\r\n          box-shadow: var(\r\n            --tileHoverBoxShadow,\r\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\r\n          );\r\n          transition: box-shadow 0.1s ease;\r\n        }\r\n\r\n        a {\r\n          display: block;\r\n          height: 100%;\r\n          color: unset;\r\n          text-decoration: none;\r\n          transition: transform 0.05s ease;\r\n          border-radius: 4px;\r\n          outline: none;\r\n        }\r\n\r\n        a :first-child {\r\n          display: block;\r\n          height: 100%;\r\n        }\r\n\r\n        .manage-check {\r\n          position: absolute;\r\n          right: 0;\r\n          top: 0;\r\n          border: 5px solid #2c2c2c;\r\n          border-radius: 3px;\r\n          background-color: #2c2c2c;\r\n          z-index: 1;\r\n        }\r\n\r\n        .manage-check > input[type='checkbox'] {\r\n          display: block;\r\n          margin: 0;\r\n        }\r\n\r\n        #touch-backdrop {\r\n          position: fixed;\r\n          width: 100vw;\r\n          height: 100vh;\r\n          top: 0;\r\n          left: 0;\r\n          z-index: 2;\r\n          background: transparent;\r\n        }\r\n\r\n        tile-hover-pane {\r\n          position: absolute;\r\n          top: 0;\r\n          left: -9999px;\r\n          z-index: 2;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { msg } from '@lit/localize';\r\nimport type {\r\n  SharedResizeObserverInterface,\r\n  SharedResizeObserverResizeHandlerInterface,\r\n} from '@internetarchive/shared-resize-observer';\r\nimport type { TileDisplayMode } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './grid/collection-tile';\r\nimport './grid/item-tile';\r\nimport './grid/account-tile';\r\nimport './grid/search-tile';\r\nimport './hover/tile-hover-pane';\r\nimport './list/tile-list';\r\nimport './list/tile-list-compact';\r\nimport './list/tile-list-compact-header';\r\nimport type { TileHoverPane } from './hover/tile-hover-pane';\r\nimport { BaseTileComponent } from './base-tile-component';\r\nimport { LayoutType } from './models';\r\nimport {\r\n  HoverPaneController,\r\n  HoverPaneControllerInterface,\r\n  HoverPaneProperties,\r\n  HoverPaneProviderInterface,\r\n} from './hover/hover-pane-controller';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\n\r\n@customElement('tile-dispatcher')\r\nexport class TileDispatcher\r\n  extends BaseTileComponent\r\n  implements\r\n    SharedResizeObserverResizeHandlerInterface,\r\n    HoverPaneProviderInterface\r\n{\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressTileBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\r\n\r\n  @property({ type: Boolean }) isManageView = false;\r\n\r\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  /** What type of simplified layout to use in grid mode, if any */\r\n  @property({ type: String }) layoutType: LayoutType = 'default';\r\n\r\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\r\n  @property({ type: Boolean }) enableHoverPane = false;\r\n\r\n  @property({ type: String }) manageCheckTitle = msg(\r\n    'Remove this item from the list',\r\n  );\r\n\r\n  private hoverPaneController?: HoverPaneControllerInterface;\r\n\r\n  @query('#container')\r\n  private container!: HTMLDivElement;\r\n\r\n  @query('tile-hover-pane')\r\n  private hoverPane?: TileHoverPane;\r\n\r\n  @query('.tile-link')\r\n  private tileLinkElement?: HTMLAnchorElement;\r\n\r\n  acquireFocus(): void {\r\n    this.tileLinkElement?.focus();\r\n  }\r\n\r\n  releaseFocus(): void {\r\n    this.tileLinkElement?.blur();\r\n  }\r\n\r\n  /** Maps each display mode to whether hover panes should appear in that mode */\r\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\r\n    TileDisplayMode,\r\n    boolean\r\n  > = {\r\n    grid: true,\r\n    'list-compact': true,\r\n    'list-detail': false,\r\n    'list-header': false,\r\n  };\r\n\r\n  render() {\r\n    const isGridMode = this.tileDisplayMode === 'grid';\r\n    const hoverPaneTemplate =\r\n      this.hoverPaneController?.getTemplate() ?? nothing;\r\n    return html`\r\n      <div id=\"container\" class=${isGridMode ? 'hoverable' : ''}>\r\n        ${this.tileDisplayMode === 'list-header'\r\n          ? this.headerTemplate\r\n          : this.tileTemplate}\r\n        ${this.manageCheckTemplate} ${hoverPaneTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  protected firstUpdated(): void {\r\n    if (this.shouldPrepareHoverPane) {\r\n      this.hoverPaneController = new HoverPaneController(this, {\r\n        mobileBreakpoint: this.mobileBreakpoint,\r\n        enableLongPress: false,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get headerTemplate() {\r\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\r\n      this;\r\n    return html`\r\n      <tile-list-compact-header\r\n        class=\"header\"\r\n        .currentWidth=${currentWidth}\r\n        .sortParam=${sortParam ?? defaultSortParam}\r\n        .mobileBreakpoint=${mobileBreakpoint}\r\n      >\r\n      </tile-list-compact-header>\r\n    `;\r\n  }\r\n\r\n  private get tileTemplate() {\r\n    return html`\r\n      ${this.tileDisplayMode === 'list-detail'\r\n        ? this.tile\r\n        : this.linkTileTemplate}\r\n    `;\r\n  }\r\n\r\n  private get linkTileTemplate() {\r\n    return html`\r\n      <a\r\n        href=${this.linkTileHref}\r\n        aria-label=${this.model?.title ?? 'Untitled item'}\r\n        aria-describedby=\"link-aria-description\"\r\n        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\r\n        title=${this.shouldPrepareHoverPane\r\n          ? nothing // Don't show title tooltips when we have the tile info popups\r\n          : ifDefined(this.model?.title)}\r\n        @click=${this.handleLinkClicked}\r\n        @contextmenu=${this.handleLinkContextMenu}\r\n        class=\"tile-link\"\r\n      >\r\n        ${this.tile}\r\n      </a>\r\n      <div id=\"link-aria-description\" class=\"sr-only\">\r\n        ${msg('Press Down Arrow to preview item details')}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get linkTileHref(): string | typeof nothing {\r\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n      return nothing;\r\n\r\n    // Use the server-specified href if available.\r\n    // Otherwise, construct a details page URL from the item identifier.\r\n    if (this.model.href) {\r\n      return `${this.baseNavigationUrl}${this.model.href}`;\r\n    }\r\n\r\n    return this.displayValueProvider.itemPageUrl(\r\n      this.model.identifier,\r\n      this.model.mediatype === 'collection',\r\n    );\r\n  }\r\n\r\n  private get manageCheckTemplate() {\r\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\r\n\r\n    return html`\r\n      <div class=\"manage-check\">\r\n        <input\r\n          type=\"checkbox\"\r\n          title=${this.manageCheckTitle}\r\n          ?checked=${this.model?.checked}\r\n          @change=${this.handleLinkClicked}\r\n        />\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Whether hover pane behavior should be prepared for this tile\r\n   * (e.g., whether mouse listeners should be attached, etc.)\r\n   */\r\n  private get shouldPrepareHoverPane(): boolean {\r\n    return (\r\n      this.enableHoverPane &&\r\n      !!this.tileDisplayMode &&\r\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\r\n      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\r\n      !this.model?.captureDates // don't show hover panes on web archive tiles\r\n    );\r\n  }\r\n\r\n  private get isHoverEnabled(): boolean {\r\n    return window.matchMedia('(hover: hover)').matches;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getHoverPane(): TileHoverPane | undefined {\r\n    return this.hoverPane;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getHoverPaneProps(): HoverPaneProperties {\r\n    return this;\r\n  }\r\n\r\n  handleResize(entry: ResizeObserverEntry): void {\r\n    this.currentWidth = entry.contentRect.width;\r\n    this.currentHeight = entry.contentRect.height;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.stopResizeObservation(this.resizeObserver);\r\n  }\r\n\r\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\r\n    observer?.removeObserver({\r\n      handler: this,\r\n      target: this.container,\r\n    });\r\n  }\r\n\r\n  private startResizeObservation() {\r\n    this.stopResizeObservation(this.resizeObserver);\r\n    this.resizeObserver?.addObserver({\r\n      handler: this,\r\n      target: this.container,\r\n    });\r\n  }\r\n\r\n  updated(props: PropertyValues) {\r\n    if (props.has('resizeObserver')) {\r\n      const previousObserver = props.get(\r\n        'resizeObserver',\r\n      ) as SharedResizeObserverInterface;\r\n      this.stopResizeObservation(previousObserver);\r\n      this.startResizeObservation();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\r\n   * In manage view, it also checks/unchecks the tile.\r\n   */\r\n  private handleLinkClicked(e: Event): void {\r\n    if (this.isManageView) {\r\n      e.preventDefault();\r\n      if (this.model) this.model.checked = !this.model.checked;\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('resultSelected', { detail: this.model }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Handler for when the tile link is right-clicked.\r\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\r\n   */\r\n  private handleLinkContextMenu(e: Event): void {\r\n    if (this.isManageView && this.linkTileHref !== nothing) {\r\n      e.preventDefault();\r\n      window.open(this.linkTileHref, '_blank');\r\n    }\r\n  }\r\n\r\n  private tileInfoButtonPressed(\r\n    e: CustomEvent<{ x: number; y: number }>,\r\n  ): void {\r\n    this.hoverPaneController?.toggleHoverPane({\r\n      coords: e.detail,\r\n      enableTouchBackdrop: true,\r\n    });\r\n  }\r\n\r\n  private get tile() {\r\n    const {\r\n      model,\r\n      collectionPagePath,\r\n      baseNavigationUrl,\r\n      currentWidth,\r\n      currentHeight,\r\n      sortParam,\r\n      creatorFilter,\r\n      mobileBreakpoint,\r\n      defaultSortParam,\r\n    } = this;\r\n\r\n    if (!model) return nothing;\r\n\r\n    switch (this.tileDisplayMode) {\r\n      case 'grid':\r\n        switch (model.mediatype) {\r\n          case 'collection':\r\n            return html`<collection-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              .layoutType=${this.layoutType}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </collection-tile>`;\r\n          case 'account':\r\n            return html`<account-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </account-tile>`;\r\n          case 'search':\r\n            return html`<search-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${false}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </search-tile>`;\r\n          default:\r\n            return html`<item-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .currentWidth=${this.currentWidth}\r\n              .currentHeight=${this.currentHeight}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .sortParam=${sortParam}\r\n              .defaultSortParam=${defaultSortParam}\r\n              .creatorFilter=${creatorFilter}\r\n              .loggedIn=${this.loggedIn}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              .layoutType=${this.layoutType}\r\n              ?showTvClips=${this.showTvClips}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              ?useLocalTime=${this.useLocalTime}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </item-tile>`;\r\n        }\r\n      case 'list-compact':\r\n        return html`<tile-list-compact\r\n          .model=${model}\r\n          .collectionPagePath=${collectionPagePath}\r\n          .currentWidth=${currentWidth}\r\n          .currentHeight=${currentHeight}\r\n          .baseNavigationUrl=${baseNavigationUrl}\r\n          .sortParam=${sortParam}\r\n          .defaultSortParam=${defaultSortParam}\r\n          .creatorFilter=${creatorFilter}\r\n          .mobileBreakpoint=${mobileBreakpoint}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n          ?useLocalTime=${this.useLocalTime}\r\n        >\r\n        </tile-list-compact>`;\r\n      case 'list-detail':\r\n        return html`<tile-list\r\n          .model=${model}\r\n          .collectionPagePath=${collectionPagePath}\r\n          .collectionTitles=${this.collectionTitles}\r\n          .currentWidth=${currentWidth}\r\n          .currentHeight=${currentHeight}\r\n          .baseNavigationUrl=${baseNavigationUrl}\r\n          .sortParam=${sortParam}\r\n          .defaultSortParam=${defaultSortParam}\r\n          .creatorFilter=${creatorFilter}\r\n          .mobileBreakpoint=${mobileBreakpoint}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n          ?useLocalTime=${this.useLocalTime}\r\n        >\r\n        </tile-list>`;\r\n      default:\r\n        return nothing;\r\n    }\r\n  }\r\n\r\n  static get styles() {\r\n    return [\r\n      srOnlyStyle,\r\n      css`\r\n        :host {\r\n          display: block;\r\n          height: 100%;\r\n        }\r\n\r\n        collection-tile {\r\n          --tileBorderColor: #555555;\r\n          --tileBackgroundColor: #666666;\r\n          --imageBlockBackgroundColor: #666666;\r\n        }\r\n\r\n        account-tile {\r\n          --tileBorderColor: #dddddd;\r\n          --imageBlockBackgroundColor: #fcf5e6;\r\n        }\r\n\r\n        item-tile {\r\n          --tileBorderColor: #dddddd;\r\n          --imageBlockBackgroundColor: #f1f1f4;\r\n        }\r\n\r\n        search-tile {\r\n          --tileBorderColor: #555555;\r\n          --tileBackgroundColor: #666666;\r\n          --imageBlockBackgroundColor: #666666;\r\n          --iconFillColor: #2c2c2c;\r\n        }\r\n\r\n        #container {\r\n          position: relative;\r\n          height: 100%;\r\n          border-radius: 4px;\r\n        }\r\n\r\n        #container.hoverable a:focus,\r\n        #container.hoverable a:hover {\r\n          box-shadow: var(\r\n            --tileHoverBoxShadow,\r\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\r\n          );\r\n          transition: box-shadow 0.1s ease;\r\n        }\r\n\r\n        a {\r\n          display: block;\r\n          height: 100%;\r\n          color: unset;\r\n          text-decoration: none;\r\n          transition: transform 0.05s ease;\r\n          border-radius: 4px;\r\n          outline: none;\r\n        }\r\n\r\n        a :first-child {\r\n          display: block;\r\n          height: 100%;\r\n        }\r\n\r\n        .manage-check {\r\n          position: absolute;\r\n          right: 0;\r\n          top: 0;\r\n          border: 5px solid #2c2c2c;\r\n          border-radius: 3px;\r\n          background-color: #2c2c2c;\r\n          z-index: 1;\r\n        }\r\n\r\n        .manage-check > input[type='checkbox'] {\r\n          display: block;\r\n          margin: 0;\r\n        }\r\n\r\n        #touch-backdrop {\r\n          position: fixed;\r\n          width: 100vw;\r\n          height: 100vh;\r\n          top: 0;\r\n          left: 0;\r\n          z-index: 2;\r\n          background: transparent;\r\n        }\r\n\r\n        tile-hover-pane {\r\n          position: absolute;\r\n          top: 0;\r\n          left: -9999px;\r\n          z-index: 2;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "3.5.3",
+  "version": "4.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/app-root.ts

@@ -16,6 +16,8 @@ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manag
 import type { CollectionBrowser } from '../src/collection-browser';
 
 import '../src/collection-browser';
+import { InfiniteScroller } from '@internetarchive/infinite-scroller';
+import { TileDispatcher } from './tiles/tile-dispatcher';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
@@ -396,6 +398,14 @@ export class AppRoot extends LitElement {
               />
               <label for="show-outline-check">Show cell outlines</label>
             </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="minimal-tiles-check"
+                @click=${this.minimalTilesChanged}
+              />
+              <label for="minimal-tiles-check">Minimal tile layouts</label>
+            </div>
           </fieldset>
 
           <fieldset class="user-profile-controls">
@@ -587,6 +597,22 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private minimalTilesChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const scroller = this.collectionBrowser?.shadowRoot!.querySelector(
+      'infinite-scroller',
+    ) as InfiniteScroller;
+    const tileDispatchers = [
+      ...scroller.shadowRoot!.querySelectorAll('tile-dispatcher'),
+    ] as TileDispatcher[];
+
+    if (target.checked) {
+      tileDispatchers?.forEach(tile => (tile.layoutType = 'minimal'));
+    } else {
+      tileDispatchers?.forEach(tile => (tile.layoutType = 'default'));
+    }
+  }
+
   private toggleDevTools() {
     const pageUrl = new URL(window.location.href);
     const { searchParams } = pageUrl;

package/src/tiles/grid/collection-tile.ts

@@ -1,10 +1,12 @@
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { formatUnitSize } from '../../utils/format-unit-size';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import { BaseTileComponent } from '../base-tile-component';
+import { LayoutType } from '../models';
 import '../image-block';
 
 @customElement('collection-tile')
@@ -27,9 +29,16 @@ export class CollectionTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showInfoButton = false;
 
+  @property({ type: String }) layoutType: LayoutType = 'default';
+
   render() {
+    const containerClasses = classMap({
+      container: true,
+      minimal: this.layoutType === 'minimal',
+    });
+
     return html`
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -157,6 +166,18 @@ export class CollectionTile extends BaseTileComponent {
           flex-direction: column;
           margin-left: 10px;
         }
+
+        .minimal #item-stats {
+          display: none;
+        }
+
+        .minimal .truncated {
+          -webkit-line-clamp: initial;
+        }
+
+        .minimal .item-info {
+          padding-bottom: 5px;
+        }
       `,
     ];
   }

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

@@ -10,7 +10,7 @@ import type { DateFormat } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { BaseTileComponent } from '../base-tile-component';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { SimpleLayoutType } from '../models';
+import { LayoutType } from '../models';
 
 import '../image-block';
 import '../review-block';
@@ -42,15 +42,16 @@ export class ItemTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showTvClips = false;
 
-  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';
+  @property({ type: String }) layoutType: LayoutType = 'default';
 
   render() {
     const itemTitle = this.model?.title;
     const containerClasses = classMap({
       container: true,
-      simple: this.simpleLayoutType !== 'none',
-      'stats-only': this.simpleLayoutType === 'stats-only',
-      'snippets-only': this.simpleLayoutType === 'snippets-only',
+      simple: this.layoutType !== 'default',
+      'stats-only': this.layoutType === 'stats-only',
+      'snippets-only': this.layoutType === 'snippets-only',
+      minimal: this.layoutType === 'minimal',
     });
 
     return html`
@@ -175,8 +176,10 @@ export class ItemTile extends BaseTileComponent {
   }
 
   private get textSnippetsTemplate(): TemplateResult | typeof nothing {
-    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')
+    if (!this.hasSnippets) return nothing;
+    if (['stats-only', 'minimal'].includes(this.layoutType)) {
       return nothing;
+    }
 
     return html`
       <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
@@ -221,7 +224,9 @@ export class ItemTile extends BaseTileComponent {
    * Template for the stats row along the bottom of the tile.
    */
   private get tileStatsTemplate(): TemplateResult | typeof nothing {
-    if (this.simpleLayoutType === 'snippets-only') return nothing;
+    if (['snippets-only', 'minimal'].includes(this.layoutType)) {
+      return nothing;
+    }
 
     const effectiveSort = this.sortParam ?? this.defaultSortParam;
     const [viewCount, viewLabel] =
@@ -301,7 +306,8 @@ export class ItemTile extends BaseTileComponent {
           -webkit-line-clamp: 1;
         }
 
-        .simple.snippets-only .item-info {
+        .simple.snippets-only .item-info,
+        .simple.minimal .item-info {
           padding-bottom: 5px;
         }
 

package/src/tiles/models.ts

@@ -1 +1,8 @@
-export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';
+/**
+ * What type of simplified tile layout to use.
+ *  - `default`: Do not apply any layout simplifications.
+ *  - `stats-only`: Only show the tile stats row, but not text snippets.
+ *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.
+ *  - `minimal`: Show neither tile stats nor the text snippets.
+ */
+export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';

package/src/tiles/tile-dispatcher.ts

@@ -18,7 +18,7 @@ import './list/tile-list-compact';
 import './list/tile-list-compact-header';
 import type { TileHoverPane } from './hover/tile-hover-pane';
 import { BaseTileComponent } from './base-tile-component';
-import { SimpleLayoutType } from './models';
+import { LayoutType } from './models';
 import {
   HoverPaneController,
   HoverPaneControllerInterface,
@@ -62,8 +62,8 @@ export class TileDispatcher
 
   @property({ type: Boolean }) showTvClips = false;
 
-  /** What type of simple layout to use in grid mode, if any */
-  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';
+  /** What type of simplified layout to use in grid mode, if any */
+  @property({ type: String }) layoutType: LayoutType = 'default';
 
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
@@ -325,6 +325,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
+              .layoutType=${this.layoutType}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -370,7 +371,7 @@ export class TileDispatcher
               .loggedIn=${this.loggedIn}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
-              .simpleLayoutType=${this.simpleLayoutType}
+              .layoutType=${this.layoutType}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               ?useLocalTime=${this.useLocalTime}