@internetarchive/collection-browser 3.4.1-alpha-webdev7761.0 → 3.4.1-alpha-webdev7761.2

package/dist/src/collection-browser.d.ts

@@ -19,6 +19,7 @@ import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
+import './combo-box/ia-combo-box';
 export declare class CollectionBrowser extends LitElement implements InfiniteScrollerCellProviderInterface, SharedResizeObserverResizeHandlerInterface, CollectionBrowserSearchInterface {
     baseNavigationUrl?: string;
     baseImageUrl: string;
@@ -465,11 +466,13 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private get mobileFacetsTemplate();
     private selectedTVNetwork?;
     private selectedTVShow?;
-    private shouldPopulateShows;
+    private tvMapsPopulated;
+    private loadingNetworks;
+    private loadingShows;
     private tvNetworksDropdown?;
     private tvShowsDropdown?;
-    private networksDropdownClicked;
-    private showsDropdownClicked;
+    private networksDropdownToggled;
+    private showsDropdownToggled;
     private networksDropdownChanged;
     private showsDropdownChanged;
     private get tvDropdownFiltersTemplate();

package/dist/src/collection-browser.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { SearchType, } from '@internetarchive/search-service';
@@ -15,6 +14,7 @@ import chevronIcon from './assets/img/icons/chevron';
 import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
 import { log } from './utils/log';
+import { updateSelectedFacetBucket } from './utils/facet-utils';
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
@@ -23,7 +23,7 @@ import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
-import { updateSelectedFacetBucket, } from './utils/facet-utils';
+import './combo-box/ia-combo-box';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super();
@@ -186,7 +186,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
         this.selectedTVNetwork = undefined;
         this.selectedTVShow = undefined;
-        this.shouldPopulateShows = false;
+        this.tvMapsPopulated = false;
+        this.loadingNetworks = false;
+        this.loadingShows = false;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
@@ -338,10 +340,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.selectedTVNetwork = undefined;
         this.selectedTVShow = undefined;
         if (this.tvNetworksDropdown) {
-            this.tvNetworksDropdown.selectedIndex = 0;
+            this.tvNetworksDropdown.clearSelectedOption();
         }
         if (this.tvShowsDropdown) {
-            this.tvShowsDropdown.selectedIndex = 0;
+            this.tvShowsDropdown.clearSelectedOption();
         }
     }
     /**
@@ -987,27 +989,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       </details>
     `;
     }
-    async networksDropdownClicked() {
-        var _a, _b;
-        (_a = this.tvNetworksDropdown) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+    async networksDropdownToggled() {
+        if (this.tvMapsPopulated)
+            return;
+        this.loadingNetworks = true;
         await this.dataSource.populateTVChannelMaps();
-        (_b = this.tvNetworksDropdown) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+        this.loadingNetworks = false;
+        this.tvMapsPopulated = true;
     }
-    async showsDropdownClicked() {
-        var _a, _b;
-        (_a = this.tvShowsDropdown) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+    async showsDropdownToggled() {
+        if (this.tvMapsPopulated)
+            return;
+        this.loadingShows = true;
         await this.dataSource.populateTVChannelMaps();
-        // Delay for a single tick so that the loading indicator will be rendered
-        // while the dropdown options are being added
-        await new Promise(res => setTimeout(res, 0));
-        this.shouldPopulateShows = true;
-        await this.updateComplete;
-        (_b = this.tvShowsDropdown) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+        this.loadingShows = false;
+        this.tvMapsPopulated = true;
     }
     async networksDropdownChanged() {
+        var _a;
         const previousNetwork = this.selectedTVNetwork;
-        this.selectedTVNetwork =
-            this.tvNetworksDropdown.selectedOptions[0].value || undefined;
+        const newNetwork = (_a = this.tvNetworksDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.text;
+        this.selectedTVNetwork = newNetwork !== null && newNetwork !== void 0 ? newNetwork : undefined;
         const entries = this.dataSource.tvChannelMaps.channelToNetwork.entries();
         for (const [channel, network] of entries) {
             if (network === previousNetwork) {
@@ -1030,9 +1032,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     async showsDropdownChanged() {
+        var _a;
         const previousShow = this.selectedTVShow;
-        this.selectedTVShow =
-            this.tvShowsDropdown.selectedOptions[0].value || undefined;
+        const newShow = (_a = this.tvShowsDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.text;
+        this.selectedTVShow = newShow !== null && newShow !== void 0 ? newShow : undefined;
         // Remove any previously-applied shows filter
         if (previousShow !== undefined) {
             const removedBucket = {
@@ -1065,48 +1068,42 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         const shows = showEntries.map(([show]) => show);
         log('end filters template preprocess', Date.now());
-        const makeNetworkOption = (network) => html `
-      <option ?selected=${this.selectedTVNetwork === network}>
-        ${network}
-      </option>
-    `;
-        const makeShowOption = (show) => html `
-      <option ?selected=${this.selectedTVShow === show}>${show}</option>
-    `;
         const loadingIndicator = html `
       <img src="https://archive.org/images/loading.gif" />
     `;
         return html `
       <div id="tv-filters" slot="facets-top">
-        <div class="tv-filter-dropdown-wrap">
-          <select
-            id="tv-networks"
-            class="tv-filter-dropdown"
-            @click=${this.networksDropdownClicked}
-            @change=${this.networksDropdownChanged}
-          >
-            <option value="" ?selected=${!this.selectedTVNetwork}>
-              ${msg('Filter by Network')}
-            </option>
-            ${map(networks, makeNetworkOption)}
-          </select>
-          ${loadingIndicator}
-        </div>
-
-        <div class="tv-filter-dropdown-wrap">
-          <select
-            id="tv-shows"
-            class="tv-filter-dropdown"
-            @click=${this.showsDropdownClicked}
-            @change=${this.showsDropdownChanged}
-          >
-            <option value="" ?selected=${!this.selectedTVShow}>
-              ${msg('Filter by Show')}
-            </option>
-            ${this.shouldPopulateShows ? map(shows, makeShowOption) : nothing}
-          </select>
-          ${loadingIndicator}
-        </div>
+        <ia-combo-box
+          id="tv-networks"
+          class="tv-filter-dropdown"
+          placeholder="Filter by Network"
+          wrap-arrow-keys
+          sort
+          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
+          @toggle=${this.networksDropdownToggled}
+          @change=${this.networksDropdownChanged}
+        >
+          <span class="sr-only">${msg('Filter by Network')}</span>
+          ${this.loadingNetworks
+            ? html `<span slot="empty-options">${loadingIndicator}</span>`
+            : nothing}
+        </ia-combo-box>
+        <ia-combo-box
+          id="tv-shows"
+          class="tv-filter-dropdown"
+          placeholder="Filter by Show"
+          max-autocomplete-entries="500"
+          wrap-arrow-keys
+          sort
+          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
+          @toggle=${this.showsDropdownToggled}
+          @change=${this.showsDropdownChanged}
+        >
+          <span class="sr-only">${msg('Filter by Show')}</span>
+          ${this.loadingShows
+            ? html `<span slot="empty-options">${loadingIndicator}</span>`
+            : nothing}
+        </ia-combo-box>
       </div>
     `;
     }
@@ -2216,10 +2213,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         #facets-bottom-fade {
           background: linear-gradient(
             to bottom,
-            #f5f5f700 0%,
-            #f5f5f7c0 50%,
-            #f5f5f7 80%,
-            #f5f5f7 100%
+            #fbfbfd00 0%,
+            #fbfbfdc0 50%,
+            #fbfbfd 80%,
+            #fbfbfd 100%
           );
           position: fixed;
           bottom: 0;
@@ -2326,25 +2323,24 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           margin-bottom: 15px;
         }
 
-        .tv-filter-dropdown {
-          width: 100%;
-          padding: 3px;
+        #tv-shows {
+          --comboBoxListWidth: 300px;
         }
 
-        .tv-filter-dropdown-wrap {
-          display: flex;
-          align-items: center;
-          column-gap: 5px;
+        .tv-filter-dropdown {
+          display: block;
+          font-size: 14px;
+          margin-left: 1px;
           margin-bottom: 5px;
         }
 
-        .tv-filter-dropdown-wrap > img {
-          flex: 1;
-          visibility: hidden;
+        .tv-filter-dropdown::part(combo-box) {
+          outline-offset: 1px;
         }
 
-        .tv-filter-dropdown.loading + img {
-          visibility: visible;
+        .tv-filter-dropdown::part(option) {
+          line-height: 1.1;
+          padding: 7px;
         }
 
         #facets-container {
@@ -2728,7 +2724,13 @@ __decorate([
 ], CollectionBrowser.prototype, "selectedTVShow", void 0);
 __decorate([
     state()
-], CollectionBrowser.prototype, "shouldPopulateShows", void 0);
+], CollectionBrowser.prototype, "tvMapsPopulated", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "loadingNetworks", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "loadingShows", void 0);
 __decorate([
     query('#tv-networks')
 ], CollectionBrowser.prototype, "tvNetworksDropdown", void 0);