@internetarchive/collection-browser 2.22.1-webdev-7936.0 → 3.0.0

package/src/tiles/base-tile-component.ts

@@ -1,53 +1,53 @@
-import { LitElement, PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileDisplayValueProvider } from './tile-display-value-provider';
-import type { TileModel } from '../models';
-
-export abstract class BaseTileComponent extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  @property({ type: Number }) currentWidth?: number;
-
-  @property({ type: Number }) currentHeight?: number;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: String }) collectionPagePath?: string;
-
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Object }) defaultSortParam: SortParam | null = null;
-
-  @property({ type: String }) creatorFilter?: string;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Boolean }) suppressBlurring = false;
-
-  protected displayValueProvider = new TileDisplayValueProvider();
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
-    if (
-      changed.has('model') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('collectionPagePath') ||
-      changed.has('sortParam') ||
-      changed.has('defaultSortParam') ||
-      changed.has('creatorFilter')
-    ) {
-      this.displayValueProvider = new TileDisplayValueProvider({
-        model: this.model,
-        baseNavigationUrl: this.baseNavigationUrl,
-        collectionPagePath: this.collectionPagePath,
-        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
-        creatorFilter: this.creatorFilter,
-      });
-    }
-  }
-}
+import { LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { SortParam } from '@internetarchive/search-service';
+import { TileDisplayValueProvider } from './tile-display-value-provider';
+import type { TileModel } from '../models';
+
+export abstract class BaseTileComponent extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: String }) collectionPagePath?: string;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Object }) defaultSortParam: SortParam | null = null;
+
+  @property({ type: String }) creatorFilter?: string;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) suppressBlurring = false;
+
+  protected displayValueProvider = new TileDisplayValueProvider();
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
+    if (
+      changed.has('model') ||
+      changed.has('baseNavigationUrl') ||
+      changed.has('collectionPagePath') ||
+      changed.has('sortParam') ||
+      changed.has('defaultSortParam') ||
+      changed.has('creatorFilter')
+    ) {
+      this.displayValueProvider = new TileDisplayValueProvider({
+        model: this.model,
+        baseNavigationUrl: this.baseNavigationUrl,
+        collectionPagePath: this.collectionPagePath,
+        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
+        creatorFilter: this.creatorFilter,
+      });
+    }
+  }
+}

package/src/tiles/grid/collection-tile.ts

@@ -55,7 +55,7 @@ export class CollectionTile extends BaseTileComponent {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h3 class="truncated">${this.model?.title}</h3>
+      <h4 class="truncated">${this.model?.title}</h4>
     </div>`;
   }
 
@@ -123,8 +123,7 @@ export class CollectionTile extends BaseTileComponent {
           flex-grow: initial;
         }
 
-        h4.truncated,
-        h3.truncated {
+        h4.truncated {
           color: ${whiteColor};
         }