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

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,6 @@ export class TileDispatcher
               .currentHeight=${this.currentHeight}
               .collectionNameCache=${this.collectionNameCache}
               .baseImageUrl=${this.baseImageUrl}
-              .loggedIn=${this.loggedIn}
             ></item-tile>`;
         }
       case 'list-compact':
@@ -168,7 +165,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 +176,6 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-          .loggedIn=${this.loggedIn}
         ></tile-list>`;
       default:
         return nothing;

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;
-}

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

@@ -1,53 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let TextOverlay = class TextOverlay extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.loggedIn = false;
-        this.loginRequired = false;
-    }
-    render() {
-        return html ` <div class="overlay no-preview">${this.textDisplay}</div> `;
-    }
-    get textDisplay() {
-        return this.loginRequired && !this.loggedIn
-            ? 'Log in\nto view this item'
-            : 'Content may be inappropriate';
-    }
-    static get styles() {
-        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
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], TextOverlay.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Boolean })
-], TextOverlay.prototype, "loginRequired", void 0);
-TextOverlay = __decorate([
-    customElement('text-overlay')
-], TextOverlay);
-export { TextOverlay };
-//# sourceMappingURL=text-overlay.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-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;AAG5D,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAoCrD,CAAC;IAlCC,MAAM;QACJ,OAAO,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS,CAAC;IAC3E,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,8BAA8B,CAAC;IACrC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAtC8B;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,CAuCvB;SAvCY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    return html` <div class=\"overlay no-preview\">${this.textDisplay}</div> `;\n  }\n\n  private get textDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? 'Log in\\nto view this item'\n      : 'Content may be inappropriate';\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        top: 35%;\n        margin: auto;\n        width: auto;\n        padding: 5px;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n        white-space: pre-wrap; // for the newline character\n      }\n    `;\n  }\n}\n"]}

package/dist/test/icon-overlay.test.d.ts

@@ -1 +0,0 @@
-import '../src/tiles/overlay/icon-overlay';

package/dist/test/icon-overlay.test.js

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

package/dist/test/icon-overlay.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-overlay.test.js","sourceRoot":"","sources":["../../test/icon-overlay.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mCAAmC,CAAC;AAE3C,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;;QAC5D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;gCACd,KAAK,mBAAmB,IAAI;KACvD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,MAAA,MAAA,EAAE,CAAC,UAAU,0CAC1B,aAAa,CAAC,KAAK,CAAC,0CACpB,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;QACxC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;;QAC1D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;gCACd,KAAK,mBAAmB,KAAK;KACxD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAA,MAAA,MAAA,EAAE,CAAC,UAAU,0CAC1B,aAAa,CAAC,KAAK,CAAC,0CACpB,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;QACxC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { IconOverlay } from '../src/tiles/overlay/icon-overlay';\n\nimport '../src/tiles/overlay/icon-overlay';\n\ndescribe('Icon Overlay component', () => {\n  it('should render component if loggedIn required', async () => {\n    const el = await fixture<IconOverlay>(html`\n      <icon-overlay .loggedIn=${false} .loginRequired=${true}> </icon-overlay>\n    `);\n\n    const svgTitle = el.shadowRoot\n      ?.querySelector('svg')\n      ?.querySelector('title')?.textContent;\n    expect(svgTitle).to.equal('Log in to view this item');\n  });\n\n  it('should render component if content warning', async () => {\n    const el = await fixture<IconOverlay>(html`\n      <icon-overlay .loggedIn=${false} .loginRequired=${false}> </icon-overlay>\n    `);\n\n    const svgTitle = el.shadowRoot\n      ?.querySelector('svg')\n      ?.querySelector('title')?.textContent;\n    expect(svgTitle).to.equal('Content may be inappropriate');\n  });\n});\n"]}

package/dist/test/item-image.test.d.ts

@@ -1 +0,0 @@
-import '../src/tiles/item-image';

package/dist/test/item-image.test.js

@@ -1,75 +0,0 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/tiles/item-image';
-const baseImageUrl = 'https://archive.org';
-const testBookModel = {
-    collections: [],
-    commentCount: 0,
-    creators: [],
-    favCount: 0,
-    identifier: '18730130BloomfieldRecordCompleteIssue',
-    itemCount: 0,
-    mediatype: 'texts',
-    subjects: [],
-    title: 'Sample Waveform',
-    viewCount: 0,
-    loginRequired: false,
-    contentWarning: false,
-};
-const testAudioModel = {
-    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 () => {
-        var _a, _b;
-        const el = await fixture(html `
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${testBookModel}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-        const dropShadow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drop-shadow');
-        const imgClassName = (_b = dropShadow === null || dropShadow === void 0 ? void 0 : dropShadow.querySelector('img')) === null || _b === void 0 ? void 0 : _b.className;
-        expect(dropShadow).to.exist;
-        expect(imgClassName).to.eql(' contain ');
-    });
-    it('should render component if mediatype is waveform', async () => {
-        var _a;
-        // const onLoad = sinon.spy();
-        const el = await fixture(html `
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${testAudioModel}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-        const dropShadow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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 ');
-    });
-});
-//# sourceMappingURL=item-image.test.js.map

