@internetarchive/collection-browser 3.3.1 → 3.3.3

package/dist/src/tiles/hover/tile-hover-pane.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import '@a11y/focus-trap';
 import { suppressedCollections } from '../../models';
 import '../list/tile-list';
 let TileHoverPane = class TileHoverPane extends LitElement {
@@ -10,36 +11,38 @@ let TileHoverPane = class TileHoverPane extends LitElement {
         this.suppressBlurring = false;
     }
     render() {
-        return html `
-      <div id="container">
-        ${this.headerTemplate}
-        <div id="hover-tile-list">
-          <tile-list
-            .model=${this.model}
-            .baseNavigationUrl=${this.baseNavigationUrl}
-            .baseImageUrl=${this.baseImageUrl}
-            .loggedIn=${this.loggedIn}
-            .suppressBlurring=${this.suppressBlurring}
-            .sortParam=${this.sortParam}
-            .collectionTitles=${this.collectionTitles}
-            .mobileBreakpoint=${this.mobileBreakpoint}
-            .currentWidth=${this.currentWidth}
-          ></tile-list>
-        </div>
-      </div>
+        return html `
+      <div id="container">
+        <focus-trap>
+          ${this.headerTemplate}
+          <div id="hover-tile-list">
+            <tile-list
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+              .baseImageUrl=${this.baseImageUrl}
+              .loggedIn=${this.loggedIn}
+              .suppressBlurring=${this.suppressBlurring}
+              .sortParam=${this.sortParam}
+              .collectionTitles=${this.collectionTitles}
+              .mobileBreakpoint=${this.mobileBreakpoint}
+              .currentWidth=${this.currentWidth}
+            ></tile-list>
+          </div>
+        </focus-trap>
+      </div>
     `;
     }
     get headerTemplate() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         // early return if item does't have parent collection
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.collections.length) === 0)
+        if (((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections) === null || _b === void 0 ? void 0 : _b.length) === 0)
             return nothing;
         let collectionTitle = '';
         let collectionIdentifier = '';
-        for (const collection of ((_b = this.model) === null || _b === void 0 ? void 0 : _b.collections) || []) {
+        for (const collection of ((_c = this.model) === null || _c === void 0 ? void 0 : _c.collections) || []) {
             if (!suppressedCollections[collection] &&
                 !collection.startsWith('fav-')) {
-                collectionTitle = (_d = (_c = this.collectionTitles) === null || _c === void 0 ? void 0 : _c.get(collection)) !== null && _d !== void 0 ? _d : collection;
+                collectionTitle = (_e = (_d = this.collectionTitles) === null || _d === void 0 ? void 0 : _d.get(collection)) !== null && _e !== void 0 ? _e : collection;
                 collectionIdentifier = collection;
                 break;
             }
@@ -48,103 +51,103 @@ let TileHoverPane = class TileHoverPane extends LitElement {
         // let's not render that
         if (!collectionIdentifier)
             return nothing;
-        return html `
-      <div id="list-line-header">
-        <a href="${this.baseNavigationUrl}/details/${collectionIdentifier}">
-          <img
-            src="${this.baseImageUrl}/services/img/${collectionIdentifier}"
-            alt=""
-          /><span>${collectionTitle}</span>
-        </a>
-      </div>
+        return html `
+      <div id="list-line-header">
+        <a href="${this.baseNavigationUrl}/details/${collectionIdentifier}">
+          <img
+            src="${this.baseImageUrl}/services/img/${collectionIdentifier}"
+            alt=""
+          /><span>${collectionTitle}</span>
+        </a>
+      </div>
     `;
     }
     static get styles() {
         const hoverPaneHeaderBGColor = css `var(--hoverPaneHeaderBGColor, #edf0ff)`;
         const iaLinkColor = css `var(--ia-theme-link-color, #4b64ff)`;
         const iaFontFamily = css `var(--ia-theme-base-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);`;
-        return css `
-      :host {
-        margin: 0;
-        border: 0;
-        padding: 0;
-        overflow: visible;
-        color: inherit;
-        background: none;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(8px);
-        transition:
-          opacity 0.1s ease-in,
-          transform 0.1s ease-in;
-        --image-width: auto;
-      }
-
-      :host(.visible) {
-        visibility: visible;
-      }
-
-      :host(.fade-in) {
-        opacity: 1;
-        transform: translateY(0);
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        :host {
-          transition-duration: 0.001s !important; /* Imperceptibly fast */
-        }
-      }
-
-      #container {
-        width: max-content;
-        max-width: min(45vw, 600px);
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);
-        background: white;
-      }
-
-      @media screen and (max-width: 600px) {
-        #container {
-          max-width: 80vw;
-        }
-      }
-
-      /* main tile-list container */
-      #hover-tile-list {
-        padding: 10px;
-      }
-
-      /* header on hover panel to show collection icon and title */
-      #list-line-header {
-        background: ${hoverPaneHeaderBGColor};
-      }
-      #list-line-header a {
-        display: flex;
-        align-items: center;
-        column-gap: 5px;
-        height: 3.4rem;
-        padding: 0 10px;
-        border-radius: 4px 4px 0 0;
-        width: fit-content;
-        font-size: 1.4rem;
-        color: ${iaLinkColor};
-        font-family: ${iaFontFamily};
-        text-decoration: none;
-        width: auto;
-      }
-      #list-line-header a span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      #list-line-header a:hover {
-        text-decoration: underline;
-      }
-      #list-line-header a img {
-        width: 30px;
-        max-height: 30px;
-      }
+        return css `
+      :host {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: visible;
+        color: inherit;
+        background: none;
+        visibility: hidden;
+        opacity: 0;
+        transform: translateY(8px);
+        transition:
+          opacity 0.1s ease-in,
+          transform 0.1s ease-in;
+        --image-width: auto;
+      }
+
+      :host(.visible) {
+        visibility: visible;
+      }
+
+      :host(.fade-in) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
+        }
+      }
+
+      #container {
+        width: max-content;
+        max-width: min(45vw, 600px);
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);
+        background: white;
+      }
+
+      @media screen and (max-width: 600px) {
+        #container {
+          max-width: 80vw;
+        }
+      }
+
+      /* main tile-list container */
+      #hover-tile-list {
+        padding: 10px;
+      }
+
+      /* header on hover panel to show collection icon and title */
+      #list-line-header {
+        background: ${hoverPaneHeaderBGColor};
+      }
+      #list-line-header a {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        height: 3.4rem;
+        padding: 0 10px;
+        border-radius: 4px 4px 0 0;
+        width: fit-content;
+        font-size: 1.4rem;
+        color: ${iaLinkColor};
+        font-family: ${iaFontFamily};
+        text-decoration: none;
+        width: auto;
+      }
+      #list-line-header a span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      #list-line-header a:hover {
+        text-decoration: underline;
+      }
+      #list-line-header a img {
+        width: 30px;
+        max-height: 30px;
+      }
     `;
     }
 };

package/dist/src/tiles/hover/tile-hover-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-hover-pane.js","sourceRoot":"","sources":["../../../../src/tiles/hover/tile-hover-pane.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SortParam } from '@internetarchive/search-service';\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { suppressedCollections, type TileModel } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport '../list/tile-list';\n\n@customElement('tile-hover-pane')\nexport class TileHoverPane extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn: boolean = false;\n\n  @property({ type: Boolean }) suppressBlurring: boolean = false;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  protected render(): TemplateResult {\n    return html`\n      <div id=\"container\">\n        ${this.headerTemplate}\n        <div id=\"hover-tile-list\">\n          <tile-list\n            .model=${this.model}\n            .baseNavigationUrl=${this.baseNavigationUrl}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .suppressBlurring=${this.suppressBlurring}\n            .sortParam=${this.sortParam}\n            .collectionTitles=${this.collectionTitles}\n            .mobileBreakpoint=${this.mobileBreakpoint}\n            .currentWidth=${this.currentWidth}\n          ></tile-list>\n        </div>\n      </div>\n    `;\n  }\n\n  private get headerTemplate(): TemplateResult | typeof nothing {\n    // early return if item does't have parent collection\n    if (this.model?.collections.length === 0) return nothing;\n\n    let collectionTitle = '';\n    let collectionIdentifier = '';\n\n    for (const collection of this.model?.collections || []) {\n      if (\n        !suppressedCollections[collection] &&\n        !collection.startsWith('fav-')\n      ) {\n        collectionTitle = this.collectionTitles?.get(collection) ?? collection;\n        collectionIdentifier = collection;\n        break;\n      }\n    }\n\n    // sometimes item does have collections but they are in suppressed or favorite list,\n    // let's not render that\n    if (!collectionIdentifier) return nothing;\n\n    return html`\n      <div id=\"list-line-header\">\n        <a href=\"${this.baseNavigationUrl}/details/${collectionIdentifier}\">\n          <img\n            src=\"${this.baseImageUrl}/services/img/${collectionIdentifier}\"\n            alt=\"\"\n          /><span>${collectionTitle}</span>\n        </a>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const hoverPaneHeaderBGColor = css`var(--hoverPaneHeaderBGColor, #edf0ff)`;\n    const iaLinkColor = css`var(--ia-theme-link-color, #4b64ff)`;\n    const iaFontFamily = css`var(--ia-theme-base-font-family, \"Helvetica Neue\", Helvetica, Arial, sans-serif);`;\n\n    return css`\n      :host {\n        margin: 0;\n        border: 0;\n        padding: 0;\n        overflow: visible;\n        color: inherit;\n        background: none;\n        visibility: hidden;\n        opacity: 0;\n        transform: translateY(8px);\n        transition:\n          opacity 0.1s ease-in,\n          transform 0.1s ease-in;\n        --image-width: auto;\n      }\n\n      :host(.visible) {\n        visibility: visible;\n      }\n\n      :host(.fade-in) {\n        opacity: 1;\n        transform: translateY(0);\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        :host {\n          transition-duration: 0.001s !important; /* Imperceptibly fast */\n        }\n      }\n\n      #container {\n        width: max-content;\n        max-width: min(45vw, 600px);\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);\n        background: white;\n      }\n\n      @media screen and (max-width: 600px) {\n        #container {\n          max-width: 80vw;\n        }\n      }\n\n      /* main tile-list container */\n      #hover-tile-list {\n        padding: 10px;\n      }\n\n      /* header on hover panel to show collection icon and title */\n      #list-line-header {\n        background: ${hoverPaneHeaderBGColor};\n      }\n      #list-line-header a {\n        display: flex;\n        align-items: center;\n        column-gap: 5px;\n        height: 3.4rem;\n        padding: 0 10px;\n        border-radius: 4px 4px 0 0;\n        width: fit-content;\n        font-size: 1.4rem;\n        color: ${iaLinkColor};\n        font-family: ${iaFontFamily};\n        text-decoration: none;\n        width: auto;\n      }\n      #list-line-header a span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      #list-line-header a:hover {\n        text-decoration: underline;\n      }\n      #list-line-header a img {\n        width: 30px;\n        max-height: 30px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-hover-pane.js","sourceRoot":"","sources":["../../../../src/tiles/hover/tile-hover-pane.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SortParam } from '@internetarchive/search-service';\r\nimport {\r\n  css,\r\n  CSSResultGroup,\r\n  html,\r\n  LitElement,\r\n  nothing,\r\n  TemplateResult,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport '@a11y/focus-trap';\r\n\r\nimport { suppressedCollections, type TileModel } from '../../models';\r\nimport type { CollectionTitles } from '../../data-source/models';\r\nimport '../list/tile-list';\r\n\r\n@customElement('tile-hover-pane')\r\nexport class TileHoverPane extends LitElement {\r\n  @property({ type: Object }) model?: TileModel;\r\n\r\n  @property({ type: String }) baseNavigationUrl?: string;\r\n\r\n  @property({ type: String }) baseImageUrl?: string;\r\n\r\n  @property({ type: Boolean }) loggedIn: boolean = false;\r\n\r\n  @property({ type: Boolean }) suppressBlurring: boolean = false;\r\n\r\n  @property({ type: Object }) sortParam?: SortParam;\r\n\r\n  @property({ type: Number }) mobileBreakpoint?: number;\r\n\r\n  @property({ type: Number }) currentWidth?: number;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  protected render(): TemplateResult {\r\n    return html`\r\n      <div id=\"container\">\r\n        <focus-trap>\r\n          ${this.headerTemplate}\r\n          <div id=\"hover-tile-list\">\r\n            <tile-list\r\n              .model=${this.model}\r\n              .baseNavigationUrl=${this.baseNavigationUrl}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .loggedIn=${this.loggedIn}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .sortParam=${this.sortParam}\r\n              .collectionTitles=${this.collectionTitles}\r\n              .mobileBreakpoint=${this.mobileBreakpoint}\r\n              .currentWidth=${this.currentWidth}\r\n            ></tile-list>\r\n          </div>\r\n        </focus-trap>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get headerTemplate(): TemplateResult | typeof nothing {\r\n    // early return if item does't have parent collection\r\n    if (this.model?.collections?.length === 0) return nothing;\r\n\r\n    let collectionTitle = '';\r\n    let collectionIdentifier = '';\r\n\r\n    for (const collection of this.model?.collections || []) {\r\n      if (\r\n        !suppressedCollections[collection] &&\r\n        !collection.startsWith('fav-')\r\n      ) {\r\n        collectionTitle = this.collectionTitles?.get(collection) ?? collection;\r\n        collectionIdentifier = collection;\r\n        break;\r\n      }\r\n    }\r\n\r\n    // sometimes item does have collections but they are in suppressed or favorite list,\r\n    // let's not render that\r\n    if (!collectionIdentifier) return nothing;\r\n\r\n    return html`\r\n      <div id=\"list-line-header\">\r\n        <a href=\"${this.baseNavigationUrl}/details/${collectionIdentifier}\">\r\n          <img\r\n            src=\"${this.baseImageUrl}/services/img/${collectionIdentifier}\"\r\n            alt=\"\"\r\n          /><span>${collectionTitle}</span>\r\n        </a>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const hoverPaneHeaderBGColor = css`var(--hoverPaneHeaderBGColor, #edf0ff)`;\r\n    const iaLinkColor = css`var(--ia-theme-link-color, #4b64ff)`;\r\n    const iaFontFamily = css`var(--ia-theme-base-font-family, \"Helvetica Neue\", Helvetica, Arial, sans-serif);`;\r\n\r\n    return css`\r\n      :host {\r\n        margin: 0;\r\n        border: 0;\r\n        padding: 0;\r\n        overflow: visible;\r\n        color: inherit;\r\n        background: none;\r\n        visibility: hidden;\r\n        opacity: 0;\r\n        transform: translateY(8px);\r\n        transition:\r\n          opacity 0.1s ease-in,\r\n          transform 0.1s ease-in;\r\n        --image-width: auto;\r\n      }\r\n\r\n      :host(.visible) {\r\n        visibility: visible;\r\n      }\r\n\r\n      :host(.fade-in) {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n      }\r\n\r\n      @media (prefers-reduced-motion: reduce) {\r\n        :host {\r\n          transition-duration: 0.001s !important; /* Imperceptibly fast */\r\n        }\r\n      }\r\n\r\n      #container {\r\n        width: max-content;\r\n        max-width: min(45vw, 600px);\r\n        border: 1px solid #ddd;\r\n        border-radius: 4px;\r\n        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);\r\n        background: white;\r\n      }\r\n\r\n      @media screen and (max-width: 600px) {\r\n        #container {\r\n          max-width: 80vw;\r\n        }\r\n      }\r\n\r\n      /* main tile-list container */\r\n      #hover-tile-list {\r\n        padding: 10px;\r\n      }\r\n\r\n      /* header on hover panel to show collection icon and title */\r\n      #list-line-header {\r\n        background: ${hoverPaneHeaderBGColor};\r\n      }\r\n      #list-line-header a {\r\n        display: flex;\r\n        align-items: center;\r\n        column-gap: 5px;\r\n        height: 3.4rem;\r\n        padding: 0 10px;\r\n        border-radius: 4px 4px 0 0;\r\n        width: fit-content;\r\n        font-size: 1.4rem;\r\n        color: ${iaLinkColor};\r\n        font-family: ${iaFontFamily};\r\n        text-decoration: none;\r\n        width: auto;\r\n      }\r\n      #list-line-header a span {\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n      }\r\n      #list-line-header a:hover {\r\n        text-decoration: underline;\r\n      }\r\n      #list-line-header a img {\r\n        width: 30px;\r\n        max-height: 30px;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

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

@@ -26,34 +26,34 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
      */
     render() {
         var _a, _b, _c, _d;
-        return html `
-      <div id="list-line" class="${this.classSize}">
-        <image-block
-          .model=${this.model}
-          .baseImageUrl=${this.baseImageUrl}
-          .isCompactTile=${true}
-          .isListTile=${true}
-          .viewSize=${this.classSize}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
-        >
-        </image-block>
-        <a href=${this.href} id="title"
-          >${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</a
-        >
-        <div id="creator">
+        return html `
+      <div id="list-line" class="${this.classSize}">
+        <image-block
+          .model=${this.model}
+          .baseImageUrl=${this.baseImageUrl}
+          .isCompactTile=${true}
+          .isListTile=${true}
+          .viewSize=${this.classSize}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
+        >
+        </image-block>
+        <a href=${this.href} id="title"
+          >${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</a
+        >
+        <div id="creator">
           ${((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'account'
             ? this.displayValueProvider.accountLabel
-            : this.creator}
-        </div>
-        <div id="date">
-          ${this.getFormattedDate(this.date, this.dateFormatSize)}
-        </div>
-        <div id="icon">
-          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
-        </div>
-        <div id="views">${formatCount((_d = this.views) !== null && _d !== void 0 ? _d : 0, this.formatSize)}</div>
-      </div>
+            : this.creator}
+        </div>
+        <div id="date">
+          ${this.getFormattedDate(this.date, this.dateFormatSize)}
+        </div>
+        <div id="icon">
+          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
+        </div>
+        <div id="views">${formatCount((_d = this.views) !== null && _d !== void 0 ? _d : 0, this.formatSize)}</div>
+      </div>
     `;
     }
     get href() {
@@ -140,79 +140,79 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
         return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field);
     }
     static get styles() {
-        return css `
-      html {
-        font-size: unset;
-      }
-
-      div {
-        font-size: 14px;
-      }
-
-      #list-line {
-        display: grid;
-        column-gap: 10px;
-        border-top: 1px solid #ddd;
-        align-items: center;
-        line-height: 20px;
-        padding-top: 5px;
-        margin-bottom: -5px;
-      }
-
-      #list-line.mobile {
-        grid-template-columns: 36px 3fr 2fr 68px 35px;
-      }
-
-      #list-line.desktop {
-        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;
-      }
-
-      #list-line:hover #title {
-        text-decoration: underline;
-      }
-
-      #title {
-        text-decoration: none;
-      }
-
-      #title:link {
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-
-      #title,
-      #creator {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      #icon {
-        margin-left: 2px;
-      }
-
-      #views {
-        text-align: right;
-        padding-right: 8px;
-      }
-
-      .mobile #views {
-        display: none;
-      }
-
-      .mobile tile-mediatype-icon {
-        --iconHeight: 14px;
-        --iconWidth: 14px;
-      }
-
-      .desktop #icon {
-        --iconHeight: 20px;
-        --iconWidth: 20px;
-      }
-
-      item-image {
-        --imgHeight: 100%;
-        --imgWidth: 100%;
-      }
+        return css `
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+      }
+
+      #list-line {
+        display: grid;
+        column-gap: 10px;
+        border-top: 1px solid #ddd;
+        align-items: center;
+        line-height: 20px;
+        padding-top: 5px;
+        margin-bottom: -5px;
+      }
+
+      #list-line.mobile {
+        grid-template-columns: 36px 3fr 2fr 68px 35px;
+      }
+
+      #list-line.desktop {
+        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;
+      }
+
+      #list-line:hover #title {
+        text-decoration: underline;
+      }
+
+      #title {
+        text-decoration: none;
+      }
+
+      #title:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+
+      #title,
+      #creator {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #icon {
+        margin-left: 2px;
+      }
+
+      #views {
+        text-align: right;
+        padding-right: 8px;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      .mobile tile-mediatype-icon {
+        --iconHeight: 14px;
+        --iconWidth: 14px;
+      }
+
+      .desktop #icon {
+        --iconHeight: 20px;
+        --iconWidth: 20px;
+      }
+
+      item-image {
+        --imgHeight: 100%;
+        --imgWidth: 100%;
+      }
     `;
     }
 };

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":"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","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../tile-mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - defaultSortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <image-block\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isCompactTile=${true}\n          .isListTile=${true}\n          .viewSize=${this.classSize}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n        >\n        </image-block>\n        <a href=${this.href} id=\"title\"\n          >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n        >\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? this.displayValueProvider.accountLabel\n            : this.creator}\n        </div>\n        <div id=\"date\">\n          ${this.getFormattedDate(this.date, this.dateFormatSize)}\n        </div>\n        <div id=\"icon\">\n          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>\n        </div>\n        <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n      </div>\n    `;\n  }\n\n  private get href(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    return this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      this.model.mediatype === 'collection',\n    );\n  }\n\n  private get creator(): string | typeof nothing {\n    return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\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    // Note on 'publicdate' vs. 'date':\n    // The search engine metadata uses 'publicdate' as the key for the date the item\n    // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n    // In contrast, the search engine metadata uses 'date' to refer to the actual\n    // publication date of the underlying media (\"Date Published\" in the UI).\n    // Refer to the full metadata schema for more info.\n    switch (this.effectiveSort?.field) {\n      case 'publicdate':\n        return this.model?.dateArchived;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.datePublished;\n    }\n  }\n\n  private get views(): number | undefined {\n    return this.effectiveSort?.field === 'week'\n      ? this.model?.weeklyViewCount // weekly views\n      : this.model?.viewCount; // all-time views\n  }\n\n  /**\n   * Returns the active sort param if one is set, or the default sort param otherwise.\n   */\n  private get effectiveSort(): SortParam | null {\n    return this.sortParam ?? this.defaultSortParam;\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get dateFormatSize(): DateFormat {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    if (\n      (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date\n      isFirstMillisecondOfUTCYear(this.model?.datePublished)\n    ) {\n      return 'year-only';\n    }\n    return this.formatSize;\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.effectiveSort?.field as string,\n    );\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      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n        padding-top: 5px;\n        margin-bottom: -5px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      #title {\n        text-decoration: none;\n      }\n\n      #title:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #icon {\n        margin-left: 2px;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      .mobile tile-mediatype-icon {\n        --iconHeight: 14px;\n        --iconWidth: 14px;\n      }\n\n      .desktop #icon {\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n      }\n\n      item-image {\n        --imgHeight: 100%;\n        --imgWidth: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit';\r\nimport { customElement } from 'lit/decorators.js';\r\nimport DOMPurify from 'dompurify';\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\n\r\nimport { formatCount, NumberFormat } from '../../utils/format-count';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\n\r\nimport '../image-block';\r\nimport '../tile-mediatype-icon';\r\n\r\n@customElement('tile-list-compact')\r\nexport class TileListCompact extends BaseTileComponent {\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  render() {\r\n    return html`\r\n      <div id=\"list-line\" class=\"${this.classSize}\">\r\n        <image-block\r\n          .model=${this.model}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .isCompactTile=${true}\r\n          .isListTile=${true}\r\n          .viewSize=${this.classSize}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n        >\r\n        </image-block>\r\n        <a href=${this.href} id=\"title\"\r\n          >${DOMPurify.sanitize(this.model?.title ?? '')}</a\r\n        >\r\n        <div id=\"creator\">\r\n          ${this.model?.mediatype === 'account'\r\n            ? this.displayValueProvider.accountLabel\r\n            : this.creator}\r\n        </div>\r\n        <div id=\"date\">\r\n          ${this.getFormattedDate(this.date, this.dateFormatSize)}\r\n        </div>\r\n        <div id=\"icon\">\r\n          <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>\r\n        </div>\r\n        <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get href(): string | typeof nothing {\r\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n      return nothing;\r\n\r\n    // Use the server-specified href if available.\r\n    // Otherwise, construct a details page URL from the item identifier.\r\n    if (this.model.href) {\r\n      return `${this.baseNavigationUrl}${this.model.href}`;\r\n    }\r\n\r\n    return this.displayValueProvider.itemPageUrl(\r\n      this.model.identifier,\r\n      this.model.mediatype === 'collection',\r\n    );\r\n  }\r\n\r\n  private get creator(): string | typeof nothing {\r\n    return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\r\n  }\r\n\r\n  /*\r\n   * TODO: fix field names to match model in src/collection-browser.ts\r\n   * private get dateSortSelector()\r\n   * @see src/models.ts\r\n   */\r\n  private get date(): Date | undefined {\r\n    // Note on 'publicdate' vs. 'date':\r\n    // The search engine metadata uses 'publicdate' as the key for the date the item\r\n    // was created on archive.org, which in the UI is referred to as \"Date Archived\".\r\n    // In contrast, the search engine metadata uses 'date' to refer to the actual\r\n    // publication date of the underlying media (\"Date Published\" in the UI).\r\n    // Refer to the full metadata schema for more info.\r\n    switch (this.effectiveSort?.field) {\r\n      case 'publicdate':\r\n        return this.model?.dateArchived;\r\n      case 'reviewdate':\r\n        return this.model?.dateReviewed;\r\n      case 'addeddate':\r\n        return this.model?.dateAdded;\r\n      default:\r\n        return this.model?.datePublished;\r\n    }\r\n  }\r\n\r\n  private get views(): number | undefined {\r\n    return this.effectiveSort?.field === 'week'\r\n      ? this.model?.weeklyViewCount // weekly views\r\n      : this.model?.viewCount; // all-time views\r\n  }\r\n\r\n  /**\r\n   * Returns the active sort param if one is set, or the default sort param otherwise.\r\n   */\r\n  private get effectiveSort(): SortParam | null {\r\n    return this.sortParam ?? this.defaultSortParam;\r\n  }\r\n\r\n  private get classSize(): string {\r\n    if (\r\n      this.mobileBreakpoint &&\r\n      this.currentWidth &&\r\n      this.currentWidth < this.mobileBreakpoint\r\n    ) {\r\n      return 'mobile';\r\n    }\r\n    return 'desktop';\r\n  }\r\n\r\n  private get dateFormatSize(): DateFormat {\r\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\r\n    // This is because items with only a year for their publication date are normalized to\r\n    // Jan 1 at midnight timestamps in the search engine documents.\r\n    if (\r\n      (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date\r\n      isFirstMillisecondOfUTCYear(this.model?.datePublished)\r\n    ) {\r\n      return 'year-only';\r\n    }\r\n    return this.formatSize;\r\n  }\r\n\r\n  private get formatSize(): NumberFormat {\r\n    if (\r\n      this.mobileBreakpoint &&\r\n      this.currentWidth &&\r\n      this.currentWidth < this.mobileBreakpoint\r\n    ) {\r\n      return 'short';\r\n    }\r\n    return 'long';\r\n  }\r\n\r\n  private get isSortedByDate(): boolean {\r\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n      this.effectiveSort?.field as string,\r\n    );\r\n  }\r\n\r\n  static get styles() {\r\n    return css`\r\n      html {\r\n        font-size: unset;\r\n      }\r\n\r\n      div {\r\n        font-size: 14px;\r\n      }\r\n\r\n      #list-line {\r\n        display: grid;\r\n        column-gap: 10px;\r\n        border-top: 1px solid #ddd;\r\n        align-items: center;\r\n        line-height: 20px;\r\n        padding-top: 5px;\r\n        margin-bottom: -5px;\r\n      }\r\n\r\n      #list-line.mobile {\r\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\r\n      }\r\n\r\n      #list-line.desktop {\r\n        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\r\n      }\r\n\r\n      #list-line:hover #title {\r\n        text-decoration: underline;\r\n      }\r\n\r\n      #title {\r\n        text-decoration: none;\r\n      }\r\n\r\n      #title:link {\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n\r\n      #title,\r\n      #creator {\r\n        text-overflow: ellipsis;\r\n        overflow: hidden;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      #icon {\r\n        margin-left: 2px;\r\n      }\r\n\r\n      #views {\r\n        text-align: right;\r\n        padding-right: 8px;\r\n      }\r\n\r\n      .mobile #views {\r\n        display: none;\r\n      }\r\n\r\n      .mobile tile-mediatype-icon {\r\n        --iconHeight: 14px;\r\n        --iconWidth: 14px;\r\n      }\r\n\r\n      .desktop #icon {\r\n        --iconHeight: 20px;\r\n        --iconWidth: 20px;\r\n      }\r\n\r\n      item-image {\r\n        --imgHeight: 100%;\r\n        --imgWidth: 100%;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}