@internetarchive/collection-browser 0.0.1-alpha.21 → 0.0.1-alpha.24

package/dist/src/models.js.map

@@ -1 +1 @@
-{"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  averageRating?: number;\n  collectionIdentifier?: string;\n  collectionName?: string;\n  collections: string[];\n  commentCount: number;\n  creator?: 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  itemCount: number;\n  mediatype: MediaType;\n  source?: string;\n  subjects: string[];\n  title: string;\n  viewCount: number;\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"]}
+{"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/tiles/grid/item-tile.d.ts

@@ -1,9 +1,12 @@
 import { CSSResultGroup, LitElement } from 'lit';
+import '@internetarchive/collection-name-cache';
+import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import { TileModel } from '../../models';
 import '../../mediatype-icon';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
     baseNavigationUrl?: string;
+    collectionNameCache?: CollectionNameCacheInterface;
     get renderItemImageView(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;

package/dist/src/tiles/grid/item-tile.js

@@ -1,6 +1,8 @@
 import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import '@internetarchive/collection-name-cache';
 import { formatCount } from '../../utils/format-count';
 import '../../mediatype-icon';
 import { favoriteFilledIcon } from './icons/favorite-filled';
@@ -26,8 +28,8 @@ let ItemTile = class ItemTile extends LitElement {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const collectionName = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections[0];
-        const collectionUrl = `${this.baseNavigationUrl}/details/${collectionName}`;
+        const collectionIdentifier = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections[0];
+        const collectionUrl = `${this.baseNavigationUrl}/details/${collectionIdentifier}`;
         const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.collections[0]}`;
         const itemTitle = ((_c = this.model) === null || _c === void 0 ? void 0 : _c.title) || '';
         const itemCreator = ((_d = this.model) === null || _d === void 0 ? void 0 : _d.creator) || '-';
@@ -39,7 +41,12 @@ let ItemTile = class ItemTile extends LitElement {
               id="collection-thumbnail"
               style="background-image:url(${imgSrcUrl})"
             ></div>
-            <div id="collection-title-text">${collectionName}</div>
+            <div id="collection-title-text">
+              <async-collection-name
+                .collectionNameCache=${this.collectionNameCache}
+                .identifier=${collectionIdentifier}
+              ></async-collection-name>
+            </div>
           </div>
         </a>
         <div id="title-image-container">
@@ -312,6 +319,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ItemTile.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Object })
+], ItemTile.prototype, "collectionNameCache", void 0);
 ItemTile = __decorate([
     customElement('item-tile')
 ], ItemTile);

package/dist/src/tiles/grid/item-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;\n\n    const containsDeemphasize = this.model?.collections.includes('deemphasize');\n    const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';\n    const itemImageClass = `item-image ${\n      !containsDeemphasize ? 'default' : 'deemphasize'\n    }`;\n    const tileActionClass = `tile-action no-preview${\n      !containsDeemphasize ? ' hidden' : ''\n    }`;\n\n    return html`\n      <div class=${itemImageBoxClass}>\n        <div\n          class=${itemImageClass}\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>\n        <div class=${tileActionClass}>Content may be inappropriate</div>\n      </div>\n    `;\n  }\n\n  render() {\n    const collectionName = this.model?.collections[0];\n    const collectionUrl = `${this.baseNavigationUrl}/details/${collectionName}`;\n\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <a href=${collectionUrl}>\n          <div id=\"stealth-popup\">\n            <div\n              id=\"collection-thumbnail\"\n              style=\"background-image:url(${imgSrcUrl})\"\n            ></div>\n            <div id=\"collection-title-text\">${collectionName}</div>\n          </div>\n        </a>\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${this.model?.title}</h1>\n          <div id=\"item-image-container\">${this.renderItemImageView}</div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                ?showText=${true}\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      mediatype-icon {\n        --iconHeight: 10px;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .item-image-box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n\n      #container:hover #stealth-popup {\n        margin-top: -25px;\n        visibility: visible;\n        opacity: 1;\n      }\n\n      #stealth-popup {\n        transition: margin-top 0.3s ease, opacity 0.3s ease;\n        position: absolute;\n        visibility: hidden;\n        margin-left: -10px;\n        text-align: left;\n        display: flex;\n        padding: 5px;\n        width: 96%;\n        background: #f5f5f7 100%;\n        border: 1px #2c2c2c;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n      }\n\n      #collection-thumbnail {\n        display: flex;\n        transition: opacity 0.3s ease;\n        width: 3rem;\n        height: 3rem;\n        flex: 0 0 3rem;\n        border-radius: 8px;\n        border: 1px solid #ddd;\n        overflow: hidden;\n        background-size: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n      }\n\n      #collection-title-text {\n        line-height: 1;\n        font-size: 16px;\n        font-weight: bold;\n        text-align: left;\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n        height: 3.5rem;\n        display: -webkit-box;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      a {\n        color: #333;\n        text-decoration: none;\n        display: block;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/collection-name-cache';\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;\n\n    const containsDeemphasize = this.model?.collections.includes('deemphasize');\n    const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';\n    const itemImageClass = `item-image ${\n      !containsDeemphasize ? 'default' : 'deemphasize'\n    }`;\n    const tileActionClass = `tile-action no-preview${\n      !containsDeemphasize ? ' hidden' : ''\n    }`;\n\n    return html`\n      <div class=${itemImageBoxClass}>\n        <div\n          class=${itemImageClass}\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>\n        <div class=${tileActionClass}>Content may be inappropriate</div>\n      </div>\n    `;\n  }\n\n  render() {\n    const collectionIdentifier = this.model?.collections[0];\n    const collectionUrl = `${this.baseNavigationUrl}/details/${collectionIdentifier}`;\n\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <a href=${collectionUrl}>\n          <div id=\"stealth-popup\">\n            <div\n              id=\"collection-thumbnail\"\n              style=\"background-image:url(${imgSrcUrl})\"\n            ></div>\n            <div id=\"collection-title-text\">\n              <async-collection-name\n                .collectionNameCache=${this.collectionNameCache}\n                .identifier=${collectionIdentifier}\n              ></async-collection-name>\n            </div>\n          </div>\n        </a>\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${this.model?.title}</h1>\n          <div id=\"item-image-container\">${this.renderItemImageView}</div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                ?showText=${true}\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      mediatype-icon {\n        --iconHeight: 10px;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .item-image-box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n\n      #container:hover #stealth-popup {\n        margin-top: -25px;\n        visibility: visible;\n        opacity: 1;\n      }\n\n      #stealth-popup {\n        transition: margin-top 0.3s ease, opacity 0.3s ease;\n        position: absolute;\n        visibility: hidden;\n        margin-left: -10px;\n        text-align: left;\n        display: flex;\n        padding: 5px;\n        width: 96%;\n        background: #f5f5f7 100%;\n        border: 1px #2c2c2c;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n      }\n\n      #collection-thumbnail {\n        display: flex;\n        transition: opacity 0.3s ease;\n        width: 3rem;\n        height: 3rem;\n        flex: 0 0 3rem;\n        border-radius: 8px;\n        border: 1px solid #ddd;\n        overflow: hidden;\n        background-size: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n      }\n\n      #collection-title-text {\n        line-height: 1;\n        font-size: 16px;\n        font-weight: bold;\n        text-align: left;\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n        height: 3.5rem;\n        display: -webkit-box;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      a {\n        color: #333;\n        text-decoration: none;\n        display: block;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/list/tile-list.d.ts

@@ -11,7 +11,10 @@ export declare class TileList extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     private get imgTemplate();
     private get iconLeftTemplate();
+    private get titleTemplate();
     private get itemLineTemplate();
+    private get volumeTemplate();
+    private get issueTemplate();
     private get sourceTemplate();
     private get creatorTemplate();
     private get viewsTemplate();
@@ -20,6 +23,8 @@ export declare class TileList extends LitElement {
     private get topicsTemplate();
     private get collectionsTemplate();
     private get descriptionTemplate();
+    private metadataTemplate;
+    private labelTemplate;
     private searchLink;
     private detailsLink;
     private get date();

package/dist/src/tiles/list/tile-list.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 /* eslint-disable lit/no-invalid-html */
 import { css, html, LitElement, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { customElement, property } from 'lit/decorators.js';
@@ -10,7 +11,6 @@ import { formatDate } from '../../utils/format-date';
 import '../../mediatype-icon';
 let TileList = class TileList extends LitElement {
     render() {
-        var _a, _b;
         return html `
       <div id="list-line" class="${this.classSize}">
         <div id="list-line-left">
@@ -18,9 +18,9 @@ let TileList = class TileList extends LitElement {
           ${this.iconLeftTemplate}
         </div>
         <div id="list-line-right">
-          <div id="title">${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</div>
+          <div id="title">${this.titleTemplate}</div>
           ${this.itemLineTemplate} ${this.creatorTemplate}
-          <div id="date">
+          <div id="date" class="metadata">
             <span class="label">Published:</span> ${formatDate(this.date, this.formatSize)}
           </div>
           <div id="views-line">
@@ -32,6 +32,7 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
+    // Display templates
     get imgTemplate() {
         var _a, _b;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
@@ -59,12 +60,29 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
+    get titleTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.title)) {
+            return nothing;
+        }
+        return html ` ${this.detailsLink(this.model.identifier, this.model.title)} `;
+    }
     get itemLineTemplate() {
         const source = this.sourceTemplate;
-        if (!source) {
+        const volume = this.volumeTemplate;
+        const issue = this.issueTemplate;
+        if (!source && !volume && !issue) {
             return nothing;
         }
-        return html ` <div id="item-line">${source}</div> `;
+        return html ` <div id="item-line">${source} ${volume} ${issue}</div> `;
+    }
+    get volumeTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume, 'Volume');
+    }
+    get issueTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.issue, 'Issue');
     }
     get sourceTemplate() {
         var _a;
@@ -73,65 +91,44 @@ let TileList = class TileList extends LitElement {
         }
         return html `
       <div id="source">
-        <span class="label">Source: </span>
+        ${this.labelTemplate('Source')}
         ${this.searchLink('source', this.model.source)}
       </div>
     `;
     }
     get creatorTemplate() {
-        var _a, _b, _c;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator)) {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creators) || this.model.creators.length === 0) {
             return nothing;
         }
         return html `
-      <div id="creator">
-        <span class="label">By: </span>
-        ${DOMPurify.sanitize((_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.creator) !== null && _c !== void 0 ? _c : '')}
+      <div id="creator" class="metadata">
+        ${this.labelTemplate('By')}
+        ${join(map(this.model.creators, id => this.searchLink('creator', id)), html `, `)}
       </div>
     `;
     }
     get viewsTemplate() {
         var _a, _b;
-        return html `
-      <div id="views">
-        <span class="label">Views: </span>
-        ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
-      </div>
-    `;
+        return this.metadataTemplate(`${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}`, 'Views');
     }
     get ratingTemplate() {
-        var _a, _b;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.averageRating)) {
-            return nothing;
-        }
-        return html `
-      <div id="reviews">
-        <span class="label">Avg Rating: </span>
-        ${(_b = this.model) === null || _b === void 0 ? void 0 : _b.averageRating}
-      </div>
-    `;
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.averageRating, 'Avg Rating');
     }
     get reviewsTemplate() {
-        var _a, _b;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.commentCount)) {
-            return nothing;
-        }
-        return html `
-      <div id="reviews">
-        <span class="label">Reviews: </span>
-        ${(_b = this.model) === null || _b === void 0 ? void 0 : _b.commentCount}
-      </div>
-    `;
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.commentCount, 'Reviews');
     }
     get topicsTemplate() {
-        var _a, _b;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.subjects[0])) {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.subjects) || this.model.subjects.length === 0) {
             return nothing;
         }
         return html `
-      <div id="topics">
-        <span class="label">Topics: </span>
-        ${DOMPurify.sanitize((_b = this.model) === null || _b === void 0 ? void 0 : _b.subjects[0])}
+      <div id="topics" class="metadata">
+        ${this.labelTemplate('Topics')}
+        ${join(map(this.model.subjects, id => this.searchLink('subject', id)), html `, `)}
       </div>
     `;
     }
