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

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

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

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

@@ -1,7 +1,7 @@
-import { css } from 'lit';
-/**
- * Base item-image styles
- */
+import { css } from 'lit';
+/**
+ * Base item-image styles
+ */
 export const baseItemImageStyles = css `
   .drop-shadow {
     filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
@@ -10,18 +10,14 @@ export const baseItemImageStyles = css `
   }
 
   .list-box {
-    width: 100%;
-    height: 100%;
     overflow: hidden;
     box-sizing: border-box;
-    display: flex;
+    display: inline-block;
     position: relative;
-    max-width: 100px;
   }
 
   .contain {
     object-fit: contain;
-    object-position: top;
     height: 100%;
     width: 100%;
   }
@@ -31,12 +27,13 @@ export const baseItemImageStyles = css `
   }
 
   .blur {
-    filter: blur(5px);
+    filter: blur(15px);
+    box-shadow: 1px 1px 2px 0px;
   }
-`;
-/**
- * Waveform styles
- */
+`;
+/**
+ * Waveform styles
+ */
 export const waveformGradientStyles = css `
   .waveform {
     mix-blend-mode: screen;
@@ -99,5 +96,5 @@ export const waveformGradientStyles = css `
       hsl(0, 0%, 0%)
     );
   }
-`;
+`;
 //# sourceMappingURL=item-image-styles.js.map

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import './tile-stats';
-let AccountTile = class AccountTile extends LitElement {
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './tile-stats';
+let AccountTile = class AccountTile extends LitElement {
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return html `
       <div class="account-tile-main">
         <div id="title">
@@ -33,9 +33,9 @@ let AccountTile = class AccountTile extends LitElement {
         >
         </tile-stats>
       </div>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       h1 {
         color: black;
@@ -113,14 +113,14 @@ let AccountTile = class AccountTile extends LitElement {
         line-height: 2rem;
         text-align: center;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], AccountTile.prototype, "model", void 0);
-AccountTile = __decorate([
-    customElement('account-tile')
-], AccountTile);
-export { AccountTile };
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], AccountTile.prototype, "model", void 0);
+AccountTile = __decorate([
+    customElement('account-tile')
+], AccountTile);
+export { AccountTile };
 //# sourceMappingURL=account-tile.js.map

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

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

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

@@ -1,11 +1,11 @@
-import { __decorate } from "tslib";
-import { msg } from '@lit/localize';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-let CollectionTile = class CollectionTile extends LitElement {
-    render() {
-        var _a, _b, _c;
+import { __decorate } from "tslib";
+import { msg } from '@lit/localize';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+let CollectionTile = class CollectionTile extends LitElement {
+    render() {
+        var _a, _b, _c;
         return html `
       <div id="container">
         <div id="collection-image-title">
@@ -13,7 +13,7 @@ let CollectionTile = class CollectionTile extends LitElement {
           <div id="collection-image-container">
             <div
               id="collection-image"
-              style="background-image:url('https://archive.org/services/img/${(_b = this
+              style="background-image:url('https://archive.org/services/img/${(_b = this
             .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
             ></div>
           </div>
@@ -26,10 +26,10 @@ let CollectionTile = class CollectionTile extends LitElement {
           </div>
         </div>
       </div>
-    `;
-    }
-    static get styles() {
-        const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
+    `;
+    }
+    static get styles() {
+        const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
         return css `
       #collection-image-container {
         display: flex;
@@ -146,14 +146,14 @@ let CollectionTile = class CollectionTile extends LitElement {
         font-weight: bold;
         margin-left: 0.5rem;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], CollectionTile.prototype, "model", void 0);
-CollectionTile = __decorate([
-    customElement('collection-tile')
-], CollectionTile);
-export { CollectionTile };
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CollectionTile.prototype, "model", void 0);
+CollectionTile = __decorate([
+    customElement('collection-tile')
+], CollectionTile);
+export { CollectionTile };
 //# sourceMappingURL=collection-tile.js.map

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

@@ -1,24 +1,24 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../../models';
-import '../image-block';
-import '../text-snippet-block';
-import '../item-image';
-import '../mediatype-icon';
-import './tile-stats';
-export declare class ItemTile extends LitElement {
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    model?: TileModel;
-    sortParam?: SortParam;
-    render(): TemplateResult<1>;
-    /**
-     * Templates
-     */
-    private get doesSortedByDate();
-    private get sortedDateInfoTemplate();
-    private get creatorTemplate();
-    private get textSnippetsTemplate();
-    private get hasSnippets();
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
+import '../image-block';
+import '../text-snippet-block';
+import '../item-image';
+import '../mediatype-icon';
+import './tile-stats';
+export declare class ItemTile extends LitElement {
+    baseImageUrl?: string;
+    loggedIn: boolean;
+    model?: TileModel;
+    sortParam?: SortParam;
+    render(): TemplateResult<1>;
+    /**
+     * Templates
+     */
+    private get doesSortedByDate();
+    private get sortedDateInfoTemplate();
+    private get creatorTemplate();
+    private get textSnippetsTemplate();
+    private get hasSnippets();
+    static get styles(): CSSResultGroup;
+}

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

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

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

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

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

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