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

package/dist/src/collection-name-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-name-cache.js","sourceRoot":"","sources":["../../src/collection-name-cache.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable camelcase */\n/* eslint-disable no-continue */\nimport {\n  SearchParams,\n  SearchServiceInterface,\n} from '@internetarchive/search-service';\n\nexport interface CollectionNameCacheInterface {\n  collectionNameFor(identifier: string): Promise<string | null>;\n  preloadIdentifiers(identifiers: string[]): Promise<void>;\n}\n\n// this is the callback type received after the name is fetched\ntype CollectionNameResolver = (name: string | null) => Promise<void>;\n\nexport class CollectionNameCache implements CollectionNameCacheInterface {\n  async collectionNameFor(identifier: string): Promise<string | null> {\n    const lowercaseIdentifier = identifier.toLowerCase();\n    const cachedName = this.collectionNameCache[lowercaseIdentifier];\n    // we're specifically looking for `undefined`, because `null`\n    // means we queried the search service and found nothing so\n    // don't query again\n    if (cachedName !== undefined) return cachedName;\n\n    return new Promise(resolve => {\n      this.pendingIdentifierQueue.push(lowercaseIdentifier);\n      const currentPromises = this.pendingPromises[lowercaseIdentifier] ?? [];\n      const resultHandler: CollectionNameResolver = async (\n        name: string | null\n      ) => {\n        resolve(name);\n      };\n      currentPromises.push(resultHandler);\n      this.pendingPromises[lowercaseIdentifier] = currentPromises;\n    });\n  }\n\n  async preloadIdentifiers(identifiers: string[]): Promise<void> {\n    const lowercaseIdentifiers = identifiers.map(identifier => identifier.toLowerCase());\n    for (const identifier of lowercaseIdentifiers) {\n      if (this.collectionNameCache[identifier]) continue;\n      this.pendingIdentifierQueue.push(identifier);\n    }\n    await this.loadPendingIdentifiers();\n  }\n\n  private pendingIdentifierQueue: string[] = [];\n\n  private pendingPromises: { [key: string]: CollectionNameResolver[] } = {};\n\n  private collectionNameCache: { [key: string]: string | null | undefined } =\n    {};\n\n  private searchService: SearchServiceInterface;\n\n  constructor(options: {\n    searchService: SearchServiceInterface;\n    loadInterval?: number;\n  }) {\n    this.searchService = options.searchService;\n\n    setInterval(() => {\n      this.loadPendingIdentifiers();\n    }, options.loadInterval ?? 250);\n  }\n\n  private async loadPendingIdentifiers(): Promise<void> {\n    const pendingIdentifiers = this.pendingIdentifierQueue.splice(0, 100);\n    if (pendingIdentifiers.length === 0) return;\n\n    const searchParams = new SearchParams({\n      query: `identifier:(${pendingIdentifiers.join(' OR ')})`,\n      fields: ['title', 'identifier'],\n      rows: pendingIdentifiers.length,\n    });\n\n    const results = await this.searchService.search(searchParams);\n    const docs = results.success?.response?.docs;\n\n    // first process the identifiers that were received from the search service\n    // and remove them from the pendingIdentifierQueue\n    if (docs && docs.length > 0) {\n      for (const result of docs) {\n        const { identifier, title } = result;\n        if (!identifier) continue;\n        const lowercaseIdentifier = identifier.toLowerCase();\n        pendingIdentifiers.splice(pendingIdentifiers.indexOf(lowercaseIdentifier), 1);\n        const collectionName = title?.value ?? null;\n        this.collectionNameCache[lowercaseIdentifier] = collectionName;\n        const currentPromises = this.pendingPromises[lowercaseIdentifier];\n        if (currentPromises) {\n          for (const promise of currentPromises) {\n            promise(collectionName);\n          }\n          delete this.pendingPromises[lowercaseIdentifier];\n        }\n      }\n    }\n\n    // if the search service did not return titles for all of the identifiers,\n    // we still need to complete the promises and just return `null` for the rest\n    for (const identifier of pendingIdentifiers) {\n      this.collectionNameCache[identifier] = null;\n      const currentPromises = this.pendingPromises[identifier];\n      if (currentPromises) {\n        for (const promise of currentPromises) {\n          promise(null);\n        }\n        delete this.pendingPromises[identifier];\n      }\n    }\n  }\n}\n"]}