@@ -141,39 +138,49 @@ let TileList = class TileList extends LitElement {
             return nothing;
         }
         return html `
-      <div id="collections">
-        <span class="label">Collections: </span>
+      <div id="collections" class="metadata">
+        ${this.labelTemplate('Collections')}
         ${join(map(this.model.collections, id => this.detailsLink(id)), html `, `)}
       </div>
     `;
     }
     get descriptionTemplate() {
         var _a, _b;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.description)) {
+        return this.metadataTemplate(DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''), '', 'description');
+    }
+    // Utility functions
+    metadataTemplate(text, label = '', id) {
+        if (!text)
             return nothing;
-        }
-        const description = DOMPurify.sanitize(`${(_b = this.model) === null || _b === void 0 ? void 0 : _b.description}`);
-        return html ` <div id="description">${description}</div> `;
+        return html `
+      <div id=${ifDefined(id)} class="metadata">
+        ${this.labelTemplate(label)} ${text}
+      </div>
+    `;
+    }
+    labelTemplate(label) {
+        return html `${label
+            ? html `<span class="label">${label}: </span>`
+            : nothing}`;
     }
     searchLink(field, searchTerm) {
         if (!field || !searchTerm) {
             return nothing;
         }
         const query = encodeURIComponent(`${field}:"${searchTerm}"`);
-        // eslint-disable-next-line lit/no-invalid-html
-        return html `
-      <a href="${this.baseNavigationUrl}/search.php?query=${query}">
-        ${DOMPurify.sanitize(searchTerm)}
-      </a>
-    `;
+        // No whitespace after closing tag
+        return html ` <a href="${this.baseNavigationUrl}/search.php?query=${query}">
+      ${DOMPurify.sanitize(searchTerm)}</a
+    >`;
     }
