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

package/src/tiles/mediatype-icon.ts

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

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

@@ -0,0 +1,34 @@
+import { css, CSSResultGroup, 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';
+
+@customElement('icon-overlay')
+export class IconOverlay extends LitElement {
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) loginRequired = false;
+
+  render() {
+    if (this.loginRequired && !this.loggedIn) {
+      return html`${loginRequiredIcon} `;
+    }
+    return html`${restrictedIcon}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+      }
+
+      svg {
+        padding: 25%;
+      }
+    `;
+  }
+}

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

@@ -0,0 +1,44 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('text-overlay')
+export class TextOverlay extends LitElement {
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) loginRequired = false;
+
+  render() {
+    return html` <div class="overlay no-preview">${this.textDisplay}</div> `;
+  }
+
+  private get textDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? 'Log in\nto view this item'
+      : 'Content may be inappropriate';
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 35%;
+        margin: auto;
+        width: auto;
+        padding: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+        white-space: pre-wrap; // for the newline character
+      }
+    `;
+  }
+}

package/src/tiles/tile-dispatcher.ts

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

package/test/icon-overlay.test.ts

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { IconOverlay } from '../src/tiles/overlay/icon-overlay';
+
+import '../src/tiles/overlay/icon-overlay';
+
+describe('Icon Overlay component', () => {
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${false} .loginRequired=${true}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Log in to view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${false} .loginRequired=${false}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Content may be inappropriate');
+  });
+});

package/test/item-image.test.ts

@@ -0,0 +1,85 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+// import sinon from 'sinon';
+
+import { TileModel } from '../src/models';
+import { ItemImage } from '../src/tiles/item-image';
+
+import '../src/tiles/item-image';
+
+const baseImageUrl = 'https://archive.org';
+const testBookModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: '18730130BloomfieldRecordCompleteIssue',
+  itemCount: 0,
+  mediatype: 'texts',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+const testAudioModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: 'dwd2015-01-24',
+  itemCount: 0,
+  mediatype: 'audio',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+describe('ItemImage component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testBookModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const imgClassName = dropShadow?.querySelector('img')?.className;
+
+    expect(dropShadow).to.exist;
+    expect(imgClassName).to.eql(' contain ');
+  });
+
+  it('should render component if mediatype is waveform', async () => {
+    // const onLoad = sinon.spy();
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testAudioModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    // const image = dropShadow?.querySelector('img');
+
+    expect(dropShadow).to.exist;
+    /**
+     * TODO:
+     * - simulate image onLoad event
+     * - check if image className is waveform
+     */
+    // const imgClassName = dropShadow?.querySelector('img')?.className;
+    // expect(imgClassName).to.eql(' waveform ');
+  });
+});

package/test/text-overlay.test.ts

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { TextOverlay } from '../src/tiles/overlay/text-overlay';
+
+import '../src/tiles/overlay/text-overlay';
+
+describe('Text Overlay component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+  });
+
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Log in\nto view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+});

package/test/tile-stats.test.ts

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { TileStats } from '../src/tiles/grid/tile-stats';
+
+import '../src/tiles/grid/tile-stats';
+
+describe('Tile Stats', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);
+
+    const itemStats = el.shadowRoot?.querySelector('.item-stats');
+    const statsRow = el.shadowRoot?.querySelector('#stats-row');
+    const statsRowCount = statsRow?.childElementCount;
+
+    expect(itemStats).to.exist;
+    expect(statsRow).to.exist;
+    expect(statsRowCount).to.equal(4);
+  });
+
+  it('should render component with value', async () => {
+    const el = await fixture<TileStats>(
+      html`
+        <tile-stats
+          .mediatype=${'account'}
+          .itemCount=${1}
+          .favCount=${2}
+          .commentCount=${3}
+        >
+        </tile-stats>
+      `
+    );
+
+    const statsRow = el.shadowRoot?.querySelector('#stats-row');
+
+    const mediatypeStat = statsRow?.children.item(0);
+    // get second column item in stats row
+    const itemStatCount = statsRow?.children
+      .item(1)
+      ?.querySelector('.status-text')?.textContent;
+    // get third column item in stats row
+    const favoritesStatCount = statsRow?.children
+      .item(2)
+      ?.querySelector('.status-text')?.textContent;
+    // get fourth column item in stats row
+    const reviewsStatCount = statsRow?.children
+      .item(3)
+      ?.querySelector('.status-text')?.textContent;
+
+    expect(mediatypeStat).to.exist;
+
+    // Snapshot testing - reference: https://open-wc.org/docs/testing/semantic-dom-diff/#snapshot-testing
+    expect(itemStatCount).to.equalSnapshot(1);
+    expect(favoritesStatCount).to.equalSnapshot(2);
+    expect(reviewsStatCount).to.equalSnapshot(3);
+  });
+});

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

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

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

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

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

@@ -1 +0,0 @@
-{"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/views.d.ts

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

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

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

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

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-import { TileModel } from '../models';
-import './image/item-image';
-import './image/waveform-image';
-export declare class ItemTileImage extends LitElement {
-    model?: TileModel;
-    baseImageUrl?: string;
-    isListTile: boolean;
-    isCompactTile: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    private get imageSrc();
-    private get isWithWaveformMediatype();
-    private get itemImageTemplate();
-    private get waveformImageTemplate();
-}

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

@@ -1,68 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import './image/item-image';
-import './image/waveform-image';
-let ItemTileImage = class ItemTileImage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isListTile = false;
-        this.isCompactTile = false;
-    }
-    render() {
-        return html `
-      ${this.isWithWaveformMediatype
-            ? this.waveformImageTemplate
-            : this.itemImageTemplate}
-    `;
-    }
-    get imageSrc() {
-        var _a;
-        return `${this.baseImageUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
-    }
-    get isWithWaveformMediatype() {
-        var _a, _b;
-        return (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' || ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree');
-    }
-    // Templates
-    get itemImageTemplate() {
-        return html `
-      <item-image
-        .model=${this.model}
-        .imageSrc=${this.imageSrc}
-        .isCompactTile=${this.isCompactTile}
-        .isListTile=${this.isListTile}
-      >
-      </item-image>
-    `;
-    }
-    get waveformImageTemplate() {
-        var _a;
-        return html `
-      <waveform-image
-        .imageSrc=${this.imageSrc}
-        .identifier=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}
-        .isCompactTile=${this.isCompactTile}
-        .isListTile=${this.isListTile}
-      >
-      </waveform-image>
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], ItemTileImage.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ItemTileImage.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemTileImage.prototype, "isListTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemTileImage.prototype, "isCompactTile", void 0);
-ItemTileImage = __decorate([
-    customElement('item-tile-image')
-], ItemTileImage);
-export { ItemTileImage };
-//# sourceMappingURL=item-tile-image.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"item-tile-image.js","sourceRoot":"","sources":["../../../src/tiles/item-tile-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAGhC,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAEnB,kBAAa,GAAG,KAAK,CAAC;IA4CrD,CAAC;IA1CC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,uBAAuB;YAC5B,CAAC,CAAC,IAAI,CAAC,qBAAqB;YAC5B,CAAC,CAAC,IAAI,CAAC,iBAAiB;KAC3B,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;;QAClB,OAAO,GAAG,IAAI,CAAC,YAAY,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IACvE,CAAC;IAED,IAAY,uBAAuB;;QACjC,OAAO,CACL,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO,CACvE,CAAC;IACJ,CAAC;IAED,YAAY;IACZ,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,aAAa;sBACrB,IAAI,CAAC,UAAU;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;;QAC/B,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;sBACX,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;yBACnB,IAAI,CAAC,aAAa;sBACrB,IAAI,CAAC,UAAU;;;KAGhC,CAAC;IACJ,CAAC;CACF,CAAA;AAlD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAuB;AAPxC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAmDzB;SAnDY,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../models';\n\nimport './image/item-image';\nimport './image/waveform-image';\n\n@customElement('item-tile-image')\nexport class ItemTileImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  render() {\n    return html`\n      ${this.isWithWaveformMediatype\n        ? this.waveformImageTemplate\n        : this.itemImageTemplate}\n    `;\n  }\n\n  private get imageSrc() {\n    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  private get isWithWaveformMediatype() {\n    return (\n      this.model?.mediatype === 'audio' || this.model?.mediatype === 'etree'\n    );\n  }\n\n  // Templates\n  private get itemImageTemplate() {\n    return html`\n      <item-image\n        .model=${this.model}\n        .imageSrc=${this.imageSrc}\n        .isCompactTile=${this.isCompactTile}\n        .isListTile=${this.isListTile}\n      >\n      </item-image>\n    `;\n  }\n\n  private get waveformImageTemplate() {\n    return html`\n      <waveform-image\n        .imageSrc=${this.imageSrc}\n        .identifier=${this.model?.identifier}\n        .isCompactTile=${this.isCompactTile}\n        .isListTile=${this.isListTile}\n      >\n      </waveform-image>\n    `;\n  }\n}\n"]}

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

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

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

@@ -1,61 +0,0 @@
-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>
-    `;
-  }
-}