@internetarchive/collection-browser 3.3.1 → 3.3.2

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

@@ -1 +0,0 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { SimpleLayoutType } from '../models';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile 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  @property({ type: Boolean }) showInfoButton = false;\n\n  @property({ type: Boolean }) showTvClips = false;\n\n  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\n\n  render() {\n    const itemTitle = this.model?.title;\n    const containerClasses = classMap({\n      container: true,\n      simple: this.simpleLayoutType !== 'none',\n      'stats-only': this.simpleLayoutType === 'stats-only',\n      'snippets-only': this.simpleLayoutType === 'snippets-only',\n    });\n\n    return html`\n      <div class=${containerClasses}>\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.imageBlockTemplate}\n\n            <div id=\"title\">\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\n                ${itemTitle}\n              </h3>\n            </div>\n\n            ${this.volumeIssueTemplate}\n            ${this.isSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate}\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n            ${this.reviewBlockTemplate}\n          </div>\n\n          ${this.tileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get creatorTemplate(): TemplateResult | typeof nothing {\n    const displayedCreator =\n      this.displayValueProvider.firstCreatorMatchingFilter;\n    if (!displayedCreator) return nothing;\n\n    return html`\n      <div class=\"created-by\">\n        <span class=\"truncated\" title=${displayedCreator}>\n          by&nbsp;${displayedCreator}\n        </span>\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .loggedIn=${this.loggedIn}\n        .suppressBlurring=${this.suppressBlurring}\n        .isCompactTile=${false}\n        .isListTile=${false}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n    let format: DateFormat = 'long';\n    switch (this.effectiveSort?.field) {\n      case 'date': {\n        const datePublished = this.model?.datePublished;\n        sortedValue = { field: 'published', value: datePublished };\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\n          format = 'year-only';\n        }\n        break;\n      }\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    if (!sortedValue?.value) {\n      return nothing;\n    }\n\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>${sortedValue.field} ${formattedDate}</span>\n      </div>\n    `;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.review) return nothing;\n\n    const { reviewtitle, reviewbody, stars } = this.model.review;\n    return html`\n      <review-block\n        viewsize=\"grid\"\n        title=${ifDefined(reviewtitle)}\n        body=${ifDefined(reviewbody)}\n        starRating=${ifDefined(stars)}\n      >\n      </review-block>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')\n      return nothing;\n\n    return html`\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n      </text-snippet-block>\n    `;\n  }\n\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.volume || !this.model?.issue) return nothing;\n\n    return html`\n      <div class=\"volume-issue\">\n        <span class=\"truncated\" title=\"volume|issue\">\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\n        </span>\n      </div>\n    `;\n  }\n\n  private get webArchivesCaptureDatesTemplate():\n    | TemplateResult\n    | typeof nothing {\n    if (!this.model?.captureDates || !this.model.title) return nothing;\n\n    return html`\n      <ul class=\"capture-dates\">\n        ${map(\n          this.model.captureDates,\n          date =>\n            html`<li>\n              ${this.displayValueProvider.webArchivesCaptureLink(\n                this.model!.title,\n                date,\n              )}\n            </li>`,\n        )}\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for the stats row along the bottom of the tile.\n   */\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\n    if (this.simpleLayoutType === 'snippets-only') return nothing;\n\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\n    const [viewCount, viewLabel] =\n      effectiveSort?.field === 'week'\n        ? [this.model?.weeklyViewCount, 'weekly views']\n        : [this.model?.viewCount, 'all-time views'];\n\n    return html`\n      <tile-stats\n        .model=${this.model}\n        .mediatype=${this.model?.mediatype}\n        .viewCount=${viewCount}\n        .viewLabel=${viewLabel}\n        .favCount=${this.model?.favCount}\n        .commentCount=${this.model?.commentCount}\n        .tvClipCount=${this.model?.tvClipCount}\n        .showTvClips=${this.showTvClips}\n      >\n      </tile-stats>\n    `;\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.effectiveSort?.field as string,\n    );\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 hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  private infoButtonPressed(e: PointerEvent): void {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        a:link {\n          text-decoration: none;\n          color: var(--ia-theme-link-color, #4b64ff);\n        }\n        a:hover {\n          text-decoration: underline;\n        }\n\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .simple #title > .truncated {\n          -webkit-line-clamp: 2;\n        }\n\n        .simple .created-by > .truncated,\n        .simple .date-sorted-by > .truncated,\n        .simple .volume-issue > .truncated {\n          -webkit-line-clamp: 1;\n        }\n\n        .simple.snippets-only .item-info {\n          padding-bottom: 5px;\n        }\n\n        .simple.snippets-only text-snippet-block {\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\n        }\n\n        .capture-dates {\n          margin: 0;\n          padding: 0 5px;\n          list-style-type: none;\n        }\n\n        review-block,\n        text-snippet-block {\n          --containerLeftMargin: 5px;\n          --containerTopMargin: 5px;\n        }\n\n        /**\n         * iOS Safari long-press on tiles (to bring up hover pane)\n         * gets messy without this\n         */\n        @media screen and (pointer: coarse) and (hover: none) {\n          .container {\n            -webkit-touch-callout: none;\n          }\n\n          .truncated {\n            -webkit-touch-callout: default;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/grid/search-tile.d.ts

@@ -1,10 +0,0 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-export declare class SearchTile extends BaseTileComponent {
-    showInfoButton: boolean;
-    render(): TemplateResult<1>;
-    private get getImageBlockTemplate();
-    private get getTitleTemplate();
-    static get styles(): CSSResultGroup;
-}

package/dist/src/tiles/grid/search-tile.js

@@ -1,95 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-let SearchTile = class SearchTile extends BaseTileComponent {
-    constructor() {
-        /*
-         * Reactive properties inherited from BaseTileComponent:
-         *  - model?: TileModel;
-         *  - currentWidth?: number;
-         *  - currentHeight?: number;
-         *  - baseNavigationUrl?: string;
-         *  - baseImageUrl?: string;
-         *  - collectionPagePath?: string;
-         *  - sortParam: SortParam | null = null;
-         *  - creatorFilter?: string;
-         *  - mobileBreakpoint?: number;
-         *  - loggedIn = false;
-         *  - suppressBlurring = false;
-         */
-        super(...arguments);
-        this.showInfoButton = false;
-    }
-    render() {
-        return html `
-      <div class="container">
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    get getImageBlockTemplate() {
-        return html `
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
-    `;
-    }
-    get getTitleTemplate() {
-        var _a;
-        return html `<div id="title">
-      <h3 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h3>
-    </div>`;
-    }
-    static get styles() {
-        const tileBorderColor = css `var(--tileBorderColor, #555555)`;
-        const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
-        const whiteColor = css `#fff`;
-        return [
-            baseTileStyles,
-            css `
-        .container {
-          background-color: ${tileBackgroundColor};
-          border: 1px solid ${tileBorderColor};
-        }
-
-        .item-info {
-          flex-grow: initial;
-        }
-
-        h4.truncated,
-        h3.truncated {
-          color: ${whiteColor};
-          -webkit-line-clamp: 4;
-        }
-
-        .container:hover > #title {
-          text-decoration: underline;
-        }
-
-        /* this is a workaround for Safari 15 where the hover effects are not working */
-        image-block:hover > #title {
-          text-decoration: underline;
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], SearchTile.prototype, "showInfoButton", void 0);
-SearchTile = __decorate([
-    customElement('search-tile')
-], SearchTile);
-export { SearchTile };
-//# sourceMappingURL=search-tile.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"search-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/search-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,gBAAgB,CAAC;AAGjB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,iBAAiB;IAA1C;QACL;;;;;;;;;;;;;WAaG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAkEtD,CAAC;IAhEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,gBAAgB;;;;KAI5D,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;4BACE,IAAI,CAAC,gBAAgB;;;KAG5C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;WACpC,CAAC;IACV,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAC7D,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;QACrE,MAAM,UAAU,GAAG,GAAG,CAAA,MAAM,CAAC;QAE7B,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,mBAAmB;8BACnB,eAAe;;;;;;;;;mBAS1B,UAAU;;;;;;;;;;;;OAYtB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAwB;AAhBzC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkFtB","sourcesContent":["import { css, CSSResultGroup, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('search-tile')\nexport class SearchTile 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   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private get getImageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n        .suppressBlurring=${this.suppressBlurring}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h3 class=\"truncated\">${this.model?.title}</h3>\n    </div>`;\n  }\n\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n    const whiteColor = css`#fff`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          background-color: ${tileBackgroundColor};\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .item-info {\n          flex-grow: initial;\n        }\n\n        h4.truncated,\n        h3.truncated {\n          color: ${whiteColor};\n          -webkit-line-clamp: 4;\n        }\n\n        .container:hover > #title {\n          text-decoration: underline;\n        }\n\n        /* this is a workaround for Safari 15 where the hover effects are not working */\n        image-block:hover > #title {\n          text-decoration: underline;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/grid/styles/tile-grid-shared-styles.d.ts

@@ -1 +0,0 @@
-export declare const baseTileStyles: import("lit").CSSResult;

package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js

@@ -1,128 +0,0 @@
-import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
-/**
- * Base tile styles
- */
-const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
-const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
-export const baseTileStyles = css `
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
-  .container {
-    background-color: ${tileBackgroundColor};
-    border: 1px #2c2c2c;
-    border-radius: ${tileCornerRadius};
-    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
-    box-sizing: border-box;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  image-block {
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .tile-details {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    row-gap: 10px;
-    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-  }
-
-  .item-info {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    flex-grow: 1;
-  }
-
-  #title {
-    padding: 0 5px;
-  }
-
-  .created-by,
-  .date-sorted-by,
-  .volume-issue,
-  .archivist-since {
-    display: flex;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0 5px;
-  }
-
-  .truncated {
-    flex: 1;
-    color: #2c2c2c;
-    min-width: 0; /* Important for long words! */
-    text-align: left;
-    line-height: 15px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  h4.truncated,
-  h3.truncated {
-    display: -webkit-box;
-    margin: 0px;
-    line-height: 15px;
-    font-size: 14px;
-    font-weight: 500;
-    padding-bottom: 1px;
-  }
-
-  span {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 15px;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    padding-bottom: 1px;
-  }
-
-  .container:hover > .tile-details > .item-info > #title > .truncated {
-    text-decoration: underline;
-  }
-
-  /** this is a workaround for Safari 15 where the hover effects are not working */
-  #title:hover > .truncated {
-    text-decoration: underline;
-  }
-
-  .info-button {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(220, 220, 220, 0.5);
-    color: white;
-    font-size: 2.4rem;
-    font-weight: bold;
-    line-height: 1;
-    text-shadow: black 1px 1px 3px;
-    overflow: visible;
-    aspect-ratio: 1 / 1;
-    z-index: 1;
-  }
-
-  .hidden {
-    display: none;
-  }
-`;
-//# sourceMappingURL=tile-grid-shared-styles.js.map

package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHpC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { srOnlyStyle } from '../../../styles/sr-only';\n\n/**\n * Base tile styles\n */\n\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\n\nexport const baseTileStyles = css`\n  /* Include .sr-only styles for all tiles */\n  ${srOnlyStyle}\n\n  .container {\n    background-color: ${tileBackgroundColor};\n    border: 1px #2c2c2c;\n    border-radius: ${tileCornerRadius};\n    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);\n    box-sizing: border-box;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  image-block {\n    display: block;\n    position: relative;\n    text-align: center;\n  }\n\n  .tile-details {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    row-gap: 10px;\n    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n  }\n\n  .item-info {\n    display: flex;\n    flex-direction: column;\n    row-gap: 5px;\n    flex-grow: 1;\n  }\n\n  #title {\n    padding: 0 5px;\n  }\n\n  .created-by,\n  .date-sorted-by,\n  .volume-issue,\n  .archivist-since {\n    display: flex;\n    justify-content: left;\n    align-items: flex-start;\n    padding: 0 5px;\n  }\n\n  .truncated {\n    flex: 1;\n    color: #2c2c2c;\n    min-width: 0; /* Important for long words! */\n    text-align: left;\n    line-height: 15px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-wrap: break-word;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n  }\n\n  h4.truncated,\n  h3.truncated {\n    display: -webkit-box;\n    margin: 0px;\n    line-height: 15px;\n    font-size: 14px;\n    font-weight: 500;\n    padding-bottom: 1px;\n  }\n\n  span {\n    display: -webkit-box;\n    font-size: 1.4rem;\n    line-height: 15px;\n    overflow: hidden;\n    word-wrap: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    padding-bottom: 1px;\n  }\n\n  .container:hover > .tile-details > .item-info > #title > .truncated {\n    text-decoration: underline;\n  }\n\n  /** this is a workaround for Safari 15 where the hover effects are not working */\n  #title:hover > .truncated {\n    text-decoration: underline;\n  }\n\n  .info-button {\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: rgba(220, 220, 220, 0.5);\n    color: white;\n    font-size: 2.4rem;\n    font-weight: bold;\n    line-height: 1;\n    text-shadow: black 1px 1px 3px;\n    overflow: visible;\n    aspect-ratio: 1 / 1;\n    z-index: 1;\n  }\n\n  .hidden {\n    display: none;\n  }\n`;\n"]}

package/dist/src/tiles/grid/tile-stats.d.ts

@@ -1,58 +0,0 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-import { TileModel } from '../../models';
-export declare class TileStats extends LitElement {
-    /** The tile model these stats represent */
-    model?: TileModel;
-    /** The mediatype of the item these stats represent */
-    mediatype?: string;
-    /** The number of uploaded items, if representing an account */
-    itemCount?: number;
-    /** The number of times the item has been viewed */
-    viewCount?: number;
-    /** The text label describing the type of views (default "all-time views") */
-    viewLabel?: string;
-    /** The number of times the item has been favorited */
-    favCount?: number;
-    /** The number of times the item has been reviewed */
-    commentCount?: number;
-    /** Whether to show the number of TV clips in place of reviews */
-    showTvClips: boolean;
-    /** The number of times the TV item has been clipped */
-    tvClipCount?: number;
-    render(): TemplateResult<1>;
-    /**
-     * Template for the mediatype icon column.
-     */
-    private get mediatypeIconColumnTemplate();
-    /**
-     * Helper method to construct a template for one of the tile stat columns,
-     * given its stat count, labels, and icon.
-     *
-     * @param count The numeric count to show for the stat. If undefined, will be treated as 0.
-     * @param label The textual label describing the stat (used in the title and screenreader text).
-     * @param icon The icon visually representing the stat.
-     * @param classes Any additional CSS classes the stat column should have (optional).
-     */
-    private columnTemplate;
-    /**
-     * Template for the views count column.
-     */
-    private get viewsColumnTemplate();
-    /**
-     * Template for the uploads count column (replaces views for account tiles).
-     */
-    private get uploadsColumnTemplate();
-    /**
-     * Template for the favorites count column.
-     */
-    private get favoritesColumnTemplate();
-    /**
-     * Template for the reviews count column.
-     */
-    private get reviewsColumnTemplate();
-    /**
-     * Template for the TV clips count column (replaces reviews for TV tiles).
-     */
-    private get tvClipsColumnTemplate();
-    static get styles(): CSSResultGroup;
-}

package/dist/src/tiles/grid/tile-stats.js

@@ -1,204 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg, str } from '@lit/localize';
-import { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';
-import { reviewsIcon } from '../../assets/img/icons/reviews';
-import { uploadIcon } from '../../assets/img/icons/upload';
-import { viewsIcon } from '../../assets/img/icons/views';
-import { quoteIcon } from '../../assets/img/icons/quote';
-import { srOnlyStyle } from '../../styles/sr-only';
-import { formatCount } from '../../utils/format-count';
-let TileStats = class TileStats extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Whether to show the number of TV clips in place of reviews */
-        this.showTvClips = false;
-    }
-    render() {
-        return html `
-      <div class="item-stats">
-        <p class="sr-only">
-          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}
-        </p>
-        <ul id="stats-row">
-          ${this.mediatypeIconColumnTemplate}
-          ${this.mediatype === 'account'
-            ? this.uploadsColumnTemplate
-            : this.viewsColumnTemplate}
-          ${this.favoritesColumnTemplate}
-          ${this.showTvClips
-            ? this.tvClipsColumnTemplate
-            : this.reviewsColumnTemplate}
-        </ul>
-      </div>
-    `;
-    }
-    /**
-     * Template for the mediatype icon column.
-     */
-    get mediatypeIconColumnTemplate() {
-        return html `
-      <li class="col">
-        <p class="sr-only">${msg('Mediatype:')}</p>
-        <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>
-      </li>
-    `;
-    }
-    /**
-     * Helper method to construct a template for one of the tile stat columns,
-     * given its stat count, labels, and icon.
-     *
-     * @param count The numeric count to show for the stat. If undefined, will be treated as 0.
-     * @param label The textual label describing the stat (used in the title and screenreader text).
-     * @param icon The icon visually representing the stat.
-     * @param classes Any additional CSS classes the stat column should have (optional).
-     */
-    columnTemplate(count, label, icon, classes = []) {
-        const formattedCount = formatCount(count !== null && count !== void 0 ? count : 0, 'short', 'short');
-        const title = msg(str `${formattedCount} ${label}`);
-        const srLabel = label + ':';
-        return html `
-      <li class="col ${classes.join(' ')}" title=${title}>
-        ${icon}
-        <p class="status-text">
-          <span class="sr-only">${srLabel}</span>
-          ${formattedCount}
-        </p>
-      </li>
-    `;
-    }
-    /**
-     * Template for the views count column.
-     */
-    get viewsColumnTemplate() {
-        var _a;
-        const label = (_a = this.viewLabel) !== null && _a !== void 0 ? _a : msg('all-time views');
-        return this.columnTemplate(this.viewCount, label, viewsIcon);
-    }
-    /**
-     * Template for the uploads count column (replaces views for account tiles).
-     */
-    get uploadsColumnTemplate() {
-        return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);
-    }
-    /**
-     * Template for the favorites count column.
-     */
-    get favoritesColumnTemplate() {
-        return this.columnTemplate(this.favCount, msg('favorites'), favIcon);
-    }
-    /**
-     * Template for the reviews count column.
-     */
-    get reviewsColumnTemplate() {
-        return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [
-            'reviews',
-        ]);
-    }
-    /**
-     * Template for the TV clips count column (replaces reviews for TV tiles).
-     */
-    get tvClipsColumnTemplate() {
-        return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);
-    }
-    static get styles() {
-        return [
-            srOnlyStyle,
-            css `
-        tile-mediatype-icon {
-          --iconHeight: 25px;
-          --iconWidth: 25px;
-        }
-
-        ul {
-          all: unset;
-          list-style-type: none;
-        }
-
-        li {
-          list-style-type: none;
-        }
-
-        svg {
-          height: 13px;
-          width: 13px;
-          display: block;
-          margin: auto;
-          pointer-events: none;
-        }
-
-        /* Make the reviews icon slightly smaller/lower, for even visual weight */
-        .reviews svg {
-          height: 11px;
-          width: 11px;
-          margin-top: 2px;
-        }
-
-        .item-stats {
-          height: 30px;
-          padding-left: 5px;
-          padding-right: 5px;
-          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-          text-align: center;
-        }
-
-        #stats-row {
-          display: flex;
-          justify-content: space-between;
-          flex-wrap: wrap;
-          width: 100%;
-          padding-bottom: 5px;
-        }
-
-        .col {
-          min-width: 15px;
-          max-width: 25%;
-          height: 25px;
-        }
-
-        .status-text {
-          font-size: 14px;
-          height: 15px;
-          color: #2c2c2c;
-          line-height: 17px;
-          margin: auto;
-          display: block;
-          text-align: center;
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], TileStats.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], TileStats.prototype, "mediatype", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "itemCount", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "viewCount", void 0);
-__decorate([
-    property({ type: String })
-], TileStats.prototype, "viewLabel", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "favCount", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "commentCount", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileStats.prototype, "showTvClips", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "tvClipCount", void 0);
-TileStats = __decorate([
-    customElement('tile-stats')
-], TileStats);
-export { TileStats };
-//# sourceMappingURL=tile-stats.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg, str } from '@lit/localize';\nimport { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { quoteIcon } from '../../assets/img/icons/quote';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\nimport { TileModel } from '../../models';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  /** The tile model these stats represent */\n  @property({ type: Object }) model?: TileModel;\n\n  /** The mediatype of the item these stats represent */\n  @property({ type: String }) mediatype?: string;\n\n  /** The number of uploaded items, if representing an account */\n  @property({ type: Number }) itemCount?: number;\n\n  /** The number of times the item has been viewed */\n  @property({ type: Number }) viewCount?: number;\n\n  /** The text label describing the type of views (default \"all-time views\") */\n  @property({ type: String }) viewLabel?: string;\n\n  /** The number of times the item has been favorited */\n  @property({ type: Number }) favCount?: number;\n\n  /** The number of times the item has been reviewed */\n  @property({ type: Number }) commentCount?: number;\n\n  /** Whether to show the number of TV clips in place of reviews */\n  @property({ type: Boolean }) showTvClips = false;\n\n  /** The number of times the TV item has been clipped */\n  @property({ type: Number }) tvClipCount?: number;\n\n  render() {\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          ${this.mediatypeIconColumnTemplate}\n          ${this.mediatype === 'account'\n            ? this.uploadsColumnTemplate\n            : this.viewsColumnTemplate}\n          ${this.favoritesColumnTemplate}\n          ${this.showTvClips\n            ? this.tvClipsColumnTemplate\n            : this.reviewsColumnTemplate}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Template for the mediatype icon column.\n   */\n  private get mediatypeIconColumnTemplate(): TemplateResult {\n    return html`\n      <li class=\"col\">\n        <p class=\"sr-only\">${msg('Mediatype:')}</p>\n        <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>\n      </li>\n    `;\n  }\n\n  /**\n   * Helper method to construct a template for one of the tile stat columns,\n   * given its stat count, labels, and icon.\n   *\n   * @param count The numeric count to show for the stat. If undefined, will be treated as 0.\n   * @param label The textual label describing the stat (used in the title and screenreader text).\n   * @param icon The icon visually representing the stat.\n   * @param classes Any additional CSS classes the stat column should have (optional).\n   */\n  private columnTemplate(\n    count: number | undefined,\n    label: string,\n    icon: TemplateResult,\n    classes: string[] = [],\n  ): TemplateResult {\n    const formattedCount = formatCount(count ?? 0, 'short', 'short');\n    const title = msg(str`${formattedCount} ${label}`);\n    const srLabel = label + ':';\n\n    return html`\n      <li class=\"col ${classes.join(' ')}\" title=${title}>\n        ${icon}\n        <p class=\"status-text\">\n          <span class=\"sr-only\">${srLabel}</span>\n          ${formattedCount}\n        </p>\n      </li>\n    `;\n  }\n\n  /**\n   * Template for the views count column.\n   */\n  private get viewsColumnTemplate(): TemplateResult {\n    const label = this.viewLabel ?? msg('all-time views');\n    return this.columnTemplate(this.viewCount, label, viewsIcon);\n  }\n\n  /**\n   * Template for the uploads count column (replaces views for account tiles).\n   */\n  private get uploadsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);\n  }\n\n  /**\n   * Template for the favorites count column.\n   */\n  private get favoritesColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.favCount, msg('favorites'), favIcon);\n  }\n\n  /**\n   * Template for the reviews count column.\n   */\n  private get reviewsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [\n      'reviews',\n    ]);\n  }\n\n  /**\n   * Template for the TV clips count column (replaces reviews for TV tiles).\n   */\n  private get tvClipsColumnTemplate(): TemplateResult {\n    return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        tile-mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset;\n          list-style-type: none;\n        }\n\n        li {\n          list-style-type: none;\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}