@internetarchive/collection-browser 3.3.1 → 3.3.2

package/dist/src/tiles/hover/tile-hover-pane.d.ts

@@ -1,19 +0,0 @@
-import type { SortParam } from '@internetarchive/search-service';
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-import { type TileModel } from '../../models';
-import type { CollectionTitles } from '../../data-source/models';
-import '../list/tile-list';
-export declare class TileHoverPane extends LitElement {
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    suppressBlurring: boolean;
-    sortParam?: SortParam;
-    mobileBreakpoint?: number;
-    currentWidth?: number;
-    collectionTitles?: CollectionTitles;
-    protected render(): TemplateResult;
-    private get headerTemplate();
-    static get styles(): CSSResultGroup;
-}

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

@@ -1,182 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { suppressedCollections } from '../../models';
-import '../list/tile-list';
-let TileHoverPane = class TileHoverPane extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.loggedIn = false;
-        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>
-    `;
-    }
-    get headerTemplate() {
-        var _a, _b, _c, _d;
-        // early return if item does't have parent collection
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.collections.length) === 0)
-            return nothing;
-        let collectionTitle = '';
-        let collectionIdentifier = '';
-        for (const collection of ((_b = this.model) === null || _b === void 0 ? void 0 : _b.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;
-                collectionIdentifier = collection;
-                break;
-            }
-        }
-        // sometimes item does have collections but they are in suppressed or favorite list,
-        // 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>
-    `;
-    }
-    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;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], TileHoverPane.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], TileHoverPane.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: String })
-], TileHoverPane.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileHoverPane.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileHoverPane.prototype, "suppressBlurring", void 0);
-__decorate([
-    property({ type: Object })
-], TileHoverPane.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Number })
-], TileHoverPane.prototype, "mobileBreakpoint", void 0);
-__decorate([
-    property({ type: Number })
-], TileHoverPane.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Object })
-], TileHoverPane.prototype, "collectionTitles", void 0);
-TileHoverPane = __decorate([
-    customElement('tile-hover-pane')
-], TileHoverPane);
-export { TileHoverPane };
-//# sourceMappingURL=tile-hover-pane.js.map

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

@@ -1 +0,0 @@
-{"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"]}

package/dist/src/tiles/image-block.d.ts

@@ -1,19 +0,0 @@
-import { CSSResultGroup, LitElement, nothing } from 'lit';
-import type { TileModel } from '../models';
-import './overlay/icon-overlay';
-import './overlay/text-overlay';
-export declare class ImageBlock extends LitElement {
-    baseImageUrl?: string;
-    isCompactTile: boolean;
-    isListTile: boolean;
-    loggedIn: boolean;
-    suppressBlurring: boolean;
-    model?: TileModel;
-    viewSize: string;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
-    private get baseClass();
-    private get iconOverlayTemplate();
-    private get textOverlayTemplate();
-    private get overlayType();
-    static get styles(): CSSResultGroup;
-}

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

