@internetarchive/collection-browser 0.0.1-alpha.8 → 0.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAGtC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,IAAI,mBAAmB;;QACrB,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,iBAAiB,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;QACrF,MAAM,mBAAmB,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5E,OAAO,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;wCAE4B,SAAS;gBACjC;YACV,CAAC,CAAC,IAAI,CAAA;;;0CAG8B,SAAS;;;eAGpC,CAAC;IACd,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,iBAAiB,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzF,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;mEAGoD,SAAS;oCACxC,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,CAAC,CAAC;;;qCAGzB,SAAS;cAChC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;cAGjB,IAAI,CAAC,mBAAmB;;;;oBAIlB,WAAW;;;;;;2CAOf,MAAA,IAAI,CAAC,KAAK,0CAAE,SACd;;;gBAGE,SAAS;uCACc,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,kBAAkB;uCACK,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,WAAW;uCACY,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EACpB,OAAO,EACP,OAAO,CACR;;;;;KAKV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6MnC,CAAC;IACJ,CAAC;CACF,CAAA;AAtS6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAH5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuSpB;SAvSY,QAAQ","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;\n    const containsDeemphasize = this.model?.collections.includes('deemphasize');\n    return !containsDeemphasize\n      ? html`<div\n          id=\"item-image\"\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>`\n      : html`<div id=\"item-image-box\">\n          <div\n            id=\"item-image-deemphasize\"\n            style=\"background-image:url(${imgSrcUrl})\"\n          ></div>\n          <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n        </div>`;\n  }\n\n  render() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"stealth-popup\">\n          <div id=\"collection-image\" style=\"background-image:url(${imgSrcUrl})\"></div>\n          <p id=\"collection-name\">${this.model?.collections[0]}</p>\n        </div>\n        <div id=\"title-image-container\">\n          <p id=\"item-title\" title=${itemTitle}>\n            ${this.model?.title}\n          </p>\n          <div id=\"item-image-container\">\n            ${this.renderItemImageView}\n          </div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon mediatype=\"${\n                this.model?.mediatype\n              }\" showText=\"true\">\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.viewCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.itemCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.favCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #item-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-image-box {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        border: 5px solid #0000000;\n        position: relative;\n        display: flex;\n      }\n\n      #item-image-deemphasize {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n        filter: blur(15px);\n        position: absolute;\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 2px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n\n      #container:hover #stealth-popup {\n        margin-top: -30px;\n        visiblity: visible;\n        opacity: 1;\n      }\n\n      #stealth-popup {\n        transition: margin-top 0.3s ease, opacity 0.3s ease;\n        position: absolute;\n        visiblity: hidden;\n        z-index: 1;\n        opacity: 0;\n        color: black;\n        margin-top: -15px;\n        margin-left: -15px;\n        text-align: left;\n        display: flex;\n        align-items: center;\n      }\n\n      #collection-image {\n        transition: opacity 0.3s ease;\n        width: 4.5rem;\n        height: 4.5rem;\n        border-radius: 22px;\n        box-shadow: 0px 0px 10px #ccc;\n        background-color: white;\n        border: 2px solid #ddd;\n        overflow: hidden;\n        background-size: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n      }\n\n      #collection-name {\n        width: 160px;\n        line-height: 1;\n        max-height: 25px;\n        font-size: 12px;\n        font-weight: bold;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n        overflow: hidden;\n        bottom: 20px;\n        padding: 1rem;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;uBAG7C,IAAI,CAAC,KAAK;mCACE,IAAI,CAAC,iBAAiB;;;;;;gDAMT,WAAW;;;;;;;;;;;6BAW9B,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;;;gBAMrC,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AA1L6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAH5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA2LpB;SA3LY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${this.model?.title}</h1>\n          <div id=\"item-image-container\">\n            <item-image\n              .model=${this.model}\n              .baseNavigationUrl=${this.baseNavigationUrl}\n            >\n            </item-image>\n          </div>\n          <div class=\"item-creator\">\n            <div class=\"truncated\">\n              <span><strong>By:&nbsp;</strong>${itemCreator}</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"hr\"></div>\n\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                .collection=${this.model?.collections}\n                style=\"--iconHeight:25px; --iconWidth:25px;\"\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem 0.5rem 0 0.5rem;\n      }\n\n      #item-title {\n        color: #2c2c2c;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        color: #2c2c2c;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hr {\n        border: 0.5px solid #ccc;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+import { CSSResultGroup, PropertyValues, LitElement } from 'lit';
+import { TileModel } from '../models';
+export declare class ItemImage extends LitElement {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    isListTile: boolean;
+    private isDeemphasize;
+    private itemImageWaveform;
+    protected updated(changed: PropertyValues): void;
+    private setDeemphsize;
+    render(): import("lit-html").TemplateResult<1>;
+    private get imageSrc();
+    private get backgroundImageTemplate();
+    private get waveformTemplate();
+    private get tileActionTemplate();
+    private onLoadItemImageCheck;
+    private get imageClass();
+    private get imageBoxClass();
+    private get randomGradient();
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,215 @@
+import { __decorate } from "tslib";
+import { css, html, nothing, LitElement, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+let ItemImage = class ItemImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isListTile = false;
+        this.isDeemphasize = false;
+    }
+    updated(changed) {
+        if (changed.has('model')) {
+            this.setDeemphsize();
+        }
+    }
+    setDeemphsize() {
+        var _a, _b;
+        this.isDeemphasize =
+            (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections.includes('deemphasize')) !== null && _b !== void 0 ? _b : false;
+    }
+    render() {
+        var _a;
+        return html `
+      <div class=${ifDefined(this.imageBoxClass)}>
+        ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio'
+            ? this.waveformTemplate
+            : this.backgroundImageTemplate}
+        ${this.tileActionTemplate}
+      </div>
+    `;
+    }
+    get imageSrc() {
+        var _a;
+        return `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
+    }
+    // Templates
+    get backgroundImageTemplate() {
+        return html `
+      <div
+        class=${this.imageClass}
+        style="background-image:url(${this.imageSrc})"
+      ></div>
+    `;
+    }
+    get waveformTemplate() {
+        var _a;
+        return html `
+      <div class="box" id=${this.randomGradient}>
+        <img
+          class="item-image"
+          src="${this.imageSrc}"
+          alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)}"
+          @load=${this.onLoadItemImageCheck}
+        />
+      </div>
+    `;
+    }
+    get tileActionTemplate() {
+        if (!this.isDeemphasize) {
+            return nothing;
+        }
+        return html `
+      <div class="tile-action no-preview">Content may be inappropriate</div>
+    `;
+    }
+    onLoadItemImageCheck() {
+        const aspectRatio = this.itemImageWaveform.naturalWidth /
+            this.itemImageWaveform.naturalHeight;
+        if (aspectRatio === 4) {
+            this.itemImageWaveform.classList.add('waveform');
+        }
+    }
+    // Classes
+    get imageClass() {
+        return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;
+    }
+    get imageBoxClass() {
+        return this.isDeemphasize ? 'item-image-box' : undefined;
+    }
+    get randomGradient() {
+        return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;
+    }
+    static get styles() {
+        return css `
+      .item-image-box {
+        width: 16rem;
+        height: 16rem;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 1px 1px 2px 0px;
+        display: flex;
+      }
+
+      .item-image {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: relative;
+        -webkit-appearance: none;
+        overflow: visible;
+      }
+
+      .waveform {
+        mix-blend-mode: screen;
+      }
+
+      .default {
+        background-size: contain;
+        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+      }
+
+      .deemphasize {
+        background-size: cover;
+        filter: blur(15px);
+        z-index: 1;
+      }
+
+      .tile-action {
+        border: 1px solid currentColor;
+        border-radius: 1px;
+        padding: 5px;
+        font-weight: 500;
+        width: auto;
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        top: 5.5rem;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+      }
+
+      #grad1 {
+        background: linear-gradient(
+          hsl(300, 80%, 55%),
+          hsl(330, 80%, 33%) 35%,
+          hsl(330, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad2 {
+        background: linear-gradient(
+          hsl(200, 80%, 55%),
+          hsl(230, 80%, 33%) 35%,
+          hsl(230, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad3 {
+        background: linear-gradient(
+          hsl(160, 80%, 55%),
+          hsl(190, 80%, 33%) 35%,
+          hsl(190, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad4 {
+        background: linear-gradient(
+          hsl(250, 80%, 55%),
+          hsl(280, 80%, 33%) 35%,
+          hsl(280, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad5 {
+        background: linear-gradient(
+          hsl(280, 80%, 55%),
+          hsl(310, 80%, 33%) 35%,
+          hsl(310, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad6 {
+        background: linear-gradient(
+          hsl(340, 80%, 55%),
+          hsl(0, 80%, 33%) 35%,
+          hsl(0, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ItemImage.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ItemImage.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isListTile", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isDeemphasize", void 0);
+__decorate([
+    query('.item-image')
+], ItemImage.prototype, "itemImageWaveform", void 0);
+ItemImage = __decorate([
+    customElement('item-image')
+], ItemImage);
+export { ItemImage };
+//# sourceMappingURL=item-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  nothing,\n  PropertyValues,\n  LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @state() private isDeemphasize = false;\n\n  @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.setDeemphsize();\n    }\n  }\n\n  private setDeemphsize() {\n    this.isDeemphasize =\n      this.model?.collections.includes('deemphasize') ?? false;\n  }\n\n  render() {\n    return html`\n      <div class=${ifDefined(this.imageBoxClass)}>\n        ${this.model?.mediatype === 'audio'\n          ? this.waveformTemplate\n          : this.backgroundImageTemplate}\n        ${this.tileActionTemplate}\n      </div>\n    `;\n  }\n\n  private get imageSrc() {\n    return `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  // Templates\n  private get backgroundImageTemplate() {\n    return html`\n      <div\n        class=${this.imageClass}\n        style=\"background-image:url(${this.imageSrc})\"\n      ></div>\n    `;\n  }\n\n  private get waveformTemplate() {\n    return html`\n      <div class=\"box\" id=${this.randomGradient}>\n        <img\n          class=\"item-image\"\n          src=\"${this.imageSrc}\"\n          alt=\"${ifDefined(this.model?.identifier)}\"\n          @load=${this.onLoadItemImageCheck}\n        />\n      </div>\n    `;\n  }\n\n  private get tileActionTemplate() {\n    if (!this.isDeemphasize) {\n      return nothing;\n    }\n    return html`\n      <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n    `;\n  }\n\n  private onLoadItemImageCheck() {\n    const aspectRatio =\n      this.itemImageWaveform.naturalWidth /\n      this.itemImageWaveform.naturalHeight;\n    if (aspectRatio === 4) {\n      this.itemImageWaveform.classList.add('waveform');\n    }\n  }\n\n  // Classes\n  private get imageClass() {\n    return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n  }\n\n  private get imageBoxClass() {\n    return this.isDeemphasize ? 'item-image-box' : undefined;\n  }\n\n  private get randomGradient() {\n    return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .item-image-box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .waveform {\n        mix-blend-mode: screen;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      #grad1 {\n        background: linear-gradient(\n          hsl(300, 80%, 55%),\n          hsl(330, 80%, 33%) 35%,\n          hsl(330, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad2 {\n        background: linear-gradient(\n          hsl(200, 80%, 55%),\n          hsl(230, 80%, 33%) 35%,\n          hsl(230, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad3 {\n        background: linear-gradient(\n          hsl(160, 80%, 55%),\n          hsl(190, 80%, 33%) 35%,\n          hsl(190, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad4 {\n        background: linear-gradient(\n          hsl(250, 80%, 55%),\n          hsl(280, 80%, 33%) 35%,\n          hsl(280, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad5 {\n        background: linear-gradient(\n          hsl(280, 80%, 55%),\n          hsl(310, 80%, 33%) 35%,\n          hsl(310, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad6 {\n        background: linear-gradient(\n          hsl(340, 80%, 55%),\n          hsl(0, 80%, 33%) 35%,\n          hsl(0, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/list/account-label.d.ts

@@ -0,0 +1 @@
+export declare function accountLabel(date: Date | undefined): string;

package/dist/src/tiles/list/account-label.js

@@ -0,0 +1,7 @@
+export function accountLabel(date) {
+    if (!date) {
+        return '';
+    }
+    return `Archivist since ${date.getFullYear()}`;
+}
+//# sourceMappingURL=account-label.js.map

package/dist/src/tiles/list/account-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-label.js","sourceRoot":"","sources":["../../../../src/tiles/list/account-label.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAAC,IAAsB;IACjD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,EAAE,CAAC;KACX;IACD,OAAO,mBAAmB,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;AACjD,CAAC","sourcesContent":["export function accountLabel(date: Date | undefined): string {\n  if (!date) {\n    return '';\n  }\n  return `Archivist since ${date.getFullYear()}`;\n}\n"]}

package/dist/src/tiles/list/date-label.d.ts

@@ -0,0 +1 @@
+export declare function dateLabel(sortField: string | undefined): string;

package/dist/src/tiles/list/date-label.js

@@ -0,0 +1,13 @@
+export function dateLabel(sortField) {
+    switch (sortField) {
+        case 'date':
+            return 'Published';
+        case 'reviewdate':
+            return 'Reviewed';
+        case 'addeddate':
+            return 'Added';
+        default:
+            return 'Archived';
+    }
+}
+//# sourceMappingURL=date-label.js.map

package/dist/src/tiles/list/date-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-label.js","sourceRoot":"","sources":["../../../../src/tiles/list/date-label.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,SAA6B;IACrD,QAAQ,SAAS,EAAE;QACjB,KAAK,MAAM;YACT,OAAO,WAAW,CAAC;QACrB,KAAK,YAAY;YACf,OAAO,UAAU,CAAC;QACpB,KAAK,WAAW;YACd,OAAO,OAAO,CAAC;QACjB;YACE,OAAO,UAAU,CAAC;KACrB;AACH,CAAC","sourcesContent":["export function dateLabel(sortField: string | undefined): string {\n  switch (sortField) {\n    case 'date':\n      return 'Published';\n    case 'reviewdate':\n      return 'Reviewed';\n    case 'addeddate':\n      return 'Added';\n    default:\n      return 'Archived';\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { SortParam } from '@internetarchive/search-service';
+import { TileModel } from '../../models';
+export declare class TileListCompactHeader extends LitElement {
+    model?: TileModel;
+    currentWidth?: number;
+    sortParam: SortParam | null;
+    mobileBreakpoint?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    private get classSize();
+    static get styles(): import("lit").CSSResult;
+}

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

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { dateLabel } from './date-label';
+let TileListCompactHeader = class TileListCompactHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sortParam = null;
+    }
+    render() {
+        var _a;
+        return html `
+      <div id="list-line-header" class="${this.classSize}">
+        <div id="thumb"></div>
+        <div id="title">Title</div>
+        <div id="creator">Creator</div>
+        <div id="date">${dateLabel((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field)}</div>
+        <div id="icon"></div>
+        <div id="views">Views</div>
+      </div>
+    `;
+    }
+    get classSize() {
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'mobile';
+        }
+        return 'desktop';
+    }
+    static get styles() {
+        return css `
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      #views {
+        text-align: right;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: flex-end;
+        padding-bottom: 2px;
+      }
+
+      #list-line-header.mobile {
+        grid-template-columns: 36px 3fr 2fr 91px;
+      }
+
+      #list-line-header.desktop {
+        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileListCompactHeader.prototype, "model", void 0);
+__decorate([
+    property({ type: Number })
+], TileListCompactHeader.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Object })
+], TileListCompactHeader.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: Number })
+], TileListCompactHeader.prototype, "mobileBreakpoint", void 0);
+TileListCompactHeader = __decorate([
+    customElement('tile-list-compact-header')
+], TileListCompactHeader);
+export { TileListCompactHeader };
+//# sourceMappingURL=tile-list-compact-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IAArD;;QAK8B,cAAS,GAAqB,IAAI,CAAC;IAgEjE,CAAC;IA5DC,MAAM;;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;;;yBAI/B,SAAS,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC;;;;KAIpD,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AApE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA2B;AAP3C,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAqEjC;SArEY,qBAAqB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport { dateLabel } from './date-label';\nimport { TileModel } from '../../models';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  render() {\n    return html`\n      <div id=\"list-line-header\" class=\"${this.classSize}\">\n        <div id=\"thumb\"></div>\n        <div id=\"title\">Title</div>\n        <div id=\"creator\">Creator</div>\n        <div id=\"date\">${dateLabel(this.sortParam?.field)}</div>\n        <div id=\"icon\"></div>\n        <div id=\"views\">Views</div>\n      </div>\n    `;\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  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: flex-end;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 36px 3fr 2fr 91px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n      }\n    `;\n  }\n}\n"]}

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

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