@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22

package/src/models.ts

@@ -1,25 +1,150 @@
 import type { MediaType } from '@internetarchive/field-parsers';
 
 export interface TileModel {
-  identifier: string;
-  title: string;
   averageRating?: number;
+  collectionIdentifier?: string;
+  collectionName?: string;
+  collections: string[];
+  commentCount: number;
+  creator?: string;
+  creators: string[];
   dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]
   dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]
-  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]
   datePublished?: Date; // Date work published in the world (user-defined) [from: date]
-  mediatype: MediaType;
-  viewCount: number;
-  itemCount: number;
-  favCount: number;
-  commentCount: number;
+  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]
   description?: string;
-  collectionIdentifier?: string;
-  collectionName?: string;
-  creator?: string;
-  subject?: string;
+  favCount: number;
+  identifier: string;
+  issue?: string;
+  itemCount: number;
+  mediatype: MediaType;
   source?: string;
-  collection: string[];
+  subjects: string[];
+  title: string;
+  viewCount: number;
+  volume?: string;
+}
+
+export type CollectionDisplayMode =
+  | 'grid'
+  | 'list-compact'
+  | 'list-detail'
+  | 'list-header';
+
+/**
+ * This is mainly used to set the cookies for the collection display mode.
+ *
+ * It allows the user to set different modes for different contexts (collection page, search page, etc).
+ */
+export type CollectionBrowserContext = 'collection' | 'search';
+
+/**
+ * The sort fields shown in the sort filter bar
+ */
+export enum SortField {
+  'relevance' = 'relevance',
+  'views' = 'views',
+  'title' = 'title',
+  'datearchived' = 'datearchived',
+  'datepublished' = 'datepublished',
+  'datereviewed' = 'datereviewed',
+  'dateadded' = 'dateadded',
+  'creator' = 'creator',
 }
 
-export type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';
+/**
+ * The metadata fields we sort by that map to the SortFields above
+ */
+export type MetadataSortField =
+  | 'week'
+  | 'titleSorter'
+  | 'date'
+  | 'creatorSorter'
+  | 'publicdate'
+  | 'reviewdate'
+  | 'addeddate';
+
+export const SortFieldDisplayName: {
+  [key in SortField]: string;
+} = {
+  relevance: 'Relevance',
+  views: 'Views',
+  title: 'Title',
+  datearchived: 'Date Archived',
+  datepublished: 'Date Published',
+  datereviewed: 'Date Reviewed',
+  dateadded: 'Date Added',
+  creator: 'Creator',
+};
+
+/**
+ * Maps the SortField above to the corresponding Metadata field in the API.
+ */
+export const SortFieldToMetadataField: {
+  [key in SortField]: MetadataSortField | null;
+} = {
+  relevance: null,
+  views: 'week',
+  title: 'titleSorter',
+  datearchived: 'date',
+  datepublished: 'publicdate',
+  datereviewed: 'reviewdate',
+  dateadded: 'addeddate',
+  creator: 'creatorSorter',
+};
+
+/**
+ * Maps the Metadata field to the corresponding SortField field in the API.
+ */
+export const MetadataFieldToSortField: {
+  [key in MetadataSortField]: SortField;
+} = {
+  titleSorter: SortField.title,
+  date: SortField.datearchived,
+  publicdate: SortField.datepublished,
+  reviewdate: SortField.datereviewed,
+  addeddate: SortField.dateadded,
+  creatorSorter: SortField.creator,
+  week: SortField.views,
+};
+
+export type FacetOption =
+  | 'subject'
+  | 'mediatype'
+  | 'language'
+  | 'creator'
+  | 'collection'
+  | 'year';
+
+export type SelectedFacetState = 'selected' | 'hidden';
+
+export type FacetState = SelectedFacetState | 'none';
+export interface FacetBucket {
+  // for some facets, we augment the key with a display value
+  displayText?: string;
+  key: string;
+  count: number;
+  state: FacetState;
+}
+
+export interface FacetGroup {
+  title: string;
+  key: FacetOption;
+  buckets: FacetBucket[];
+}
+
+export type FacetValue = string;
+
+export type SelectedFacets = Record<
+  FacetOption,
+  Record<FacetValue, SelectedFacetState>
+>;
+
+export const defaultSelectedFacets: SelectedFacets = {
+  subject: {},
+  mediatype: {},
+  language: {},
+  creator: {},
+  collection: {},
+  year: {},
+};

package/src/restoration-state-handler.ts

