@internetarchive/collection-browser 0.2.7-alpha.2 → 0.2.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-tile.test.js","sourceRoot":"","sources":["../../../../test/tiles/grid/item-tile.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { ItemTile } from '../../../src/tiles/grid/item-tile';\n\nimport '../../../src/tiles/grid/item-tile';\n\ndescribe('Item Tile', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const itemImage = el.shadowRoot?.querySelector('item-image');\n    const itemTitle = el.shadowRoot?.querySelector('#title');\n\n    expect(itemInfo).to.exist;\n    expect(itemImage).to.exist;\n    expect(itemTitle).to.exist;\n  });\n\n  it('should render with created-by element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(createdBy).to.exist;\n    expect(dateSortedBy).to.not.exist;\n  });\n\n  it('should not render with created-by but date element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'date',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should not render with created-by but reviewdate element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'reviewdate',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should not render with created-by but publicdate element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'publicdate',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should render with created-by when sorting not related to date', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'addeddate',\n      direction: 'asc',\n    };\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should render with created-by when sort field id not like date', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'week',\n      direction: 'asc',\n    };\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort\n    expect(createdBy).to.exist;\n  });\n});\n"]}

package/package.json

@@ -3,11 +3,11 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.7-alpha.2",
+  "version": "0.2.7",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "start": "yarn run prepare && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "start": "yarn run prepare && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "prepare:ghpages": "rimraf ghpages && yarn run prepare && vite build",
     "prepare": "rimraf dist && tsc && husky install",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",

package/src/collection-browser.ts

@@ -428,7 +428,6 @@ export class CollectionBrowser
           .resizeObserver=${this.resizeObserver}
           .sortParam=${this.sortParam}
           .mobileBreakpoint=${this.mobileBreakpoint}
-          .loggedIn=${this.loggedIn}
         >
         </tile-dispatcher>
       </div>
@@ -1090,20 +1089,16 @@ export class CollectionBrowser
     const model = this.tileModelAtCellIndex(index);
     if (!model) return undefined;
 
-    return html`
-      <tile-dispatcher
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .baseImageUrl=${this.baseImageUrl}
-        .model=${model}
-        .tileDisplayMode=${this.displayMode}
-        .resizeObserver=${this.resizeObserver}
-        .collectionNameCache=${this.collectionNameCache}
-        .sortParam=${this.sortParam}
-        .mobileBreakpoint=${this.mobileBreakpoint}
-        .loggedIn=${this.loggedIn}
-      >
-      </tile-dispatcher>
-    `;
+    return html` <tile-dispatcher
+      .baseNavigationUrl=${this.baseNavigationUrl}
+      .baseImageUrl=${this.baseImageUrl}
+      .model=${model}
+      .tileDisplayMode=${this.displayMode}
+      .resizeObserver=${this.resizeObserver}
+      .collectionNameCache=${this.collectionNameCache}
+      .sortParam=${this.sortParam}
+      .mobileBreakpoint=${this.mobileBreakpoint}
+    ></tile-dispatcher>`;
   }
 
   /**

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

@@ -2,26 +2,25 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { SortParam } from '@internetarchive/search-service';
 
+import { formatDate } from '../../utils/format-date';
 import { TileModel } from '../../models';
 
 import '../mediatype-icon';
 import '../item-image';
 import './tile-stats';
-import '../overlay/text-overlay';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
-  @property({ type: Boolean }) loggedIn = false;
-
   @property({ type: Object }) model?: TileModel;
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Object }) sortParam?: SortParam;
+
   render() {
     const itemTitle = this.model?.title;
-    const itemCreator = this.model?.creator;
-
     return html`
       <div class="container">
         <div class="item-info">
@@ -36,12 +35,12 @@ export class ItemTile extends LitElement {
               .model=${this.model}
               .baseImageUrl=${this.baseImageUrl}>
             </item-image>
-            ${this.textOverlayTemplate}
-          </div>
-
-          <div class="created-by truncated">
-            ${itemCreator ? html`<span>by&nbsp;${itemCreator}</span>` : nothing}
           </div>
+          ${
+            this.doesSortedByDate
+              ? this.sortedDateInfoTemplate
+              : this.creatorTemplate
+          }
         </div>
 
         <tile-stats 
@@ -55,19 +54,48 @@ export class ItemTile extends LitElement {
     `;
   }
 
-  /**
-   * Templates
-   */
-  private get textOverlayTemplate() {
-    if (!this.model?.loginRequired && !this.model?.contentWarning) {
-      return nothing;
+  private get doesSortedByDate() {
+    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
+      this.sortParam?.field as string
+    );
+  }
+
+  private get sortedDateInfoTemplate() {
+    let sortedValue;
+
+    switch (this.sortParam?.field) {
+      case 'date':
+        sortedValue = { field: 'published', value: this.model?.datePublished };
+        break;
+      case 'reviewdate':
+        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };
+        break;
+      case 'addeddate':
+        sortedValue = { field: 'added', value: this.model?.dateAdded };
+        break;
+      case 'publicdate':
+        sortedValue = { field: 'archived', value: this.model?.dateArchived };
+        break;
+      default:
+        break;
     }
+
     return html`
-      <text-overlay
-        .loggedIn=${this.loggedIn}
-        .loginRequired=${this.model?.loginRequired}
-        .contentWarning=${this.model?.contentWarning}
-      ></text-overlay>
+      <div class="date-sorted-by truncated">
+        <span>
+          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}
+        </span>
+      </div>
+    `;
+  }
+
+  private get creatorTemplate() {
+    return html`
+      <div class="created-by truncated">
+        ${this.model?.creator
+          ? html`<span>by&nbsp;${this.model?.creator}</span>`
+          : nothing}
+      </div>
     `;
   }
 
