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

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

@@ -1,30 +1,43 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import DOMPurify from 'dompurify';
 import { formatCount } from '../../utils/format-count';
 import { formatDate } from '../../utils/format-date';
 import '../../mediatype-icon';
-/*
-at 750 creator, title trimmed
-at 530
-*/
 let TileListCompact = class TileListCompact extends LitElement {
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         return html `
-      <div id="list-compact" class="${this.classSize}">
+      <div id="list-line" class="${this.classSize}">
+        <div id="thumb">${this.imageTemplate}</div>
+        <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="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="creator">${DOMPurify.sanitize((_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.creator) !== null && _d !== void 0 ? _d : '')}</div>
         <div id="views">
-          ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
+          ${formatCount((_f = (_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount) !== null && _f !== void 0 ? _f : 0, this.formatSize)}
         </div>
-        <div id="title">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</div>
-        <div id="date">${formatDate(this.date, this.formatSize)}</div>
-        <div id="creator">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.creator}</div>
         <div id="icon">
-          <mediatype-icon .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}></mediatype-icon>
+          <mediatype-icon
+            .mediatype=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.mediatype}
+            style="--iconHeight: 20px; --iconWidth: 20px;"
+          >
+          </mediatype-icon>
         </div>
       </div>
     `;
     }
+    get imageTemplate() {
+        var _a, _b;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return nothing;
+        }
+        return html ` <img
+      src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
+      alt="${this.model.identifier}"
+      class="${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}"
+    />`;
+    }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
      * private get dateSortSelector()