-    detailsLink(identifier) {
+    detailsLink(identifier, text) {
         if (!identifier) {
             return nothing;
         }
+        const linkText = text !== null && text !== void 0 ? text : identifier;
         // No whitespace after closing tag
         return html ` <a href="${this.baseNavigationUrl}/details/${identifier}"
-      >${DOMPurify.sanitize(identifier)}</a
+      >${DOMPurify.sanitize(linkText)}</a
     >`;
     }
     /*
@@ -212,6 +219,10 @@ let TileList = class TileList extends LitElement {
         font-size: 14px;
       }
 
+      div a {
+        text-decoration: none;
+      }
+
       .label {
         font-weight: bold;
       }
@@ -269,18 +280,16 @@ let TileList = class TileList extends LitElement {
         text-decoration: none;
         font-size: 22px;
         font-weight: bold;
-        line-height: 30px;
+        /* align top of text with image */
+        line-height: 25px;
+        margin-top: -4px;
+        padding-bottom: 2px;
       }
 
-      #creator,
-      #date,
-      #collections,
-      #topics,
-      #item-line {
+      .metadata {
         line-height: 20px;
       }
 
-      #title,
       #creator,
       #topic,
       #source {
@@ -288,11 +297,6 @@ let TileList = class TileList extends LitElement {
         overflow: hidden;
       }
 