@@ -0,0 +1,234 @@
+import { SortDirection, SortParam } from '@internetarchive/search-service';
+import { getCookie, setCookie } from 'typescript-cookie';
+import {
+  MetadataFieldToSortField,
+  MetadataSortField,
+  FacetOption,
+  CollectionBrowserContext,
+  CollectionDisplayMode,
+  SelectedFacets,
+  SortField,
+} from './models';
+
+export interface RestorationState {
+  displayMode?: CollectionDisplayMode;
+  sortParam?: SortParam;
+  selectedSort?: SortField;
+  sortDirection?: SortDirection;
+  selectedFacets: SelectedFacets;
+  baseQuery?: string;
+  currentPage?: number;
+  dateRangeQueryClause?: string;
+  titleQuery?: string;
+  creatorQuery?: string;
+  minSelectedDate?: string;
+  maxSelectedDate?: string;
+  selectedTitleFilter?: string;
+  selectedCreatorFilter?: string;
+}
+
+export interface RestorationStateHandlerInterface {
+  persistState(state: RestorationState): void;
+  getRestorationState(): RestorationState;
+}
+
+export class RestorationStateHandler
+  implements RestorationStateHandlerInterface
+{
+  private context: CollectionBrowserContext;
+
+  private cookieDomain = '.archive.org';
+
+  private cookieExpiration = 30;
+
+  private cookiePath = '/';
+
+  constructor(options: { context: CollectionBrowserContext }) {
+    this.context = options.context;
+  }
+
+  persistState(state: RestorationState): void {
+    if (state.displayMode) this.persistViewStateToCookies(state.displayMode);
+    this.persistQueryStateToUrl(state);
+  }
+
+  getRestorationState(): RestorationState {
+    const restorationState = this.loadQueryStateFromUrl();
+    const displayMode = this.loadTileViewStateFromCookies();
+    restorationState.displayMode = displayMode;
+    return restorationState;
+  }
+
+  private persistViewStateToCookies(displayMode: CollectionDisplayMode) {
+    const gridState = displayMode === 'grid' ? 'tiles' : 'lists';
+    setCookie(`view-${this.context}`, gridState, {
+      domain: this.cookieDomain,
+      expires: this.cookieExpiration,
+      path: this.cookiePath,
+    });
+    const detailsState = displayMode === 'list-detail' ? 'showdetails' : '';
+    setCookie(`showdetails-${this.context}`, detailsState, {
+      domain: this.cookieDomain,
+      expires: this.cookieExpiration,
+      path: this.cookiePath,
+    });
+  }
+
+  private loadTileViewStateFromCookies(): CollectionDisplayMode {
+    const viewState = getCookie(`view-${this.context}`);
+    const detailsState = getCookie(`showdetails-${this.context}`);
+    if (viewState === 'tiles' || viewState === undefined) return 'grid';
+    if (detailsState === 'showdetails') return 'list-detail';
+    return 'list-compact';
+  }
+
+  private persistQueryStateToUrl(state: RestorationState) {
+    const url = new URL(window.location.href);
+    const { searchParams } = url;
+    searchParams.delete('sort');
+    searchParams.delete('query');
+    searchParams.delete('page');
+    searchParams.delete('and[]');
+    searchParams.delete('not[]');
+
+    if (state.sortParam) {
+      url.searchParams.set('sort', state.sortParam.asString);
+    }
+
+    if (state.baseQuery) {
+      url.searchParams.set('query', state.baseQuery);
+    }
+
+    if (state.currentPage) {
+      if (state.currentPage > 1) {
+        url.searchParams.set('page', state.currentPage.toString());
+      } else {
+        url.searchParams.delete('page');
+      }
+    }
+
+    if (state.selectedFacets) {
+      for (const [facetName, facetValues] of Object.entries(
+        state.selectedFacets
+      )) {
+        const facetEntries = Object.entries(facetValues);
+        // eslint-disable-next-line no-continue
+        if (facetEntries.length === 0) continue;
+        for (const [key, facetState] of facetEntries) {
+          const notValue = facetState === 'hidden';
+          const paramValue = `${facetName}:${key}`;
+          if (notValue) {
+            url.searchParams.append('not[]', paramValue);
+          } else {
+            url.searchParams.append('and[]', paramValue);
+          }
+        }
+      }
+    }
+
+    if (state.dateRangeQueryClause) {
+      url.searchParams.append('and[]', state.dateRangeQueryClause);
+    }
+    if (state.titleQuery) {
+      url.searchParams.append('and[]', state.titleQuery);
+    }
+    if (state.creatorQuery) {
+      url.searchParams.append('and[]', state.creatorQuery);
+    }
+
+    window.history.pushState(
+      {
+        page: state.currentPage,
+        query: state.baseQuery,
+      },
+      '',
+      url
+    );
+  }
+
+  private loadQueryStateFromUrl(): RestorationState {
+    const url = new URL(window.location.href);
+    const pageNumber = url.searchParams.get('page');
+    const searchQuery = url.searchParams.get('query');
+    const sortQuery = url.searchParams.get('sort');
+    const facetAnds = url.searchParams.getAll('and[]');
+    const facetNots = url.searchParams.getAll('not[]');
+
+    const restorationState: RestorationState = {
+      selectedFacets: {
+        subject: {},
+        creator: {},
+        mediatype: {},
+        language: {},
+        collection: {},
+        year: {},
+      },
+    };
+
+    if (pageNumber) {
+      const parsed = parseInt(pageNumber, 10);
+      restorationState.currentPage = parsed;
+    } else {
+      restorationState.currentPage = 1;
+    }
+    if (searchQuery) {
+      restorationState.baseQuery = searchQuery;
+    }
+    if (sortQuery) {
+      const [field, direction] = sortQuery.split(' ');
+      const metadataField =
+        MetadataFieldToSortField[field as MetadataSortField];
+      if (metadataField) {
+        restorationState.selectedSort = metadataField;
+      }
+      if (direction === 'desc' || direction === 'asc') {
+        restorationState.sortDirection = direction as SortDirection;
+      }
+    }
+    if (facetAnds) {
+      facetAnds.forEach(and => {
+        const [field, value] = and.split(':');
+        switch (field) {
+          case 'year': {
+            const [minDate, maxDate] = value.split(' TO ');
+            // we have two potential ways of filtering by date:
+            // the range with "date TO date" or the single date with "date"
+            // this is checking for the range case and if we don't have those, fall
+            // back to the single date case
+            if (minDate && maxDate) {
+              restorationState.minSelectedDate = minDate.substring(
+                1,
+                minDate.length
+              );
+              restorationState.maxSelectedDate = maxDate.substring(
+                0,
+                maxDate.length - 1
+              );
+              restorationState.dateRangeQueryClause = `year:${value}`;
+            } else {
+              restorationState.selectedFacets[field as FacetOption][value] =
+                'selected';
+            }
+            break;
+          }
+          case 'firstTitle':
+            restorationState.selectedTitleFilter = value;
+            break;
+          case 'firstCreator':
+            restorationState.selectedCreatorFilter = value;
+            break;
+          default:
+            restorationState.selectedFacets[field as FacetOption][value] =
+              'selected';
+        }
+      });
+    }
+    if (facetNots) {
+      facetNots.forEach(not => {
+        const [field, value] = not.split(':');
+        restorationState.selectedFacets[field as FacetOption][value] = 'hidden';
+      });
+    }
+    return restorationState;
+  }
+}

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

