@internetarchive/collection-browser 0.3.10-alpha.1 → 0.4.1

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

@@ -1,22 +1,22 @@
-import { __decorate } from "tslib";
-/* eslint-disable import/no-duplicates */
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { formatDate } from '../../utils/format-date';
-import '../image-block';
-import '../text-snippet-block';
-import '../item-image';
-import '../mediatype-icon';
-import './tile-stats';
-let ItemTile = class ItemTile extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.loggedIn = false;
-    }
-    render() {
-        var _a, _b, _c, _d, _e;
-        const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
+import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { formatDate } from '../../utils/format-date';
+import '../image-block';
+import '../text-snippet-block';
+import '../item-image';
+import '../mediatype-icon';
+import './tile-stats';
+let ItemTile = class ItemTile extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loggedIn = false;
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
         return html `
       <div class="container">
         <div class="item-info">
@@ -38,8 +38,8 @@ let ItemTile = class ItemTile extends LitElement {
 
           ${this.textSnippetsTemplate}
 
-          ${this.doesSortedByDate
-            ? this.sortedDateInfoTemplate
+          ${this.doesSortedByDate
+            ? this.sortedDateInfoTemplate
             : this.creatorTemplate}
         </div>
 
@@ -51,66 +51,66 @@ let ItemTile = class ItemTile extends LitElement {
         </tile-stats>
         </div>
       </div>
-    `;
-    }
-    /**
-     * Templates
-     */
-    get doesSortedByDate() {
-        var _a;
-        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
-    }
-    get sortedDateInfoTemplate() {
-        var _a, _b, _c, _d, _e;
-        let sortedValue;
-        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
-            case 'date':
-                sortedValue = { field: 'published', value: (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished };
-                break;
-            case 'reviewdate':
-                sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
-                break;
-            case 'addeddate':
-                sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
-                break;
-            case 'publicdate':
-                sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
-                break;
-            default:
-                break;
-        }
+    `;
+    }
+    /**
+     * Templates
+     */
+    get doesSortedByDate() {
+        var _a;
+        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
+    }
+    get sortedDateInfoTemplate() {
+        var _a, _b, _c, _d, _e;
+        let sortedValue;
+        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
+            case 'date':
+                sortedValue = { field: 'published', value: (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished };
+                break;
+            case 'reviewdate':
+                sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
+                break;
+            case 'addeddate':
+                sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
+                break;
+            case 'publicdate':
+                sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
+                break;
+            default:
+                break;
+        }
         return html `
       <div class="date-sorted-by truncated">
         <span>
           ${sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.field} ${formatDate(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value, 'long')}
         </span>
       </div>
-    `;
-    }
-    get creatorTemplate() {
-        var _a, _b;
+    `;
+    }
+    get creatorTemplate() {
+        var _a, _b;
         return html `
       <div class="created-by truncated">
-        ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator)
-            ? html `<span>by&nbsp;${(_b = this.model) === null || _b === void 0 ? void 0 : _b.creator}</span>`
+        ${((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator)
+            ? html `<span>by&nbsp;${(_b = this.model) === null || _b === void 0 ? void 0 : _b.creator}</span>`
             : nothing}
       </div>
-    `;
-    }
-    get textSnippetsTemplate() {
-        var _a;
-        if (!this.hasSnippets)
-            return nothing;
+    `;
+    }
+    get textSnippetsTemplate() {
+        var _a;
+        if (!this.hasSnippets)
+            return nothing;
         return html `<text-snippet-block
       viewsize="grid"
       .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}