package/dist/test/item-image.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"item-image.test.js","sourceRoot":"","sources":["../../test/item-image.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAM3B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,YAAY,GAAG,qBAAqB,CAAC;AAC3C,MAAM,aAAa,GAAc;IAC/B,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,uCAAuC;IACnD,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,CAAC;IACZ,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,KAAK;CACtB,CAAC;AAEF,MAAM,cAAc,GAAc;IAChC,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,CAAC;IACX,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,CAAC;IACZ,aAAa,EAAE,KAAK;IACpB,cAAc,EAAE,KAAK;CACtB,CAAC;AAEF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA;;sBAEtB,KAAK;yBACF,KAAK;iBACb,aAAa;wBACN,YAAY;;;KAG/B,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAChE,MAAM,YAAY,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAC,KAAK,CAAC,0CAAE,SAAS,CAAC;QAEjE,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;;QAChE,8BAA8B;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA;;sBAEtB,KAAK;yBACF,KAAK;iBACb,cAAc;wBACP,YAAY;;;KAG/B,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QAChE,kDAAkD;QAElD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B;;;;WAIG;QACH,oEAAoE;QACpE,6CAA6C;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\n// import sinon from 'sinon';\n\nimport { TileModel } from '../src/models';\nimport { ItemImage } from '../src/tiles/item-image';\n\nimport '../src/tiles/item-image';\n\nconst baseImageUrl = 'https://archive.org';\nconst testBookModel: TileModel = {\n  collections: [],\n  commentCount: 0,\n  creators: [],\n  favCount: 0,\n  identifier: '18730130BloomfieldRecordCompleteIssue',\n  itemCount: 0,\n  mediatype: 'texts',\n  subjects: [],\n  title: 'Sample Waveform',\n  viewCount: 0,\n  loginRequired: false,\n  contentWarning: false,\n};\n\nconst testAudioModel: TileModel = {\n  collections: [],\n  commentCount: 0,\n  creators: [],\n  favCount: 0,\n  identifier: 'dwd2015-01-24',\n  itemCount: 0,\n  mediatype: 'audio',\n  subjects: [],\n  title: 'Sample Waveform',\n  viewCount: 0,\n  loginRequired: false,\n  contentWarning: false,\n};\n\ndescribe('ItemImage component', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testBookModel}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');\n    const imgClassName = dropShadow?.querySelector('img')?.className;\n\n    expect(dropShadow).to.exist;\n    expect(imgClassName).to.eql(' contain ');\n  });\n\n  it('should render component if mediatype is waveform', async () => {\n    // const onLoad = sinon.spy();\n    const el = await fixture<ItemImage>(html`\n      <item-image\n        .isListTile=${false}\n        .isCompactTile=${false}\n        .model=${testAudioModel}\n        .baseImageUrl=${baseImageUrl}\n      >\n      </item-image>\n    `);\n\n    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');\n    // const image = dropShadow?.querySelector('img');\n\n    expect(dropShadow).to.exist;\n    /**\n     * TODO:\n     * - simulate image onLoad event\n     * - check if image className is waveform\n     */\n    // const imgClassName = dropShadow?.querySelector('img')?.className;\n    // expect(imgClassName).to.eql(' waveform ');\n  });\n});\n"]}

package/dist/test/text-overlay.test.d.ts

@@ -1 +0,0 @@
-import '../src/tiles/overlay/text-overlay';

package/dist/test/text-overlay.test.js

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

package/dist/test/text-overlay.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-overlay.test.js","sourceRoot":"","sources":["../../test/text-overlay.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mCAAmC,CAAC;AAE3C,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,+BAA+B,CAAC,CAAC;QAE3E,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAE9D,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;;QAC5D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;gCACd,KAAK,mBAAmB,IAAI;KACvD,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAE9D,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;;QAC1D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;gCACd,KAAK,mBAAmB,KAAK;KACxD,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAE9D,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { TextOverlay } from '../src/tiles/overlay/text-overlay';\n\nimport '../src/tiles/overlay/text-overlay';\n\ndescribe('Text Overlay component', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n  });\n\n  it('should render component if loggedIn required', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(noPreview?.textContent).to.equal('Log in\\nto view this item');\n  });\n\n  it('should render component if content warning', async () => {\n    const el = await fixture<TextOverlay>(html`\n      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>\n    `);\n\n    const overlay = el.shadowRoot?.querySelector('.overlay');\n    const noPreview = el.shadowRoot?.querySelector('.no-preview');\n\n    expect(overlay).to.exist;\n    expect(noPreview).to.exist;\n    expect(noPreview?.textContent).to.equal('Content may be inappropriate');\n  });\n});\n"]}

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

@@ -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>
-`;

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

@@ -1,34 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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/test/icon-overlay.test.ts

@@ -1,30 +0,0 @@
-/* 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');
-  });
-});