@internetarchive/collection-browser 0.0.1-alpha.1

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/tiles/grid/icons/favorite-filled.d.ts

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

package/dist/src/tiles/grid/icons/favorite-filled.js

@@ -0,0 +1,11 @@
+import { svg } from 'lit';
+export const favoriteFilledIcon = svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      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"
+      fill="#333"
+    />
+    <title>Icon of a star, filled in</title>
+  </svg>
+`;
+//# sourceMappingURL=favorite-filled.js.map

package/dist/src/tiles/grid/icons/favorite-filled.js.map

@@ -0,0 +1 @@
+{"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/tiles/grid/icons/reviews.d.ts

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

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

@@ -0,0 +1,11 @@
+import { svg } from 'lit';
+export const reviewsIcon = svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      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"
+      fill="#333"
+    />
+    <title>Icon of a speech bubble</title>
+  </svg>
+`;
+//# sourceMappingURL=reviews.js.map

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

@@ -0,0 +1 @@
+{"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/tiles/grid/icons/upload.d.ts

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

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

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+export const uploadIcon = svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of an arrow pointing upwards</title>
+  </svg>
+`;
+//# sourceMappingURL=upload.js.map

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

@@ -0,0 +1 @@
+{"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<1>;
+export default _default;

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

@@ -0,0 +1,11 @@
+import { html } from 'lit';
+export default html `
+  <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"
+      fill="#333"
+    />
+    <title>Eye icon</title>
+  </svg>
+`;
+//# sourceMappingURL=views.js.map

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,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,eAAe,IAAI,CAAA;;;;;;;;CAQlB,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport default html`\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

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from 'lit';
+import { TileModel } from '../../models';
+import '../../mediatype-icon';
+export declare class ItemTile extends LitElement {
+    model?: TileModel;
+    get renderItemImageView(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,240 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { formatCount } from '../../utils/format-count';
+import '../../mediatype-icon';
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import viewsIcon from './icons/views';
+let ItemTile = class ItemTile extends LitElement {
+    get renderItemImageView() {
+        var _a, _b;
+        const imgSrcUrl = `https://archive.org/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
+        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collection.includes('deemphasize');
+        return !containsDeemphasize
+            ? html `<div
+          id="item-image"
+          style="background-image:url(${imgSrcUrl})"
+        ></div>`
+            : html `<div id="item-image-box">
+          <div
+            id="item-image-deemphasize"
+            style="background-image:url(${imgSrcUrl})"
+          ></div>
+          <div class="tile-action no-preview">Content may be inappropriate</div>
+        </div>`;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || '';
+        const itemCreator = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator) || '-';
+        return html `
+      <div id="container">
+        <div id="title-image-container">
+          <p id="item-title" title=${itemTitle}>
+            ${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}
+          </p>
+          <div id="item-image-container">
+            ${this.renderItemImageView}
+          </div>
+          <div class="item-creator">
+            <span id="text-by">By:</span>
+            <span>${itemCreator}</span>
+          </div>
+        </div>
+        <div id="item-stats-container">
+          <div id="stats-holder">
+            <div class="col">
+              <mediatype-icon mediatype="${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}" showText="true">
+            </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: ${cornerRadiusCss};
+        box-shadow: 1px 1px 2px 0px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      #title-image-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding: 0.5rem;
+      }
+
+      #item-title {
+        font-weight: bold;
+        color: #000000;
+        font-size: 1.6rem;
+        text-align: center;
+        margin-top: 0rem;
+        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;
+      }
+
+      #item-image-container {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+      }
+
+      #item-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-image-box {
+        width: 16rem;
+        height: 16rem;
+        border-radius: 0.8rem;
+        overflow: hidden;
+        box-shadow: 1px 1px 2px 0px;
+        border: 5px solid #0000000;
+        position: relative;
+        display: flex;
+      }
+
+      #item-image-deemphasize {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        background-position: center;
+        background-size: cover;
+        filter: blur(15px);
+        position: absolute;
+        z-index: 1;
+      }
+
+      .tile-action {
+        border: 2px solid currentColor;
+        border-radius: 1px;
+        padding: 5px;
+        font-weight: 500;
+        width: auto;
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        top: 5.5rem;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #000000;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      #container:hover > #title-image-container > .item-title {
+        text-decoration: underline;
+      }
+
+      /** this is a workaround for Safari 15 where the hover effects are not working */
+      #title-image-container:hover > #item-title {
+        text-decoration: underline;
+      }
+
+      #container:hover > #item-title {
+        background-color: #fcfcfc;
+      }
+
+      /**  creator **/
+      .item-creator {
+        color: #000000;
+        display: -webkit-box;
+        font-size: 1.4rem;
+        height: 3rem;
+        margin: 0px;
+        overflow: hidden;
+        padding: 0.5rem;
+        text-align: center;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      #text-by {
+        font-weight: bold;
+      }
+
+      #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%;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ItemTile.prototype, "model", void 0);
+ItemTile = __decorate([
+    customElement('item-tile')
+], ItemTile);
+export { ItemTile };
+//# sourceMappingURL=item-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.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,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAGtC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAGtC,IAAI,mBAAmB;;QACrB,MAAM,SAAS,GAAG,oCAAoC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;QAC/E,MAAM,mBAAmB,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC3E,OAAO,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;wCAE4B,SAAS;gBACjC;YACV,CAAC,CAAC,IAAI,CAAA;;;0CAG8B,SAAS;;;eAGpC,CAAC;IACd,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;qCAGsB,SAAS;cAChC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;cAGjB,IAAI,CAAC,mBAAmB;;;;oBAIlB,WAAW;;;;;;2CAOf,MAAA,IAAI,CAAC,KAAK,0CAAE,SACd;;;gBAGE,SAAS;uCACc,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,kBAAkB;uCACK,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,WAAW;uCACY,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EACpB,OAAO,EACP,OAAO,CACR;;;;;KAKV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JnC,CAAC;IACJ,CAAC;CACF,CAAA;AAhP6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AADnC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiPpB;SAjPY,QAAQ","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `https://archive.org/services/img/${this.model?.identifier}`;\n    const containsDeemphasize = this.model?.collection.includes('deemphasize');\n    return !containsDeemphasize\n      ? html`<div\n          id=\"item-image\"\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>`\n      : html`<div id=\"item-image-box\">\n          <div\n            id=\"item-image-deemphasize\"\n            style=\"background-image:url(${imgSrcUrl})\"\n          ></div>\n          <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n        </div>`;\n  }\n\n  render() {\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <p id=\"item-title\" title=${itemTitle}>\n            ${this.model?.title}\n          </p>\n          <div id=\"item-image-container\">\n            ${this.renderItemImageView}\n          </div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon mediatype=\"${\n                this.model?.mediatype\n              }\" showText=\"true\">\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.viewCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.itemCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.favCount,\n                'short',\n                '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      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\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      #item-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-image-box {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        border: 5px solid #0000000;\n        position: relative;\n        display: flex;\n      }\n\n      #item-image-deemphasize {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n        filter: blur(15px);\n        position: absolute;\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 2px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\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      /**  creator **/\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\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/list/tile-list-compact.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { SortParam } from '@internetarchive/search-service';
+import { TileModel } from '../../models';
+import '../../mediatype-icon';
+export declare class TileListCompact extends LitElement {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    currentWidth?: number;
+    currentHeight?: number;
+    sortParam?: SortParam;
+    render(): import("lit-html").TemplateResult<1>;
+    private get date();
+    private get classSize();
+    private get formatSize();
+    static get styles(): import("lit").CSSResult;
+}