package/dist/src/mediatype-icon.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { accountIcon } from './assets/img/icons/mediatype/account';
 import { audioIcon } from './assets/img/icons/mediatype/audio';
 import { etreeIcon } from './assets/img/icons/mediatype/etree';
 import { imagesIcon } from './assets/img/icons/mediatype/images';
@@ -16,6 +17,7 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
         super(...arguments);
         this.showText = false;
         this.mediatypeIcons = {
+            account: accountIcon,
             audio: audioIcon,
             collection: collectionIcon,
             data: etreeIcon,
@@ -30,6 +32,7 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
             web: webIcon,
         };
         this.mediatypeText = {
+            account: 'Account',
             audio: 'Audio',
             collection: 'Collection',
             data: 'Data',
@@ -69,9 +72,13 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
         display: none;
       }
 
-      #icon.show-text svg {
-        height: 10px;
-        width: 10px;
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconFillColor);
       }
     `;
     }

package/dist/src/mediatype-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAGzE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAG+B,aAAQ,GAAG,KAAK,CAAC;QAE7B,mBAAc,GAA2B;YACxD,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,cAAc;YAC1B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,SAAS;YAChB,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,OAAO;SACb,CAAC;QAEe,kBAAa,GAA2B;YACvD,KAAK,EAAE,OAAO;YACd,UAAU,EAAE,YAAY;YACxB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,EAAE,EAAE,IAAI;YACR,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,KAAK;SACX,CAAC;IAkCJ,CAAC;IAhCC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;UAC7D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;iCACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;;KAE9D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBT,CAAC;IACJ,CAAC;CACF,CAAA;AAlE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AAHnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAmEzB;SAnEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { audioIcon } from './assets/img/icons/mediatype/audio';\nimport { etreeIcon } from './assets/img/icons/mediatype/etree';\nimport { imagesIcon } from './assets/img/icons/mediatype/images';\nimport { filmIcon } from './assets/img/icons/mediatype/film';\nimport { softwareIcon } from './assets/img/icons/mediatype/software';\nimport { textsIcon } from './assets/img/icons/mediatype/texts';\nimport { tvIcon } from './assets/img/icons/mediatype/tv';\nimport { videoIcon } from './assets/img/icons/mediatype/video';\nimport { webIcon } from './assets/img/icons/mediatype/web';\nimport { collectionIcon } from './assets/img/icons/mediatype/collection';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private readonly mediatypeIcons: { [key: string]: any } = {\n    audio: audioIcon,\n    collection: collectionIcon,\n    data: etreeIcon,\n    etree: etreeIcon,\n    film: filmIcon,\n    image: imagesIcon,\n    movies: filmIcon,\n    software: softwareIcon,\n    texts: textsIcon,\n    tv: tvIcon,\n    video: videoIcon,\n    web: webIcon,\n  };\n\n  private readonly mediatypeText: { [key: string]: any } = {\n    audio: 'Audio',\n    collection: 'Collection',\n    data: 'Data',\n    etree: 'E-tree',\n    film: 'Film',\n    image: 'Image',\n    movies: 'Movie',\n    software: 'Software',\n    texts: 'Text',\n    tv: 'TV',\n    video: 'Video',\n    web: 'Web',\n  };\n\n  render() {\n    if (!this.mediatype) {\n      return html``;\n    }\n    return html`\n      <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\">\n        ${this.mediatypeIcons[this.mediatype]}\n        <p class=\"status-text\">${this.mediatypeText[this.mediatype]}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      #icon.show-text svg {\n        height: 10px;\n        width: 10px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAGzE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAG+B,aAAQ,GAAG,KAAK,CAAC;QAE7B,mBAAc,GAA2B;YACxD,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,cAAc;YAC1B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,SAAS;YAChB,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,OAAO;SACb,CAAC;QAEe,kBAAa,GAA2B;YACvD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,OAAO;YACd,UAAU,EAAE,YAAY;YACxB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,EAAE,EAAE,IAAI;YACR,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,KAAK;SACX,CAAC;IAsCJ,CAAC;IApCC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;UAC7D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;iCACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;;KAE9D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAxE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AAHnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAyEzB;SAzEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { accountIcon } from './assets/img/icons/mediatype/account';\nimport { audioIcon } from './assets/img/icons/mediatype/audio';\nimport { etreeIcon } from './assets/img/icons/mediatype/etree';\nimport { imagesIcon } from './assets/img/icons/mediatype/images';\nimport { filmIcon } from './assets/img/icons/mediatype/film';\nimport { softwareIcon } from './assets/img/icons/mediatype/software';\nimport { textsIcon } from './assets/img/icons/mediatype/texts';\nimport { tvIcon } from './assets/img/icons/mediatype/tv';\nimport { videoIcon } from './assets/img/icons/mediatype/video';\nimport { webIcon } from './assets/img/icons/mediatype/web';\nimport { collectionIcon } from './assets/img/icons/mediatype/collection';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private readonly mediatypeIcons: { [key: string]: any } = {\n    account: accountIcon,\n    audio: audioIcon,\n    collection: collectionIcon,\n    data: etreeIcon,\n    etree: etreeIcon,\n    film: filmIcon,\n    image: imagesIcon,\n    movies: filmIcon,\n    software: softwareIcon,\n    texts: textsIcon,\n    tv: tvIcon,\n    video: videoIcon,\n    web: webIcon,\n  };\n\n  private readonly mediatypeText: { [key: string]: any } = {\n    account: 'Account',\n    audio: 'Audio',\n    collection: 'Collection',\n    data: 'Data',\n    etree: 'E-tree',\n    film: 'Film',\n    image: 'Image',\n    movies: 'Movie',\n    software: 'Software',\n    texts: 'Text',\n    tv: 'TV',\n    video: 'Video',\n    web: 'Web',\n  };\n\n  render() {\n    if (!this.mediatype) {\n      return html``;\n    }\n    return html`\n      <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\">\n        ${this.mediatypeIcons[this.mediatype]}\n        <p class=\"status-text\">${this.mediatypeText[this.mediatype]}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor);\n      }\n    `;\n  }\n}\n"]}

