@internetarchive/collection-browser 4.1.0-alpha-webdev8186.5 → 4.2.0-alpha-webdev8164.0

package/README.md

@@ -1,84 +1,84 @@
-![Build Status](https://github.com/internetarchive/iaux-collection-browser/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-collection-browser/branch/main/graph/badge.svg?token=CLWEGO4RMQ)](https://codecov.io/gh/internetarchive/iaux-collection-browser)
-
-
-# Internet Archive Collection Browser
-
-This is the main collection browser for the Internet Archive website.
-
-[Review app URL](https://internetarchive.github.io/iaux-collection-browser/main) 
-## Usage
-
-```ts
-import '@internetarchive/collection-browser';
-
-<collection-browser>
-</collection-browser>
-```
-
-## Local Demo with `web-dev-server`
-```bash
-yarn install
-yarn start
-```
-To run a local development server that serves the basic demo located in `index.html`
-
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
-yarn run test
-```
-
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
-
-```bash
-yarn run test:watch
-```
-
-## Linting with ESLint, Prettier, and Types
-To scan the project for linting errors, run
-```bash
-yarn run lint
-```
-
-You can lint with ESLint and Prettier individually as well
-```bash
-yarn run lint:eslint
-```
-```bash
-yarn run lint:prettier
-```
-
-To automatically fix many linting errors, run
-```bash
-yarn run format
-```
-
-You can format using ESLint and Prettier individually as well
-```bash
-yarn run format:eslint
-```
-```bash
-yarn run format:prettier
-```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Manual Deploy using `gh-pages`
-
-Live demo app from current main branch: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
-
-```
-yarn run deploy
-```
-
-## Automatic Deploy of Demo App
-
-When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base url / pull request number. For this demo app, you must create a Pull Request, nothing will be created from a simple branch.
-
-This URL will be removed when the Pull Request is merged/closed.
-
+![Build Status](https://github.com/internetarchive/iaux-collection-browser/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-collection-browser/branch/main/graph/badge.svg?token=CLWEGO4RMQ)](https://codecov.io/gh/internetarchive/iaux-collection-browser)
+
+
+# Internet Archive Collection Browser
+
+This is the main collection browser for the Internet Archive website.
+
+[Review app URL](https://internetarchive.github.io/iaux-collection-browser/main) 
+## Usage
+
+```ts
+import '@internetarchive/collection-browser';
+
+<collection-browser>
+</collection-browser>
+```
+
+## Local Demo with `web-dev-server`
+```bash
+yarn install
+yarn start
+```
+To run a local development server that serves the basic demo located in `index.html`
+
+## Testing with Web Test Runner
+To run the suite of Web Test Runner tests, run
+```bash
+yarn run test
+```
+
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+
+```bash
+yarn run test:watch
+```
+
+## Linting with ESLint, Prettier, and Types
+To scan the project for linting errors, run
+```bash
+yarn run lint
+```
+
+You can lint with ESLint and Prettier individually as well
+```bash
+yarn run lint:eslint
+```
+```bash
+yarn run lint:prettier
+```
+
+To automatically fix many linting errors, run
+```bash
+yarn run format
+```
+
+You can format using ESLint and Prettier individually as well
+```bash
+yarn run format:eslint
+```
+```bash
+yarn run format:prettier
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Manual Deploy using `gh-pages`
+
+Live demo app from current main branch: [https://internetarchive.github.io/iaux-collection-browser](https://internetarchive.github.io/iaux-collection-browser)
+
+```
+yarn run deploy
+```
+
+## Automatic Deploy of Demo App
+
+When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base url / pull request number. For this demo app, you must create a Pull Request, nothing will be created from a simple branch.
+
+This URL will be removed when the Pull Request is merged/closed.
+
 Example: `https://internetarchive.github.io/iaux-collection-browser/pr/<pr-number>`

package/dist/src/collection-facets/facets-template.js

@@ -38,10 +38,15 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
     static get styles() {
         const columnCount = css `var(--facetsColumnCount, 1)`;
         const columnGap = css `var(--facetsColumnGap, 15px)`;
+        const columnWidth = css `var(--facetsColumnWidth, auto)`;
+        const maxHeight = css `var(--facetsMaxHeight, none)`;
         return css `
       .facet-rows {
         column-count: ${columnCount};
         column-gap: ${columnGap};
+        column-width: ${columnWidth};
+        max-height: ${maxHeight};
+        column-fill: auto;
       }
 
       a:link,

package/dist/src/collection-facets/facets-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAMpC,YAAY,CAAC,CAAiC;QACpD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,uBAAuB,CAAC,MAAyB;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,YAAY,EAAE;YAC7D,MAAM;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAwB,CAAC;QAEzD,2CAA2C;QAC3C,sEAAsE;QACtE,OAAO,IAAI,CAAA;uDACwC,UAAU,CAAC,GAAG;UAC3D,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;2BACW,UAAU,CAAC,GAAG;wBACjB,MAAM;kCACI,IAAI,CAAC,gBAAgB;4BAC3B,IAAI,CAAC,YAAY;0BACnB,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,6BAA6B,CAAC;QACrD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAEpD,OAAO,GAAG,CAAA;;wBAEU,WAAW;sBACb,SAAS;;;;;;;;;;;KAW1B,CAAC;IACJ,CAAC;CACF,CAAA;AAlE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAJzB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAmE1B","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './facet-row';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\n    this.dispatchFacetClickEvent(e.detail);\n  }\n\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get facetsTemplate(): TemplateResult | typeof nothing {\n    const { facetGroup } = this;\n    if (!facetGroup) return nothing;\n\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\n\n    // Added data-testid for Playwright testing\n    // Using className and aria-labels is not ideal for Playwright locator\n    return html`\n      <div class=\"facet-rows\" data-testid=\"facets-on-${facetGroup.key}\">\n        ${repeat(\n          facetBuckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket =>\n            html`<facet-row\n              .facetType=${facetGroup.key}\n              .bucket=${bucket}\n              .collectionTitles=${this.collectionTitles}\n              @facetClick=${this.facetClicked}\n            ></facet-row>`,\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.facetsTemplate}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    const columnCount = css`var(--facetsColumnCount, 1)`;\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\n\n    return css`\n      .facet-rows {\n        column-count: ${columnCount};\n        column-gap: ${columnGap};\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAMpC,YAAY,CAAC,CAAiC;QACpD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,uBAAuB,CAAC,MAAyB;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,YAAY,EAAE;YAC7D,MAAM;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAwB,CAAC;QAEzD,2CAA2C;QAC3C,sEAAsE;QACtE,OAAO,IAAI,CAAA;uDACwC,UAAU,CAAC,GAAG;UAC3D,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;2BACW,UAAU,CAAC,GAAG;wBACjB,MAAM;kCACI,IAAI,CAAC,gBAAgB;4BAC3B,IAAI,CAAC,YAAY;0BACnB,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,6BAA6B,CAAC;QACrD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QACpD,MAAM,WAAW,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACxD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAEpD,OAAO,GAAG,CAAA;;wBAEU,WAAW;sBACb,SAAS;wBACP,WAAW;sBACb,SAAS;;;;;;;;;;;;KAY1B,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAJzB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAwE1B","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './facet-row';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\n    this.dispatchFacetClickEvent(e.detail);\n  }\n\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get facetsTemplate(): TemplateResult | typeof nothing {\n    const { facetGroup } = this;\n    if (!facetGroup) return nothing;\n\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\n\n    // Added data-testid for Playwright testing\n    // Using className and aria-labels is not ideal for Playwright locator\n    return html`\n      <div class=\"facet-rows\" data-testid=\"facets-on-${facetGroup.key}\">\n        ${repeat(\n          facetBuckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket =>\n            html`<facet-row\n              .facetType=${facetGroup.key}\n              .bucket=${bucket}\n              .collectionTitles=${this.collectionTitles}\n              @facetClick=${this.facetClicked}\n            ></facet-row>`,\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.facetsTemplate}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    const columnCount = css`var(--facetsColumnCount, 1)`;\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\n    const columnWidth = css`var(--facetsColumnWidth, auto)`;\n    const maxHeight = css`var(--facetsMaxHeight, none)`;\n\n    return css`\n      .facet-rows {\n        column-count: ${columnCount};\n        column-gap: ${columnGap};\n        column-width: ${columnWidth};\n        max-height: ${maxHeight};\n        column-fill: auto;\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/more-facets-content.d.ts

@@ -5,9 +5,10 @@ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manag
 import { SelectedFacets, FacetOption } from '../models';
 import type { CollectionTitles, PageSpecifierParams, TVChannelAliases } from '../data-source/models';
 import '@internetarchive/elements/ia-status-indicator/ia-status-indicator';
-import './more-facets-pagination';
 import './facets-template';
 import './toggle-switch';
+import './more-facets-pagination';
+import '@internetarchive/ia-clearable-text-input';
 export declare class MoreFacetsContent extends LitElement {
     facetKey?: FacetOption;
     query?: string;
@@ -51,11 +52,69 @@ export declare class MoreFacetsContent extends LitElement {
      */
     private unappliedFacetChanges;
     /**
-     * Which page of facets we are showing.
+     * Text entered by the user to filter facet buckets.
+     * Applied to bucket.key for case-insensitive matching.
+     */
+    private filterText;
+    /**
+     * Current page number for pagination (when facet count >= PAGINATION_THRESHOLD).
      */
     private pageNumber;
+    /**
+     * Whether the component is narrow enough to warrant compact pagination.
+     * Updated via a ResizeObserver-based container query approach.
+     */
+    private isCompactView;
+    /**
+     * Whether the horizontal scroll is at the leftmost position.
+     */
+    private atScrollStart;
+    /**
+     * Whether the horizontal scroll is at the rightmost position.
+     */
+    private atScrollEnd;
+    private filterInput;
+    private facetsContentEl;
     willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    private resizeObserver?;
     firstUpdated(): void;
+    disconnectedCallback(): void;
+    private scrollHandler;
+    private scrollListenerAttached;
+    /**
+     * Attaches a scroll event listener to the facets content element
+     * to track horizontal scroll position for arrow button states.
+     */
+    private attachScrollListener;
+    private removeScrollListener;
+    /**
+     * Updates the scroll arrow disabled states based on current scroll position.
+     */
+    private updateScrollState;
+    /**
+     * Calculates the width of one column step (column width + gap) based on
+     * the CSS multi-column layout of the scroll container.
+     */
+    private getColumnStep;
+    /**
+     * Snaps a scroll target to the nearest column boundary.
+     */
+    private snapToColumn;
+    /**
+     * Scrolls the facet content left by approximately one page, snapping to
+     * the nearest column boundary.
+     */
+    private onScrollLeft;
+    /**
+     * Scrolls the facet content right by approximately one page, snapping to
+     * the nearest column boundary.
+     */
+    private onScrollRight;
+    /**
+     * Sets up a ResizeObserver to toggle compact pagination based on component width.
+     */
+    private setupCompactViewObserver;
     /**
      * Close more facets modal on Escape click
      */
@@ -69,10 +128,6 @@ export declare class MoreFacetsContent extends LitElement {
      * - this.aggregations - hold result of search service and being used for further processing.
      */
     updateSpecificFacets(): Promise<void>;
-    /**
-     * Handler for page number changes from the pagination widget.
-     */
-    private pageNumberClicked;
     /**
      * Combines the selected facets with the aggregations to create a single list of facets
      */
@@ -88,18 +143,47 @@ export declare class MoreFacetsContent extends LitElement {
      */
     private get aggregationFacetGroup();
     /**
-     * Returns a FacetGroup representing only the current page of facet buckets to show.
+     * Returns the facet group with buckets filtered by the current filter text.
+     * Filters are applied to the full bucket list before pagination.
+     */
+    private get filteredFacetGroup();
+    /**
+     * Determines whether to use pagination based on the number of filtered facets.
+     * Returns true if facet count >= PAGINATION_THRESHOLD, false otherwise.
+     */
+    private get usePagination();
+    /**
+     * Returns the facet group for the current page.
+     * If using pagination (>= 1000 facets), slices to show only the current page.
+     * Otherwise, returns all facets for horizontal scrolling.
      */
     private get facetGroupForCurrentPage();
     private get moreFacetsTemplate();
     private get loaderTemplate();
+    private get emptyFilterResultsTemplate();
     /**
-     * How many pages of facets to show in the modal pagination widget
+     * Number of pages for pagination (only used when facet count >= PAGINATION_THRESHOLD).
      */
     private get paginationSize();
+    /**
+     * Template for pagination component.
+     */
     private get facetsPaginationTemplate();
     private get footerTemplate();
     private sortFacetAggregation;
+    /**
+     * Handler for filter input changes. Updates the filter text and triggers re-render.
+     */
+    private handleFilterInput;
+    /**
+     * Handler for when the filter input is cleared via the clear button.
+     */
+    private handleFilterClear;
+    /**
+     * Handler for pagination page number clicks.
+     * Only used when facet count >= PAGINATION_THRESHOLD.
+     */
+    private pageNumberClicked;
     private get modalHeaderTemplate();
     render(): TemplateResult<1>;
     private applySearchFacetsClicked;