@@ -1,11 +1,9 @@
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 @customElement('alpha-bar')
 export class AlphaBar extends LitElement {
-  @property({ type: String }) headline?: string;
-
-  @property({ type: String }) selectedLetter?: string;
+  @property({ type: String }) selectedLetter: string | null = null;
 
   private get selectedUppercaseLetter(): string | undefined {
     return this.selectedLetter?.toUpperCase();
@@ -13,7 +11,6 @@ export class AlphaBar extends LitElement {
 
   render() {
     return html`
-      <h1>${this.headline}</h1>
       <div id="container">
         <ul>
           ${this.alphabet.map(
@@ -22,9 +19,15 @@ export class AlphaBar extends LitElement {
                 <li
                   class=${letter === this.selectedUppercaseLetter
                     ? 'selected'
-                    : nothing}
+                    : ''}
                 >
-                  <a href="#" @click=${() => this.letterClicked(letter)}>
+                  <a
+                    href="#"
+                    @click=${(e: Event) => {
+                      e.preventDefault();
+                      this.letterClicked(letter);
+                    }}
+                  >
                     ${letter}
                   </a>
                 </li>
@@ -37,7 +40,7 @@ export class AlphaBar extends LitElement {
 
   private letterClicked(letter: string) {
     if (letter === this.selectedUppercaseLetter) {
-      this.selectedLetter = undefined;
+      this.selectedLetter = null;
     } else {
       this.selectedLetter = letter;
     }
@@ -58,6 +61,7 @@ export class AlphaBar extends LitElement {
     #container {
       background-color: #ddd;
       color: #333;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
     }
 
     ul {
@@ -68,10 +72,16 @@ export class AlphaBar extends LitElement {
       justify-content: space-between;
     }
 
+    ul li {
+      flex: 1;
+      text-align: center;
+      max-width: 2.5rem;
+    }
+
     a {
       color: #333;
       text-decoration: none;
-      padding: 0.5rem 0.7rem;
+      padding: 0.5rem 0;
       display: block;
     }
 

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

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export const compactIcon = svg`
+<svg viewBox="0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > <path d="m96.9964435 6h-93.90621462c-.91561615 0-1.65899868-.29021372-2.23014758-.87064117-.57114891-.58042745-.85783455-1.3048369-.86005692-2.17322835 0-.81214848.28668564-1.50731158.86005692-2.08548931.57337127-.57817773 1.3167538-.86839145 2.23014758-.87064117h93.90621462c.800053 0 1.5012105.29021372 2.1034726.87064117.602262.58042745.9022819 1.27559055.9000718 2.08548931 0 .86839145-.3000321 1.5928009-.9000718 2.17322835-.6000398.58042745-1.3011973.87064117-2.1034726.87064117zm-93.90621462 9.6666667h93.90621462c.800053 0 1.5012105.2861891 2.1034726.8585673.602262.5723782.9022819 1.2579009.9000718 2.0565682 0 .8563487-.3000321 1.5851326-.9000718 2.1863516-.6000398.6012189-1.3011973.9007192-2.1034726.8985129h-93.90621462c-.91561615 0-1.65899868-.2995125-2.23014758-.8985129-.57114891-.5990005-.85783455-1.3277843-.86005692-2.1863516 0-.8008858.28668564-1.4864086.86005692-2.0565682.57337127-.5701597 1.3167538-.8563488 2.23014758-.8585673zm0 15.6700431h93.90621462c.800053 0 1.5012105.303883 2.1034726.9116489.602262.6077659.9022819 1.2886888.9000718 2.0427687-.0022346.7540799-.3022545 1.4496342-.9000718 2.0866629-.5978174.6370287-1.2989749.955543-2.1034726.955543h-93.90621462c-.85783454 0-1.58788286-.3038829-2.19014494-.9116488s-.90228193-1.3179516-.90007182-2.1305571c.00223463-.8126055.30225448-1.5081599.90007182-2.0866629.59781734-.5785031 1.32786566-.8688802 2.19014494-.8711312zm0 15.6632902h93.90621462c.800053 0 1.5012105.2861892 2.1034726.8585675.602262.5723783.9022819 1.2290603.9000718 1.9700462 0 .7986674-.3144775 1.5274514-.943408 2.186352-.6289306.6589006-1.3156427.9872417-2.0601364.9850343h-93.90621462c-.85783454 0-1.58788286-.3139318-2.19014494-.9417731-.60226208-.6278414-.90228193-1.3699365-.90007182-2.2262854 0-.7986674.2866979-1.4697699.86006918-2.0133074.57337127-.5435376 1.3167538-.8153063 2.23014758-.8153063zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116593.602262.6077647.9022819 1.3472117.9000718 2.218341 0 .7540783-.3000321 1.4203685-.9000718 1.9988703-.6000398.5785019-1.3011973.8688784-2.1034726.8711294h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514902-.85783455-1.2324117-.86005692-2.0427645 0-.8688784.28668564-1.6083253.86005692-2.218341.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116593zm0 15.6666666h93.90621462c.800053 0 1.5012105.3038948 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688784-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.275745-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116594zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688783-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.913898 2.23014758-.9116594z" /> </svg>
+`;

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

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export const listIcon = svg`
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="nonzero"><path d="m97.8975061 6h-65.7343743c-.6409315 0-1.1612995-.29021372-1.5611039-.87064117-.3998043-.58042745-.6004844-1.3048369-.60204-2.17322835 0-.81214848.20068-1.50731158.60204-2.08548931.4013601-.57817773.921728-.86839145 1.5611039-.87064117h65.7343743c.5600372 0 1.0508477.29021372 1.4724313.87064117s.6315976 1.27559055.6300505 2.08548931c0 .86839145-.2100226 1.5928009-.6300505 2.17322835-.420028.58042745-.9108384.87064117-1.4724313.87064117z"/><path d="m97.8975061 65h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 13h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 72h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 20h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 79h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 27h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 86h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 34h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 93h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 41h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m97.8975061 100h-65.7343743c-.6409315 0-1.1612995-.0967379-1.5611039-.2902137-.3998043-.1934758-.6004844-.4349457-.60204-.7244095 0-.2707161.20068-.5024372.60204-.6951631.4013601-.1927259.921728-.2894638 1.5611039-.2902137h65.7343743c.5600372 0 1.0508477.0967379 1.4724313.2902137s.6315976.4251969.6300505.6951631c0 .2894638-.2100226.5309337-.6300505.7244095-.420028.1934758-.9108384.2902137-1.4724313.2902137z"/><path d="m0 0h25v25h-25z"/><path d="m0 59h25v25h-25z"/></g></svg>
+`;

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

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export const sortIcon = svg`
+<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg"><path d="m50 0 50 55h-100z"/></svg>
+`;

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

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export const tileIcon = svg`
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m64 54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46zm36-54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46z"/></svg>
+`;