@internetarchive/collection-browser 0.2.4-alpha.3 → 0.2.4-rc1

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

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { TileModel } from '../../models';
-import './tile-stats';
 export declare class AccountTile extends LitElement {
     model?: TileModel;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1,43 +1,52 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import './tile-stats';
+import { accountIcon } from './icons/account';
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import { uploadIcon } from './icons/upload';
 let AccountTile = class AccountTile extends LitElement {
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g;
         return html `
       <div class="outer-holder">
-        <div id="header-holder">
-          <div id="title-holder">
-            <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
-          </div>
-        </div>
-
         <div class="inner-holder">
-          <div id="avatar-holder">
-            <img
-              id="avatar"
-              alt="patron-avatar"
-              src="https://archive.org/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}"
-            />
+          <div id="header-holder">
+            <div id="title-holder">
+              <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
+            </div>
+            <div id="avatar-holder">
+              <div
+                id="avatar"
+                style="background-image: url('https://archive.org/services/img/${(_b = this
+            .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
+              ></div>
+            </div>
           </div>
-
           <div id="year-holder">
             <div id="archivist-since">
-              <span>
-                Archivist since ${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}
-              </span>
+              <h3>Archivist Since</h3>
+            </div>
+            <div id="year-holder">
+              <h3>${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}</h3>
+            </div>
+          </div>
+          <div id="status-holder">
+            <div id="patron-icon">${accountIcon}</div>
+            <div class="stat-icon">
+              ${uploadIcon}
+              <h3>${(_e = this.model) === null || _e === void 0 ? void 0 : _e.itemCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${favoriteFilledIcon}
+              <h3>${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${reviewsIcon}
+              <h3>${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}</h3>
             </div>
           </div>
         </div>
-
-        <tile-stats
-          .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
-          .itemCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount}
-          .favCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount}
-          .commentCount=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.commentCount}
-        >
-        </tile-stats>
       </div>
     `;
     }
@@ -49,8 +58,9 @@ let AccountTile = class AccountTile extends LitElement {
         margin: 0;
       }
 
-      span {
+      h3 {
         font-size: 14px;
+        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
@@ -62,22 +72,27 @@ let AccountTile = class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
-        flex-direction: column;
         text-align: center;
         width: 100%;
       }
 
       .inner-holder {
-        flex-grow: 1;
+        padding: 5px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #header-holder {
+        flex: 1;
       }
 
       #title-holder {
-        flex-shrink: 0;
         height: 40px;
+        margin-bottom: 5px;
       }
 
       #avatar-holder {
-        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -97,6 +112,22 @@ let AccountTile = class AccountTile extends LitElement {
         height: 40px;
       }
 
+      #year-holder {
+        margin: 0px;
+      }
+
+      #status-holder {
+        height: 25px;
+        display: flex;
+        justify-content: space-evenly;
+        line-height: initial;
+      }
+
+      #patron-icon {
+        height: 25px;
+        width: 25px;
+      }
+
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -106,9 +137,15 @@ let AccountTile = class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
+        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
+
+      .stat-icon {
+        height: 10px;
+        width: 10px;
+      }
     `;
     }
 };

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,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;oCAIqB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;;;sDASJ,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;kCAO1C,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;;;;uBAO/C,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmET,CAAC;IACJ,CAAC;CACF,CAAA;AA9G6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA+GvB;SA/GY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div class=\"outer-holder\">\n        <div id=\"header-holder\">\n          <div id=\"title-holder\">\n            <h1 class=\"truncated\">${this.model?.identifier}</h1>\n          </div>\n        </div>\n\n        <div class=\"inner-holder\">\n          <div id=\"avatar-holder\">\n            <img\n              id=\"avatar\"\n              alt=\"patron-avatar\"\n              src=\"https://archive.org/services/img/${this.model?.identifier}\"\n            />\n          </div>\n\n          <div id=\"year-holder\">\n            <div id=\"archivist-since\">\n              <span>\n                Archivist since ${this.model?.dateAdded?.getFullYear()}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <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      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        color: black;\n        font-size: 16px;\n        margin: 0;\n      }\n\n      span {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: 0px;\n      }\n\n      .outer-holder {\n        background-color: #fcf5e6;\n        border: 1px #2c2c2c;\n        border-radius: 4px;\n        box-shadow: 1px 1px 2px 0px;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        text-align: center;\n        width: 100%;\n      }\n\n      .inner-holder {\n        flex-grow: 1;\n      }\n\n      #title-holder {\n        flex-shrink: 0;\n        height: 40px;\n      }\n\n      #avatar-holder {\n        margin-top: 5px;\n        margin-bottom: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      #avatar {\n        background-position: 50% 50%;\n        border-radius: 50%;\n        width: 160px;\n        height: 160px;\n        box-shadow: 1px 1px 2px #888888;\n      }\n\n      #year-holder {\n        margin-bottom: 5px;\n        height: 40px;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n    `;\n  }\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,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;;sCAKuB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;iFAKqB,MAAA,IAAI;aAClE,KAAK,0CAAE,UAAU;;;;;;;;;oBAShB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;oCAIpB,WAAW;;gBAE/B,UAAU;oBACN,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;gBAGzB,kBAAkB;oBACd,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;;;gBAGxB,WAAW;oBACP,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;;KAKvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT,CAAC;IACJ,CAAC;CACF,CAAA;AAhJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiJvB;SAjJY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport { accountIcon } from './icons/account';\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport { uploadIcon } from './icons/upload';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div class=\"outer-holder\">\n        <div class=\"inner-holder\">\n          <div id=\"header-holder\">\n            <div id=\"title-holder\">\n              <h1 class=\"truncated\">${this.model?.identifier}</h1>\n            </div>\n            <div id=\"avatar-holder\">\n              <div\n                id=\"avatar\"\n                style=\"background-image: url('https://archive.org/services/img/${this\n                  .model?.identifier}')\"\n              ></div>\n            </div>\n          </div>\n          <div id=\"year-holder\">\n            <div id=\"archivist-since\">\n              <h3>Archivist Since</h3>\n            </div>\n            <div id=\"year-holder\">\n              <h3>${this.model?.dateAdded?.getFullYear()}</h3>\n            </div>\n          </div>\n          <div id=\"status-holder\">\n            <div id=\"patron-icon\">${accountIcon}</div>\n            <div class=\"stat-icon\">\n              ${uploadIcon}\n              <h3>${this.model?.itemCount}</h3>\n            </div>\n            <div class=\"stat-icon\">\n              ${favoriteFilledIcon}\n              <h3>${this.model?.favCount}</h3>\n            </div>\n            <div class=\"stat-icon\">\n              ${reviewsIcon}\n              <h3>${this.model?.commentCount}</h3>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        color: black;\n        font-size: 16px;\n        margin: 0;\n      }\n\n      h3 {\n        font-size: 14px;\n        font-weight: bold;\n        color: #2c2c2c;\n        margin: 0px;\n      }\n\n      .outer-holder {\n        background-color: #fcf5e6;\n        border: 1px #2c2c2c;\n        border-radius: 4px;\n        box-shadow: 1px 1px 2px 0px;\n        height: 100%;\n        display: flex;\n        text-align: center;\n        width: 100%;\n      }\n\n      .inner-holder {\n        padding: 5px;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #header-holder {\n        flex: 1;\n      }\n\n      #title-holder {\n        height: 40px;\n        margin-bottom: 5px;\n      }\n\n      #avatar-holder {\n        margin-bottom: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      #avatar {\n        background-position: 50% 50%;\n        border-radius: 50%;\n        width: 160px;\n        height: 160px;\n        box-shadow: 1px 1px 2px #888888;\n      }\n\n      #year-holder {\n        margin-bottom: 5px;\n        height: 40px;\n      }\n\n      #year-holder {\n        margin: 0px;\n      }\n\n      #status-holder {\n        height: 25px;\n        display: flex;\n        justify-content: space-evenly;\n        line-height: initial;\n      }\n\n      #patron-icon {\n        height: 25px;\n        width: 25px;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        word-break: break-all;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .stat-icon {\n        height: 10px;\n        width: 10px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/grid/icons/account.d.ts

