@internetarchive/collection-browser 0.4.3-alpha.9 → 0.4.4-alpha

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

@@ -1,8 +1,8 @@
-/**
- * Base item-image styles
- */
-export declare const baseItemImageStyles: import("lit").CSSResult;
-/**
- * Waveform styles
- */
-export declare const waveformGradientStyles: import("lit").CSSResult;
+/**
+ * Base item-image styles
+ */
+export declare const baseItemImageStyles: import("lit").CSSResult;
+/**
+ * Waveform styles
+ */
+export declare const waveformGradientStyles: import("lit").CSSResult;

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

@@ -1,10 +1,9 @@
-import { css } from 'lit';
-/**
- * Base item-image styles
- */
+import { css } from 'lit';
+/**
+ * Base item-image styles
+ */
 export const baseItemImageStyles = css `
   .drop-shadow {
-    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
     overflow: hidden;
     height: 100%;
   }
@@ -29,16 +28,27 @@ export const baseItemImageStyles = css `
 
   .blur {
     filter: blur(15px);
-    box-shadow: 1px 1px 2px 0px;
+    box-shadow: 1px 1px 2px 0;
   }
 
-  .radius50 {
+  .account-image {
+    object-fit: cover;
+    background-position: 50% 50%;
     border-radius: 50%;
+    width: 160px;
+    height: 160px;
+  }
+
+  .collection-image {
+    object-fit: cover;
+    border-radius: 8px;
+    width: 100%;
+    height: 160px;
   }
-`;
-/**
- * Waveform styles
- */
+`;
+/**
+ * Waveform styles
+ */
 export const waveformGradientStyles = css `
   .waveform {
     mix-blend-mode: screen;
@@ -101,5 +111,5 @@ export const waveformGradientStyles = css `
       hsl(0, 0%, 0%)
     );
   }
-`;
+`;
 //# sourceMappingURL=item-image-styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"item-image-styles.js","sourceRoot":"","sources":["../../../src/styles/item-image-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n  .drop-shadow {\n    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .list-box {\n    overflow: hidden;\n    box-sizing: border-box;\n    display: inline-block;\n    position: relative;\n  }\n\n  .contain {\n    object-fit: contain;\n    object-position: center;\n    height: 100%;\n    width: 100%;\n  }\n\n  .cover {\n    object-fit: cover;\n  }\n\n  .blur {\n    filter: blur(15px);\n    box-shadow: 1px 1px 2px 0px;\n  }\n\n  .radius50 {\n    border-radius: 50%;\n  }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n  .waveform {\n    mix-blend-mode: screen;\n    position: relative;\n    height: 62.5%;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .waveform-grad0 {\n    background: linear-gradient(\n      hsl(340, 80%, 55%),\n      hsl(0, 80%, 33%) 35%,\n      hsl(0, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad1 {\n    background: linear-gradient(\n      hsl(300, 80%, 55%),\n      hsl(330, 80%, 33%) 35%,\n      hsl(330, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad2 {\n    background: linear-gradient(\n      hsl(200, 80%, 55%),\n      hsl(230, 80%, 33%) 35%,\n      hsl(230, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad3 {\n    background: linear-gradient(\n      hsl(160, 80%, 55%),\n      hsl(190, 80%, 33%) 35%,\n      hsl(190, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad4 {\n    background: linear-gradient(\n      hsl(250, 80%, 55%),\n      hsl(280, 80%, 33%) 35%,\n      hsl(280, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad5 {\n    background: linear-gradient(\n      hsl(280, 80%, 55%),\n      hsl(310, 80%, 33%) 35%,\n      hsl(310, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n`;\n"]}