@@ -96,7 +124,6 @@ export class ItemTile extends LitElement {
         justify-content: center;
         flex: 1;
         height: 16rem;
-        position: relative;
       }
 
       .hidden {
@@ -112,7 +139,8 @@ export class ItemTile extends LitElement {
         text-decoration: underline;
       }
 
-      .created-by {
+      .created-by,
+      .date-sorted-by {
         display: flex;
         justify-content: center;
         align-items: flex-end; /* Important to start text from bottom */

package/src/tiles/item-image.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
@@ -9,8 +9,6 @@ import {
   waveformGradientStyles,
 } from '../styles/item-image-styles';
 
-import './overlay/icon-overlay';
-
 @customElement('item-image')
 export class ItemImage extends LitElement {
   @property({ type: Object }) model?: TileModel;
@@ -36,26 +34,10 @@ export class ItemImage extends LitElement {
           alt=""
           @load=${this.onLoad}
         />
-        ${this.iconOverlayTemplate}
       </div>
     `;
   }
 
-  /**
-   * Templates
-   */
-  private get iconOverlayTemplate() {
-    if (!this.model?.loginRequired && !this.model?.contentWarning) {
-      return nothing;
-    }
-    return html`
-      <icon-overlay
-        .loggedIn=${this.loggedIn}
-        .loginRequired=${this.model?.loginRequired}
-      ></icon-overlay>
-    `;
-  }
-
   /**
    * Helpers
    */
@@ -89,12 +71,10 @@ export class ItemImage extends LitElement {
   }
 
   private get itemImageClass(): ClassInfo {
-    const toBlur = this.model?.contentWarning || this.model?.loginRequired;
-
     return {
       contain: !this.isCompactTile && !this.isWaveform,
       cover: this.isCompactTile,
-      blur: toBlur || false,
+      blur: this.model?.contentWarning || false,
       waveform: this.isWaveform,
     };
   }

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

@@ -0,0 +1,61 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { TileModel } from '../models';
+
+import './image/item-image';
+import './image/waveform-image';
+
+@customElement('item-tile-image')
+export class ItemTileImage extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: Boolean }) isListTile = false;
+
+  @property({ type: Boolean }) isCompactTile = false;
+
+  render() {
+    return html`
+      ${this.isWithWaveformMediatype
+        ? this.waveformImageTemplate
+        : this.itemImageTemplate}
+    `;
+  }
+
+  private get imageSrc() {
+    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;
+  }
+
+  private get isWithWaveformMediatype() {
+    return (
+      this.model?.mediatype === 'audio' || this.model?.mediatype === 'etree'
+    );
+  }
+
+  // Templates
+  private get itemImageTemplate() {
+    return html`
+      <item-image
+        .model=${this.model}
+        .imageSrc=${this.imageSrc}
+        .isCompactTile=${this.isCompactTile}
+        .isListTile=${this.isListTile}
+      >
+      </item-image>
+    `;
+  }
+
+  private get waveformImageTemplate() {
+    return html`
+      <waveform-image
+        .imageSrc=${this.imageSrc}
+        .identifier=${this.model?.identifier}
+        .isCompactTile=${this.isCompactTile}
+        .isListTile=${this.isListTile}
+      >
+      </waveform-image>
+    `;
+  }
+}

package/src/tiles/list/tile-list-compact.ts

@@ -28,8 +28,6 @@ export class TileListCompact extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
-  @property({ type: Boolean }) loggedIn = false;
-
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
@@ -67,7 +65,7 @@ export class TileListCompact extends LitElement {
         .baseImageUrl=${this.baseImageUrl}
         .isListTile=${true}
         .isCompactTile=${true}
-        .loggedIn=${this.loggedIn}
+        style="--imgHeight: 100%; --imgWidth: 100%"
       >
       </item-image>
     `;
@@ -207,11 +205,6 @@ export class TileListCompact extends LitElement {
         --iconHeight: 20px;
         --iconWidth: 20px;
       }
-
-      item-image {
-        --imgHeight: 100%;
-        --imgWidth: 100%;
-      }
     `;
   }
 }

package/src/tiles/list/tile-list.ts

@@ -45,8 +45,6 @@ export class TileList extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
-  @property({ type: Boolean }) loggedIn = false;
-
   protected updated(changed: PropertyValues): void {
     if (changed.has('model')) {
       this.fetchCollectionNames();
@@ -149,7 +147,6 @@ export class TileList extends LitElement {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .isListTile=${true}
-        .loggedIn=${this.loggedIn}
         style="--imgHeight: 100%; --imgWidth: 100%"
       >
       </item-image>

package/src/tiles/tile-dispatcher.ts

@@ -43,8 +43,6 @@ export class TileDispatcher
 
   @property({ type: String }) baseImageUrl?: string;
 
-  @property({ type: Boolean }) loggedIn = false;
-
   render() {
     return html`
       <div id="container">
@@ -156,7 +154,7 @@ export class TileDispatcher
               .currentHeight=${this.currentHeight}
               .collectionNameCache=${this.collectionNameCache}
               .baseImageUrl=${this.baseImageUrl}
-              .loggedIn=${this.loggedIn}
+              .sortParam=${sortParam}
             ></item-tile>`;
         }
       case 'list-compact':
@@ -168,7 +166,6 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-          .loggedIn=${this.loggedIn}
         ></tile-list-compact>`;
       case 'list-detail':
         return html`<tile-list
@@ -180,7 +177,6 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-          .loggedIn=${this.loggedIn}
         ></tile-list>`;
       default:
         return nothing;

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

@@ -0,0 +1,116 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { ItemTile } from '../../../src/tiles/grid/item-tile';
+
+import '../../../src/tiles/grid/item-tile';
+
+describe('Item Tile', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    const itemInfo = el.shadowRoot?.querySelector('.item-info');
+    const itemImage = el.shadowRoot?.querySelector('item-image');
+    const itemTitle = el.shadowRoot?.querySelector('#title');
+
+    expect(itemInfo).to.exist;
+    expect(itemImage).to.exist;
+    expect(itemTitle).to.exist;
+  });
+
+  it('should render with created-by element', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    const itemInfo = el.shadowRoot?.querySelector('.item-info');
+    const createdBy = el.shadowRoot?.querySelector('.created-by');
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+
+    expect(itemInfo).to.exist;
+    expect(createdBy).to.exist;
+    expect(dateSortedBy).to.not.exist;
+  });
+
+  it('should not render with created-by but date element', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    el.sortParam = {
+      field: 'date',
+      direction: 'desc',
+    };
+    await el.updateComplete;
+
+    const createdBy = el.shadowRoot?.querySelector('.created-by');
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+
+    expect(createdBy).to.not.exist;
+    expect(dateSortedBy).to.exist;
+  });
+
+  it('should not render with created-by but reviewdate element', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    el.sortParam = {
+      field: 'reviewdate',
+      direction: 'desc',
+    };
+    await el.updateComplete;
+
+    const createdBy = el.shadowRoot?.querySelector('.created-by');
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+
+    expect(createdBy).to.not.exist;
+    expect(dateSortedBy).to.exist;
+  });
+
+  it('should not render with created-by but publicdate element', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    el.sortParam = {
+      field: 'publicdate',
+      direction: 'desc',
+    };
+    await el.updateComplete;
+
+    const createdBy = el.shadowRoot?.querySelector('.created-by');
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+
+    expect(createdBy).to.not.exist;
+    expect(dateSortedBy).to.exist;
+  });
+
+  it('should render with created-by when sorting not related to date', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    el.sortParam = {
+      field: 'addeddate',
+      direction: 'asc',
+    };
+    await el.updateComplete;
+
+    const itemInfo = el.shadowRoot?.querySelector('.item-info');
+    const createdBy = el.shadowRoot?.querySelector('.created-by');
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+
+    expect(itemInfo).to.exist;
+    expect(createdBy).to.not.exist;
+    expect(dateSortedBy).to.exist;
+  });
+
+  it('should render with created-by when sort field id not like date', async () => {
+    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
+
+    el.sortParam = {
+      field: 'week',
+      direction: 'asc',
+    };
+    await el.updateComplete;
+
+    const itemInfo = el.shadowRoot?.querySelector('.item-info');
+    const createdBy = el.shadowRoot?.querySelector('.created-by');
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+
+    expect(itemInfo).to.exist;
+    expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort
+    expect(createdBy).to.exist;
+  });
+});