@@ -0,0 +1 @@
+export declare const accountIcon: import("lit-html").TemplateResult<2>;

package/dist/src/tiles/grid/icons/account.js

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+export const accountIcon = svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of a person</title>
+  </svg>
+`;
+//# sourceMappingURL=account.js.map

package/dist/src/tiles/grid/icons/account.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/account.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;CAS7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const accountIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z\"\n      fill=\"#333\"\n      fill-rule=\"evenodd\"\n    />\n    <title>Icon of a person</title>\n  </svg>\n`;\n"]}

package/dist/src/{assets/img → tiles/grid}/icons/favorite-filled.js.map

@@ -1 +1 @@
-{"version":3,"file":"favorite-filled.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/favorite-filled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;CAQpC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const favoriteFilledIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z\"\n      fill=\"#333\"\n    />\n    <title>Icon of a star, filled in</title>\n  </svg>\n`;\n"]}
+{"version":3,"file":"favorite-filled.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/favorite-filled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;CAQpC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const favoriteFilledIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z\"\n      fill=\"#333\"\n    />\n    <title>Icon of a star, filled in</title>\n  </svg>\n`;\n"]}

package/dist/src/{assets/img → tiles/grid}/icons/reviews.js.map

@@ -1 +1 @@
-{"version":3,"file":"reviews.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/reviews.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;CAQ7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const reviewsIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m100 7.78013601c0-2.14552613-.7593357-3.978597-2.278007-5.4992126-1.5186713-1.52061561-3.3493984-2.28092341-5.4921813-2.28092341h-84.54977287c-2.08268321 0-3.88336049.7603078-5.40203183 2.28092341-1.51867133 1.5206156-2.278007 3.35368647-2.278007 5.4992126v51.49262709c0 2.0853495.75933567 3.8883321 2.278007 5.4089477 1.51867134 1.5206156 3.31934862 2.2809234 5.40203183 2.2809234h10.53361537l.3571304 33.0373658 32.4087237-33.0373658h41.2468361c2.1427829 0 3.97351-.7603078 5.4921813-2.2809234s2.278007-3.3235982 2.278007-5.4089477z\"\n      fill=\"#333\"\n    />\n    <title>Icon of a speech bubble</title>\n  </svg>\n`;\n"]}
+{"version":3,"file":"reviews.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/reviews.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;CAQ7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const reviewsIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m100 7.78013601c0-2.14552613-.7593357-3.978597-2.278007-5.4992126-1.5186713-1.52061561-3.3493984-2.28092341-5.4921813-2.28092341h-84.54977287c-2.08268321 0-3.88336049.7603078-5.40203183 2.28092341-1.51867133 1.5206156-2.278007 3.35368647-2.278007 5.4992126v51.49262709c0 2.0853495.75933567 3.8883321 2.278007 5.4089477 1.51867134 1.5206156 3.31934862 2.2809234 5.40203183 2.2809234h10.53361537l.3571304 33.0373658 32.4087237-33.0373658h41.2468361c2.1427829 0 3.97351-.7603078 5.4921813-2.2809234s2.278007-3.3235982 2.278007-5.4089477z\"\n      fill=\"#333\"\n    />\n    <title>Icon of a speech bubble</title>\n  </svg>\n`;\n"]}