+{"version":3,"file":"item-image-styles.js","sourceRoot":"","sources":["../../../src/styles/item-image-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n  .drop-shadow {\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .list-box {\n    overflow: hidden;\n    box-sizing: border-box;\n    display: inline-block;\n    position: relative;\n  }\n\n  .contain {\n    object-fit: contain;\n    object-position: center;\n    height: 100%;\n    width: 100%;\n  }\n\n  .cover {\n    object-fit: cover;\n  }\n\n  .blur {\n    filter: blur(15px);\n    box-shadow: 1px 1px 2px 0;\n  }\n\n  .account-image {\n    object-fit: cover;\n    background-position: 50% 50%;\n    border-radius: 50%;\n    width: 160px;\n    height: 160px;\n  }\n\n  .collection-image {\n    object-fit: cover;\n    border-radius: 8px;\n    width: 100%;\n    height: 160px;\n  }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n  .waveform {\n    mix-blend-mode: screen;\n    position: relative;\n    height: 62.5%;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .waveform-grad0 {\n    background: linear-gradient(\n      hsl(340, 80%, 55%),\n      hsl(0, 80%, 33%) 35%,\n      hsl(0, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad1 {\n    background: linear-gradient(\n      hsl(300, 80%, 55%),\n      hsl(330, 80%, 33%) 35%,\n      hsl(330, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad2 {\n    background: linear-gradient(\n      hsl(200, 80%, 55%),\n      hsl(230, 80%, 33%) 35%,\n      hsl(230, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad3 {\n    background: linear-gradient(\n      hsl(160, 80%, 55%),\n      hsl(190, 80%, 33%) 35%,\n      hsl(190, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad4 {\n    background: linear-gradient(\n      hsl(250, 80%, 55%),\n      hsl(280, 80%, 33%) 35%,\n      hsl(280, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n\n  .waveform-grad5 {\n    background: linear-gradient(\n      hsl(280, 80%, 55%),\n      hsl(310, 80%, 33%) 35%,\n      hsl(310, 80%, 22%) 70%,\n      hsl(0, 0%, 0%)\n    );\n  }\n`;\n"]}

