@internetarchive/collection-browser 0.0.1-alpha.13 → 0.0.1-alpha.16

package/dist/src/models.js

@@ -1,3 +1,27 @@
+/**
+ * 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.
  */
@@ -15,13 +39,13 @@ export const SortFieldToMetadataField = {
  * Maps the Metadata field to the corresponding SortField field in the API.
  */
 export const MetadataFieldToSortField = {
-    titleSorter: 'title',
-    date: 'datearchived',
-    publicdate: 'datepublished',
-    reviewdate: 'datereviewed',
-    addeddate: 'dateadded',
-    creatorSorter: 'creator',
-    week: 'views',
+    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: {},

package/dist/src/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AA0DA;;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,OAAO;IACpB,IAAI,EAAE,cAAc;IACpB,UAAU,EAAE,eAAe;IAC3B,UAAU,EAAE,cAAc;IAC1B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,SAAS;IACxB,IAAI,EAAE,OAAO;CACd,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  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  collections: string[];\n}\n\nexport type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';\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 type SortField =\n  | 'relevance'\n  | 'views'\n  | 'title'\n  | 'datearchived'\n  | 'datepublished'\n  | 'datereviewed'\n  | 'dateadded'\n  | 'creator';\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\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: 'title',\n  date: 'datearchived',\n  publicdate: 'datepublished',\n  reviewdate: 'datereviewed',\n  addeddate: 'dateadded',\n  creatorSorter: 'creator',\n  week: '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"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AAqCA;;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  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  collections: 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/sort-filter-bar/alpha-bar.js

@@ -70,7 +70,7 @@ AlphaBar.styles = css `
     a {
       color: #333;
       text-decoration: none;
-      padding: 0.5rem 0.7rem;
+      padding: 0.5rem 0;
       display: block;
     }
 

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,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;IAoCrE,CAAC;IAlFC,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;CAsCF,CAAA;AAlCQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAC;AAnF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsC;AADtD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqFpB;SArFY,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    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;IAoCrE,CAAC;IAlFC,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;CAsCF,CAAA;AAlCQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAC;AAnF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsC;AADtD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqFpB;SArFY,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    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/sort-filter-bar.d.ts

@@ -1,19 +1,53 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
 import { CollectionDisplayMode, SortField } from '../models';
 import './alpha-bar';
-export declare class SortFilterBar extends LitElement {
+export declare class SortFilterBar extends LitElement implements SharedResizeObserverResizeHandlerInterface {
     displayMode?: CollectionDisplayMode;
     sortDirection: 'asc' | 'desc' | null;
     selectedSort: SortField;
     selectedTitleFilter: string | null;
     selectedCreatorFilter: string | null;
     showRelevance: boolean;
+    resizeObserver?: SharedResizeObserverInterface;
     titleSelectorVisible: boolean;
     creatorSelectorVisible: boolean;
     dateSortSelectorVisible: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    desktopSelectorBarWidth: number;
+    selectorBarContainerWidth: number;
+    private desktopSortSelector;
+    private sortSelectorContainer;
+    render(): TemplateResult<1>;
     updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private disconnectResizeObserver;
+    private setupResizeObserver;
+    private get mobileSelectorVisible();
+    handleResize(entry: ResizeObserverEntry): void;
+    private get sortDirectionSelectorTemplate();
+    private get desktopSortSelectorTemplate();
+    /**
+     * This generates each of the sort option links.
+     *
+     * It manages the display value and the selected state of the option.
+     *
+     * @param sortField
+     * @param options {
+     *    additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.
+     *    displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.
+     *    isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.
+     * }
+     * @returns
+     */
+    private getSortDisplayOption;
+    private get mobileSortSelectorTemplate();
+    private mobileSortChanged;
+    private get displayOptionTemplate();
     private get dateSortSelector();
+    private getDateSortButton;
+    private selectDateSort;
+    private setSortDirections;
+    private setSelectedSort;
     /**
      * There are four date sort options.
      *
@@ -42,6 +76,6 @@ export declare class SortFilterBar extends LitElement {
     private listSelected;
     private detailSelected;
     private displayModeChanged;
-    private sortChanged;
+    private emitSortChangedEvent;
     static styles: import("lit").CSSResult;
 }