package/dist/src/{assets/img → tiles/grid}/icons/upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;CAS5B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const uploadIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z\"\n      fill=\"#333\"\n      fill-rule=\"evenodd\"\n    />\n    <title>Icon of an arrow pointing upwards</title>\n  </svg>\n`;\n"]}
+{"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;CAS5B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const uploadIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z\"\n      fill=\"#333\"\n      fill-rule=\"evenodd\"\n    />\n    <title>Icon of an arrow pointing upwards</title>\n  </svg>\n`;\n"]}

package/dist/src/tiles/grid/icons/views.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit-html").TemplateResult<2>;
+export default _default;

package/dist/src/{assets/img → tiles/grid}/icons/views.js

@@ -1,5 +1,5 @@
 import { svg } from 'lit';
-export const viewsIcon = svg `
+export default svg `
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

package/dist/src/tiles/grid/icons/views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;CAQjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\"\n      fill=\"#333\"\n    />\n    <title>Eye icon</title>\n  </svg>\n`;\n"]}

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

@@ -2,7 +2,6 @@ import { CSSResultGroup, LitElement } from 'lit';
 import { TileModel } from '../../models';
 import '../mediatype-icon';
 import '../item-image';
-import './tile-stats';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
     baseImageUrl?: string;

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

@@ -2,78 +2,91 @@ 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 { formatCount } from '../../utils/format-count';
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import viewsIcon from './icons/views';
 import '../mediatype-icon';
 import '../item-image';