-    ></text-snippet-block>`;
-    }
-    get hasSnippets() {
-        var _a, _b;
-        return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
-    }
-    static get styles() {
+    ></text-snippet-block>`;
+    }
+    get hasSnippets() {
+        var _a, _b;
+        return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
+    }
+    static get styles() {
         return css `
       .container {
         background-color: #ffffff;
@@ -146,6 +146,8 @@ let ItemTile = class ItemTile extends LitElement {
       image-block {
         display: block;
         margin-bottom: 5px;
+        position: relative;
+        text-align: center;
       }
 
       image-block.has-snippets {
@@ -187,23 +189,23 @@ let ItemTile = class ItemTile extends LitElement {
         height: 4rem;
         display: -webkit-box;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], ItemTile.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemTile.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Object })
-], ItemTile.prototype, "model", void 0);
-__decorate([
-    property({ type: Object })
-], ItemTile.prototype, "sortParam", void 0);
-ItemTile = __decorate([
-    customElement('item-tile')
-], ItemTile);
-export { ItemTile };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ItemTile.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemTile.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Object })
+], ItemTile.prototype, "model", void 0);
+__decorate([
+    property({ type: Object })
+], ItemTile.prototype, "sortParam", void 0);
+ItemTile = __decorate([
+    customElement('item-tile')
+], ItemTile);
+export { ItemTile };
 //# sourceMappingURL=item-tile.js.map

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":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    const itemTitle = this.model?.title;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n              ${itemTitle}\n            </h1>\n          </div>\n\n          <image-block \n            class=${this.hasSnippets ? 'has-snippets' : nothing}\n            .model=${this.model}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .isCompactTile=${false}\n            .isListTile=${false}\n            .viewSize=${'grid'}>\n          </image-block>\n\n          ${this.textSnippetsTemplate}\n\n          ${\n            this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate\n          }\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n\n    switch (this.sortParam?.field) {\n      case 'date':\n        sortedValue = { field: 'published', value: this.model?.datePublished };\n        break;\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    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n        </span>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    return html`\n      <div class=\"created-by truncated\">\n        ${this.model?.creator\n          ? html`<span>by&nbsp;${this.model?.creator}</span>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"grid\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .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      image-block {\n        display: block;\n        margin-bottom: 5px;\n      }\n\n      image-block.has-snippets {\n        /* If there is a text snippet block present, the image block needs to shrink */\n        --imgBlockHeight: 11rem;\n      }\n\n      .created-by,\n      .date-sorted-by {\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        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    const itemTitle = this.model?.title;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n              ${itemTitle}\n            </h1>\n          </div>\n\n          <image-block \n            class=${this.hasSnippets ? 'has-snippets' : nothing}\n            .model=${this.model}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .isCompactTile=${false}\n            .isListTile=${false}\n            .viewSize=${'grid'}>\n          </image-block>\n\n          ${this.textSnippetsTemplate}\n\n          ${\n            this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate\n          }\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n\n    switch (this.sortParam?.field) {\n      case 'date':\n        sortedValue = { field: 'published', value: this.model?.datePublished };\n        break;\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    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n        </span>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    return html`\n      <div class=\"created-by truncated\">\n        ${this.model?.creator\n          ? html`<span>by&nbsp;${this.model?.creator}</span>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"grid\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .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      image-block {\n        display: block;\n        margin-bottom: 5px;\n        position: relative;\n        text-align: center;\n      }\n\n      image-block.has-snippets {\n        /* If there is a text snippet block present, the image block needs to shrink */\n        --imgBlockHeight: 11rem;\n      }\n\n      .created-by,\n      .date-sorted-by {\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        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,10 +1,10 @@
-import { CSSResultGroup, LitElement } from 'lit';
-export declare class TileStats extends LitElement {
-    mediatype?: string;
-    itemCount?: number;
-    viewCount?: number;
-    favCount?: number;
-    commentCount?: number;
-    render(): import("lit-html").TemplateResult<1>;
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class TileStats extends LitElement {
+    mediatype?: string;
+    itemCount?: number;
+    viewCount?: number;
+    favCount?: number;
+    commentCount?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,18 +1,18 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { favoriteFilledIcon } 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 { formatCount } from '../../utils/format-count';
-let TileStats = class TileStats extends LitElement {
-    render() {
-        const formattedFavCount = formatCount(this.favCount, 'short', 'short');
-        const formattedReviewCount = formatCount(this.commentCount, 'short', 'short');
-        const uploadsOrViewsTitle = this.mediatype === 'account'
-            ? `${this.itemCount} uploads`
-            : `${this.viewCount} all-time views`;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { favoriteFilledIcon } 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 { formatCount } from '../../utils/format-count';
+let TileStats = class TileStats extends LitElement {
+    render() {
+        const formattedFavCount = formatCount(this.favCount, 'short', 'short');
+        const formattedReviewCount = formatCount(this.commentCount, 'short', 'short');
+        const uploadsOrViewsTitle = this.mediatype === 'account'
+            ? `${this.itemCount} uploads`
+            : `${this.viewCount} all-time views`;
         return html `
       <div class="item-stats">
         <p class="sr-only">
@@ -48,9 +48,9 @@ let TileStats = class TileStats extends LitElement {
           </li>
         </ul>
       </div>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       mediatype-icon {
         --iconHeight: 25px;
@@ -115,26 +115,26 @@ let TileStats = class TileStats extends LitElement {
         display: block;
         text-align: center;
       }
-    `;
-    }
-};
-__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: Number })
-], TileStats.prototype, "favCount", void 0);
-__decorate([
-    property({ type: Number })
-], TileStats.prototype, "commentCount", void 0);
-TileStats = __decorate([
-    customElement('tile-stats')
-], TileStats);
-export { TileStats };
+    `;
+    }
+};
+__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: Number })
+], TileStats.prototype, "favCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "commentCount", void 0);
+TileStats = __decorate([
+    customElement('tile-stats')
+], TileStats);
+export { TileStats };
 //# sourceMappingURL=tile-stats.js.map

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

@@ -1,17 +1,17 @@
-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;
-    model?: TileModel;
-    viewSize: string;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
-    private get baseClass();
-    private get iconOverlayTemplate();
-    private get textOverlayTemplate();
-    static get styles(): CSSResultGroup;
-}
+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;
+    model?: TileModel;
+    viewSize: string;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private get baseClass();
+    private get iconOverlayTemplate();
+    private get textOverlayTemplate();
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,21 +1,21 @@
-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.viewSize = 'desktop';
-    }
-    render() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier))
-            return nothing;
+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.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
@@ -29,44 +29,46 @@ let ImageBlock = class ImageBlock extends LitElement {
         </item-image>
         ${this.textOverlayTemplate} ${this.iconOverlayTemplate}
       </div>
-    `;
-    }
-    get baseClass() {
-        return {
-            list: this.isListTile && !this.isCompactTile,
-            'list-compact': this.isListTile && this.isCompactTile,
-            [this.viewSize]: true,
-        };
-    }
-    get iconOverlayTemplate() {
-        var _a, _b, _c;
-        if (!this.isListTile)
-            return nothing;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
-            return nothing;
+    `;
+    }
+    get baseClass() {
+        return {
+            list: this.isListTile && !this.isCompactTile,
+            'list-compact': this.isListTile && this.isCompactTile,
+            [this.viewSize]: true,
+        };
+    }
+    get iconOverlayTemplate() {
+        var _a, _b, _c;
+        if (!this.isListTile)
+            return nothing;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
+            return nothing;
         return html `
       <icon-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.loginRequired}
+        .isCompactTile=${this.isCompactTile}
       >
       </icon-overlay>
-    `;
-    }
-    get textOverlayTemplate() {
-        var _a, _b, _c;
-        if (this.isListTile)
-            return nothing;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
-            return nothing;
+    `;
+    }
+    get textOverlayTemplate() {
+        var _a, _b, _c;
+        if (this.isListTile)
+            return nothing;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
+            return nothing;
         return html `
       <text-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.loginRequired}
+        ?iconRequired=${true}
       >
       </text-overlay>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       div {
         display: flex;
@@ -77,12 +79,17 @@ let ImageBlock = class ImageBlock extends LitElement {
       .grid {
         height: var(--imgBlockHeight, 16rem);
         flex: 1;
+        display: inline-block;
+        position: initial;
       }
 
       /** tile-list view */
       .list.desktop {
         width: 100px;
         height: 100px;
+        display: inline-block;
+        position: relative;
+        text-align: center;
       }
 
       .list.mobile {
@@ -93,6 +100,7 @@ let ImageBlock = class ImageBlock extends LitElement {
       /** tile-list-compact view */
       .list-compact {
         display: block;
+        text-align: center;
       }
 
       .list-compact.desktop {
@@ -104,29 +112,29 @@ let ImageBlock = class ImageBlock extends LitElement {
         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: Object })
-], ImageBlock.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ImageBlock.prototype, "viewSize", void 0);
-ImageBlock = __decorate([
-    customElement('image-block')
-], ImageBlock);
-export { ImageBlock };
+    `;
+    }
+};
+__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: 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 +1 @@
-{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } 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: 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          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      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } 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: 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          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      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        .isCompactTile=${this.isCompactTile}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        ?iconRequired=${true}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        display: inline-block;\n        position: initial;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .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"]}