@@ -1,175 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import './overlay/icon-overlay';
-import './overlay/text-overlay';
-let ImageBlock = class ImageBlock extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isCompactTile = false;
-        this.isListTile = false;
-        this.loggedIn = false;
-        this.suppressBlurring = false;
-        this.viewSize = 'desktop';
-    }
-    render() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier))
-            return nothing;
-        return html `
-      <div class=${classMap(this.baseClass)}>
-        <item-image
-          .model=${this.model}
-          .baseImageUrl=${this.baseImageUrl}
-          .isListTile=${this.isListTile}
-          .isCompactTile=${this.isCompactTile}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
-          style="--imgHeight: 100%; --imgWidth: 100%"
-        >
-        </item-image>
-        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}
-      </div>
-    `;
-    }
-    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
-            [this.viewSize]: true,
-            'search-image': ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'search',
-        };
-    }
-    get iconOverlayTemplate() {
-        // Only list tiles use the icon overlay
-        if (!this.isListTile)
-            return nothing;
-        const { overlayType } = this;
-        if (!overlayType)
-            return nothing;
-        return html `
-      <icon-overlay
-        class=${this.isCompactTile ? 'list-compact' : 'list-detail'}
-        .type=${this.overlayType}
-      >
-      </icon-overlay>
-    `;
-    }
-    get textOverlayTemplate() {
-        // List tiles do not require the text overlay
-        if (this.isListTile)
-            return nothing;
-        const { overlayType } = this;
-        if (!overlayType)
-            return nothing;
-        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) {
-            return 'login-required';
-        }
-        if ((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning) {
-            return 'content-warning';
-        }
-        return undefined;
-    }
-    static get styles() {
-        const imageBlockBackgroundColor = css `var(--imageBlockBackgroundColor, #f1f1f4)`;
-        return css `
-      div {
-        display: flex;
-        justify-content: center;
-        position: relative;
-        background-color: ${imageBlockBackgroundColor};
-        border-radius: 4px;
-      }
-
-      .grid {
-        height: var(--imgBlockHeight, 16rem);
-        flex: 1;
-        position: initial;
-        padding: 5px;
-        border-radius: 4px 4px 0 0;
-      }
-
-      .collection.grid,
-      .grid.search-image {
-        display: block;
-      }
-
-      /** tile-list view */
-      .list {
-        border-radius: 0;
-        background-color: var(--imageBlockListBackgroundColor, #ebebee);
-        box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
-      }
-
-      .list.desktop {
-        width: 100px;
-        max-width: 100%;
-        height: 100px;
-        max-width: 100%;
-        display: inline-block;
-        position: relative;
-        text-align: center;
-      }
-
-      .list.mobile {
-        width: var(--image-width, 90px);
-        height: 90px;
-      }
-
-      /** tile-list-compact view */
-      .container.list-compact {
-        display: block;
-        text-align: center;
-      }
-
-      .list-compact.desktop {
-        width: 45px;
-        height: 45px;
-      }
-
-      .list-compact.mobile {
-        width: 30px;
-        height: 30px;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], ImageBlock.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "isCompactTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "isListTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "suppressBlurring", void 0);
-__decorate([
-    property({ type: Object })
-], ImageBlock.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ImageBlock.prototype, "viewSize", void 0);
-ImageBlock = __decorate([
-    customElement('image-block')
-], ImageBlock);
-export { ImageBlock };
-//# sourceMappingURL=image-block.js.map

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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,40 +0,0 @@
-import { CSSResultGroup, LitElement } from 'lit';
-import type { TileModel } from '../models';
-export declare class ItemImage extends LitElement {
-    model?: TileModel;
-    baseImageUrl?: string;
-    isListTile: boolean;
-    isCompactTile: boolean;
-    loggedIn: boolean;
-    suppressBlurring: boolean;
-    private isWaveform;
-    private isNotFound;
-    private baseImage;
-    render(): import("lit").TemplateResult<1>;
-    private get imageTemplate();
-    /**
-     * Helpers
-     */
-    private get imageSrc();
-    private get notFoundSrc();
-    private get hashBasedGradient();
-    private hashStrToInt;
-    /**
-     * Classes
-     */
-    private get itemBaseClass();
-    private get itemImageClass();
-    /**
-     * Helper function to determine if account tile image
-     */
-    private get isAccountImage();
-    /**
-     * Event listener sets isWaveform true if image is waveform
-     */
-    private onLoad;
-    private onError;
-    /**
-     * CSS
-     */
-    static get styles(): CSSResultGroup;
-}

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

@@ -1,191 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
-import { searchIcon } from '../assets/img/icons/mediatype/search';
-let ItemImage = class ItemImage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isListTile = false;
-        this.isCompactTile = false;
-        this.loggedIn = false;
-        this.suppressBlurring = false;
-        this.isWaveform = false;
-        this.isNotFound = false;
-    }
-    render() {
-        return html `
-      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>
-    `;
-    }
-    get imageTemplate() {
-        var _a;
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'search') {
-            return html `${searchIcon}`;
-        }
-        return html `
-      <img
-        class=${classMap(this.itemImageClass)}
-        src="${this.imageSrc}"
-        alt=""
-        @load=${this.onLoad}
-        @error=${this.onError}
-      />
-    `;
-    }
-    /**
-     * 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) {
-            try {
-                const url = new URL(this.model.identifier);
-                const domain = encodeURIComponent(url.hostname);
-                return this.baseImageUrl
-                    ? `https://web.archive.org/thumb/${domain}?generate=1`
-                    : nothing;
-            }
-            catch (_d) {
-                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)
-            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)
-            ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
-            : nothing;
-    }
-    get notFoundSrc() {
-        return this.baseImageUrl
-            ? `${this.baseImageUrl}/images/notfound.png`
-            : nothing;
-    }
-    get hashBasedGradient() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
-            return 'waveform-grad0';
-        }
-        const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
-        return `waveform-grad${gradient}`;
-    }
-    hashStrToInt(str) {
-        return str
-            .split('')
-            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-    }
-    /**
-     * 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',
-            [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 shouldBlur = hasSensitiveContent && !this.suppressBlurring;
-        return {
-            contain: !this.isCompactTile && !this.isWaveform,
-            cover: this.isCompactTile,
-            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
-        };
-    }
-    /**
-     * 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' &&
-            !this.isCompactTile &&
-            !this.isListTile);
-    }
-    /**
-     * 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') &&
-            this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
-            this.isWaveform = true;
-        }
-    }
-    onError() {
-        this.isNotFound = true;
-    }
-    /**
-     * CSS
-     */
-    static get styles() {
-        return [
-            baseItemImageStyles,
-            waveformGradientStyles,
-            css `
-        img {
-          height: var(--imgHeight, 16rem);
-          width: var(--imgWidth, 16rem);
-        }
-
-        .search-image {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: rgb(245, 245, 247);
-          border-radius: 4px;
-        }
-
-        svg {
-          height: 10rem;
-          width: 10rem;
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], ItemImage.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ItemImage.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "isListTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "isCompactTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "suppressBlurring", void 0);
-__decorate([
-    state()
-], ItemImage.prototype, "isWaveform", void 0);
-__decorate([
-    state()
-], ItemImage.prototype, "isNotFound", void 0);
-__decorate([
-    query('img')
-], ItemImage.prototype, "baseImage", void 0);
-ItemImage = __decorate([
-    customElement('item-image')
-], ItemImage);
-export { ItemImage };
-//# sourceMappingURL=item-image.js.map