-import './tile-stats';
 let ItemTile = class ItemTile extends LitElement {
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
+        var _a, _b, _c, _d, _e, _f, _g;
+        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || nothing;
         const itemCreator = (_b = this.model) === null || _b === void 0 ? void 0 : _b.creator;
         return html `
       <div id="container">
-        <div id="inner-wrapper">
-          <div class="title-wrapper">
-            <h1 id="item-title" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
+        <div id="title-image-container">
+          <h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
+          <div id="item-image-container">
+            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
+            </item-image>
           </div>
-
-          <div class="image-wrapper">
-            <div id="item-image-container">
-              <item-image
-                .model=${this.model}
-                .baseImageUrl=${this.baseImageUrl}>
-              </item-image>
-            </div>
-            <div class="item-creator">
-              <div class="truncated">
-                ${itemCreator
+          <div class="item-creator">
+            <div class="truncated">
+              ${itemCreator
             ? html `<span>by&nbsp;${itemCreator}</span>`
             : nothing}
-              </div>
             </div>
           </div>
         </div>
 
-        <tile-stats 
-          .mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
-          .viewCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount}
-          .favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
-          .commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}>
-        </tile-stats>
+        <div class="hr"></div>
+
+        <div id="item-stats-container">
+          <div id="stats-holder">
+            <div class="col">
+              <mediatype-icon
+                .mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
+                .collection=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.collections}
+                style="--iconHeight:25px; --iconWidth:25px;"
+              >
+              </mediatype-icon>
+            </div>
+            <div class="col">
+              ${viewsIcon}
+              <p class="status-text">
+                ${formatCount((_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount, 'short', 'short')}
+              </p>
+            </div>
+            <div class="col">
+              ${favoriteFilledIcon}
+              <p class="status-text">
+                ${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount, 'short', 'short')}
+              </p>
+            </div>
+            <div class="col">
+              ${reviewsIcon}
+              <p class="status-text">
+                ${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount, 'short', 'short')}
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     `;
     }
     static get styles() {
+        const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
         return css `
       #container {
         background-color: #ffffff;
-        border-radius: var(--collectionTileCornerRadius, 4px);
+        border-radius: ${cornerRadiusCss};
         box-shadow: 1px 1px 2px 0px;
         display: flex;
         flex-direction: column;
         height: 100%;
+        position: relative;
       }
 
-      #inner-wrapper {
-        padding-top: 5px;
-        padding-left: 5px;
-        padding-right: 5px;
-      }
-
-      .title-wrapper {
-        flex-shrink: 0;
-      }
-
-      .image-wrapper {
-        flex-grow: 1;
+      #title-image-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding: 0.5rem 0.5rem 0 0.5rem;
       }
 
       #item-title {
-        flex: 1;
         color: #2c2c2c;
-        min-width: 0; /* Important for long words! */
         font-size: 1.6rem;
         text-align: center;
         margin-top: 0rem;
@@ -81,7 +94,6 @@ let ItemTile = class ItemTile extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
-        word-wrap: break-word;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         line-height: 2rem;
@@ -92,7 +104,6 @@ let ItemTile = class ItemTile extends LitElement {
         display: flex;
         justify-content: center;
         flex: 1;
-        height: 16rem;
       }
 
       .hidden {
@@ -118,7 +129,6 @@ let ItemTile = class ItemTile extends LitElement {
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
-        margin-top: 5px;
       }
 
       .truncated {
@@ -138,6 +148,44 @@ let ItemTile = class ItemTile extends LitElement {
         line-height: 2rem;
         text-align: center;
       }
+
+      .hr {
+        border: 0.5px solid #ccc;
+      }
+
+      #item-stats-container {
+        align-items: center;
+        display: flex;
+        height: 5.5rem;
+        padding-left: 1rem;
+        padding-right: 0.5rem;
+      }
+
+      #stats-holder {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+      }
+
+      svg {
+        height: 10px;
+        width: 10px;
+      }
+
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+
+      .col {
+        width: 25%;
+      }
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAGtB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC;QACpC,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;;wCAIyB,SAAS,CAAC,SAAS,CAAC,IAAI,SAAS;;;;;;yBAMhD,IAAI,CAAC,KAAK;gCACH,IAAI,CAAC,YAAY;;;;;kBAM/B,WAAW;YACT,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS;YAC3C,CAAC,CAAC,OACN;;;;;;;uBAOO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FT,CAAC;IACJ,CAAC;CACF,CAAA;AA3I6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAHvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4IpB;SA5IY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../../models';\n\nimport '../mediatype-icon';\nimport '../item-image';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title;\n    const itemCreator = this.model?.creator;\n    return html`\n      <div id=\"container\">\n        <div id=\"inner-wrapper\">\n          <div class=\"title-wrapper\">\n            <h1 id=\"item-title\" title=${ifDefined(itemTitle)}>${itemTitle}</h1>\n          </div>\n\n          <div class=\"image-wrapper\">\n            <div id=\"item-image-container\">\n              <item-image\n                .model=${this.model}\n                .baseImageUrl=${this.baseImageUrl}>\n              </item-image>\n            </div>\n            <div class=\"item-creator\">\n              <div class=\"truncated\">\n                ${\n                  itemCreator\n                    ? html`<span>by&nbsp;${itemCreator}</span>`\n                    : nothing\n                }\n              </div>\n            </div>\n          </div>\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  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      #inner-wrapper {\n        padding-top: 5px;\n        padding-left: 5px;\n        padding-right: 5px;\n      }\n\n      .title-wrapper {\n        flex-shrink: 0;\n      }\n\n      .image-wrapper {\n        flex-grow: 1;\n      }\n\n      #item-title {\n        flex: 1;\n        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n        height: 16rem;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n        margin-top: 5px;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        color: #2c2c2c;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,OAAO,CAAC;QAC/C,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,SAAS;;iCAE3B,IAAI,CAAC,KAAK,kBAAkB,IAAI,CAAC,YAAY;;;;;gBAK9D,WAAW;YACX,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS;YAC3C,CAAC,CAAC,OAAO;;;;;;;;;;;6BAWI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;;;gBAMrC,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AAxL6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAHvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB;SAzLY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title || nothing;\n    const itemCreator = this.model?.creator;\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${itemTitle}</h1>\n          <div id=\"item-image-container\">\n            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>\n            </item-image>\n          </div>\n          <div class=\"item-creator\">\n            <div class=\"truncated\">\n              ${itemCreator\n                ? html`<span>by&nbsp;${itemCreator}</span>`\n                : nothing}\n            </div>\n          </div>\n        </div>\n\n        <div class=\"hr\"></div>\n\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                .collection=${this.model?.collections}\n                style=\"--iconHeight:25px; --iconWidth:25px;\"\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem 0.5rem 0 0.5rem;\n      }\n\n      #item-title {\n        color: #2c2c2c;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        color: #2c2c2c;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hr {\n        border: 0.5px solid #ccc;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/mediatype-icon.js

@@ -39,10 +39,6 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
     }
     static get styles() {
         return css `
-      #icon {
-        height: var(--iconHeight, 25px);
-      }
-
       .status-text {
         font-size: 14px;
         color: #2c2c2c;

package/dist/src/tiles/mediatype-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IAmEhD,CAAC;IAjEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAwEzB;SAxEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #icon {\n        height: var(--iconHeight, 25px);\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IA+DhD,CAAC;IA7DC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB;SApEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.4-alpha.3",
+  "version": "0.2.4-rc1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

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

@@ -2,7 +2,10 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TileModel } from '../../models';
 
-import './tile-stats';
+import { accountIcon } from './icons/account';
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import { uploadIcon } from './icons/upload';
 
 @customElement('account-tile')
 export class AccountTile extends LitElement {
@@ -11,37 +14,43 @@ export class AccountTile extends LitElement {
   render() {
     return html`
       <div class="outer-holder">
-        <div id="header-holder">
-          <div id="title-holder">
-            <h1 class="truncated">${this.model?.identifier}</h1>
-          </div>
-        </div>
-
         <div class="inner-holder">
-          <div id="avatar-holder">
-            <img
-              id="avatar"
-              alt="patron-avatar"
-              src="https://archive.org/services/img/${this.model?.identifier}"
-            />
+          <div id="header-holder">
+            <div id="title-holder">
+              <h1 class="truncated">${this.model?.identifier}</h1>
+            </div>
+            <div id="avatar-holder">
+              <div
+                id="avatar"
+                style="background-image: url('https://archive.org/services/img/${this
+                  .model?.identifier}')"
+              ></div>
+            </div>
           </div>