-      #title,
-      #creator {
-        white-space: nowrap;
-      }
-
       #icon {
         padding-top: 5px;
       }
@@ -322,7 +326,7 @@ let TileList = class TileList extends LitElement {
         column-gap: 5px;
       }
 
-      #list-line:hover #title {
+      div a:hover {
         text-decoration: underline;
       }
 
@@ -331,7 +335,6 @@ let TileList = class TileList extends LitElement {
         display: flex;
         flex-direction: row;
         gap: 10px;
-        line-height: 20px;
       }
     `;
     }

package/dist/src/tiles/list/tile-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-invalid-html */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"list-line-left\">\n          <div id=\"thumb\">${this.imgTemplate}</div>\n          ${this.iconLeftTemplate}\n        </div>\n        <div id=\"list-line-right\">\n          <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n          ${this.itemLineTemplate} ${this.creatorTemplate}\n          <div id=\"date\">\n            <span class=\"label\">Published:</span> ${formatDate(\n              this.date,\n              this.formatSize\n            )}\n          </div>\n          <div id=\"views-line\">\n            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n          </div>\n          ${this.topicsTemplate} ${this.collectionsTemplate}\n          ${this.descriptionTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get imgTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html` <img\n      src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=${this.model?.mediatype}\n    />`;\n  }\n\n  private get iconLeftTemplate() {\n    if (this.classSize !== 'desktop') {\n      return nothing;\n    }\n    return html`\n      <div id=\"icon-left\">\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .showText=${true}\n          style=\"--iconHeight: 20px; --iconWidth: 20px;text-align: center;\"\n        >\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    if (!source) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source}</div> `;\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\">\n        <span class=\"label\">Source: </span>\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    if (!this.model?.creator) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\">\n        <span class=\"label\">By: </span>\n        ${DOMPurify.sanitize(this.model?.creator ?? '')}\n      </div>\n    `;\n  }\n\n  private get viewsTemplate() {\n    return html`\n      <div id=\"views\">\n        <span class=\"label\">Views: </span>\n        ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n      </div>\n    `;\n  }\n\n  private get ratingTemplate() {\n    if (!this.model?.averageRating) {\n      return nothing;\n    }\n    return html`\n      <div id=\"reviews\">\n        <span class=\"label\">Avg Rating: </span>\n        ${this.model?.averageRating}\n      </div>\n    `;\n  }\n\n  private get reviewsTemplate() {\n    if (!this.model?.commentCount) {\n      return nothing;\n    }\n    return html`\n      <div id=\"reviews\">\n        <span class=\"label\">Reviews: </span>\n        ${this.model?.commentCount}\n      </div>\n    `;\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subjects[0]) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\">\n        <span class=\"label\">Topics: </span>\n        ${DOMPurify.sanitize(this.model?.subjects[0])}\n      </div>\n    `;\n  }\n\n  private get collectionsTemplate() {\n    if (!this.model?.collections) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\">\n        <span class=\"label\">Collections: </span>\n        ${join(\n          map(this.model.collections, id => this.detailsLink(id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    if (!this.model?.description) {\n      return nothing;\n    }\n    const description = DOMPurify.sanitize(`${this.model?.description}`);\n    return html` <div id=\"description\">${description}</div> `;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // eslint-disable-next-line lit/no-invalid-html\n    return html`\n      <a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n        ${DOMPurify.sanitize(searchTerm)}\n      </a>\n    `;\n  }\n\n  private detailsLink(identifier: string) {\n    if (!identifier) {\n      return nothing;\n    }\n    // No whitespace after closing tag\n    return html` <a href=\"${this.baseNavigationUrl}/details/${identifier}\"\n      >${DOMPurify.sanitize(identifier)}</a\n    >`;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      .mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      .desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n      /* fields */\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 90px;\n        height: 90px;\n      }\n\n      .desktop #thumb img {\n        width: 100px;\n        height: 100px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 45px;\n        -webkit-border-radius: 45px;\n        -moz-border-radius: 45px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 50px;\n        -webkit-border-radius: 50px;\n        -moz-border-radius: 50px;\n      }\n\n      #icon-left {\n        padding-top: 5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        line-height: 30px;\n      }\n\n      #creator,\n      #date,\n      #collections,\n      #topics,\n      #item-line {\n        line-height: 20px;\n      }\n\n      #title,\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #title,\n      #creator {\n        white-space: nowrap;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      mediatype-icon {\n        --iconHeight: 20px;\n      }\n\n      #description {\n        padding-top: 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: flex;\n        column-gap: 5px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      #item-line,\n      #views-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n        line-height: 20px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-invalid-html */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"list-line-left\">\n          <div id=\"thumb\">${this.imgTemplate}</div>\n          ${this.iconLeftTemplate}\n        </div>\n        <div id=\"list-line-right\">\n          <div id=\"title\">${this.titleTemplate}</div>\n          ${this.itemLineTemplate} ${this.creatorTemplate}\n          <div id=\"date\" class=\"metadata\">\n            <span class=\"label\">Published:</span> ${formatDate(\n              this.date,\n              this.formatSize\n            )}\n          </div>\n          <div id=\"views-line\">\n            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n          </div>\n          ${this.topicsTemplate} ${this.collectionsTemplate}\n          ${this.descriptionTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  // Display templates\n  private get imgTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html` <img\n      src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=${this.model?.mediatype}\n    />`;\n  }\n\n  private get iconLeftTemplate() {\n    if (this.classSize !== 'desktop') {\n      return nothing;\n    }\n    return html`\n      <div id=\"icon-left\">\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .showText=${true}\n          style=\"--iconHeight: 20px; --iconWidth: 20px;text-align: center;\"\n        >\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  private get titleTemplate() {\n    if (!this.model?.title) {\n      return nothing;\n    }\n    return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    const volume = this.volumeTemplate;\n    const issue = this.issueTemplate;\n    if (!source && !volume && !issue) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n  }\n\n  private get volumeTemplate() {\n    return this.metadataTemplate(this.model?.volume, 'Volume');\n  }\n\n  private get issueTemplate() {\n    return this.metadataTemplate(this.model?.issue, 'Issue');\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\">\n        ${this.labelTemplate('Source')}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    if (!this.model?.creators || this.model.creators.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\" class=\"metadata\">\n        ${this.labelTemplate('By')}\n        ${join(\n          map(this.model.creators, id => this.searchLink('creator', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get viewsTemplate() {\n    return this.metadataTemplate(\n      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n      'Views'\n    );\n  }\n\n  private get ratingTemplate() {\n    return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n  }\n\n  private get reviewsTemplate() {\n    return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subjects || this.model.subjects.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\" class=\"metadata\">\n        ${this.labelTemplate('Topics')}\n        ${join(\n          map(this.model.subjects, id => this.searchLink('subject', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get collectionsTemplate() {\n    if (!this.model?.collections) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\" class=\"metadata\">\n        ${this.labelTemplate('Collections')}\n        ${join(\n          map(this.model.collections, id => this.detailsLink(id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    return this.metadataTemplate(\n      DOMPurify.sanitize(this.model?.description ?? ''),\n      '',\n      'description'\n    );\n  }\n\n  // Utility functions\n  private metadataTemplate(text: any, label = '', id?: string) {\n    if (!text) return nothing;\n    return html`\n      <div id=${ifDefined(id)} class=\"metadata\">\n        ${this.labelTemplate(label)} ${text}\n      </div>\n    `;\n  }\n\n  private labelTemplate(label: string) {\n    return html`${label\n      ? html`<span class=\"label\">${label}: </span>`\n      : nothing}`;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // No whitespace after closing tag\n    return html` <a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n      ${DOMPurify.sanitize(searchTerm)}</a\n    >`;\n  }\n\n  private detailsLink(identifier: string, text?: string) {\n    if (!identifier) {\n      return nothing;\n    }\n    const linkText = text ?? identifier;\n    // No whitespace after closing tag\n    return html` <a href=\"${this.baseNavigationUrl}/details/${identifier}\"\n      >${DOMPurify.sanitize(linkText)}</a\n    >`;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      div a {\n        text-decoration: none;\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      .mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      .desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n      /* fields */\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 90px;\n        height: 90px;\n      }\n\n      .desktop #thumb img {\n        width: 100px;\n        height: 100px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 45px;\n        -webkit-border-radius: 45px;\n        -moz-border-radius: 45px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 50px;\n        -webkit-border-radius: 50px;\n        -moz-border-radius: 50px;\n      }\n\n      #icon-left {\n        padding-top: 5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        /* align top of text with image */\n        line-height: 25px;\n        margin-top: -4px;\n        padding-bottom: 2px;\n      }\n\n      .metadata {\n        line-height: 20px;\n      }\n\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      mediatype-icon {\n        --iconHeight: 20px;\n      }\n\n      #description {\n        padding-top: 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: flex;\n        column-gap: 5px;\n      }\n\n      div a:hover {\n        text-decoration: underline;\n      }\n\n      #item-line,\n      #views-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/tile-dispatcher.d.ts