package/dist/src/assets/img/icons/login-required.d.ts

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

package/dist/src/assets/img/icons/login-required.js

@@ -1,30 +0,0 @@
-import { svg } from 'lit';
-export const loginRequiredIcon = svg `
-  <svg
-    viewBox="0 0 100 100"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g fill="none" fill-rule="nonzero">
-      <path
-        d="m11 48h11c-.0377367 5.0230706-.0377367 17.6897373 0 38h28v-38h12c-14.7643578-21.746483-22.9310245-33.4131497-24.5-35z"
-        fill="#fff"
-        transform="matrix(0 1 -1 0 86 13)"
-      />
-      <path
-        d="m17 44h9c-.0377367 5.0230706-.0377367 17.0230706 0 36h18v-36h10c-10.0976911-15.0798163-15.9310245-23.4131497-17.5-25z"
-        fill="#000"
-        transform="matrix(0 1 -1 0 85 14)"
-      />
-      <path
-        d="m84.3595506 0h-55.7191012c-8.6379817 0-15.6404494 6.39593215-15.6404494 14.2857143v15.7142857h20v-11h47v62l-47-1v-11h-20v16.7142857c0 7.8897822 7.0024677 14.2857143 15.6404494 14.2857143h55.7191012c8.6379817 0 15.6404494-6.3959321 15.6404494-14.2857143v-71.4285714c0-7.88978215-7.0024677-14.2857143-15.6404494-14.2857143z"
-        fill="#fff"
-      />
-      <path
-        d="m84.2597403 5c5.3793969 0 9.7402597 4.02943725 9.7402597 9v72c0 4.9705627-4.3608628 9-9.7402597 9h-55.5194806c-5.3793969 0-9.7402597-4.0294373-9.7402597-9v-12h8v7.5c0 2.4198792 1.8593897 4.3936363 4.4510815 4.4958424l48.9709964.0041576c2.6189169 0 4.4673094-2.6052767 4.5779221-5v-62c0-2.4852814-2.3103015-5-5-5h-48.3376623c-2.618917 0-4.551725 1.6052767-4.6623377 4v7h-8v-11c0-4.97056275 4.3608628-9 9.7402597-9z"
-        fill="#000"
-      />
-    </g>
-    <title>Log in to view this item</title>
-  </svg>
-`;
-//# sourceMappingURL=login-required.js.map