-
           <div id="year-holder">
             <div id="archivist-since">
-              <span>
-                Archivist since ${this.model?.dateAdded?.getFullYear()}
-              </span>
+              <h3>Archivist Since</h3>
+            </div>
+            <div id="year-holder">
+              <h3>${this.model?.dateAdded?.getFullYear()}</h3>
+            </div>
+          </div>
+          <div id="status-holder">
+            <div id="patron-icon">${accountIcon}</div>
+            <div class="stat-icon">
+              ${uploadIcon}
+              <h3>${this.model?.itemCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${favoriteFilledIcon}
+              <h3>${this.model?.favCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${reviewsIcon}
+              <h3>${this.model?.commentCount}</h3>
             </div>
           </div>
         </div>
-
-        <tile-stats
-          .mediatype=${this.model?.mediatype}
-          .itemCount=${this.model?.itemCount}
-          .favCount=${this.model?.favCount}
-          .commentCount=${this.model?.commentCount}
-        >
-        </tile-stats>
       </div>
     `;
   }
@@ -54,8 +63,9 @@ export class AccountTile extends LitElement {
         margin: 0;
       }
 
-      span {
+      h3 {
         font-size: 14px;
+        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
@@ -67,22 +77,27 @@ export class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
-        flex-direction: column;
         text-align: center;
         width: 100%;
       }
 
       .inner-holder {
-        flex-grow: 1;
+        padding: 5px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #header-holder {
+        flex: 1;
       }
 
       #title-holder {
-        flex-shrink: 0;
         height: 40px;
+        margin-bottom: 5px;
       }
 
       #avatar-holder {
-        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -102,6 +117,22 @@ export class AccountTile extends LitElement {
         height: 40px;
       }
 
+      #year-holder {
+        margin: 0px;
+      }
+
+      #status-holder {
+        height: 25px;
+        display: flex;
+        justify-content: space-evenly;
+        line-height: initial;
+      }
+
+      #patron-icon {
+        height: 25px;
+        width: 25px;
+      }
+
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -111,9 +142,15 @@ export class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
+        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
+
+      .stat-icon {
+        height: 10px;
+        width: 10px;
+      }
     `;
   }
 }

