@internetarchive/collection-browser 2.10.1-alpha-webdev7090.26 → 2.10.1-alpha-webdev7523.0

package/src/collection-browser.ts

@@ -67,7 +67,6 @@ import { sha1 } from './utils/sha1';
 import { log } from './utils/log';
 import type { PlaceholderType } from './empty-placeholder';
 import type { ManageBar } from './manage/manage-bar';
-import type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
 
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
@@ -251,8 +250,6 @@ export class CollectionBrowser
   /** Whether to display a smart results carousel above the full results */
   @property({ type: Boolean, reflect: true }) showSmartResults = false;
 
-  @property({ type: String }) resultsHeader?: string;
-
   /**
    * The maximum number of pages we will load when a privileged user clicks
    * the "Manage" button on the search page. Limited to 15 pages.
@@ -307,8 +304,6 @@ export class CollectionBrowser
 
   @query('manage-bar') private manageBar?: ManageBar;
 
-  @query('smart-facet-bar') private smartFacetBar?: SmartFacetBar;
-
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -512,7 +507,7 @@ export class CollectionBrowser
   render() {
     return html`
       ${this.showSmartFacetBar
-        ? html`<smart-facet-bar
+        ? html` <smart-facet-bar
             .query=${this.baseQuery}
             .aggregations=${this.dataSource.aggregations}
             .selectedFacets=${this.selectedFacets}
@@ -521,7 +516,6 @@ export class CollectionBrowser
             @facetsChanged=${this.facetsChanged}
             @filtersToggled=${() => {
               this.facetPaneVisible = !this.facetPaneVisible;
-              this.emitFacetPaneVisibilityChanged();
             }}
           ></smart-facet-bar>`
         : nothing}
@@ -688,21 +682,18 @@ export class CollectionBrowser
    * tiles and sort/filter bar are shown.
    */
   private get rightColumnTemplate(): TemplateResult {
-    const rightColumnClasses = classMap({
-      column: true,
-      'full-width': this.showSmartFacetBar && !this.facetPaneVisible,
-      'smart-results-spacing': !!this.showSmartResults,
-    });
-
     return html`
-      <div id="right-column" class=${rightColumnClasses}>
+      <div
+        id="right-column"
+        class="column ${this.showSmartResults ? 'smart-results-spacing' : ''}"
+      >
         ${this.showSmartResults
           ? html`<slot name="smart-results"></slot>`
           : nothing}
         <section id="results">
           ${this.showSmartResults
             ? html`<h2 class="results-section-heading">
-                ${this.resultsHeader ?? msg('All results')}
+                ${msg('All results')}
               </h2>`
             : nothing}
           <div id="cb-top-view">
@@ -850,10 +841,6 @@ export class CollectionBrowser
     );
   }
 
-  refreshSmartFacets(): void {
-    this.smartFacetBar?.refresh();
-  }
-
   /**
    * Handler to show processing modal while removing item
    */
@@ -1676,18 +1663,6 @@ export class CollectionBrowser
     );
   }
 
-  /**
-   * Emits a `facetPaneVisibilityChanged` event indicating that the facet pane has
-   * been toggled open or closed.
-   */
-  private emitFacetPaneVisibilityChanged(): void {
-    this.dispatchEvent(
-      new CustomEvent<boolean>('facetPaneVisibilityChanged', {
-        detail: this.facetPaneVisible,
-      }),
-    );
-  }
-
   /**
    * Emits a `queryStateChanged` event indicating that one or more of this component's
    * properties have changed in a way that could affect the set of search results.
@@ -2232,16 +2207,13 @@ export class CollectionBrowser
           flex: 1;
           position: relative;
           min-height: 90vh;
+          border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
           margin-top: var(--rightColumnMarginTop, 0);
           padding-top: 2rem;
           background: #fff;
         }
 
-        #left-column:not([hidden]) + #right-column {
-          border-left: 1px solid rgb(232, 232, 232);
-        }
-
         #right-column.smart-results-spacing {
           padding-top: 0.5rem;
           border-right: none;

package/src/collection-facets/smart-facets/heuristics/wikidata/wikidata-heuristic.ts

@@ -44,10 +44,7 @@ export class WikidataHeuristic implements SmartQueryHeuristic {
           facets: smartFacet.facets.map(facet => {
             const replaced = {
               ...facet,
-              bucketKey: facet.bucketKey.replace(
-                '__QUERY',
-                query.toLowerCase(),
-              ),
+              bucketKey: facet.bucketKey.replace('__QUERY', query),
             };
 
             if (facet.displayText) {

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -9,7 +9,6 @@ import {
 } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { customElement, property, state } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
 import type { Aggregation, Bucket } from '@internetarchive/search-service';
 import type { CollectionTitles } from '../../data-source/models';
 import type { FacetOption, SelectedFacets } from '../../models';
@@ -19,11 +18,11 @@ import type { SmartFacetDropdown } from './smart-facet-dropdown';
 import type { SmartFacet, SmartFacetEvent } from './models';
 import { smartFacetEquals } from './smart-facet-equals';
 import { dedupe } from './dedupe';
-import { log } from '../../utils/log';
 import filterIcon from '../../assets/img/icons/filter';
 
 import './smart-facet-button';
 import './smart-facet-dropdown';
+import { log } from '../../utils/log';
 
 const fieldPrefixes: Partial<Record<FacetOption, string>> = {
   collection: 'Collection: ',
@@ -60,14 +59,9 @@ export class SmartFacetBar extends LitElement {
   //
 
   render() {
-    if (!this.query) return nothing;
-
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
-        ${this.smartFacets.length > 0
-          ? html`<p id="filters-label">${msg('Insights:')}</p>`
-          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -104,11 +98,6 @@ export class SmartFacetBar extends LitElement {
     }
   }
 
-  refresh(): void {
-    this.lastAggregations = this.aggregations;
-    this.updateSmartFacets();
-  }
-
   private async updateSmartFacets(): Promise<void> {
     log('updating smart facets');
     if (this.query) {
@@ -217,12 +206,10 @@ export class SmartFacetBar extends LitElement {
         });
 
         if (facetType === 'mediatype') {
-          continue;
-          // Don't include mediatype bubbles
-          // facets.push(
-          //   [this.toSmartFacet(facetType, [unusedBuckets[0]])],
-          //   [this.toSmartFacet(facetType, [unusedBuckets[1]])],
-          // );
+          facets.push(
+            [this.toSmartFacet(facetType, [unusedBuckets[0]])],
+            [this.toSmartFacet(facetType, [unusedBuckets[1]])],
+          );
         } else if (facetType === 'collection' || facetType === 'subject') {
           const topBuckets = unusedBuckets.slice(0, 5);
           facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));
@@ -333,42 +320,33 @@ export class SmartFacetBar extends LitElement {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        gap: 5px 10px;
+        gap: 5px;
         padding: 10px 0;
       }
 
       #filters-toggle {
         margin: 0;
         border: 0;
-        padding: 5px 8px;
-        border-radius: 50%;
-        background: white;
-        color: #2c2c2c;
-        border: 1px solid #194880;
-        font-size: 1.4rem;
+        padding: 5px 10px;
+        border-radius: 15px;
+        background: #194880;
+        color: white;
+        font-size: 1.6rem;
         font-family: inherit;
         text-decoration: none;
+        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
         cursor: pointer;
       }
 
       #filters-toggle.active {
-        background: #194880;
-        color: white;
+        background: #09294d;
+        box-shadow: -1px -1px rgba(0, 0, 0, 0.1);
       }
 
       #filters-toggle > svg {
-        width: 12px;
-        filter: invert(0.16667);
-        vertical-align: -1px;
-      }
-
-      #filters-toggle.active > svg {
+        width: 15px;
         filter: invert(1);
-      }
-
-      #filters-label {
-        font-weight: bold;
-        margin: 0 -5px 0 0;
+        vertical-align: text-bottom;
       }
     `;
   }

