@internetarchive/collection-browser 3.4.1-alpha-webdev7761.2 → 3.4.1-alpha-webdev7761.4

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';\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"]}
+{"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 '@a11y/focus-trap';\n\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        <focus-trap>\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        </focus-trap>\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"]}

package/dist/src/tiles/image-block.js

@@ -14,8 +14,7 @@ let ImageBlock = class ImageBlock extends LitElement {
         this.viewSize = 'desktop';
     }
     render() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier))
+        if (!this.model?.identifier)
             return nothing;
         return html `
       <div class=${classMap(this.baseClass)}>
@@ -34,14 +33,13 @@ let ImageBlock = class ImageBlock extends LitElement {
     `;
     }
     get baseClass() {
-        var _a, _b;
         return {
             container: true,
             list: this.isListTile && !this.isCompactTile,
             'list-compact': this.isListTile && this.isCompactTile,
-            collection: ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'collection', // fill the image in container
+            collection: this.model?.mediatype === 'collection', // fill the image in container
             [this.viewSize]: true,
-            'search-image': ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'search',
+            'search-image': this.model?.mediatype === 'search',
         };
     }
     get iconOverlayTemplate() {
@@ -69,16 +67,15 @@ let ImageBlock = class ImageBlock extends LitElement {
         return html ` <text-overlay .type=${this.overlayType}></text-overlay> `;
     }
     get overlayType() {
-        var _a, _b;
         if (this.suppressBlurring)
             return undefined;
         // Prioritize showing the login-required overlay if needed.
         // Otherwise, if a content warning is required, show that overlay instead.
         // If neither flag is present, no overlay should be shown.
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !this.loggedIn) {
+        if (this.model?.loginRequired && !this.loggedIn) {
             return 'login-required';
         }
-        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
+        if (this.model?.contentWarning) {
             return 'content-warning';
         }
         return undefined;

package/dist/src/tiles/image-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel, TileOverlayType } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) suppressBlurring = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      container: true,\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      collection: this.model?.mediatype === 'collection', // fill the image in container\n      [this.viewSize]: true,\n      'search-image': this.model?.mediatype === 'search',\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    // Only list tiles use the icon overlay\n    if (!this.isListTile) return nothing;\n\n    const { overlayType } = this;\n    if (!overlayType) return nothing;\n\n    return html`\n      <icon-overlay\n        class=${this.isCompactTile ? 'list-compact' : 'list-detail'}\n        .type=${this.overlayType}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    // List tiles do not require the text overlay\n    if (this.isListTile) return nothing;\n\n    const { overlayType } = this;\n    if (!overlayType) return nothing;\n\n    return html` <text-overlay .type=${this.overlayType}></text-overlay> `;\n  }\n\n  private get overlayType(): TileOverlayType | undefined {\n    if (this.suppressBlurring) return undefined;\n\n    // Prioritize showing the login-required overlay if needed.\n    // Otherwise, if a content warning is required, show that overlay instead.\n    // If neither flag is present, no overlay should be shown.\n    if (this.model?.loginRequired && !this.loggedIn) {\n      return 'login-required';\n    }\n    if (this.model?.contentWarning) {\n      return 'content-warning';\n    }\n    return undefined;\n  }\n\n  static get styles(): CSSResultGroup {\n    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;\n\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        background-color: ${imageBlockBackgroundColor};\n        border-radius: 4px;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        position: initial;\n        padding: 5px;\n        border-radius: 4px 4px 0 0;\n      }\n\n      .collection.grid,\n      .grid.search-image {\n        display: block;\n      }\n\n      /** tile-list view */\n      .list {\n        border-radius: 0;\n        background-color: var(--imageBlockListBackgroundColor, #ebebee);\n        box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);\n      }\n\n      .list.desktop {\n        width: 100px;\n        max-width: 100%;\n        height: 100px;\n        max-width: 100%;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: var(--image-width, 90px);\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .container.list-compact {\n        display: block;\n        text-align: center;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel, TileOverlayType } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) suppressBlurring = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          .suppressBlurring=${this.suppressBlurring}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      container: true,\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      collection: this.model?.mediatype === 'collection', // fill the image in container\n      [this.viewSize]: true,\n      'search-image': this.model?.mediatype === 'search',\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    // Only list tiles use the icon overlay\n    if (!this.isListTile) return nothing;\n\n    const { overlayType } = this;\n    if (!overlayType) return nothing;\n\n    return html`\n      <icon-overlay\n        class=${this.isCompactTile ? 'list-compact' : 'list-detail'}\n        .type=${this.overlayType}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    // List tiles do not require the text overlay\n    if (this.isListTile) return nothing;\n\n    const { overlayType } = this;\n    if (!overlayType) return nothing;\n\n    return html` <text-overlay .type=${this.overlayType}></text-overlay> `;\n  }\n\n  private get overlayType(): TileOverlayType | undefined {\n    if (this.suppressBlurring) return undefined;\n\n    // Prioritize showing the login-required overlay if needed.\n    // Otherwise, if a content warning is required, show that overlay instead.\n    // If neither flag is present, no overlay should be shown.\n    if (this.model?.loginRequired && !this.loggedIn) {\n      return 'login-required';\n    }\n    if (this.model?.contentWarning) {\n      return 'content-warning';\n    }\n    return undefined;\n  }\n\n  static get styles(): CSSResultGroup {\n    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;\n\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        background-color: ${imageBlockBackgroundColor};\n        border-radius: 4px;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        position: initial;\n        padding: 5px;\n        border-radius: 4px 4px 0 0;\n      }\n\n      .collection.grid,\n      .grid.search-image {\n        display: block;\n      }\n\n      /** tile-list view */\n      .list {\n        border-radius: 0;\n        background-color: var(--imageBlockListBackgroundColor, #ebebee);\n        box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);\n      }\n\n      .list.desktop {\n        width: 100px;\n        max-width: 100%;\n        height: 100px;\n        max-width: 100%;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: var(--image-width, 90px);\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .container.list-compact {\n        display: block;\n        text-align: center;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/item-image.js