package/dist/src/assets/img/icons/login-required.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"login-required.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/login-required.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BnC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const loginRequiredIcon = svg`\n  <svg\n    viewBox=\"0 0 100 100\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g fill=\"none\" fill-rule=\"nonzero\">\n      <path\n        d=\"m11 48h11c-.0377367 5.0230706-.0377367 17.6897373 0 38h28v-38h12c-14.7643578-21.746483-22.9310245-33.4131497-24.5-35z\"\n        fill=\"#fff\"\n        transform=\"matrix(0 1 -1 0 86 13)\"\n      />\n      <path\n        d=\"m17 44h9c-.0377367 5.0230706-.0377367 17.0230706 0 36h18v-36h10c-10.0976911-15.0798163-15.9310245-23.4131497-17.5-25z\"\n        fill=\"#000\"\n        transform=\"matrix(0 1 -1 0 85 14)\"\n      />\n      <path\n        d=\"m84.3595506 0h-55.7191012c-8.6379817 0-15.6404494 6.39593215-15.6404494 14.2857143v15.7142857h20v-11h47v62l-47-1v-11h-20v16.7142857c0 7.8897822 7.0024677 14.2857143 15.6404494 14.2857143h55.7191012c8.6379817 0 15.6404494-6.3959321 15.6404494-14.2857143v-71.4285714c0-7.88978215-7.0024677-14.2857143-15.6404494-14.2857143z\"\n        fill=\"#fff\"\n      />\n      <path\n        d=\"m84.2597403 5c5.3793969 0 9.7402597 4.02943725 9.7402597 9v72c0 4.9705627-4.3608628 9-9.7402597 9h-55.5194806c-5.3793969 0-9.7402597-4.0294373-9.7402597-9v-12h8v7.5c0 2.4198792 1.8593897 4.3936363 4.4510815 4.4958424l48.9709964.0041576c2.6189169 0 4.4673094-2.6052767 4.5779221-5v-62c0-2.4852814-2.3103015-5-5-5h-48.3376623c-2.618917 0-4.551725 1.6052767-4.6623377 4v7h-8v-11c0-4.97056275 4.3608628-9 9.7402597-9z\"\n        fill=\"#000\"\n      />\n    </g>\n    <title>Log in to view this item</title>\n  </svg>\n`;\n"]}