package/src/collection-facets/smart-facets/smart-facet-button.ts

@@ -3,8 +3,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { mediatypeConfig } from '../../mediatype/mediatype-config';
 import type { SmartFacet, SmartFacetEvent } from './models';
 
-import closeCircleDark from '../../assets/img/icons/close-circle-dark';
-
 function capitalize(str?: string): string | undefined {
   if (!str) return str;
   return str.charAt(0).toLocaleUpperCase() + str.slice(1);
@@ -49,7 +47,7 @@ export class SmartFacetButton extends LitElement {
       >
         ${icon} ${displayText}
         ${this.selected
-          ? html`<span class="unselect-button">${closeCircleDark}</span>`
+          ? html`<span style="margin-left: 5px;">×</span>`
           : nothing}
       </a>
     `;
@@ -103,39 +101,24 @@ export class SmartFacetButton extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .smart-facet-button {
-        display: inline-flex;
-        align-items: center;
-        column-gap: 5px;
-        padding: 5px 5px;
-        border-radius: 5px;
-        background: white;
-        color: #2c2c2c;
-        border: 1px solid #194880;
-        font-size: 1.4rem;
+        padding: 5px 10px;
+        border-radius: 15px;
+        background: #194880;
+        color: white;
+        font-size: 1.6rem;
         font-family: inherit;
-        line-height: normal;
         text-decoration: none;
+        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
       }
 
       .smart-facet-button.selected {
-        background: #194880;
-        color: white;
-      }
-
-      .unselect-button > svg {
-        width: 10px;
-        height: 10px;
-        filter: invert(1);
+        background: #4c76aa;
       }
 
       .smart-facet-button > svg {
-        width: 12px;
-        height: 12px;
-        filter: invert(0.16667);
-      }
-
-      .smart-facet-button.selected > svg {
+        width: 15px;
         filter: invert(1);
+        vertical-align: text-top;
       }
     `;
   }

package/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -33,8 +33,6 @@ export class SmartFacetDropdown extends LitElement {
           displayCaret
           openViaButton
           closeOnSelect
-          closeOnEscape
-          closeOnBackdropClick
           includeSelectedOption
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
@@ -59,11 +57,8 @@ export class SmartFacetDropdown extends LitElement {
         const firstFacet = smartFacet.facets[0];
         return {
           id: firstFacet.bucketKey,
-          label: html`<span>
-            ${smartFacet.label ??
-            firstFacet.displayText ??
-            firstFacet.bucketKey}
-          </span>`,
+          label:
+            smartFacet.label ?? firstFacet.displayText ?? firstFacet.bucketKey,
         };
       }) ?? []
     );