package/dist/src/models.d.ts

@@ -1,23 +1,81 @@
 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;
     dateArchived?: Date;
-    dateReviewed?: Date;
     datePublished?: Date;
-    mediatype: MediaType;
-    viewCount: number;
-    itemCount: number;
-    favCount: number;
-    commentCount: number;
+    dateReviewed?: Date;
     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 declare 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 declare type CollectionBrowserContext = 'collection' | 'search';
+/**
+ * The sort fields shown in the sort filter bar
+ */
+export declare enum SortField {
+    'relevance' = "relevance",
+    'views' = "views",
+    'title' = "title",
+    'datearchived' = "datearchived",
+    'datepublished' = "datepublished",
+    'datereviewed' = "datereviewed",
+    'dateadded' = "dateadded",
+    'creator' = "creator"
+}
+/**
+ * The metadata fields we sort by that map to the SortFields above
+ */
+export declare type MetadataSortField = 'week' | 'titleSorter' | 'date' | 'creatorSorter' | 'publicdate' | 'reviewdate' | 'addeddate';
+export declare const SortFieldDisplayName: {
+    [key in SortField]: string;
+};
+/**
+ * Maps the SortField above to the corresponding Metadata field in the API.
+ */
+export declare const SortFieldToMetadataField: {
+    [key in SortField]: MetadataSortField | null;
+};
+/**
+ * Maps the Metadata field to the corresponding SortField field in the API.
+ */
+export declare const MetadataFieldToSortField: {
+    [key in MetadataSortField]: SortField;
+};
+export declare type FacetOption = 'subject' | 'mediatype' | 'language' | 'creator' | 'collection' | 'year';
+export declare type SelectedFacetState = 'selected' | 'hidden';
+export declare type FacetState = SelectedFacetState | 'none';
+export interface FacetBucket {
+    displayText?: string;
+    key: string;
+    count: number;
+    state: FacetState;
+}
+export interface FacetGroup {
+    title: string;
+    key: FacetOption;
+    buckets: FacetBucket[];
 }
-export declare type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';
+export declare type FacetValue = string;
+export declare type SelectedFacets = Record<FacetOption, Record<FacetValue, SelectedFacetState>>;
+export declare const defaultSelectedFacets: SelectedFacets;

package/dist/src/models.js