package/src/tiles/grid/icons/account.ts

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+
+export const accountIcon = svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of a person</title>
+  </svg>
+`;

package/src/{assets/img → tiles/grid}/icons/views.ts

@@ -1,6 +1,6 @@
 import { svg } from 'lit';
 
-export const viewsIcon = svg`
+export default svg`
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

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

@@ -1,13 +1,16 @@
 /* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { TileModel } from '../../models';
+import { formatCount } from '../../utils/format-count';
+
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import viewsIcon from './icons/views';
 
 import '../mediatype-icon';
 import '../item-image';
-import './tile-stats';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
@@ -16,74 +19,84 @@ export class ItemTile extends LitElement {
   @property({ type: String }) baseImageUrl?: string;
 
   render() {
-    const itemTitle = this.model?.title;
+    const itemTitle = this.model?.title || nothing;
     const itemCreator = this.model?.creator;
     return html`
       <div id="container">
-        <div id="inner-wrapper">
-          <div class="title-wrapper">
-            <h1 id="item-title" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
+        <div id="title-image-container">
+          <h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
+          <div id="item-image-container">
+            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
+            </item-image>
           </div>
-
-          <div class="image-wrapper">
-            <div id="item-image-container">
-              <item-image
-                .model=${this.model}
-                .baseImageUrl=${this.baseImageUrl}>
-              </item-image>
-            </div>
-            <div class="item-creator">
-              <div class="truncated">
-                ${
-                  itemCreator
-                    ? html`<span>by&nbsp;${itemCreator}</span>`
-                    : nothing
-                }
-              </div>
+          <div class="item-creator">
+            <div class="truncated">
+              ${itemCreator
+                ? html`<span>by&nbsp;${itemCreator}</span>`
+                : nothing}
             </div>
           </div>
         </div>
 
