@internetarchive/collection-browser 4.6.0 → 4.7.1-alpha-webdev9189.0

package/src/collection-browser.ts

@@ -909,10 +909,17 @@ export class CollectionBrowser
             ? this.manageBarTemplate
             : this.sortFilterBarTemplate}
           <slot name="cb-results"></slot>
-          ${this.displayMode === `list-compact` && this.totalResults
-            ? this.listHeaderTemplate
-            : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+          <div id="results-body">
+            <div id="results-main">
+              ${this.displayMode === `list-compact` && this.totalResults
+                ? this.listHeaderTemplate
+                : nothing}
+              ${this.suppressResultTiles
+                ? nothing
+                : this.infiniteScrollerTemplate}
+            </div>
+            <slot name="results-aside"></slot>
+          </div>
         </section>
       </div>
     `;
@@ -1015,6 +1022,7 @@ export class CollectionBrowser
         <slot name="sort-options-left" slot="sort-options-left"></slot>
         <slot name="sort-options" slot="sort-options"></slot>
         <slot name="sort-options-right" slot="sort-options-right"></slot>
+        <slot name="sort-bar-end" slot="sort-bar-end"></slot>
       </sort-filter-bar>
     `;
   }
@@ -2797,6 +2805,20 @@ export class CollectionBrowser
           padding: 5px 5px 0;
         }
 
+        /*
+         * The results sit in a row with the optional results-aside slot, which
+         * lays out beside them as a flex item and takes its own width and spacing
+         */
+        #results-body {
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #results-main {
+          flex: 1;
+          min-width: 0;
+        }
+
         #left-column {
           width: var(--leftColumnWidth, 18rem);
           /* Prevents Safari from shrinking col at first draw */

package/src/collection-facets.ts

@@ -19,7 +19,7 @@ import {
   SearchServiceInterface,
   SearchType,
 } from '@internetarchive/search-service';
-import '@internetarchive/histogram-date-range';
+import '@internetarchive/elements/ia-histogram-date-range/ia-histogram-date-range';
 import '@internetarchive/feature-feedback';
 import {
   ModalConfig,
@@ -32,7 +32,7 @@ import type { SharedResizeObserverInterface } from '@internetarchive/shared-resi
 import type {
   BarScalingOption,
   BinSnappingInterval,
-} from '@internetarchive/histogram-date-range';
+} from '@internetarchive/elements/ia-histogram-date-range/models';
 import chevronIcon from './assets/img/icons/chevron';
 import expandIcon from './assets/img/icons/expand';
 import {
@@ -65,7 +65,7 @@ import {
   updateSelectedFacetBucket,
 } from './utils/facet-utils';
 
-import '@internetarchive/histogram-date-range';
+import '@internetarchive/elements/ia-histogram-date-range/ia-histogram-date-range';
 import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
 import './collection-facets/facet-tombstone-row';
@@ -433,7 +433,7 @@ export class CollectionFacets extends LitElement {
     } = histogramProps;
 
     return html`
-      <histogram-date-range
+      <ia-histogram-date-range
         class=${this.isTvSearch ? 'wide-inputs' : ''}
         .minDate=${minDate}
         .maxDate=${maxDate}
@@ -451,7 +451,7 @@ export class CollectionFacets extends LitElement {
           ? this.contentWidth
           : 180}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      ></histogram-date-range>
+      ></ia-histogram-date-range>
     `;
   }
 
@@ -1004,7 +1004,7 @@ export class CollectionFacets extends LitElement {
           cursor: pointer;
         }
 
-        histogram-date-range.wide-inputs {
+        ia-histogram-date-range.wide-inputs {
           --histogramDateRangeInputWidth: 4.8rem;
         }
       `,

package/src/expanded-date-picker.ts

@@ -14,13 +14,13 @@ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manag
 import {
   BarScalingOption,
   BinSnappingInterval,
-} from '@internetarchive/histogram-date-range';
+} from '@internetarchive/elements/ia-histogram-date-range/models';
 import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
 
-import '@internetarchive/histogram-date-range';
+import '@internetarchive/elements/ia-histogram-date-range/ia-histogram-date-range';
 
 @customElement('expanded-date-picker')
 export class ExpandedDatePicker extends LitElement {
@@ -53,7 +53,7 @@ export class ExpandedDatePicker extends LitElement {
   render(): TemplateResult {
     return html`
       <div id="container">
-        <histogram-date-range
+        <ia-histogram-date-range
           id="date-picker"
           .minDate=${this.minDate}
           .maxDate=${this.maxDate}
@@ -79,7 +79,7 @@ export class ExpandedDatePicker extends LitElement {
           >
             ${msg('Apply date range')}
           </button>
-        </histogram-date-range>
+        </ia-histogram-date-range>
       </div>
     `;
   }

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -129,6 +129,7 @@ export class SortFilterBar extends LitElement {
             : html`<div id="display-style-selector">
                 ${this.displayOptionTemplate}
               </div>`}
+          <slot name="sort-bar-end"></slot>
         </section>
 
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}

package/src/tiles/item-image.ts

@@ -91,7 +91,7 @@ export class ItemImage extends LitElement {
           ? `https://web.archive.org/thumb/${domain}?generate=1`
           : nothing;
       } catch {
-        return `${this.baseImageUrl}/images/notfound.png`;
+        return this.notFoundSrc;
       }
     }
 

