@internetarchive/collection-browser 0.0.1-alpha.9 → 0.1.0

package/src/mediatype/mediatype-config.ts

@@ -0,0 +1,86 @@
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+
+export const mediatypeConfig: { [key: string]: any } = {
+  account: {
+    color: '#000000',
+    icon: accountIcon,
+    text: 'Account',
+  },
+  audio: {
+    color: '#8fdaef',
+    icon: audioIcon,
+    text: 'Audio',
+  },
+  collection: {
+    color: '#000000',
+    icon: collectionIcon,
+    text: 'Collection',
+  },
+  data: {
+    color: '#333333',
+    icon: dataIcon,
+    text: 'Data',
+  },
+  etree: {
+    color: '#3871c1',
+    icon: etreeIcon,
+    text: 'E-tree',
+  },
+  film: {
+    color: '#bf1b2c',
+    icon: filmIcon,
+    text: 'Film',
+  },
+  image: {
+    color: '#62c4a9',
+    icon: imagesIcon,
+    text: 'Image',
+  },
+  movies: {
+    color: '#bf1b2c',
+    icon: filmIcon,
+    text: 'Movie',
+  },
+  radio: {
+    color: '#8fdaef',
+    icon: radioIcon,
+    text: 'Radio',
+  },
+  software: {
+    color: '#80cc28',
+    icon: softwareIcon,
+    text: 'Software',
+  },
+  texts: {
+    color: '#f9a72b',
+    icon: textsIcon,
+    text: 'Text',
+  },
+  tv: {
+    color: '#f25d54',
+    icon: tvIcon,
+    text: 'TV',
+  },
+  video: {
+    color: '#bf1b2c',
+    icon: videoIcon,
+    text: 'Video',
+  },
+  web: {
+    color: '#fddd10',
+    icon: webIcon,
+    text: 'Web',
+  },
+};

package/src/models.ts

@@ -1,25 +1,153 @@
 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;
-  collections: string[];
+  subjects: string[];
+  title: string;
+  viewCount: number;
+  volume?: string;
 }
 
 export type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';
