@internetarchive/collection-browser 0.3.5-alpha.1 → 0.3.6

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));
@@ -33,10 +33,10 @@ export const baseItemImageStyles = css `
   .blur {
     filter: blur(5px);
   }
-`;
-/**
- * Waveform styles
- */
+`;
+/**
+ * Waveform styles
+ */
 export const waveformGradientStyles = css `
   .waveform {
     mix-blend-mode: screen;
@@ -99,5 +99,5 @@ export const waveformGradientStyles = css `
       hsl(0, 0%, 0%)
     );
   }
-`;
+`;
 //# sourceMappingURL=item-image-styles.js.map

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;
@@ -187,23 +187,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/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;
+}

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

@@ -1,13 +1,18 @@
-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() {
+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() {
+        const formattedFavCount = formatCount(this.favCount, 'short', 'short');
+        const formattedReviewCount = formatCount(this.commentCount, 'short', 'short');
+        const uploadsOrViewsTitle = this.mediatype === 'account'
+            ? `${this.itemCount} uploads`
+            : `${this.viewCount} all-time views`;
         return html `
       <div class="item-stats">
         <p class="sr-only">
@@ -18,7 +23,7 @@ let TileStats = class TileStats extends LitElement {
             <p class="sr-only">Mediatype:</p>
             <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
           </li>
-          <li class="col">
+          <li class="col" title="${uploadsOrViewsTitle}">
             ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
             <p class="status-text">
               <span class="sr-only">
@@ -27,25 +32,25 @@ let TileStats = class TileStats extends LitElement {
               ${formatCount(this.mediatype === 'account' ? this.itemCount : this.viewCount, 'short', 'short')}
             </p>
           </li>
-          <li class="col">
+          <li class="col" title="${formattedFavCount} favorites">
             ${favoriteFilledIcon}
             <p class="status-text">
               <span class="sr-only">Favorites:</span>
-              ${formatCount(this.favCount, 'short', 'short')}
+              ${formattedFavCount}
             </p>
           </li>
-          <li class="col">
+          <li class="col" title="${formattedReviewCount} reviews">
             ${reviewsIcon}
             <p class="status-text">
               <span class="sr-only">Reviews:</span>
-              ${formatCount(this.commentCount, 'short', 'short')}
+              ${formattedReviewCount}
             </p>
           </li>
         </ul>
       </div>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       mediatype-icon {
         --iconHeight: 25px;
@@ -98,6 +103,7 @@ let TileStats = class TileStats extends LitElement {
         width: 10px;
         display: block;
         margin: auto;
+        pointer-events: none;
       }
 
       .status-text {
@@ -109,26 +115,26 @@ let TileStats = class TileStats extends LitElement {
         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 };
+    `;
+    }
+};
+__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