-        <tile-stats 
-          .mediatype=${this.model?.mediatype}
-          .viewCount=${this.model?.viewCount}
-          .favCount=${this.model?.favCount}
-          .commentCount=${this.model?.commentCount}>
-        </tile-stats>
+        <div class="hr"></div>
+
+        <div id="item-stats-container">
+          <div id="stats-holder">
+            <div class="col">
+              <mediatype-icon
+                .mediatype=${this.model?.mediatype}
+                .collection=${this.model?.collections}
+                style="--iconHeight:25px; --iconWidth:25px;"
+              >
+              </mediatype-icon>
+            </div>
+            <div class="col">
+              ${viewsIcon}
+              <p class="status-text">
+                ${formatCount(this.model?.viewCount, 'short', 'short')}
+              </p>
+            </div>
+            <div class="col">
+              ${favoriteFilledIcon}
+              <p class="status-text">
+                ${formatCount(this.model?.itemCount, 'short', 'short')}
+              </p>
+            </div>
+            <div class="col">
+              ${reviewsIcon}
+              <p class="status-text">
+                ${formatCount(this.model?.favCount, 'short', 'short')}
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
+    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
+
     return css`
       #container {
         background-color: #ffffff;
-        border-radius: var(--collectionTileCornerRadius, 4px);
+        border-radius: ${cornerRadiusCss};
         box-shadow: 1px 1px 2px 0px;
         display: flex;
         flex-direction: column;
         height: 100%;
+        position: relative;
       }
 
-      #inner-wrapper {
-        padding-top: 5px;
-        padding-left: 5px;
-        padding-right: 5px;
-      }
-
-      .title-wrapper {
-        flex-shrink: 0;
-      }
-
-      .image-wrapper {
-        flex-grow: 1;
+      #title-image-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding: 0.5rem 0.5rem 0 0.5rem;
       }
 
       #item-title {
-        flex: 1;
         color: #2c2c2c;
-        min-width: 0; /* Important for long words! */
         font-size: 1.6rem;
         text-align: center;
         margin-top: 0rem;
@@ -91,7 +104,6 @@ export class ItemTile extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
-        word-wrap: break-word;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         line-height: 2rem;
@@ -102,7 +114,6 @@ export class ItemTile extends LitElement {
         display: flex;
         justify-content: center;
         flex: 1;
-        height: 16rem;
       }
 
       .hidden {
@@ -128,7 +139,6 @@ export class ItemTile extends LitElement {
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
-        margin-top: 5px;
       }
 
       .truncated {
@@ -148,6 +158,44 @@ export class ItemTile extends LitElement {
         line-height: 2rem;
         text-align: center;
       }
+
+      .hr {
+        border: 0.5px solid #ccc;
+      }
+
+      #item-stats-container {
+        align-items: center;
+        display: flex;
+        height: 5.5rem;
+        padding-left: 1rem;
+        padding-right: 0.5rem;
+      }
+
+      #stats-holder {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+      }
+
+      svg {
+        height: 10px;
+        width: 10px;
+      }
+
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+
+      .col {
+        width: 25%;
+      }
     `;
   }
 }

package/src/tiles/mediatype-icon.ts

@@ -50,10 +50,6 @@ export class MediatypeIcon extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      #icon {
-        height: var(--iconHeight, 25px);
-      }
-
       .status-text {
         font-size: 14px;
         color: #2c2c2c;

package/dist/src/assets/img/icons/views.d.ts

@@ -1 +0,0 @@
-export declare const viewsIcon: import("lit-html").TemplateResult<2>;

package/dist/src/assets/img/icons/views.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const viewsIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\"\n      fill=\"#333\"\n    />\n    <title>Eye icon</title>\n  </svg>\n`;\n"]}

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