@@ -1,6 +1,7 @@
 import { LitElement, PropertyValues } from 'lit';
 import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
 import { SortParam } from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { CollectionDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';
@@ -17,10 +18,12 @@ export declare class TileDispatcher extends LitElement implements SharedResizeOb
     currentHeight?: number;
     resizeObserver?: SharedResizeObserverInterface;
     sortParam?: SortParam;
+    collectionNameCache?: CollectionNameCacheInterface;
     private container;
     render(): import("lit-html").TemplateResult<1>;
     private get headerTemplate();
     private get tileTemplate();
+    private get linkTileTemplate();
     handleResize(entry: ResizeObserverEntry): void;
     disconnectedCallback(): void;
     private stopResizeObservation;

package/dist/src/tiles/tile-dispatcher.js

@@ -34,11 +34,16 @@ let TileDispatcher = class TileDispatcher extends LitElement {
     `;
     }
     get tileTemplate() {
-        var _a, _b;
         return html `
       ${this.showDeleteButton
             ? html `<button id="delete-button">X</button>`
             : nothing}
+      ${this.displayMode === 'list-detail' ? this.tile : this.linkTileTemplate}
+    `;
+    }
+    get linkTileTemplate() {
+        var _a, _b;
+        return html `
       <a
         href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
         title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
@@ -101,6 +106,7 @@ let TileDispatcher = class TileDispatcher extends LitElement {
               .baseNavigationUrl=${baseNavigationUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
+              .collectionNameCache=${this.collectionNameCache}
             ></item-tile>`;
                 }
             case 'list-compact':
@@ -176,6 +182,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], TileDispatcher.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "collectionNameCache", void 0);
 __decorate([
     query('#container')
 ], TileDispatcher.prototype, "container", void 0);

package/dist/src/tiles/tile-dispatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.displayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.showDeleteButton\n        ? html`<button id=\"delete-button\">X</button>`\n        : nothing}\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${baseNavigationUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.displayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.showDeleteButton\n        ? html`<button id=\"delete-button\">X</button>`\n        : nothing}\n      ${this.displayMode === 'list-detail' ? this.tile : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${baseNavigationUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}

package/dist/test/collection-name-cache.test.d.ts

@@ -0,0 +1 @@
+export {};