+
+export type TileDisplayMode =
+  | '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',
+  'date' = 'date',
+  'datereviewed' = 'datereviewed',
+  'dateadded' = 'dateadded',
+  'creator' = 'creator',
+}
+
+/**
+ * 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',
+  date: '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: 'publicdate',
+  date: 'date',
+  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.date,
+  publicdate: SortField.datearchived,
+  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,266 @@
+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) {
+      const prefix = state.sortParam.direction === 'desc' ? '-' : '';
+      searchParams.set('sort', `${prefix}${state.sortParam.field}`);
+    }
+
+    if (state.baseQuery) {
+      searchParams.set('query', state.baseQuery);
+    }
+
+    if (state.currentPage) {
+      if (state.currentPage > 1) {
+        searchParams.set('page', state.currentPage.toString());
+      } else {
+        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) {
+            searchParams.append('not[]', paramValue);
+          } else {
+            searchParams.append('and[]', paramValue);
+          }
+        }
+      }
+    }
+
+    if (state.dateRangeQueryClause) {
+      searchParams.append('and[]', state.dateRangeQueryClause);
+    }
+    if (state.titleQuery) {
+      searchParams.append('and[]', state.titleQuery);
+    }
+    if (state.creatorQuery) {
+      searchParams.append('and[]', state.creatorQuery);
+    }
+
+    window.history.pushState(
+      {
+        sort: state.sortParam,
+        query: state.baseQuery,
+        page: state.currentPage,
+        and: state.selectedFacets,
+        not: state.selectedFacets,
+        dateRange: state.dateRangeQueryClause,
+      },
+      '',
+      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) {
+      // check for two different sort formats: `date desc` and `-date`
+      const hasSpace = sortQuery.indexOf(' ') > -1;
+      if (hasSpace) {
+        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;
+        }
+      } else {
+        const sortDirection = sortQuery.startsWith('-') ? 'desc' : 'asc';
+        const sortField = sortQuery.startsWith('-')
+          ? sortQuery.slice(1)
+          : sortQuery;
+        const metadataField =
+          MetadataFieldToSortField[sortField as MetadataSortField];
+        if (metadataField) restorationState.selectedSort = metadataField;
+        restorationState.sortDirection = sortDirection as SortDirection;
+      }
+    }
+    if (facetAnds) {
+      facetAnds.forEach(and => {
+        const [field, value] = and.split(':');
+        const unQuotedValue = this.stripQuotes(value);
+
+        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][
+                unQuotedValue
+              ] = 'selected';
+            }
+            break;
+          }
+          case 'firstTitle':
+            restorationState.selectedTitleFilter = value;
+            break;
+          case 'firstCreator':
+            restorationState.selectedCreatorFilter = value;
+            break;
+          default:
+            restorationState.selectedFacets[field as FacetOption][
+              unQuotedValue
+            ] = 'selected';
+        }
+      });
+    }
+    if (facetNots) {
+      facetNots.forEach(not => {
+        const [field, value] = not.split(':');
+        const unQuotedValue = this.stripQuotes(value);
+        restorationState.selectedFacets[field as FacetOption][unQuotedValue] =
+          'hidden';
+      });
+    }
+    return restorationState;
+  }
+
+  // remove optional opening and closing quotes from a string
+  private stripQuotes(value: string): string {
+    if (value.startsWith('"') && value.endsWith('"')) {
+      return value.substring(1, value.length - 1);
+    }
+    return value;
+  }
+}

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

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('alpha-bar')
 export class AlphaBar extends LitElement {
-  @property({ type: String }) selectedLetter?: string;
+  @property({ type: String }) selectedLetter: string | null = null;
 
   private get selectedUppercaseLetter(): string | undefined {
     return this.selectedLetter?.toUpperCase();
@@ -40,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;
     }
@@ -72,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

@@ -1,5 +1,5 @@
 import { svg } from 'lit';
 
 export const listIcon = svg`
-<svg viewBox="0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > <path d="m96.9964435 21h-93.90621462c-.91561615 0-1.65899868-.2902137-2.23014758-.8706412-.57114891-.5804274-.85783455-1.3048369-.86005692-2.1732283 0-.8121485.28668564-1.5073116.86005692-2.0854893.57337127-.5781778 1.3167538-.8683915 2.23014758-.8706412h93.90621462c.800053 0 1.5012105.2902137 2.1034726.8706412.602262.5804274.9022819 1.2755905.9000718 2.0854893 0 .8683914-.3000321 1.5928009-.9000718 2.1732283-.6000398.5804275-1.3011973.8706412-2.1034726.8706412zm-93.90621462 10h93.90621462c.800053 0 1.5012105.2861891 2.1034726.8585673.602262.5723782.9022819 1.2579009.9000718 2.0565682 0 .8563488-.3000321 1.5851326-.9000718 2.1863516-.6000398.601219-1.3011973.9007192-2.1034726.8985129h-93.90621462c-.91561615 0-1.65899868-.2995125-2.23014758-.8985129-.57114891-.5990004-.85783455-1.3277843-.86005692-2.1863516 0-.8008858.28668564-1.4864085.86005692-2.0565682.57337127-.5701597 1.3167538-.8563488 2.23014758-.8585673zm0 16.0033765h93.90621462c.800053 0 1.5012105.3038829 2.1034726.9116488.602262.6077659.9022819 1.2886888.9000718 2.0427687-.0022346.7540799-.3022545 1.4496342-.9000718 2.0866629-.5978174.6370287-1.2989749.9555431-2.1034726.9555431h-93.90621462c-.85783454 0-1.58788286-.3038829-2.19014494-.9116488s-.90228193-1.3179517-.90007182-2.1305572c.00223463-.8126055.30225448-1.5081598.90007182-2.0866629s1.32786566-.8688801 2.19014494-.8711311zm0 15.9966235h93.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 16h93.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>
+<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 61h-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 19h-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 74h-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 32h-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 87h-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 45h-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 100h-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="m0 0h25v25h-25z"/><path d="m0 55h25v25h-25z"/></g></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>
+`;