@@ -53,31 +66,51 @@ let TileListCompact = class TileListCompact extends LitElement {
     }
     static get styles() {
         return css `
-      .mobile div {
-        font-size: 11px;
+      html {
+        font-size: unset;
       }
-      .desktop div {
+
+      div {
         font-size: 14px;
       }
 
-      #list-compact {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        border-top: 1px solid #ddd !important;
-        padding-top: 5px;
-        align-items: center;
+      /* fields */
+
+      #thumb {
+        padding-left: 6px;
       }
 
-      #list-compact.mobile {
-        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+      #thumb img {
+        object-fit: cover;
+        display: block;
       }
-      #list-compact.desktop {
-        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+
+      .mobile #thumb img {
+        width: 30px;
+        height: 30px;
       }
 
-      #list-compact:hover #title {
-        text-decoration: underline;
+      .desktop #thumb img {
+        width: 45px;
+        height: 45px;
+      }
+
+      #thumb img.collection {
+        border-radius: 8px;
+        -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
+      }
+
+      .mobile #thumb img.account {
+        border-radius: 15px;
+        -webkit-border-radius: 15px;
+        -moz-border-radius: 15px;
+      }
+
+      .desktop #thumb img.account {
+        border-radius: 22.5px;
+        -webkit-border-radius: 22.5px;
+        -moz-border-radius: 22.5px;
       }
 
       #title {
@@ -92,14 +125,72 @@ let TileListCompact = class TileListCompact extends LitElement {
         white-space: nowrap;
       }
 
-      #views,
-      #date {
+      #views {
         text-align: right;
-        color: #767676;
       }
+
+      .mobile #views {
+        display: none;
+      }
+
       #icon {
+        height: 20px;
         padding-right: 6px;
       }
+
+      .mobile #icon {
+        height: 14px;
+      }
+
+      .desktop #icon {
+        height: 20px;
+      }
+
+      /* list-line */
+
+      #list-line {
+        display: grid;
+        column-gap: 10px;
+        border-top: 1px solid #ddd;
+        align-items: center;
+        line-height: 20px;
+      }
+
+      #list-line.mobile {
+        grid-template-columns: 30px 3fr 29px 2fr 19px;
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+
+      #list-line.desktop {
+        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+
+      /*
+      #title {
+        flex-grow: 3;
+        flex-shrink: 3;
+        flex-basis: 0;
+      }
+
+      #creator {
+        flex-grow: 2;
+        flex-shrink: 2;
+        flex-basis: 0;
+      }
+
+      #date {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 0;
+      }
+    */
+
+      #list-line:hover #title {
+        text-decoration: underline;
+      }
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,sBAAsB,CAAC;AAE9B;;;EAGE;AAGF,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAW7C,MAAM;;QACJ,OAAO,IAAI,CAAA;sCACuB,IAAI,CAAC,SAAS;;YAExC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;0BAE1C,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;yBAClB,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;4BACnC,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO;;uCAER,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;KAGvD,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;;QACnB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAY,UAAU;;QACpB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDT,CAAC;IACJ,CAAC;CACF,CAAA;AAvG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAuB;AATvC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAwG3B;SAxGY,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n/*\nat 750 creator, title trimmed\nat 530\n*/\n\n@customElement('tile-list-compact')\nexport class TileListCompact 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-compact\" class=\"${this.classSize}\">\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"title\">${this.model?.title}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${this.model?.creator}</div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\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      .mobile div {\n        font-size: 11px;\n      }\n      .desktop div {\n        font-size: 14px;\n      }\n\n      #list-compact {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        border-top: 1px solid #ddd !important;\n        padding-top: 5px;\n        align-items: center;\n      }\n\n      #list-compact.mobile {\n        grid-template-columns: 33px 3fr 30px 2fr 29.5px;\n      }\n      #list-compact.desktop {\n        grid-template-columns: 60px 3fr 90px 2fr 29.5px;\n      }\n\n      #list-compact:hover #title {\n        text-decoration: underline;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views,\n      #date {\n        text-align: right;\n        color: #767676;\n      }\n      #icon {\n        padding-right: 6px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,sBAAsB,CAAC;AAG9B,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAW7C,MAAM;;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,SAAS;0BACvB,IAAI,CAAC,aAAa;0BAClB,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,mCAAI,EAAE,CAAC;yBAC5C,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;4BACnC,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,mCAAI,EAAE,CAAC;;YAE7D,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;;;yBAI3C,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;;;;KAMzC,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;;QACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAA,EAAE;YAC3B,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;aACF,IAAI,CAAC,iBAAiB,iBAAiB,IAAI,CAAC,KAAK,CAAC,UAAU;aAC5D,IAAI,CAAC,KAAK,CAAC,UAAU;eACnB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;OAC7B,CAAC;IACN,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;;QACnB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAY,UAAU;;QACpB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8HT,CAAC;IACJ,CAAC;CACF,CAAA;AArM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAuB;AATvC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAsM3B;SAtMY,eAAe","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\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-compact')\nexport class TileListCompact 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=\"thumb\">${this.imageTemplate}</div>\n        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${DOMPurify.sanitize(this.model?.creator ?? '')}</div>\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"icon\">\n          <mediatype-icon\n            .mediatype=${this.model?.mediatype}\n            style=\"--iconHeight: 20px; --iconWidth: 20px;\"\n          >\n          </mediatype-icon>\n        </div>\n      </div>\n    `;\n  }\n\n  private get imageTemplate() {\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  /*\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      /* fields */\n\n      #thumb {\n        padding-left: 6px;\n      }\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 30px;\n        height: 30px;\n      }\n\n      .desktop #thumb img {\n        width: 45px;\n        height: 45px;\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: 15px;\n        -webkit-border-radius: 15px;\n        -moz-border-radius: 15px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 22.5px;\n        -webkit-border-radius: 22.5px;\n        -moz-border-radius: 22.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views {\n        text-align: right;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #icon {\n        height: 20px;\n        padding-right: 6px;\n      }\n\n      .mobile #icon {\n        height: 14px;\n      }\n\n      .desktop #icon {\n        height: 20px;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 30px 3fr 29px 2fr 19px;\n        padding-top: 2px;\n        padding-bottom: 2px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      /*\n      #title {\n        flex-grow: 3;\n        flex-shrink: 3;\n        flex-basis: 0;\n      }\n\n      #creator {\n        flex-grow: 2;\n        flex-shrink: 2;\n        flex-basis: 0;\n      }\n\n      #date {\n        flex-grow: 1;\n        flex-shrink: 1;\n        flex-basis: 0;\n      }\n    */\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,17 +1,7 @@
 import { LitElement } from 'lit';
-import { SortParam } from '@internetarchive/search-service';
 import { TileModel } from '../../models';
-import '../../mediatype-icon';
 export declare class TileListDetail extends LitElement {
     model?: TileModel;
-    baseNavigationUrl?: string;
-    currentWidth?: number;
-    currentHeight?: number;
-    sortParam?: SortParam;
     render(): import("lit-html").TemplateResult<1>;
-    private description;
-    private get date();
-    private get classSize();
-    private get formatSize();
     static get styles(): import("lit").CSSResult;
 }

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

@@ -1,160 +1,19 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { formatCount } from '../../utils/format-count';
-import { formatDate } from '../../utils/format-date';
-import '../../mediatype-icon';
-/*
-at 750 creator, title trimmed
-at 530
-*/
 let TileListDetail = class TileListDetail extends LitElement {
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         return html `
-      <div id="list-detail-1" class="${this.classSize}">
-        <div id="views">
-          ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
-        </div>
-        <div id="title">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</div>
-        <div id="date">${formatDate(this.date, this.formatSize)}</div>
-        <div id="creator">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.creator}</div>
-        <div id="icon">
-          <mediatype-icon .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}></mediatype-icon>
-        </div>
-      </div>
-      <div id="list-detail-2" class="${this.classSize}">
-        <div></div>
-        <div id="details">${this.description()}</div>
-        <div></div>
-      </div>
+      <h1>${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
+      <h2>${(_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished) === null || _c === void 0 ? void 0 : _c.toDateString()}</h2>
+      <p>${(_d = this.model) === null || _d === void 0 ? void 0 : _d.description}</p>
     `;
     }
-    description() {
-        var _a, _b;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.description) {
-            return html `
-        <div id="description">
-          <div id="description">${(_b = this.model) === null || _b === void 0 ? void 0 : _b.description}</div>
-        </div>
-      `;
-        }
-        return html ``;
-    }
-    /*
-     * TODO: fix field names to match model in src/collection-browser.ts
-     * private get dateSortSelector()
-     * @see src/models.ts
-     */
-    get date() {
-        var _a, _b, _c, _d, _e;
-        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
-            case 'date':
-                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
-            case 'reviewdate':
-                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
-            case 'addeddate':
-                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
-            default:
-                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived; // publicdate
-        }
-    }
-    get classSize() {
-        var _a;
-        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'mobile' : 'desktop';
-    }
-    get formatSize() {
-        var _a;
-        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'short' : 'long';
-    }
     static get styles() {
         return css `
-      .mobile div {
-        font-size: 11px;
-      }
-      .desktop div {
-        font-size: 14px;
-      }
-
-      #list-detail-1 {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        border-top: 1px solid #ddd !important;
-        padding-top: 5px;
-        align-items: center;
-      }
-
-      #list-detail-1.mobile {
-        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
-      }
-      #list-detail-1.desktop {
-        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
-      }
-
-      #list-detail-1:hover #title {
-        text-decoration: underline;
-      }
-
-      #list-detail-2 {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        align-items: center;
-      }
-
-      #list-detail-2.mobile {
-        grid-template-columns: 33px auto 29.5px;
-      }
-
-      #list-detail-2.desktop {
-        grid-template-columns: 60px auto 29.5px;
-      }
-
-      #title {
-        color: #4b64ff;
-        text-decoration: none;
-      }
-
-      /*
-    #details {
-      /*
-      max-height:3rem;
-      overflow:hidden;
-    }
-*/
-      #description {
-        overflow: hidden;
-        font-size: 12px;
-        overflow-y: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        word-break: break-word;
-        -webkit-line-clamp: 3; /* number of lines to show */
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-        text-align: left;
-      }
-
-      #title,
-      #creator #description {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      #views,
-      #date {
-        text-align: right;
-      }
-
-      #views,
-      #details {
-        color: #767676;
-      }
-      #icon {
-        padding-right: 6px;
+      h1 {
+        margin-top: 0;
       }
     `;
     }
