@internetarchive/collection-browser 4.4.0 → 4.5.0

package/index.ts

@@ -1,28 +1,29 @@
-export { CollectionBrowser } from './src/collection-browser';
-export { CollectionBrowserDataSource } from './src/data-source/collection-browser-data-source';
-export { CollectionBrowserDataSourceInterface } from './src/data-source/collection-browser-data-source-interface';
-export { CollectionBrowserQueryState } from './src/data-source/collection-browser-query-state';
-export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
-export {
-  CollectionDisplayMode,
-  SortField,
-  TileModel,
-  FacetOption,
-  SelectedFacets,
-  getDefaultSelectedFacets,
-} from './src/models';
-export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
-export { CollectionTile } from './src/tiles/grid/collection-tile';
-export { AccountTile } from './src/tiles/grid/account-tile';
-export { ItemTile } from './src/tiles/grid/item-tile';
-export { TileList } from './src/tiles/list/tile-list';
-export { TileListCompact } from './src/tiles/list/tile-list-compact';
-export { TileDispatcher } from './src/tiles/tile-dispatcher';
-export { LayoutType } from './src/tiles/models';
-export {
-  SmartQueryHeuristic,
-  KeywordFacetMap,
-  SmartFacet,
-} from './src/collection-facets/smart-facets/models';
-export * from './src/collection-facets/smart-facets/heuristics/index';
-export { SmartQueryHeuristicGroup } from './src/collection-facets/smart-facets/smart-facet-heuristics';
+export { CollectionBrowser } from './src/collection-browser';
+export { CollectionBrowserDataSource } from './src/data-source/collection-browser-data-source';
+export { CollectionBrowserDataSourceInterface } from './src/data-source/collection-browser-data-source-interface';
+export { CollectionBrowserQueryState } from './src/data-source/collection-browser-query-state';
+export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
+export {
+  CollectionDisplayMode,
+  SortField,
+  TileModel,
+  FacetOption,
+  SelectedFacets,
+  getDefaultSelectedFacets,
+} from './src/models';
+export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
+export { CollectionTile } from './src/tiles/grid/collection-tile';
+export { AccountTile } from './src/tiles/grid/account-tile';
+export { ItemTile } from './src/tiles/grid/item-tile';
+export { TileList } from './src/tiles/list/tile-list';
+export { TileListCompact } from './src/tiles/list/tile-list-compact';
+export { TileDispatcher } from './src/tiles/tile-dispatcher';
+export { LayoutType } from './src/tiles/models';
+export type { TileAction } from './src/tiles/models';
+export {
+  SmartQueryHeuristic,
+  KeywordFacetMap,
+  SmartFacet,
+} from './src/collection-facets/smart-facets/models';
+export * from './src/collection-facets/smart-facets/heuristics/index';
+export { SmartQueryHeuristicGroup } from './src/collection-facets/smart-facets/smart-facet-heuristics';

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -33,7 +33,7 @@
     "@internetarchive/iaux-item-metadata": "^1.0.5",
     "@internetarchive/infinite-scroller": "^2.0.0",
     "@internetarchive/modal-manager": "^2.0.5",
-    "@internetarchive/search-service": "^2.7.1",
+    "@internetarchive/search-service": "^2.7.2",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.12.2",
     "dompurify": "^3.2.4",

package/src/app-root.ts

@@ -384,6 +384,16 @@ export class AppRoot extends LitElement {
               />
               <label for="enable-smart-facet-bar">Enable smart facet bar</label>
             </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-tile-actions"
+                @click=${this.tileActionsCheckboxChanged}
+              />
+              <label for="enable-tile-actions"
+                >Enable tile action buttons</label
+              >
+            </div>
           </fieldset>
 
           <fieldset class="cb-visual-appearance">
@@ -584,6 +594,7 @@ export class AppRoot extends LitElement {
           @manageModeChanged=${this.manageModeChanged}
           @itemRemovalRequested=${this.handleItemRemovalRequest}
           @itemManagerRequested=${this.handleItemManagerRequest}
+          @tileActionClicked=${this.handleTileActionClicked}
         >
           ${this.toggleSlots
             ? html`<div slot="sortbar-left-slot">Sort Slot</div>`
@@ -805,6 +816,25 @@ export class AppRoot extends LitElement {
     this.collectionBrowser.showSmartFacetBar = target.checked;
   }
 
+  /**
+   * Handler for when the dev panel's "Enable tile action buttons" checkbox is changed.
+   */
+  private tileActionsCheckboxChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.collectionBrowser.tileActions = target.checked
+      ? [{ id: 'demo-action', label: 'Return' }]
+      : [];
+  }
+
+  /**
+   * Handler for tile action button clicks (logs to console for QA).
+   */
+  private handleTileActionClicked(
+    e: CustomEvent<{ actionId: string; model: unknown }>,
+  ) {
+    console.log('Tile action clicked:', e.detail.actionId, e.detail.model);
+  }
+
   /**
    * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
    */

package/src/collection-browser.ts

@@ -78,6 +78,7 @@ import { sha1 } from './utils/sha1';
 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 type { LayoutType, TileAction } from './tiles/models';
 
 import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
@@ -297,6 +298,15 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) isManageView = false;
 
+  /** Action buttons to display on each tile */
+  @property({ type: Array }) tileActions: TileAction[] = [];
+
+  /**
+   * The simplified layout to apply to grid-mode tiles, if any. See
+   * `LayoutType` for available options. Has no effect on list display modes.
+   */
+  @property({ type: String }) tileLayoutType: LayoutType = 'default';
+
   @property({ type: String }) manageViewLabel = 'Select items to remove';
 
   /** Whether to replace the default sort options with a slot for customization (default: false) */
@@ -1652,6 +1662,7 @@ export class CollectionBrowser
           .mobileBreakpoint=${this.mobileBreakpoint}
           .loggedIn=${this.loggedIn}
           .suppressBlurring=${this.shouldSuppressTileBlurring}
+          .tileActions=${this.tileActions}
         >
         </tile-dispatcher>
       </div>
@@ -1801,7 +1812,9 @@ export class CollectionBrowser
       changed.has('displayMode') ||
       changed.has('baseNavigationUrl') ||
       changed.has('baseImageUrl') ||
-      changed.has('loggedIn')
+      changed.has('loggedIn') ||
+      changed.has('tileActions') ||
+      changed.has('tileLayoutType')
     ) {
       this.infiniteScroller?.reload();
     }
@@ -2635,6 +2648,8 @@ export class CollectionBrowser
         .loggedIn=${this.loggedIn}
         .suppressBlurring=${this.shouldSuppressTileBlurring}
         .isManageView=${this.isManageView}
+        .tileActions=${this.tileActions}
+        .layoutType=${this.tileLayoutType}
         ?showTvClips=${isTVSearch || isTVCollection}
         ?enableHoverPane=${true}
         ?useLocalTime=${shouldUseLocalTime}