package/dist/src/tiles/list/tile-list-compact.js

@@ -0,0 +1,125 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { formatCount } from '../../utils/format-count';
+import { formatDate } from '../../utils/format-date';
+import '../../mediatype-icon';
+/*
+at 750 creator, title trimmed
+at 530
+*/
+let TileListCompact = class TileListCompact extends LitElement {
+    render() {
+        var _a, _b, _c, _d, _e;
+        return html `
+      <div id="list-compact" class="${this.classSize}">
+        <div id="views">
+          ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
+        </div>
+        <div id="title">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</div>
+        <div id="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="creator">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.creator}</div>
+        <div id="icon">
+          <mediatype-icon .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}></mediatype-icon>
+        </div>
+      </div>
+    `;
+    }
+    /*
+     * TODO: fix field names to match model in src/collection-browser.ts
+     * private get dateSortSelector()
+     * @see src/models.ts
+     */
+    get date() {
+        var _a, _b, _c, _d, _e;
+        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
+            case 'date':
+                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
+            case 'reviewdate':
+                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
+            case 'addeddate':
+                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
+            default:
+                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived; // publicdate
+        }
+    }
+    get classSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'mobile' : 'desktop';
+    }
+    get formatSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'short' : 'long';
+    }
+    static get styles() {
+        return css `
+      .mobile div {
+        font-size: 11px;
+      }
+      .desktop div {
+        font-size: 14px;
+      }
+
+      #list-compact {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        border-top: 1px solid #ddd !important;
+        padding-top: 5px;
+        align-items: center;
+      }
+
+      #list-compact.mobile {
+        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+      }
+      #list-compact.desktop {
+        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+      }
+
+      #list-compact:hover #title {
+        text-decoration: underline;
+      }
+
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+      }
+
+      #title,
+      #creator {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #views,
+      #date {
+        text-align: right;
+        color: #767676;
+      }
+      #icon {
+        padding-right: 6px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileListCompact.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], TileListCompact.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Number })
+], TileListCompact.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Number })
+], TileListCompact.prototype, "currentHeight", void 0);
+__decorate([
+    property({ type: Object })
+], TileListCompact.prototype, "sortParam", void 0);
+TileListCompact = __decorate([
+    customElement('tile-list-compact')
+], TileListCompact);
+export { TileListCompact };
+//# sourceMappingURL=tile-list-compact.js.map

package/dist/src/tiles/list/tile-list-compact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.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,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,sBAAsB,CAAC;AAE9B;;;EAGE;AAGF,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAW7C,MAAM;;QACJ,OAAO,IAAI,CAAA;sCACuB,IAAI,CAAC,SAAS;;YAExC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;0BAE1C,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;yBAClB,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;4BACnC,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO;;uCAER,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;KAGvD,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;;QACnB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAY,UAAU;;QACpB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDT,CAAC;IACJ,CAAC;CACF,CAAA;AAvG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAuB;AATvC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAwG3B;SAxGY,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n/*\nat 750 creator, title trimmed\nat 530\n*/\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-compact\" class=\"${this.classSize}\">\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"title\">${this.model?.title}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${this.model?.creator}</div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n    `;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      .mobile div {\n        font-size: 11px;\n      }\n      .desktop div {\n        font-size: 14px;\n      }\n\n      #list-compact {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        border-top: 1px solid #ddd !important;\n        padding-top: 5px;\n        align-items: center;\n      }\n\n      #list-compact.mobile {\n        grid-template-columns: 33px 3fr 30px 2fr 29.5px;\n      }\n      #list-compact.desktop {\n        grid-template-columns: 60px 3fr 90px 2fr 29.5px;\n      }\n\n      #list-compact:hover #title {\n        text-decoration: underline;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views,\n      #date {\n        text-align: right;\n        color: #767676;\n      }\n      #icon {\n        padding-right: 6px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/list/tile-list-detail.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import { SortParam } from '@internetarchive/search-service';
+import { TileModel } from '../../models';
+import '../../mediatype-icon';
+export declare class TileListDetail extends LitElement {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    currentWidth?: number;
+    currentHeight?: number;
+    sortParam?: SortParam;
+    render(): import("lit-html").TemplateResult<1>;
+    private description;
+    private get date();
+    private get classSize();
+    private get formatSize();
+    static get styles(): import("lit").CSSResult;
+}