@@ -162,18 +21,6 @@ let TileListDetail = class TileListDetail extends LitElement {
 __decorate([
     property({ type: Object })
 ], TileListDetail.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], TileListDetail.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: Number })
-], TileListDetail.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Number })
-], TileListDetail.prototype, "currentHeight", void 0);
-__decorate([
-    property({ type: Object })
-], TileListDetail.prototype, "sortParam", void 0);
 TileListDetail = __decorate([
     customElement('tile-list-detail')
 ], TileListDetail);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list-detail.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-detail.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,sBAAsB,CAAC;AAE9B;;;EAGE;AAGF,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAW5C,MAAM;;QACJ,OAAO,IAAI,CAAA;uCACwB,IAAI,CAAC,SAAS;;YAEzC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;0BAE1C,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;yBAClB,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;4BACnC,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO;;uCAER,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;uCAGrB,IAAI,CAAC,SAAS;;4BAEzB,IAAI,CAAC,WAAW,EAAE;;;KAGzC,CAAC;IACJ,CAAC;IAEO,WAAW;;QACjB,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE;YAC3B,OAAO,IAAI,CAAA;;kCAEiB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;OAElD,CAAC;SACH;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;;QACnB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAY,UAAU;;QACpB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFT,CAAC;IACJ,CAAC;CACF,CAAA;AA/J6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AATvC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAgK1B;SAhKY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n/*\nat 750 creator, title trimmed\nat 530\n*/\n\n@customElement('tile-list-detail')\nexport class TileListDetail 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-detail-1\" class=\"${this.classSize}\">\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"title\">${this.model?.title}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${this.model?.creator}</div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n      <div id=\"list-detail-2\" class=\"${this.classSize}\">\n        <div></div>\n        <div id=\"details\">${this.description()}</div>\n        <div></div>\n      </div>\n    `;\n  }\n\n  private description() {\n    if (this.model?.description) {\n      return html`\n        <div id=\"description\">\n          <div id=\"description\">${this.model?.description}</div>\n        </div>\n      `;\n    }\n    return html``;\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      .mobile div {\n        font-size: 11px;\n      }\n      .desktop div {\n        font-size: 14px;\n      }\n\n      #list-detail-1 {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        border-top: 1px solid #ddd !important;\n        padding-top: 5px;\n        align-items: center;\n      }\n\n      #list-detail-1.mobile {\n        grid-template-columns: 33px 3fr 30px 2fr 29.5px;\n      }\n      #list-detail-1.desktop {\n        grid-template-columns: 60px 3fr 90px 2fr 29.5px;\n      }\n\n      #list-detail-1:hover #title {\n        text-decoration: underline;\n      }\n\n      #list-detail-2 {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        align-items: center;\n      }\n\n      #list-detail-2.mobile {\n        grid-template-columns: 33px auto 29.5px;\n      }\n\n      #list-detail-2.desktop {\n        grid-template-columns: 60px auto 29.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      /*\n    #details {\n      /*\n      max-height:3rem;\n      overflow:hidden;\n    }\n*/\n      #description {\n        overflow: hidden;\n        font-size: 12px;\n        overflow-y: 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      #title,\n      #creator #description {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views,\n      #date {\n        text-align: right;\n      }\n\n      #views,\n      #details {\n        color: #767676;\n      }\n      #icon {\n        padding-right: 6px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-detail.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-detail.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAG5C,MAAM;;QACJ,OAAO,IAAI,CAAA;YACH,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;YACjB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,0CAAE,YAAY,EAAE;WAC1C,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;KAC7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;CACF,CAAA;AAjB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AADnC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkB1B;SAlBY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\n@customElement('tile-list-detail')\nexport class TileListDetail extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <h1>${this.model?.title}</h1>\n      <h2>${this.model?.datePublished?.toDateString()}</h2>\n      <p>${this.model?.description}</p>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        margin-top: 0;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { SortParam } from '@internetarchive/search-service';
-import { CollectionDisplayMode, TileModel } from '../../models';
+import { TileModel } from '../../models';
 import '../../mediatype-icon';
 export declare class TileList extends LitElement {
     model?: TileModel;
@@ -8,12 +8,25 @@ export declare class TileList extends LitElement {
     currentWidth?: number;
     currentHeight?: number;
     sortParam?: SortParam;
-    displayMode: CollectionDisplayMode;
     render(): import("lit-html").TemplateResult<1>;
-    private detail;
-    private description;
-    private topic;
-    private source;
+    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();
+    private get ratingTemplate();
+    private get reviewsTemplate();
+    private get topicsTemplate();
+    private get collectionsTemplate();
+    private get descriptionTemplate();
+    private metadataTemplate;
+    private labelTemplate;
+    private searchLink;
+    private detailsLink;
     private get date();
     private get classSize();
     private get formatSize();