@@ -1,2 +1,58 @@
-export {};
+/**
+ * The sort fields shown in the sort filter bar
+ */
+export var SortField;
+(function (SortField) {
+    SortField["relevance"] = "relevance";
+    SortField["views"] = "views";
+    SortField["title"] = "title";
+    SortField["datearchived"] = "datearchived";
+    SortField["datepublished"] = "datepublished";
+    SortField["datereviewed"] = "datereviewed";
+    SortField["dateadded"] = "dateadded";
+    SortField["creator"] = "creator";
+})(SortField || (SortField = {}));
+export const SortFieldDisplayName = {
+    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 = {
+    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 = {
+    titleSorter: SortField.title,
+    date: SortField.datearchived,
+    publicdate: SortField.datepublished,
+    reviewdate: SortField.datereviewed,
+    addeddate: SortField.dateadded,
+    creatorSorter: SortField.creator,
+    week: SortField.views,
+};
+export const defaultSelectedFacets = {
+    subject: {},
+    mediatype: {},
+    language: {},
+    creator: {},
+    collection: {},
+    year: {},
+};
 //# sourceMappingURL=models.js.map

package/dist/src/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["import type { MediaType } from '@internetarchive/field-parsers';\n\nexport interface TileModel {\n  identifier: string;\n  title: string;\n  averageRating?: number;\n  dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]\n  dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]\n  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]\n  datePublished?: Date; // Date work published in the world (user-defined) [from: date]\n  mediatype: MediaType;\n  viewCount: number;\n  itemCount: number;\n  favCount: number;\n  commentCount: number;\n  description?: string;\n  collectionIdentifier?: string;\n  collectionName?: string;\n  creator?: string;\n  subject?: string;\n  source?: string;\n  collection: string[];\n}\n\nexport type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AAwCA;;GAEG;AACH,MAAM,CAAN,IAAY,SASX;AATD,WAAY,SAAS;IACnB,oCAAyB,CAAA;IACzB,4BAAiB,CAAA;IACjB,4BAAiB,CAAA;IACjB,0CAA+B,CAAA;IAC/B,4CAAiC,CAAA;IACjC,0CAA+B,CAAA;IAC/B,oCAAyB,CAAA;IACzB,gCAAqB,CAAA;AACvB,CAAC,EATW,SAAS,KAAT,SAAS,QASpB;AAcD,MAAM,CAAC,MAAM,oBAAoB,GAE7B;IACF,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC;IACF,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,aAAa;IACpB,YAAY,EAAE,MAAM;IACpB,aAAa,EAAE,YAAY;IAC3B,YAAY,EAAE,YAAY;IAC1B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,eAAe;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC;IACF,WAAW,EAAE,SAAS,CAAC,KAAK;IAC5B,IAAI,EAAE,SAAS,CAAC,YAAY;IAC5B,UAAU,EAAE,SAAS,CAAC,aAAa;IACnC,UAAU,EAAE,SAAS,CAAC,YAAY;IAClC,SAAS,EAAE,SAAS,CAAC,SAAS;IAC9B,aAAa,EAAE,SAAS,CAAC,OAAO;IAChC,IAAI,EAAE,SAAS,CAAC,KAAK;CACtB,CAAC;AAkCF,MAAM,CAAC,MAAM,qBAAqB,GAAmB;IACnD,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,EAAE;CACT,CAAC","sourcesContent":["import type { MediaType } from '@internetarchive/field-parsers';\n\nexport interface TileModel {\n  averageRating?: number;\n  collectionIdentifier?: string;\n  collectionName?: string;\n  collections: string[];\n  commentCount: number;\n  creator?: string;\n  creators: string[];\n  dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]\n  dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]\n  datePublished?: Date; // Date work published in the world (user-defined) [from: date]\n  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]\n  description?: string;\n  favCount: number;\n  identifier: string;\n  issue?: string;\n  itemCount: number;\n  mediatype: MediaType;\n  source?: string;\n  subjects: string[];\n  title: string;\n  viewCount: number;\n  volume?: string;\n}\n\nexport type CollectionDisplayMode =\n  | 'grid'\n  | 'list-compact'\n  | 'list-detail'\n  | 'list-header';\n\n/**\n * This is mainly used to set the cookies for the collection display mode.\n *\n * It allows the user to set different modes for different contexts (collection page, search page, etc).\n */\nexport type CollectionBrowserContext = 'collection' | 'search';\n\n/**\n * The sort fields shown in the sort filter bar\n */\nexport enum SortField {\n  'relevance' = 'relevance',\n  'views' = 'views',\n  'title' = 'title',\n  'datearchived' = 'datearchived',\n  'datepublished' = 'datepublished',\n  'datereviewed' = 'datereviewed',\n  'dateadded' = 'dateadded',\n  'creator' = 'creator',\n}\n\n/**\n * The metadata fields we sort by that map to the SortFields above\n */\nexport type MetadataSortField =\n  | 'week'\n  | 'titleSorter'\n  | 'date'\n  | 'creatorSorter'\n  | 'publicdate'\n  | 'reviewdate'\n  | 'addeddate';\n\nexport const SortFieldDisplayName: {\n  [key in SortField]: string;\n} = {\n  relevance: 'Relevance',\n  views: 'Views',\n  title: 'Title',\n  datearchived: 'Date Archived',\n  datepublished: 'Date Published',\n  datereviewed: 'Date Reviewed',\n  dateadded: 'Date Added',\n  creator: 'Creator',\n};\n\n/**\n * Maps the SortField above to the corresponding Metadata field in the API.\n */\nexport const SortFieldToMetadataField: {\n  [key in SortField]: MetadataSortField | null;\n} = {\n  relevance: null,\n  views: 'week',\n  title: 'titleSorter',\n  datearchived: 'date',\n  datepublished: 'publicdate',\n  datereviewed: 'reviewdate',\n  dateadded: 'addeddate',\n  creator: 'creatorSorter',\n};\n\n/**\n * Maps the Metadata field to the corresponding SortField field in the API.\n */\nexport const MetadataFieldToSortField: {\n  [key in MetadataSortField]: SortField;\n} = {\n  titleSorter: SortField.title,\n  date: SortField.datearchived,\n  publicdate: SortField.datepublished,\n  reviewdate: SortField.datereviewed,\n  addeddate: SortField.dateadded,\n  creatorSorter: SortField.creator,\n  week: SortField.views,\n};\n\nexport type FacetOption =\n  | 'subject'\n  | 'mediatype'\n  | 'language'\n  | 'creator'\n  | 'collection'\n  | 'year';\n\nexport type SelectedFacetState = 'selected' | 'hidden';\n\nexport type FacetState = SelectedFacetState | 'none';\nexport interface FacetBucket {\n  // for some facets, we augment the key with a display value\n  displayText?: string;\n  key: string;\n  count: number;\n  state: FacetState;\n}\n\nexport interface FacetGroup {\n  title: string;\n  key: FacetOption;\n  buckets: FacetBucket[];\n}\n\nexport type FacetValue = string;\n\nexport type SelectedFacets = Record<\n  FacetOption,\n  Record<FacetValue, SelectedFacetState>\n>;\n\nexport const defaultSelectedFacets: SelectedFacets = {\n  subject: {},\n  mediatype: {},\n  language: {},\n  creator: {},\n  collection: {},\n  year: {},\n};\n"]}

package/dist/src/restoration-state-handler.d.ts

@@ -0,0 +1,37 @@
+import { SortDirection, SortParam } from '@internetarchive/search-service';
+import { 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 declare class RestorationStateHandler implements RestorationStateHandlerInterface {
+    private context;
+    private cookieDomain;
+    private cookieExpiration;
+    private cookiePath;
+    constructor(options: {
+        context: CollectionBrowserContext;
+    });
+    persistState(state: RestorationState): void;
+    getRestorationState(): RestorationState;
+    private persistViewStateToCookies;
+    private loadTileViewStateFromCookies;
+    private persistQueryStateToUrl;
+    private loadQueryStateFromUrl;
+}

package/dist/src/restoration-state-handler.js

@@ -0,0 +1,177 @@
+import { getCookie, setCookie } from 'typescript-cookie';
+import { MetadataFieldToSortField, } from './models';
+export class RestorationStateHandler {
+    constructor(options) {
+        this.cookieDomain = '.archive.org';
+        this.cookieExpiration = 30;
+        this.cookiePath = '/';
+        this.context = options.context;
+    }
+    persistState(state) {
+        if (state.displayMode)
+            this.persistViewStateToCookies(state.displayMode);
+        this.persistQueryStateToUrl(state);
+    }
+    getRestorationState() {
+        const restorationState = this.loadQueryStateFromUrl();
+        const displayMode = this.loadTileViewStateFromCookies();
+        restorationState.displayMode = displayMode;
+        return restorationState;
+    }
+    persistViewStateToCookies(displayMode) {
+        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,
+        });
+    }
+    loadTileViewStateFromCookies() {
+        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';
+    }
+    persistQueryStateToUrl(state) {
+        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);
+    }
+    loadQueryStateFromUrl() {
+        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 = {
+            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];
+            if (metadataField) {
+                restorationState.selectedSort = metadataField;
+            }
+            if (direction === 'desc' || direction === 'asc') {
+                restorationState.sortDirection = direction;
+            }
+        }
+        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][value] =
+                                'selected';
+                        }
+                        break;
+                    }
+                    case 'firstTitle':
+                        restorationState.selectedTitleFilter = value;
+                        break;
+                    case 'firstCreator':
+                        restorationState.selectedCreatorFilter = value;
+                        break;
+                    default:
+                        restorationState.selectedFacets[field][value] =
+                            'selected';
+                }
+            });
+        }
+        if (facetNots) {
+            facetNots.forEach(not => {
+                const [field, value] = not.split(':');
+                restorationState.selectedFacets[field][value] = 'hidden';
+            });
+        }
+        return restorationState;
+    }
+}
+//# sourceMappingURL=restoration-state-handler.js.map