package/dist/src/tiles/overlay/icon-overlay.d.ts

@@ -1,7 +0,0 @@
-import { CSSResultGroup, LitElement } from 'lit';
-export declare class IconOverlay extends LitElement {
-    loggedIn: boolean;
-    loginRequired: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    static get styles(): CSSResultGroup;
-}

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

@@ -1,43 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { restrictedIcon } from '../../assets/img/icons/restricted';
-import { loginRequiredIcon } from '../../assets/img/icons/login-required';
-let IconOverlay = class IconOverlay extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.loggedIn = false;
-        this.loginRequired = false;
-    }
-    render() {
-        if (this.loginRequired && !this.loggedIn) {
-            return html `${loginRequiredIcon} `;
-        }
-        return html `${restrictedIcon}`;
-    }
-    static get styles() {
-        return css `
-      :host {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 2;
-      }
-
-      svg {
-        padding: 25%;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], IconOverlay.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Boolean })
-], IconOverlay.prototype, "loginRequired", void 0);
-IconOverlay = __decorate([
-    customElement('icon-overlay')
-], IconOverlay);
-export { IconOverlay };
-//# sourceMappingURL=icon-overlay.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.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,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAG1E,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAuBrD,CAAC;IArBC,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACxC,OAAO,IAAI,CAAA,GAAG,iBAAiB,GAAG,CAAC;SACpC;QACD,OAAO,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IACjC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;KAWT,CAAC;IACJ,CAAC;CACF,CAAA;AAzB8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAHxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA0BvB;SA1BY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    if (this.loginRequired && !this.loggedIn) {\n      return html`${loginRequiredIcon} `;\n    }\n    return html`${restrictedIcon}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        z-index: 2;\n      }\n\n      svg {\n        padding: 25%;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/overlay/text-overlay.d.ts

@@ -1,8 +0,0 @@
-import { CSSResultGroup, LitElement } from 'lit';
-export declare class TextOverlay extends LitElement {
-    loggedIn: boolean;
-    loginRequired: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    private get textDisplay();
-    static get styles(): CSSResultGroup;
-}