package/test/collection-browser.test.ts

@@ -3,7 +3,7 @@ import { html } from 'lit';
 import sinon from 'sinon';
 import type { InfiniteScroller } from '@internetarchive/infinite-scroller';
 import { FilterConstraint, SearchType } from '@internetarchive/search-service';
-import type { HistogramDateRange } from '@internetarchive/histogram-date-range';
+import type { IAHistogramDateRange } from '@internetarchive/elements/ia-histogram-date-range/ia-histogram-date-range';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import {
@@ -1193,8 +1193,8 @@ describe('Collection Browser', () => {
     await nextTick();
 
     const histogram = facets?.shadowRoot?.querySelector(
-      'histogram-date-range',
-    ) as HistogramDateRange;
+      'ia-histogram-date-range',
+    ) as IAHistogramDateRange;
 
     expect(histogram, 'histogram exists').to.exist;
 
@@ -1244,8 +1244,8 @@ describe('Collection Browser', () => {
     await nextTick();
 
     const histogram = facets?.shadowRoot?.querySelector(
-      'histogram-date-range',
-    ) as HistogramDateRange;
+      'ia-histogram-date-range',
+    ) as IAHistogramDateRange;
 
     expect(histogram, 'histogram exists').to.exist;
 
@@ -2482,6 +2482,61 @@ describe('Collection Browser', () => {
     expect(infiniteScroller).not.to.exist;
   });
 
+  it('lays out results-aside content beside the result tiles', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+        <div slot="results-aside" id="aside" style="width: 200px">Aside</div>
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const resultsBody = el.shadowRoot?.querySelector('#results-body');
+    const asideSlot = resultsBody?.querySelector(
+      'slot[name="results-aside"]',
+    ) as HTMLSlotElement;
+    const scroller = resultsBody?.querySelector(
+      '#results-main > infinite-scroller',
+    ) as HTMLElement;
+    const aside = el.querySelector('#aside') as HTMLElement;
+
+    expect(asideSlot?.assignedElements()).to.deep.equal([aside]);
+    expect(scroller).to.exist;
+
+    // The aside sits to the right of the tiles, sharing the results row
+    const scrollerRect = scroller.getBoundingClientRect();
+    const asideRect = aside.getBoundingClientRect();
+    expect(asideRect.left).to.be.at.least(scrollerRect.right);
+    expect(asideRect.top).to.be.at.most(scrollerRect.bottom);
+  });
+
+  it('forwards sort-bar-end content into the sort bar', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+        <button slot="sort-bar-end" id="end-button">End</button>
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const sortBar = el.shadowRoot?.querySelector(
+      'sort-filter-bar',
+    ) as SortFilterBar;
+    const forwardingSlot = sortBar?.querySelector(
+      'slot[name="sort-bar-end"]',
+    ) as HTMLSlotElement;
+    const button = el.querySelector('#end-button');
+
+    expect(forwardingSlot?.slot).to.equal('sort-bar-end');
+    expect(forwardingSlot?.assignedElements()).to.deep.equal([button]);
+  });
+
   it('fetch larger result on search page for admin user to manage items', async () => {
     const resultsSpy = sinon.spy();
     const searchService = new MockSearchService({
@@ -2574,8 +2629,8 @@ describe('Collection Browser', () => {
     await nextTick();
 
     const histogram = facets?.shadowRoot?.querySelector(
-      'histogram-date-range',
-    ) as HistogramDateRange;
+      'ia-histogram-date-range',
+    ) as IAHistogramDateRange;
 
     expect(histogram, 'histogram exists').to.exist;
   });
@@ -2605,8 +2660,8 @@ describe('Collection Browser', () => {
     await nextTick();
 
     const histogram = facets?.shadowRoot?.querySelector(
-      'histogram-date-range',
-    ) as HistogramDateRange;
+      'ia-histogram-date-range',
+    ) as IAHistogramDateRange;
 
     expect(histogram, 'histogram exists').to.exist;
 

package/test/collection-facets.test.ts

@@ -90,7 +90,7 @@ describe('Collection Facets', () => {
     });
     await el.updateComplete;
 
-    const histogram = el.shadowRoot?.querySelector('histogram-date-range');
+    const histogram = el.shadowRoot?.querySelector('ia-histogram-date-range');
     expect(histogram).to.exist;
   });
 
@@ -108,7 +108,7 @@ describe('Collection Facets', () => {
     });
     await el.updateComplete;
 
-    const histogram = el.shadowRoot?.querySelector('histogram-date-range');
+    const histogram = el.shadowRoot?.querySelector('ia-histogram-date-range');
     expect(histogram).to.be.null;
   });
 

package/test/expanded-date-picker.test.ts

@@ -1,4 +1,4 @@
-import type { HistogramDateRange } from '@internetarchive/histogram-date-range';
+import type { IAHistogramDateRange } from '@internetarchive/elements/ia-histogram-date-range/ia-histogram-date-range';
 import {
   ModalManager,
   ModalManagerInterface,
@@ -39,7 +39,7 @@ describe('Expanded Date Picker', () => {
 
     const datePicker = el.shadowRoot?.querySelector(
       '#date-picker',
-    ) as HistogramDateRange;
+    ) as IAHistogramDateRange;
     expect(datePicker).to.exist;
 
     datePicker.minSelectedDate = '2';
@@ -174,7 +174,7 @@ describe('Expanded Date Picker', () => {
 
     const datePicker = el.shadowRoot?.querySelector(
       '#date-picker',
-    ) as HistogramDateRange;
+    ) as IAHistogramDateRange;
     expect(datePicker).to.exist;
 
     datePicker.minSelectedDate = '2';

package/test/sort-filter-bar/sort-filter-bar.test.ts

@@ -259,6 +259,35 @@ describe('Sort dropdown behavior', () => {
     expect(slotEl?.shadowRoot?.querySelector('#sort-selector-container')).to.not
       .exist;
   });
+
+  it('renders the sort-bar-end slot after the display mode buttons', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar>
+        <button slot="sort-bar-end" id="end-button">End</button>
+      </sort-filter-bar>
+    `);
+
+    const sortBar = el.shadowRoot?.querySelector('#sort-bar');
+    const displayModes = sortBar?.querySelector('#display-style-selector');
+    const endSlot = sortBar?.querySelector(
+      'slot[name="sort-bar-end"]',
+    ) as HTMLSlotElement;
+
+    expect(endSlot).to.exist;
+    expect(sortBar?.lastElementChild).to.equal(endSlot);
+    expect(displayModes?.nextElementSibling).to.equal(endSlot);
+    expect(endSlot.assignedElements()[0]?.id).to.equal('end-button');
+  });
+
+  it('keeps the sort-bar-end slot when display modes are suppressed', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar suppressDisplayModes></sort-filter-bar>
+    `);
+
+    const sortBar = el.shadowRoot?.querySelector('#sort-bar');
+    expect(sortBar?.querySelector('#display-style-selector')).to.not.exist;
+    expect(sortBar?.querySelector('slot[name="sort-bar-end"]')).to.exist;
+  });
 });
 
 describe('Sort direction button behavior', () => {

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.github/workflows/ci.yml

@@ -1,27 +0,0 @@
-name: App CI
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v6
-    - uses: actions/setup-node@v6
-      with:
-        node-version: latest
-
-    - name: Install dependencies
-      run: yarn install
-
-    - name: Run tests
-      run: yarn run test
-
-    - uses: codecov/codecov-action@v6
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.github/workflows/gh-pages-main.yml

@@ -1,39 +0,0 @@
-# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
-
-# This workflow will run every time new changes were pushed to the `main` branch
-
-name: App build CI/CD to main branch
-
-on:
-  push:
-    branches: [ main ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-        with:
-          persist-credentials: false
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: latest
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Create build files for gh-pages deploy
-        run: yarn prepare:ghpages
-
-      # Reference: https://github.com/JamesIves/github-pages-deploy-action
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.8.0
-        with:
-          branch: gh-pages
-          folder: ghpages
-          clean-exclude: pr/
-          force: false
-          target-folder: main
-          token: ${{ secrets.GH_TOKEN }}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.github/workflows/npm-publish.yml

@@ -1,39 +0,0 @@
-# This workflow will be triggered if there's a new release tag created/pushed in Github repo
-
-# This workflow will do the following:
-# - run tests using node
-# - publish a package to GitHub Packages when a release is created
-
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-      - run: npm ci
-      - run: npm prepare
-      - run: npm test
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish --tag next
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.github/workflows/pr-preview.yml

@@ -1,38 +0,0 @@
-# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
-
-# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
-
-name: Deploy PR previews
-
-on:
-  pull_request:
-    types:
-      - opened
-      - reopened
-      - synchronize
-      - closed
-
-concurrency: preview-${{ github.ref }}
-
-jobs:
-  deploy-preview:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: latest
-
-      - name: Install and Build
-        run: |
-          yarn install
-          yarn prepare:ghpages
-
-      # Reference: https://github.com/rossjrw/pr-preview-action
-      - name: Deploy preview
-        uses: rossjrw/pr-preview-action@v1
-        with:
-          source-dir: ./ghpages/
-          umbrella-dir: pr

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.husky/pre-commit

@@ -1 +0,0 @@
-npx lint-staged

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/.prettierignore

@@ -1 +0,0 @@
-coverage