package/dist/src/restoration-state-handler.js.map

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

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

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 export declare class AlphaBar extends LitElement {
-    headline?: string;
-    selectedLetter?: string;
+    selectedLetter: string | null;
     private get selectedUppercaseLetter();
     render(): import("lit-html").TemplateResult<1>;
     private letterClicked;

package/dist/src/sort-filter-bar/alpha-bar.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let AlphaBar = class AlphaBar extends LitElement {
     constructor() {
         super(...arguments);
+        this.selectedLetter = null;
         this.alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
     }
     get selectedUppercaseLetter() {
@@ -12,16 +13,21 @@ let AlphaBar = class AlphaBar extends LitElement {
     }
     render() {
         return html `
-      <h1>${this.headline}</h1>
       <div id="container">
         <ul>
           ${this.alphabet.map(letter => html `
                 <li
                   class=${letter === this.selectedUppercaseLetter
             ? 'selected'
-            : nothing}
+            : ''}
                 >
-                  <a href="#" @click=${() => this.letterClicked(letter)}>
+                  <a
+                    href="#"
+                    @click=${(e) => {
+            e.preventDefault();
+            this.letterClicked(letter);
+        }}
+                  >
                     ${letter}
                   </a>
                 </li>
@@ -32,7 +38,7 @@ let AlphaBar = class AlphaBar extends LitElement {
     }
     letterClicked(letter) {
         if (letter === this.selectedUppercaseLetter) {
-            this.selectedLetter = undefined;
+            this.selectedLetter = null;
         }
         else {
             this.selectedLetter = letter;
@@ -50,6 +56,7 @@ AlphaBar.styles = css `
     #container {
       background-color: #ddd;
       color: #333;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
     }
 
     ul {
@@ -60,10 +67,16 @@ AlphaBar.styles = css `
       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;
     }
 
@@ -75,9 +88,6 @@ AlphaBar.styles = css `
       color: white;
     }
   `;
-__decorate([
-    property({ type: String })
-], AlphaBar.prototype, "headline", void 0);
 __decorate([
     property({ type: String })
 ], AlphaBar.prototype, "selectedLetter", void 0);

package/dist/src/sort-filter-bar/alpha-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/alpha-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA8CmB,aAAQ,GAAG,4BAA4B,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAmCrE,CAAC;IA5EC,IAAY,uBAAuB;;QACjC,OAAO,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,QAAQ;;;YAGb,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;0BAEQ,MAAM,KAAK,IAAI,CAAC,uBAAuB;YAC7C,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,OAAO;;uCAEU,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;sBACjD,MAAM;;;eAGb,CACJ;;;KAGN,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,IAAI,MAAM,KAAK,IAAI,CAAC,uBAAuB,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACjC;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;SAC9B;QACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAAE;SACzD,CAAC,CACH,CAAC;IACJ,CAAC;CAqCF,CAAA;AAjCQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgClB,CAAC;AA/E0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyB;AAHzC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiFpB;SAjFY,QAAQ","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('alpha-bar')\nexport class AlphaBar extends LitElement {\n  @property({ type: String }) headline?: string;\n\n  @property({ type: String }) selectedLetter?: string;\n\n  private get selectedUppercaseLetter(): string | undefined {\n    return this.selectedLetter?.toUpperCase();\n  }\n\n  render() {\n    return html`\n      <h1>${this.headline}</h1>\n      <div id=\"container\">\n        <ul>\n          ${this.alphabet.map(\n            letter =>\n              html`\n                <li\n                  class=${letter === this.selectedUppercaseLetter\n                    ? 'selected'\n                    : nothing}\n                >\n                  <a href=\"#\" @click=${() => this.letterClicked(letter)}>\n                    ${letter}\n                  </a>\n                </li>\n              `\n          )}\n        </ul>\n      </div>\n    `;\n  }\n\n  private letterClicked(letter: string) {\n    if (letter === this.selectedUppercaseLetter) {\n      this.selectedLetter = undefined;\n    } else {\n      this.selectedLetter = letter;\n    }\n    this.dispatchEvent(\n      new CustomEvent('letterChanged', {\n        detail: { selectedLetter: this.selectedUppercaseLetter },\n      })\n    );\n  }\n\n  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\n\n  static styles = css`\n    h1 {\n      font-size: 1.2rem;\n    }\n\n    #container {\n      background-color: #ddd;\n      color: #333;\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0.5rem 1rem;\n      justify-content: space-between;\n    }\n\n    a {\n      color: #333;\n      text-decoration: none;\n      padding: 0.5rem 0.7rem;\n      display: block;\n    }\n\n    .selected {\n      background-color: darkgray;\n    }\n\n    .selected a {\n      color: white;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"alpha-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/alpha-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAC8B,mBAAc,GAAkB,IAAI,CAAC;QAgDhD,aAAQ,GAAG,4BAA4B,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IA0CrE,CAAC;IAxFC,IAAY,uBAAuB;;QACjC,OAAO,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;0BAEQ,MAAM,KAAK,IAAI,CAAC,uBAAuB;YAC7C,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;;;;6BAIK,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;;sBAEC,MAAM;;;eAGb,CACJ;;;KAGN,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,IAAI,MAAM,KAAK,IAAI,CAAC,uBAAuB,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;SAC9B;QACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAAE;SACzD,CAAC,CACH,CAAC;IACJ,CAAC;CA4CF,CAAA;AAxCQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuClB,CAAC;AAzF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsC;AADtD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2FpB;SA3FY,QAAQ","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('alpha-bar')\nexport class AlphaBar extends LitElement {\n  @property({ type: String }) selectedLetter: string | null = null;\n\n  private get selectedUppercaseLetter(): string | undefined {\n    return this.selectedLetter?.toUpperCase();\n  }\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <ul>\n          ${this.alphabet.map(\n            letter =>\n              html`\n                <li\n                  class=${letter === this.selectedUppercaseLetter\n                    ? 'selected'\n                    : ''}\n                >\n                  <a\n                    href=\"#\"\n                    @click=${(e: Event) => {\n                      e.preventDefault();\n                      this.letterClicked(letter);\n                    }}\n                  >\n                    ${letter}\n                  </a>\n                </li>\n              `\n          )}\n        </ul>\n      </div>\n    `;\n  }\n\n  private letterClicked(letter: string) {\n    if (letter === this.selectedUppercaseLetter) {\n      this.selectedLetter = null;\n    } else {\n      this.selectedLetter = letter;\n    }\n    this.dispatchEvent(\n      new CustomEvent('letterChanged', {\n        detail: { selectedLetter: this.selectedUppercaseLetter },\n      })\n    );\n  }\n\n  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\n\n  static styles = css`\n    h1 {\n      font-size: 1.2rem;\n    }\n\n    #container {\n      background-color: #ddd;\n      color: #333;\n      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0.5rem 1rem;\n      justify-content: space-between;\n    }\n\n    ul li {\n      flex: 1;\n      text-align: center;\n      max-width: 2.5rem;\n    }\n\n    a {\n      color: #333;\n      text-decoration: none;\n      padding: 0.5rem 0;\n      display: block;\n    }\n\n    .selected {\n      background-color: darkgray;\n    }\n\n    .selected a {\n      color: white;\n    }\n  `;\n}\n"]}

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

@@ -0,0 +1 @@
+export declare const compactIcon: import("lit-html").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/compact.js

@@ -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>
+`;
+//# sourceMappingURL=compact.js.map

package/dist/src/sort-filter-bar/img/compact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compact.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/compact.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;CAE7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const compactIcon = svg`\n<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>\n`;\n"]}

package/dist/src/sort-filter-bar/img/grid.d.ts

@@ -0,0 +1 @@
+export declare const gridIcon: import("lit-html").TemplateResult<2>;