@@ -1,10 +0,0 @@
-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,106 +0,0 @@
-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() {
-        console.log('tile-stats here');
-        return html `
-      <div class="stats-wrapper">
-        <div id="stats-holder">
-          <div class="col">
-            <mediatype-icon
-              .mediatype=${this.mediatype}
-              style="--iconHeight:25px; --iconWidth:25px;"
-            >
-            </mediatype-icon>
-          </div>
-          <div class="col">
-            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
-            <p class="status-text">
-              ${formatCount(this.mediatype === 'account' ? this.itemCount : this.viewCount, 'short', 'short')}
-            </p>
-          </div>
-          <div class="col">
-            ${favoriteFilledIcon}
-            <p class="status-text">
-              ${formatCount(this.favCount, 'short', 'short')}
-            </p>
-          </div>
-          <div class="col">
-            ${reviewsIcon}
-            <p class="status-text">
-              ${formatCount(this.commentCount, 'short', 'short')}
-            </p>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    static get styles() {
-        return css `
-      .stats-wrapper {
-        height: 35px;
-        flex-shrink: 0;
-      }
-
-      #stats-holder {
-        border-top: 1px solid #bbb;
-        align-items: center;
-        display: flex;
-        flex: 1;
-        justify-content: space-evenly;
-        text-align: center;
-        width: 100%;
-        padding-top: 5px;
-        padding-bottom: 5px;
-      }
-
-      .col {
-        width: 25%;
-        height: 25px;
-      }
-
-      svg {
-        height: 10px;
-        width: 10px;
-        display: block;
-        margin: auto;
-      }
-
-      .status-text {
-        font-size: 14px;
-        height: 15px;
-        color: #2c2c2c;
-        line-height: 20px;
-        margin: auto;
-        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 };
-//# sourceMappingURL=tile-stats.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;QAC9B,OAAO,IAAI,CAAA;;;;;2BAKY,IAAI,CAAC,SAAS;;;;;;cAM3B,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;gBAEnD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;;cAID,kBAAkB;;gBAEhB,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;cAI9C,WAAW;;gBAET,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;KAK3D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AA3F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4FrB;SA5FY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    console.log('tile-stats here')\n    return html`\n      <div class=\"stats-wrapper\">\n        <div id=\"stats-holder\">\n          <div class=\"col\">\n            <mediatype-icon\n              .mediatype=${this.mediatype}\n              style=\"--iconHeight:25px; --iconWidth:25px;\"\n            >\n            </mediatype-icon>\n          </div>\n          <div class=\"col\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              ${formatCount(\n                this.mediatype === 'account' ? this.itemCount : this.viewCount,\n                'short',\n                'short'\n              )}\n            </p>\n          </div>\n          <div class=\"col\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              ${formatCount(this.favCount, 'short', 'short')}\n            </p>\n          </div>\n          <div class=\"col\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              ${formatCount(this.commentCount, 'short', 'short')}\n            </p>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .stats-wrapper {\n        height: 35px;\n        flex-shrink: 0;\n      }\n\n      #stats-holder {\n        border-top: 1px solid #bbb;\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      .col {\n        width: 25%;\n        height: 25px;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n        display: block;\n        margin: auto;\n      }\n\n      .status-text {\n        font-size: 14px;\n        height: 15px;\n        color: #2c2c2c;\n        line-height: 20px;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,104 +0,0 @@
-import { css, CSSResultGroup, 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';
-
-@customElement('tile-stats')
-export class TileStats extends LitElement {
-  @property({ type: String }) mediatype?: string;
-
-  @property({ type: Number }) itemCount?: number;
-
-  @property({ type: Number }) viewCount?: number;
-
-  @property({ type: Number }) favCount?: number;
-
-  @property({ type: Number }) commentCount?: number;
-
-  render() {
-    console.log('tile-stats here')
-    return html`
-      <div class="stats-wrapper">
-        <div id="stats-holder">
-          <div class="col">
-            <mediatype-icon
-              .mediatype=${this.mediatype}
-              style="--iconHeight:25px; --iconWidth:25px;"
-            >
-            </mediatype-icon>
-          </div>
-          <div class="col">
-            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
-            <p class="status-text">
-              ${formatCount(
-                this.mediatype === 'account' ? this.itemCount : this.viewCount,
-                'short',
-                'short'
-              )}
-            </p>
-          </div>
-          <div class="col">
-            ${favoriteFilledIcon}
-            <p class="status-text">
-              ${formatCount(this.favCount, 'short', 'short')}
-            </p>
-          </div>
-          <div class="col">
-            ${reviewsIcon}
-            <p class="status-text">
-              ${formatCount(this.commentCount, 'short', 'short')}
-            </p>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .stats-wrapper {
-        height: 35px;
-        flex-shrink: 0;
-      }
-
-      #stats-holder {
-        border-top: 1px solid #bbb;
-        align-items: center;
-        display: flex;
-        flex: 1;
-        justify-content: space-evenly;
-        text-align: center;
-        width: 100%;
-        padding-top: 5px;
-        padding-bottom: 5px;
-      }
-
-      .col {
-        width: 25%;
-        height: 25px;
-      }
-
-      svg {
-        height: 10px;
-        width: 10px;
-        display: block;
-        margin: auto;
-      }
-
-      .status-text {
-        font-size: 14px;
-        height: 15px;
-        color: #2c2c2c;
-        line-height: 20px;
-        margin: auto;
-        display: block;
-        text-align: center;
-      }
-    `;
-  }
-}