@internetarchive/collection-browser 2.7.2-alpha.2 → 2.7.2

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

@@ -129,6 +129,8 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     manageViewLabel: string;
     /** Whether to replace the default sort options with a slot for customization (default: false) */
     enableSortOptionsSlot: boolean;
+    /** Whether to display a smart results carousel above the full results */
+    showSmartResults: boolean;
     /**
      * The results per page so we can paginate.
      *

package/dist/src/collection-browser.js

@@ -109,6 +109,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.manageViewLabel = 'Select items to remove';
         /** Whether to replace the default sort options with a slot for customization (default: false) */
         this.enableSortOptionsSlot = false;
+        /** Whether to display a smart results carousel above the full results */
+        this.showSmartResults = false;
         /**
          * The results per page so we can paginate.
          *
@@ -434,7 +436,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     get desktopLeftColumnTemplate() {
         return html `
-      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
+      <div
+        id="left-column"
+        class="column"
+        ?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
+      >
         ${this.facetTopViewSlot}
         <div id="facets-header-container">
           <h2 id="facets-header" class="sr-only">Filters</h2>
@@ -486,18 +492,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     get rightColumnTemplate() {
         return html `
-      <div id="right-column" class="column">
-        <div id="cb-top-view">
-          <slot name="cb-top-slot"></slot>
-        </div>
-        ${this.isManageView
+      <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">
+                ${msg('All results')}
+              </h2>`
+            : nothing}
+          <div id="cb-top-view">
+            <slot name="cb-top-slot"></slot>
+          </div>
+          ${this.isManageView
             ? this.manageBarTemplate
             : this.sortFilterBarTemplate}
-        <slot name="cb-results"></slot>
-        ${this.displayMode === `list-compact` && this.totalResults
+          <slot name="cb-results"></slot>
+          ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
             : nothing}
-        ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+        </section>
       </div>
     `;
     }
@@ -1694,14 +1713,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           min-height: 90vh;
           border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
-          padding-left: 1rem;
-          padding-right: 1rem;
           margin-top: var(--rightColumnMarginTop, 0);
           background: #fff;
         }
 
+        #right-column.smart-results-spacing {
+          padding-top: 0.5rem;
+          border-right: none;
+          background: transparent;
+          min-width: 0;
+        }
+
+        #results {
+          background: #fff;
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+
+        #right-column.smart-results-spacing #results {
+          border-radius: 10px 10px 0px 0px;
+          padding-top: 0.5rem;
+          margin-top: 1rem;
+        }
+
         .mobile #right-column {
           border-left: none;
+        }
+
+        .mobile #results {
           padding: 5px 5px 0;
         }
 
@@ -1890,6 +1929,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           max-height: 2000px;
         }
 
+        .results-section-heading {
+          margin: 0.5rem 0.3rem;
+          font-size: 2rem;
+          line-height: 25px;
+        }
+
         #results-total {
           display: flex;
           align-items: baseline;
@@ -2148,6 +2193,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CollectionBrowser.prototype, "enableSortOptionsSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CollectionBrowser.prototype, "showSmartResults", void 0);
 __decorate([
     property({ type: Object })
 ], CollectionBrowser.prototype, "dataSource", void 0);