@@ -132,29 +127,23 @@ export class SmartFacetDropdown extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .dropdown-container {
-        padding: 5px 5px;
+        padding: 5px 8px;
         border-radius: 5px;
-        background: white;
-        color: #2c2c2c;
-        border: 1px solid #194880;
-        font-size: 1.4rem;
+        background: #194880;
+        color: white;
+        font-size: 1.6rem;
         font-family: inherit;
+        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
       }
 
       .dropdown-label {
-        font-size: 1.4rem;
+        font-size: 1.6rem;
         font-family: inherit;
       }
 
       .dropdown {
-        --dropdownBorderColor: #194880;
-        --dropdownBorderWidth: 1px;
-        --dropdownBgColor: white;
-        --dropdownHoverBgColor: #f8f8f8;
-        --dropdownTextColor: #2c2c2c;
-        --dropdownHoverTextColor: #2c2c2c;
-        --dropdownCaretColor: #2c2c2c;
-        --dropdownWhiteSpace: nowrap;
+        --dropdownBorderWidth: 5px;
+        --dropdownBorderColor: transparent;
         --caretWidth: 14px;
         --caretHeight: 14px;
       }

package/src/tiles/item-image.ts

@@ -44,6 +44,7 @@ export class ItemImage extends LitElement {
         class=${classMap(this.itemImageClass)}
         src="${this.imageSrc}"
         alt=""
+        loading="lazy"
         @load=${this.onLoad}
         @error=${this.onError}
       />

package/dist/src/assets/img/icons/close-circle-dark.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").TemplateResult<2>;
-export default _default;

package/dist/src/assets/img/icons/close-circle-dark.js

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-export default svg `
-  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z" fill-rule="evenodd"/></svg>
-`;
-//# sourceMappingURL=close-circle-dark.js.map

package/dist/src/assets/img/icons/close-circle-dark.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"close-circle-dark.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/close-circle-dark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;CAEjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z\" fill-rule=\"evenodd\"/></svg>\n`;\n"]}

package/src/assets/img/icons/close-circle-dark.ts

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-
-export default svg`
-  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z" fill-rule="evenodd"/></svg>
-`;