package/dist/src/tiles/collection-browser-loading-tile.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export declare class CollectionBrowserLoadingTile extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
-    static get styles(): import("lit").CSSResult;
-}
+import { LitElement } from 'lit';
+export declare class CollectionBrowserLoadingTile extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
+}

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;
@@ -14,16 +14,16 @@ let CollectionBrowserLoadingTile = class CollectionBrowserLoadingTile extends Li
 
       #container {
         background: linear-gradient(to right bottom, #dddddd, #d8d8d8);
-        border-radius: var(--collectionTileCornerRadius, 4px);
+        border-radius: var(--tileCornerRadius, 4px);
         background-size: 100% 100%;
         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(--collectionTileCornerRadius, 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;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"]}

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

@@ -1,17 +1,17 @@
-import { LitElement, TemplateResult } from 'lit';
-import type { TileModel } from '../../models';
-import '../image-block';
-import './tile-stats';
-export declare class AccountTile extends LitElement {
-    model?: TileModel;
-    baseImageUrl?: string;
-    render(): TemplateResult<1>;
-    private get getAvatarTemplate();
-    private get getTitleTemplate();
-    private get getArchivistTemplate();
-    private get getTileStatsTemplate();
-    /**
-     * CSS
-     */
-    static get styles(): import("lit").CSSResult[];
-}
+import { LitElement, TemplateResult } from 'lit';
+import type { TileModel } from '../../models';
+import '../image-block';
+import './tile-stats';
+export declare class AccountTile extends LitElement {
+    model?: TileModel;
+    baseImageUrl?: string;
+    render(): TemplateResult<1>;
+    private get getAvatarTemplate();
+    private get getTitleTemplate();
+    private get getArchivistTemplate();
+    private get getTileStatsTemplate();
+    /**
+     * CSS
+     */
+    static get styles(): import("lit").CSSResult[];
+}

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

@@ -1,11 +1,11 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import './tile-stats';
-let AccountTile = class AccountTile extends LitElement {
-    render() {
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import '../image-block';
+import './tile-stats';
+let AccountTile = class AccountTile extends LitElement {
+    render() {
         return html `
       <div class="container">
         <div class="tile-details">
@@ -16,9 +16,9 @@ let AccountTile = class AccountTile extends LitElement {
           ${this.getTileStatsTemplate}
         </div>
       </div>
-    `;
-    }
-    get getAvatarTemplate() {
+    `;
+    }
+    get getAvatarTemplate() {
         return html `
       <image-block
         .model=${this.model}
@@ -26,52 +26,53 @@ let AccountTile = class AccountTile extends LitElement {
         .viewSize=${'grid'}
       >
       </image-block>
-    `;
-    }
-    get getTitleTemplate() {
-        var _a;
+    `;
+    }
+    get getTitleTemplate() {
+        var _a;
         return html `<div id="title">
       <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
-    </div>`;
-    }
-    get getArchivistTemplate() {
-        var _a, _b;
+    </div>`;
+    }
+    get getArchivistTemplate() {
+        var _a, _b;
         return html `<div class="archivist-since">
       <span>Archivist since ${(_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.dateAdded) === null || _b === void 0 ? void 0 : _b.getFullYear()}</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>`;
-    }
-    /**
-     * CSS
-     */
-    static get styles() {
-        return [
-            baseTileStyles,
+    </tile-stats>`;
+    }
+    /**
+     * CSS
+     */
+    static get styles() {
+        const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
+        return [
+            baseTileStyles,
             css `
-        image-block {
-          --imageBlockBackgroundColor: #fcf5e6;
+        .container {
+          border: 1px solid ${tileBorderColor};
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], AccountTile.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], AccountTile.prototype, "baseImageUrl", void 0);
-AccountTile = __decorate([
-    customElement('account-tile')
-], AccountTile);
-export { AccountTile };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], AccountTile.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], AccountTile.prototype, "baseImageUrl", 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,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAKzC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,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;8BACe,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;WACvD,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;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;;;OAIF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAhE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AAHvC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiEvB;SAjEY,WAAW","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    return html`\n      <div class=\"container\">\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      <h1 class=\"truncated\">${this.model?.identifier}</h1>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>Archivist since ${this.model?.dateAdded?.getFullYear()}</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  /**\n   * CSS\n   */\n  static get styles() {\n    return [\n      baseTileStyles,\n      css`\n        image-block {\n          --imageBlockBackgroundColor: #fcf5e6;\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,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAKzC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,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;8BACe,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;WACvD,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;;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;AAlE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AAHvC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmEvB;SAnEY,WAAW","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    return html`\n      <div class=\"container\">\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      <h1 class=\"truncated\">${this.model?.identifier}</h1>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>Archivist since ${this.model?.dateAdded?.getFullYear()}</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  /**\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,7 +1,14 @@
-import { CSSResultGroup, LitElement } from 'lit';
-import type { TileModel } from '../../models';
-export declare class CollectionTile extends LitElement {
-    model?: TileModel;
-    render(): import("lit-html").TemplateResult<1>;
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import type { TileModel } from '../../models';
+import '../image-block';
+export declare class CollectionTile extends LitElement {
+    model?: TileModel;
+    baseImageUrl?: string;
+    render(): TemplateResult<1>;
+    private get getImageBlockTemplate();
+    private get getTitleTemplate();
+    private get getTileStatsTemplate();
+    private get getItemsTemplate();
+    private get getSizeTemplate();
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,159 +1,125 @@
-import { __decorate } from "tslib";
-import { msg } from '@lit/localize';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-let CollectionTile = class CollectionTile extends LitElement {
-    render() {
-        var _a, _b, _c;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+import { formatUnitSize } from '../../utils/format-unit-size';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import '../image-block';
+let CollectionTile = class CollectionTile extends LitElement {
+    render() {
         return html `
-      <div id="container">
-        <div id="collection-image-title">
-          <div id="collection-title">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</div>
-          <div id="collection-image-container">
-            <div
-              id="collection-image"
-              style="background-image:url('https://archive.org/services/img/${(_b = this
-            .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
-            ></div>
+      <div class="container">
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
           </div>
         </div>
-        <div id="item-count-container">
-          <div id="item-count-image-container">${collectionIcon}</div>
-          <div id="item-count-stacked-text">
-            <div id="item-count">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.itemCount.toLocaleString()}</div>
-            <div id="items-text">${msg('items')}</div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    static get styles() {
-        const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
-        return css `
-      #collection-image-container {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-      }
-
-      #collection-image {
-        width: 16rem;
-        height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
-      }
-
-      #item-count-image-container svg {
-        filter: invert(100%);
-      }
-
-      #collection-image-title {
-        background-color: #666;
-        border: 1px solid #2c2c2c;
-        padding: 0.5rem;
-        border-top-left-radius: ${cornerRadiusCss};
-        border-top-right-radius: ${cornerRadiusCss};
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-      }
-
-      #collection-title {
-        font-weight: bold;
-        color: #fff;
-        font-size: 1.6rem;
-        text-align: center;
-        margin-bottom: 0.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        line-height: 2rem;
-        height: 4rem;
-      }
 
-      #container {
-        box-shadow: 1px 1px 2px 0px;
-        border-radius: ${cornerRadiusCss};
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      #container:hover > #collection-image-title > #collection-title {
-        text-decoration: underline;
-      }
-
-      /* this is a workaround for Safari 15 where the hover effects are not working */
-      #collection-image-title:hover > #collection-title {
-        text-decoration: underline;
-      }
+        ${this.getTileStatsTemplate}
+      </div>
+    `;
+    }
+    get getImageBlockTemplate() {
+        return html `
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+      >
+      </image-block>
+    `;
+    }
+    get getTitleTemplate() {
+        var _a;
+        return html `<div id="title">
+      <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
+    </div>`;
+    }
+    get getTileStatsTemplate() {
+        return html `
+      <div id="item-stats">
+        <div id="item-mediatype">${collectionIcon}</div>
 
-      #container:hover > #collection-image-title {
-        background-color: #757575;
-      }
+        <div id="stats-row">
+          ${this.getItemsTemplate} ${this.getSizeTemplate}
+        </div>
+      </div>
+    `;
+    }
+    get getItemsTemplate() {
+        var _a;
+        const collectionItems = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount.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>`
+            : ``;
+    }
+    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-count-container {
-        background-color: #444;
-        border-bottom: 1px solid #2c2c2c;
-        border-left: 1px solid #2c2c2c;
-        border-right: 1px solid #2c2c2c;
-        border-bottom-left-radius: ${cornerRadiusCss};
-        border-bottom-right-radius: ${cornerRadiusCss};
-        display: flex;
-        padding: 0rem 0.5rem;
-        height: 5.5rem;
-        align-items: center;
-      }
+        .item-info {
+          flex-grow: initial;
+        }
 
-      #item-count-image-container {
-        margin-right: 0.5rem;
-      }
+        h1.truncated {
+          color: ${whiteColor};
+        }
 
-      #item-count-stacked-text {
-        display: flex;
-        align-items: baseline;
-        color: #fff;
-      }
-      #item-count-image-container svg {
-        height: 2.5rem;
-        align-items: baseline;
-      }
+        #item-mediatype svg {
+          filter: invert(100%);
+          height: 2.5rem;
+          align-items: baseline;
+        }
 
-      #container:hover > #item-count-container {
-        background-color: #575757;
-      }
+        .container:hover > #title {
+          text-decoration: underline;
+        }
 
-      #item-count {
-        font-size: 1.4rem;
-        font-weight: bold;
-      }
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
 
-      #item-count-image {
-        width: 3rem;
-        height: 3rem;
-        margin-right: 1rem;
-      }
+        #item-stats {
+          display: flex;
+          padding: 0 5px 5px;
+          align-items: center;
+        }
 
-      #items-text {
-        font-size: 1.4rem;
-        font-weight: bold;
-        margin-left: 0.5rem;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], CollectionTile.prototype, "model", void 0);
-CollectionTile = __decorate([
-    customElement('collection-tile')
-], CollectionTile);
-export { CollectionTile };
+        #stats-row {
+          display: flex;
+          align-items: baseline;
+          color: ${whiteColor};
+          flex-direction: column;
+          margin-left: 10px;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], CollectionTile.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], CollectionTile.prototype, "baseImageUrl", void 0);
+CollectionTile = __decorate([
+    customElement('collection-tile')
+], CollectionTile);
+export { CollectionTile };
 //# sourceMappingURL=collection-tile.js.map