@internetarchive/collection-browser 2.7.12 → 2.7.13-alpha2

package/dist/src/tiles/collection-browser-loading-tile.js

@@ -1,11 +1,11 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let CollectionBrowserLoadingTile = class CollectionBrowserLoadingTile extends LitElement {
-    render() {
-        return html ` <div id="container"></div> `;
-    }
-    static get styles() {
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let CollectionBrowserLoadingTile = class CollectionBrowserLoadingTile extends LitElement {
+    render() {
+        return html ` <div id="container"></div> `;
+    }
+    static get styles() {
         return css `
       :host {
         display: block;
@@ -19,11 +19,11 @@ let CollectionBrowserLoadingTile = class CollectionBrowserLoadingTile extends Li
         display: block;
         height: 100%;
       }
-    `;
-    }
-};
-CollectionBrowserLoadingTile = __decorate([
-    customElement('collection-browser-loading-tile')
-], CollectionBrowserLoadingTile);
-export { CollectionBrowserLoadingTile };
+    `;
+    }
+};
+CollectionBrowserLoadingTile = __decorate([
+    customElement('collection-browser-loading-tile')
+], CollectionBrowserLoadingTile);
+export { CollectionBrowserLoadingTile };
 //# sourceMappingURL=collection-browser-loading-tile.js.map

package/dist/src/tiles/collection-browser-loading-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-browser-loading-tile.js","sourceRoot":"","sources":["../../../src/tiles/collection-browser-loading-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,4BAA4B,GAAzC,MAAa,4BAA6B,SAAQ,UAAU;IAC1D,MAAM;QACJ,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;KAaT,CAAC;IACJ,CAAC;CACF,CAAA;AArBY,4BAA4B;IADxC,aAAa,CAAC,iCAAiC,CAAC;GACpC,4BAA4B,CAqBxC;SArBY,4BAA4B","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('collection-browser-loading-tile')\nexport class CollectionBrowserLoadingTile extends LitElement {\n  render() {\n    return html` <div id=\"container\"></div> `;\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        background: linear-gradient(to right bottom, #dddddd, #d8d8d8);\n        border-radius: var(--tileCornerRadius, 4px);\n        background-size: 100% 100%;\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"collection-browser-loading-tile.js","sourceRoot":"","sources":["../../../src/tiles/collection-browser-loading-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,UAAU;IAC1D,MAAM;QACJ,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;KAaT,CAAC;IACJ,CAAC;CACF,CAAA;AArBY,4BAA4B;IADxC,aAAa,CAAC,iCAAiC,CAAC;GACpC,4BAA4B,CAqBxC","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('collection-browser-loading-tile')\nexport class CollectionBrowserLoadingTile extends LitElement {\n  render() {\n    return html` <div id=\"container\"></div> `;\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        background: linear-gradient(to right bottom, #dddddd, #d8d8d8);\n        border-radius: var(--tileCornerRadius, 4px);\n        background-size: 100% 100%;\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,18 +1,18 @@
-import { TemplateResult } from 'lit';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-import './tile-stats';
-export declare class AccountTile extends BaseTileComponent {
-    showInfoButton: boolean;
-    render(): TemplateResult<1>;
-    private get getAvatarTemplate();
-    private get getTitleTemplate();
-    private get getArchivistTemplate();
-    private get getTileStatsTemplate();
-    private get infoButtonTemplate();
-    private infoButtonPressed;
-    /**
-     * CSS
-     */
-    static get styles(): import("lit").CSSResult[];
-}
+import { TemplateResult } from 'lit';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+import './tile-stats';
+export declare class AccountTile extends BaseTileComponent {
+    showInfoButton: boolean;
+    render(): TemplateResult<1>;
+    private get getAvatarTemplate();
+    private get getTitleTemplate();
+    private get getArchivistTemplate();
+    private get getTileStatsTemplate();
+    private get infoButtonTemplate();
+    private infoButtonPressed;
+    /**
+     * CSS
+     */
+    static get styles(): import("lit").CSSResult[];
+}

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

@@ -1,30 +1,30 @@
-import { __decorate } from "tslib";
-import { css, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { BaseTileComponent } from '../base-tile-component';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import './tile-stats';
-let AccountTile = class AccountTile 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;
-         */
-        super(...arguments);
-        this.showInfoButton = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { BaseTileComponent } from '../base-tile-component';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import '../image-block';
+import './tile-stats';
+let AccountTile = class AccountTile 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;
+         */
+        super(...arguments);
+        this.showInfoButton = false;
+    }
+    render() {
         return html `
       <div class="container">
         ${this.infoButtonTemplate}
@@ -36,9 +36,9 @@ let AccountTile = class AccountTile extends BaseTileComponent {
           ${this.getTileStatsTemplate}
         </div>
       </div>
-    `;
-    }
-    get getAvatarTemplate() {
+    `;
+    }
+    get getAvatarTemplate() {
         return html `
       <image-block
         .model=${this.model}
@@ -46,63 +46,63 @@ let AccountTile = class AccountTile extends BaseTileComponent {
         .viewSize=${'grid'}
       >
       </image-block>
-    `;
-    }
-    get getTitleTemplate() {
-        var _a;
+    `;
+    }
+    get getTitleTemplate() {
+        var _a;
         return html `<div id="title">
       <h4 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h4>
-    </div>`;
-    }
-    get getArchivistTemplate() {
+    </div>`;
+    }
+    get getArchivistTemplate() {
         return html `<div class="archivist-since">
       <span>${this.displayValueProvider.accountLabel}</span>
-    </div>`;
-    }
-    get getTileStatsTemplate() {
-        var _a, _b, _c, _d;
+    </div>`;
+    }
+    get getTileStatsTemplate() {
+        var _a, _b, _c, _d;
         return html `<tile-stats
       .mediatype=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}
       .itemCount=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.itemCount}
       .favCount=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.favCount}
       .commentCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.commentCount}
     >
-    </tile-stats>`;
-    }
-    get infoButtonTemplate() {
-        // &#9432; is an information icon
-        return this.showInfoButton
+    </tile-stats>`;
+    }
+    get infoButtonTemplate() {
+        // &#9432; is an information icon
+        return this.showInfoButton
             ? html `<button class="info-button" @click=${this.infoButtonPressed}>
           &#9432;
           <span class="sr-only">${msg('More info')}</span>
-        </button>`
-            : nothing;
-    }
-    infoButtonPressed(e) {
-        e.preventDefault();
-        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
-        this.dispatchEvent(event);
-    }
-    /**
-     * CSS
-     */
-    static get styles() {
-        const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
-        return [
-            baseTileStyles,
+        </button>`
+            : nothing;
+    }
+    infoButtonPressed(e) {
+        e.preventDefault();
+        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
+        this.dispatchEvent(event);
+    }
+    /**
+     * CSS
+     */
+    static get styles() {
+        const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
+        return [
+            baseTileStyles,
             css `
         .container {
           border: 1px solid ${tileBorderColor};
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], AccountTile.prototype, "showInfoButton", void 0);
-AccountTile = __decorate([
-    customElement('account-tile')
-], AccountTile);
-export { AccountTile };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], AccountTile.prototype, "showInfoButton", void 0);
+AccountTile = __decorate([
+    customElement('account-tile')
+], AccountTile);
+export { AccountTile };
 //# sourceMappingURL=account-tile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,iBAAiB;IAAlD;QACE;;;;;;;;;;;;WAYG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAoFtD,CAAC;IAlFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,oBAAoB,CAAC,YAAY;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;mBACI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;mBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;kBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;sBAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApF8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAfzC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmGvB;SAnGY,WAAW","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile 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   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getAvatarTemplate} ${this.getTitleTemplate}\n            ${this.getArchivistTemplate}\n          </div>\n          ${this.getTileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getAvatarTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.identifier}</h4>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>${this.displayValueProvider.accountLabel}</span>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`<tile-stats\n      .mediatype=${this.model?.mediatype}\n      .itemCount=${this.model?.itemCount}\n      .favCount=${this.model?.favCount}\n      .commentCount=${this.model?.commentCount}\n    >\n    </tile-stats>`;\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 infoButtonPressed(e: PointerEvent) {\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() {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,iBAAiB;IAA3C;QACL;;;;;;;;;;;;WAYG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAoFtD,CAAC;IAlFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,oBAAoB,CAAC,YAAY;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;mBACI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;mBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;kBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;sBAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApF8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAfzC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmGvB","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile 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   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getAvatarTemplate} ${this.getTitleTemplate}\n            ${this.getArchivistTemplate}\n          </div>\n          ${this.getTileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getAvatarTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.identifier}</h4>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>${this.displayValueProvider.accountLabel}</span>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`<tile-stats\n      .mediatype=${this.model?.mediatype}\n      .itemCount=${this.model?.itemCount}\n      .favCount=${this.model?.favCount}\n      .commentCount=${this.model?.commentCount}\n    >\n    </tile-stats>`;\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 infoButtonPressed(e: PointerEvent) {\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() {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n      `,\n    ];\n  }\n}\n"]}

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

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

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

@@ -1,31 +1,31 @@
-import { __decorate } from "tslib";
-import { css, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import { formatUnitSize } from '../../utils/format-unit-size';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-let CollectionTile = class CollectionTile 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;
-         */
-        super(...arguments);
-        this.showInfoButton = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+import { formatUnitSize } from '../../utils/format-unit-size';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+let CollectionTile = class CollectionTile 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;
+         */
+        super(...arguments);
+        this.showInfoButton = false;
+    }
+    render() {
         return html `
       <div class="container">
         ${this.infoButtonTemplate}
@@ -37,9 +37,9 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
 
         ${this.getTileStatsTemplate}
       </div>
-    `;
-    }
-    get getImageBlockTemplate() {
+    `;
+    }
+    get getImageBlockTemplate() {
         return html `
       <image-block
         .model=${this.model}
@@ -47,15 +47,15 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
         .viewSize=${'grid'}
       >
       </image-block>
-    `;
-    }
-    get getTitleTemplate() {
-        var _a;
+    `;
+    }
+    get getTitleTemplate() {
+        var _a;
         return html `<div id="title">
       <h4 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h4>
-    </div>`;
-    }
-    get getTileStatsTemplate() {
+    </div>`;
+    }
+    get getTileStatsTemplate() {
         return html `
       <div id="item-stats">
         <div id="item-mediatype">${collectionIcon}</div>
@@ -64,42 +64,42 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
           ${this.getItemsTemplate} ${this.getSizeTemplate}
         </div>
       </div>
-    `;
-    }
-    get getItemsTemplate() {
-        var _a, _b;
-        const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
+    `;
+    }
+    get getItemsTemplate() {
+        var _a, _b;
+        const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
         return html `<span id="item-count"
       >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
-    >`;
-    }
-    get getSizeTemplate() {
-        var _a, _b;
-        const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
-        return collectionSize
-            ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
-            : ``;
-    }
-    get infoButtonTemplate() {
-        // &#9432; is an information icon
-        return this.showInfoButton
+    >`;
+    }
+    get getSizeTemplate() {
+        var _a, _b;
+        const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
+        return collectionSize
+            ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
+            : ``;
+    }
+    get infoButtonTemplate() {
+        // &#9432; is an information icon
+        return this.showInfoButton
             ? html `<button class="info-button" @click=${this.infoButtonPressed}>
           &#9432;
           <span class="sr-only">${msg('More info')}</span>
-        </button>`
-            : nothing;
-    }
-    infoButtonPressed(e) {
-        e.preventDefault();
-        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
-        this.dispatchEvent(event);
-    }
-    static get styles() {
-        const tileBorderColor = css `var(--tileBorderColor, #555555)`;
-        const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
-        const whiteColor = css `#fff`;
-        return [
-            baseTileStyles,
+        </button>`
+            : nothing;
+    }
+    infoButtonPressed(e) {
+        e.preventDefault();
+        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
+        this.dispatchEvent(event);
+    }
+    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};
@@ -142,15 +142,15 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
           flex-direction: column;
           margin-left: 10px;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], CollectionTile.prototype, "showInfoButton", void 0);
-CollectionTile = __decorate([
-    customElement('collection-tile')
-], CollectionTile);
-export { CollectionTile };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], CollectionTile.prototype, "showInfoButton", void 0);
+CollectionTile = __decorate([
+    customElement('collection-tile')
+], CollectionTile);
+export { CollectionTile };
 //# sourceMappingURL=collection-tile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-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 { msg } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('collection-tile')\nexport class CollectionTile 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   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n          </div>\n        </div>\n\n        ${this.getTileStatsTemplate}\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      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.title}</h4>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`\n      <div id=\"item-stats\">\n        <div id=\"item-mediatype\">${collectionIcon}</div>\n\n        <div id=\"stats-row\">\n          ${this.getItemsTemplate} ${this.getSizeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getItemsTemplate() {\n    const collectionItems = this.model?.itemCount?.toLocaleString();\n\n    return html`<span id=\"item-count\"\n      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span\n    >`;\n  }\n\n  private get getSizeTemplate() {\n    const collectionSize = this.model?.collectionSize ?? 0;\n\n    return collectionSize\n      ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\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 infoButtonPressed(e: PointerEvent) {\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  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          color: ${whiteColor};\n        }\n\n        #item-mediatype svg {\n          filter: invert(100%);\n          height: 2.5rem;\n          align-items: baseline;\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        #item-stats {\n          display: flex;\n          padding: 0 5px 5px;\n          align-items: center;\n        }\n\n        #stats-row {\n          display: flex;\n          align-items: baseline;\n          color: ${whiteColor};\n          flex-direction: column;\n          margin-left: 10px;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,gBAAgB,CAAC;AAGjB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,iBAAiB;IAA9C;QACL;;;;;;;;;;;;WAYG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAqItD,CAAC;IAnIC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,gBAAgB;;;;UAIvD,IAAI,CAAC,oBAAoB;;KAE9B,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;WACpC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;;mCAEoB,cAAc;;;YAGrC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,eAAe;;;KAGpD,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,MAAM,eAAe,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,cAAc,EAAE,CAAC;QAEhE,OAAO,IAAI,CAAA;SACN,eAAe,QAAQ,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;MAClE,CAAC;IACL,CAAC;IAED,IAAY,eAAe;;QACzB,MAAM,cAAc,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,mCAAI,CAAC,CAAC;QAEvD,OAAO,cAAc;YACnB,CAAC,CAAC,IAAI,CAAA,wBAAwB,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,SAAS;YACxE,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,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;;;;;;;;mBAQ1B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BV,UAAU;;;;OAItB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AArI8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAwB;AAfzC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoJ1B","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('collection-tile')\nexport class CollectionTile 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   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n          </div>\n        </div>\n\n        ${this.getTileStatsTemplate}\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      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.title}</h4>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`\n      <div id=\"item-stats\">\n        <div id=\"item-mediatype\">${collectionIcon}</div>\n\n        <div id=\"stats-row\">\n          ${this.getItemsTemplate} ${this.getSizeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getItemsTemplate() {\n    const collectionItems = this.model?.itemCount?.toLocaleString();\n\n    return html`<span id=\"item-count\"\n      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span\n    >`;\n  }\n\n  private get getSizeTemplate() {\n    const collectionSize = this.model?.collectionSize ?? 0;\n\n    return collectionSize\n      ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\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 infoButtonPressed(e: PointerEvent) {\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  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          color: ${whiteColor};\n        }\n\n        #item-mediatype svg {\n          filter: invert(100%);\n          height: 2.5rem;\n          align-items: baseline;\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        #item-stats {\n          display: flex;\n          padding: 0 5px 5px;\n          align-items: center;\n        }\n\n        #stats-row {\n          display: flex;\n          align-items: baseline;\n          color: ${whiteColor};\n          flex-direction: column;\n          margin-left: 10px;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -1,34 +1,34 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-import '../review-block';
-import '../text-snippet-block';
-import '../item-image';
-import '../mediatype-icon';
-import './tile-stats';
-export declare class ItemTile extends BaseTileComponent {
-    showInfoButton: boolean;
-    render(): TemplateResult<1>;
-    /**
-     * Templates
-     */
-    private get creatorTemplate();
-    private get imageBlockTemplate();
-    private get sortedDateInfoTemplate();
-    private get infoButtonTemplate();
-    private get reviewBlockTemplate();
-    private get textSnippetsTemplate();
-    private get volumeIssueTemplate();
-    private get webArchivesCaptureDatesTemplate();
-    private get isSortedByDate();
-    /**
-     * Returns the active sort param if one is set, or the default sort param otherwise.
-     */
-    private get effectiveSort();
-    private get hasSnippets();
-    private infoButtonPressed;
-    /**
-     * CSS
-     */
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+import '../review-block';
+import '../text-snippet-block';
+import '../item-image';
+import '../mediatype-icon';
+import './tile-stats';
+export declare class ItemTile extends BaseTileComponent {
+    showInfoButton: boolean;
+    render(): TemplateResult<1>;
+    /**
+     * Templates
+     */
+    private get creatorTemplate();
+    private get imageBlockTemplate();
+    private get sortedDateInfoTemplate();
+    private get infoButtonTemplate();
+    private get reviewBlockTemplate();
+    private get textSnippetsTemplate();
+    private get volumeIssueTemplate();
+    private get webArchivesCaptureDatesTemplate();
+    private get isSortedByDate();
+    /**
+     * Returns the active sort param if one is set, or the default sort param otherwise.
+     */
+    private get effectiveSort();
+    private get hasSnippets();
+    private infoButtonPressed;
+    /**
+     * CSS
+     */
+    static get styles(): CSSResultGroup;
+}