@@ -20,8 +20,7 @@ let ItemImage = class ItemImage extends LitElement {
     `;
     }
     get imageTemplate() {
-        var _a;
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search') {
+        if (this.model?.mediatype === 'search') {
             return html `${searchIcon}`;
         }
         return html `
@@ -38,11 +37,10 @@ let ItemImage = class ItemImage extends LitElement {
      * Helpers
      */
     get imageSrc() {
-        var _a, _b, _c;
         if (this.isNotFound)
             return this.notFoundSrc;
         // Use the correct image for web capture tiles, if possible
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) && this.model.identifier) {
+        if (this.model?.captureDates && this.model.identifier) {
             try {
                 const url = new URL(this.model.identifier);
                 const domain = encodeURIComponent(url.hostname);
@@ -50,15 +48,15 @@ let ItemImage = class ItemImage extends LitElement {
                     ? `https://web.archive.org/thumb/${domain}?generate=1`
                     : nothing;
             }
-            catch (_d) {
+            catch {
                 return `${this.baseImageUrl}/images/notfound.png`;
             }
         }
         // Use the thumbnail URL specified in the model if it exists
-        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.thumbnailUrl)
+        if (this.model?.thumbnailUrl)
             return this.model.thumbnailUrl;
         // Don't try to load invalid image URLs
-        return this.baseImageUrl && ((_c = this.model) === null || _c === void 0 ? void 0 : _c.identifier)
+        return this.baseImageUrl && this.model?.identifier
             ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
             : nothing;
     }
@@ -68,8 +66,7 @@ let ItemImage = class ItemImage extends LitElement {
             : nothing;
     }
     get hashBasedGradient() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+        if (!this.model?.identifier) {
             return 'waveform-grad0';
         }
         const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
@@ -84,17 +81,15 @@ let ItemImage = class ItemImage extends LitElement {
      * Classes
      */
     get itemBaseClass() {
-        var _a;
         return {
             'drop-shadow': true,
             'list-box': this.isListTile,
-            'search-image': ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search',
+            'search-image': this.model?.mediatype === 'search',
             [this.hashBasedGradient]: this.isWaveform,
         };
     }
     get itemImageClass() {
-        var _a, _b, _c;
-        const hasSensitiveContent = !!(((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || ((_b = this.model) === null || _b === void 0 ? void 0 : _b.loginRequired));
+        const hasSensitiveContent = !!(this.model?.contentWarning || this.model?.loginRequired);
         const shouldBlur = hasSensitiveContent && !this.suppressBlurring;
         return {
             contain: !this.isCompactTile && !this.isWaveform,
@@ -102,15 +97,14 @@ let ItemImage = class ItemImage extends LitElement {
             blur: shouldBlur,
             waveform: this.isWaveform,
             'account-image': this.isAccountImage, // for account tile image
-            'collection-image': ((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'collection', // for collection tile image
+            'collection-image': this.model?.mediatype === 'collection', // for collection tile image
         };
     }
     /**
      * Helper function to determine if account tile image
      */
     get isAccountImage() {
-        var _a;
-        return (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account' &&
+        return (this.model?.mediatype === 'account' &&
             !this.isCompactTile &&
             !this.isListTile);
     }
@@ -118,9 +112,8 @@ let ItemImage = class ItemImage extends LitElement {
      * Event listener sets isWaveform true if image is waveform
      */
     onLoad() {
-        var _a, _b;
-        if ((((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' ||
-            ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree') &&
+        if ((this.model?.mediatype === 'audio' ||
+            this.model?.mediatype === 'etree') &&
             this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
             this.isWaveform = true;
         }

package/dist/src/tiles/item-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) suppressBlurring = false;\n\n  @state() private isWaveform = false;\n\n  @state() private isNotFound = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (this.model?.mediatype === 'search') {\n      return html`${searchIcon}`;\n    }\n\n    return html`\n      <img\n        class=${classMap(this.itemImageClass)}\n        src=\"${this.imageSrc}\"\n        alt=\"\"\n        @load=${this.onLoad}\n        @error=${this.onError}\n      />\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    if (this.isNotFound) return this.notFoundSrc;\n\n    // Use the correct image for web capture tiles, if possible\n    if (this.model?.captureDates && this.model.identifier) {\n      try {\n        const url = new URL(this.model.identifier);\n        const domain = encodeURIComponent(url.hostname);\n        return this.baseImageUrl\n          ? `https://web.archive.org/thumb/${domain}?generate=1`\n          : nothing;\n      } catch {\n        return `${this.baseImageUrl}/images/notfound.png`;\n      }\n    }\n\n    // Use the thumbnail URL specified in the model if it exists\n    if (this.model?.thumbnailUrl) return this.model.thumbnailUrl;\n\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get notFoundSrc() {\n    return this.baseImageUrl\n      ? `${this.baseImageUrl}/images/notfound.png`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      'search-image': this.model?.mediatype === 'search',\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const hasSensitiveContent = !!(\n      this.model?.contentWarning || this.model?.loginRequired\n    );\n    const shouldBlur = hasSensitiveContent && !this.suppressBlurring;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: shouldBlur,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  private onError() {\n    this.isNotFound = true;\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n\n        .search-image {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgb(245, 245, 247);\n          border-radius: 4px;\n        }\n\n        svg {\n          height: 10rem;\n          width: 10rem;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) suppressBlurring = false;\n\n  @state() private isWaveform = false;\n\n  @state() private isNotFound = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (this.model?.mediatype === 'search') {\n      return html`${searchIcon}`;\n    }\n\n    return html`\n      <img\n        class=${classMap(this.itemImageClass)}\n        src=\"${this.imageSrc}\"\n        alt=\"\"\n        @load=${this.onLoad}\n        @error=${this.onError}\n      />\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    if (this.isNotFound) return this.notFoundSrc;\n\n    // Use the correct image for web capture tiles, if possible\n    if (this.model?.captureDates && this.model.identifier) {\n      try {\n        const url = new URL(this.model.identifier);\n        const domain = encodeURIComponent(url.hostname);\n        return this.baseImageUrl\n          ? `https://web.archive.org/thumb/${domain}?generate=1`\n          : nothing;\n      } catch {\n        return `${this.baseImageUrl}/images/notfound.png`;\n      }\n    }\n\n    // Use the thumbnail URL specified in the model if it exists\n    if (this.model?.thumbnailUrl) return this.model.thumbnailUrl;\n\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get notFoundSrc() {\n    return this.baseImageUrl\n      ? `${this.baseImageUrl}/images/notfound.png`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      'search-image': this.model?.mediatype === 'search',\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const hasSensitiveContent = !!(\n      this.model?.contentWarning || this.model?.loginRequired\n    );\n    const shouldBlur = hasSensitiveContent && !this.suppressBlurring;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: shouldBlur,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  private onError() {\n    this.isNotFound = true;\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n\n        .search-image {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgb(245, 245, 247);\n          border-radius: 4px;\n        }\n\n        svg {\n          height: 10rem;\n          width: 10rem;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -25,40 +25,38 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
      *  - useLocalTime = false;
      */
     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">
-          ${((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'account'
+        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(this.model?.title ?? '')}</a
+        >
+        <div id="creator">
+          ${this.model?.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(this.views ?? 0, this.formatSize)}</div>
+      </div>
     `;
     }
     get href() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) || this.baseNavigationUrl == null)
+        if (!this.model?.identifier || this.baseNavigationUrl == null)
             return nothing;
         // Use the server-specified href if available.
         // Otherwise, construct a details page URL from the item identifier.
@@ -68,8 +66,7 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
         return this.displayValueProvider.itemPageUrl(this.model.identifier, this.model.mediatype === 'collection');
     }
     get creator() {
-        var _a;
-        return (_a = this.displayValueProvider.firstCreatorMatchingFilter) !== null && _a !== void 0 ? _a : nothing;
+        return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;
     }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
@@ -77,36 +74,33 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
      * @see src/models.ts
      */
     get date() {
-        var _a, _b, _c, _d, _e;
         // Note on 'publicdate' vs. 'date':
         // The search engine metadata uses 'publicdate' as the key for the date the item
         // was created on archive.org, which in the UI is referred to as "Date Archived".
         // In contrast, the search engine metadata uses 'date' to refer to the actual
         // publication date of the underlying media ("Date Published" in the UI).
         // Refer to the full metadata schema for more info.
-        switch ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) {
+        switch (this.effectiveSort?.field) {
             case 'publicdate':
-                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.dateArchived;
+                return this.model?.dateArchived;
             case 'reviewdate':
-                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
+                return this.model?.dateReviewed;
             case 'addeddate':
-                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
+                return this.model?.dateAdded;
             default:
-                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.datePublished;
+                return this.model?.datePublished;
         }
     }
     get views() {
-        var _a, _b, _c;
-        return ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) === 'week'
-            ? (_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount // weekly views
-            : (_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount; // all-time views
+        return this.effectiveSort?.field === 'week'
+            ? this.model?.weeklyViewCount // weekly views
+            : this.model?.viewCount; // all-time views
     }
     /**
      * Returns the active sort param if one is set, or the default sort param otherwise.
      */
     get effectiveSort() {
-        var _a;
-        return (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
+        return this.sortParam ?? this.defaultSortParam;
     }
     get classSize() {
         if (this.mobileBreakpoint &&
@@ -117,12 +111,11 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
         return 'desktop';
     }
     get dateFormatSize() {
-        var _a, _b;
         // If we're showing a date published of Jan 1 at midnight, only show the year.
         // This is because items with only a year for their publication date are normalized to
         // Jan 1 at midnight timestamps in the search engine documents.
-        if ((!this.isSortedByDate || ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) === 'date') && // Any sort except dates that aren't published date
-            isFirstMillisecondOfUTCYear((_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished)) {
+        if ((!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date
+            isFirstMillisecondOfUTCYear(this.model?.datePublished)) {
             return 'year-only';
         }
         return this.formatSize;
@@ -136,83 +129,82 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
         return 'long';
     }
     get isSortedByDate() {
-        var _a;
-        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field);
+        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(this.effectiveSort?.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';\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"]}
+{"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"]}