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

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

@@ -1,31 +1,31 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { mediatypeConfig } from '../mediatype/mediatype-config';
-let MediatypeIcon = class MediatypeIcon extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.showText = false;
-    }
-    get displayMediatype() {
-        var _a, _b;
-        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
-        const radioIdentifier = ['radio', 'radioprogram'];
-        if (this.mediatype === 'movies' &&
-            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
-            return 'tv';
-        }
-        if (this.mediatype === 'audio' &&
-            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
-            return 'radio';
-        }
-        return this.mediatype || '';
-    }
-    render() {
-        const config = mediatypeConfig[this.displayMediatype];
-        if (!config) {
-            return html ``;
-        }
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { mediatypeConfig } from '../mediatype/mediatype-config';
+let MediatypeIcon = class MediatypeIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showText = false;
+    }
+    get displayMediatype() {
+        var _a, _b;
+        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+        const radioIdentifier = ['radio', 'radioprogram'];
+        if (this.mediatype === 'movies' &&
+            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
+            return 'tv';
+        }
+        if (this.mediatype === 'audio' &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
+            return 'radio';
+        }
+        return this.mediatype || '';
+    }
+    render() {
+        const config = mediatypeConfig[this.displayMediatype];
+        if (!config) {
+            return html ``;
+        }
         return html `
       <div
         id="icon"
@@ -36,9 +36,9 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
         ${config.icon}
         <p class="status-text">${config.text}</p>
       </div>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       #icon {
         height: var(--iconHeight, 25px);
@@ -65,20 +65,20 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
       .fill-color {
         fill: var(--iconFillColor, '#000000');
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], MediatypeIcon.prototype, "mediatype", void 0);
-__decorate([
-    property({ type: Array })
-], MediatypeIcon.prototype, "collections", void 0);
-__decorate([
-    property({ type: Boolean })
-], MediatypeIcon.prototype, "showText", void 0);
-MediatypeIcon = __decorate([
-    customElement('mediatype-icon')
-], MediatypeIcon);
-export { MediatypeIcon };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MediatypeIcon.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Array })
+], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "showText", void 0);
+MediatypeIcon = __decorate([
+    customElement('mediatype-icon')
+], MediatypeIcon);
+export { MediatypeIcon };
 //# sourceMappingURL=mediatype-icon.js.map

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

@@ -1,7 +1,10 @@
-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;
-}
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class IconOverlay extends LitElement {
+    loggedIn: boolean;
+    loginRequired: boolean;
+    isCompactTile: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private get getClass();
+    private get iconDisplay();
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,42 +1,72 @@
-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() {
-        return this.loginRequired && !this.loggedIn
-            ? html `${loginRequiredIcon}`
-            : html `${restrictedIcon}`;
-    }
-    static get styles() {
+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;
+        this.isCompactTile = false;
+    }
+    render() {
+        return html `<div class="icon-overlay ${this.getClass}">
+      ${this.iconDisplay}
+    </div>`;
+    }
+    get getClass() {
+        return this.isCompactTile ? 'list-compact' : 'list-detail';
+    }
+    get iconDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? html `${loginRequiredIcon}`
+            : html `${restrictedIcon}`;
+    }
+    static get styles() {
         return css `
       :host {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-        width: 50%;
-        height: 50%;
+        width: 100%;
         z-index: 2;
+        background-color: rgb(255, 254, 203);
+        display: flex;
+        justify-content: center;
+        border: 1px solid #2c2c2c;
       }
-    `;
-    }
-};
-__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 };
+
+      .icon-overlay {
+        height: 20px;
+        width: 20px;
+        padding: 2px;
+        padding: 2px;
+      }
+
+      .list-detail {
+        height: 20px;
+        width: 20px;
+      }
+      .list-compact {
+        height: 15px;
+        width: 15px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], IconOverlay.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconOverlay.prototype, "loginRequired", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconOverlay.prototype, "isCompactTile", 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 +1 @@
-{"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;IAsBrD,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;KAWT,CAAC;IACJ,CAAC;CACF,CAAA;AAxB8B;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,CAyBvB;SAzBY,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    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        -ms-transform: translate(-50%, -50%);\n        width: 50%;\n        height: 50%;\n        z-index: 2;\n      }\n    `;\n  }\n}\n"]}
+{"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;QAEtB,kBAAa,GAAG,KAAK,CAAC;IAkDrD,CAAC;IAhDC,MAAM;QACJ,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,QAAQ;QAChD,IAAI,CAAC,WAAW;WACb,CAAC;IACV,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAC7D,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BT,CAAC;IACJ,CAAC;CACF,CAAA;AAtD8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AALxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuDvB;SAvDY,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  @property({ type: Boolean }) isCompactTile = false;\n\n  render() {\n    return html`<div class=\"icon-overlay ${this.getClass}\">\n      ${this.iconDisplay}\n    </div>`;\n  }\n\n  private get getClass() {\n    return this.isCompactTile ? 'list-compact' : 'list-detail';\n  }\n\n  private get iconDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 100%;\n        z-index: 2;\n        background-color: rgb(255, 254, 203);\n        display: flex;\n        justify-content: center;\n        border: 1px solid #2c2c2c;\n      }\n\n      .icon-overlay {\n        height: 20px;\n        width: 20px;\n        padding: 2px;\n        padding: 2px;\n      }\n\n      .list-detail {\n        height: 20px;\n        width: 20px;\n      }\n      .list-compact {\n        height: 15px;\n        width: 15px;\n      }\n    `;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,83 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
+let IconTextOverlay = class IconTextOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loggedIn = false;
+        this.loginRequired = false;
+    }
+    render() {
+        return html `
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+    }
+    get iconDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? html `${loginRequiredIcon}`
+            : html `${restrictedIcon}`;
+    }
+    get textDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? 'Log in\nto view this item'
+            : 'Content may be inappropriate';
+    }
+    static get styles() {
+        return css `
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
+        text-align: center;
+      }
+
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        border: 1px solid #2c2c2c;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], IconTextOverlay.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconTextOverlay.prototype, "loginRequired", void 0);
+IconTextOverlay = __decorate([
+    customElement('icon-text-overlay')
+], IconTextOverlay);
+export { IconTextOverlay };
+//# sourceMappingURL=icon-text-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-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;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAiErD,CAAC;IA/DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAuB;AAHxC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoE3B;SApEY,eAAe","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\n\n@customElement('icon-text-overlay')\nexport class IconTextOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    return html`\n      <div class=\"overlay no-preview\">\n        <div class=\"icon-overlay\">${this.iconDisplay}</div>\n        <p class=\"text-overlay\">${this.textDisplay}</p>\n      </div>\n    `;\n  }\n\n  private get iconDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\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      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        width: auto;\n        height: auto;\n        padding: 5px;\n        display: flex;\n        align-items: center;\n        border-radius: 1px;\n        text-align: center;\n      }\n\n      .icon-overlay {\n        width: 40px;\n        height: 40px;\n        display: inherit;\n      }\n      .text-overlay {\n        margin: 0;\n        vertical-align: bottom;\n        padding-left: 5px;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        border: 1px solid #2c2c2c;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    `;\n  }\n}\n"]}

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

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

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

@@ -1,21 +1,34 @@
-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() {
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
+let TextOverlay = class TextOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loggedIn = false;
+        this.loginRequired = false;
+        this.iconRequired = false;
+    }
+    render() {
+        return html `
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+    }
+    get iconDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? html `${loginRequiredIcon}`
+            : html `${restrictedIcon}`;
+    }
+    get textDisplay() {
+        return this.loginRequired && !this.loggedIn
+            ? html `Log in to view this item`
+            : html `Content may be inappropriate`;
+    }
+    static get styles() {
         return css `
       :host {
         align-items: center;
@@ -28,30 +41,45 @@ let TextOverlay = class TextOverlay extends LitElement {
         position: absolute;
         right: 0;
         left: 0;
+        top: 50%;
+        transform: translate(0px, -50%);
         width: auto;
         height: auto;
         padding: 5px;
+        background-color: #fffecb;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
       }
 
-      .no-preview {
-        background-color: #fffecb;
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+        text-align: center;
         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 };
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TextOverlay.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextOverlay.prototype, "loginRequired", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextOverlay.prototype, "iconRequired", 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 +1 @@
-{"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;IAwCrD,CAAC;IAtCC,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;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AA1C8B;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,CA2CvB;SA3CY,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      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        width: auto;\n        height: 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"]}
+{"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;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;QAEtB,iBAAY,GAAG,KAAK,CAAC;IA+DpD,CAAC;IA7DC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,WAAW;kCAClB,IAAI,CAAC,WAAW;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,GAAG,iBAAiB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,IAAI,CAAA,0BAA0B;YAChC,CAAC,CAAC,IAAI,CAAA,8BAA8B,CAAC;IACzC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAsB;AALvC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB;SApEY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { loginRequiredIcon } from '../../assets/img/icons/login-required';\nimport { restrictedIcon } from '../../assets/img/icons/restricted';\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  @property({ type: Boolean }) iconRequired = false;\n\n  render() {\n    return html`\n      <div class=\"overlay no-preview\">\n        <div class=\"icon-overlay\">${this.iconDisplay}</div>\n        <p class=\"text-overlay\">${this.textDisplay}</p>\n      </div>\n    `;\n  }\n\n  private get iconDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`${loginRequiredIcon}`\n      : html`${restrictedIcon}`;\n  }\n\n  private get textDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? html`Log in to view this item`\n      : html`Content may be inappropriate`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        top: 50%;\n        transform: translate(0px, -50%);\n        width: auto;\n        height: auto;\n        padding: 5px;\n        background-color: #fffecb;\n        display: flex;\n        align-items: center;\n        border-radius: 1px;\n      }\n\n      .icon-overlay {\n        width: 40px;\n        height: 40px;\n        display: inherit;\n      }\n      .text-overlay {\n        margin: 0;\n        vertical-align: bottom;\n        padding-left: 5px;\n        text-align: center;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/text-snippet-block.d.ts

@@ -1,29 +1,29 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-export declare class TextSnippetBlock extends LitElement {
-    snippets?: string[];
-    viewSize: string;
-    render(): TemplateResult<1>;
-    private get viewSizeClass();
-    private get containerClasses();
-    /**
-     * An array of HTML templates derived from the snippets, with ellipses inserted
-     * at the beginning, end, and between each pair of snippets.
-     */
-    private get ellipsisJoinedSnippets();
-    /**
-     * Returns an array of HTML span templates containing this item's snippets with all of
-     * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
-     *
-     * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
-     * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
-     *
-     * Note on `<em>` vs. `<mark>`:
-     * The old search page snippets had search keywords demarcated with `<em>` tags.
-     * The `<mark>` tag is semantically more accurate for this use case than `<em>`,
-     * but screen-reader behavior may be different. `<em>` will likely be read in a
-     * different tone, while `<mark>` is often read no differently than ordinary text
-     * in many screen-readers (though there are ways to work around this if needed).
-     */
-    private get snippetTemplates();
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+export declare class TextSnippetBlock extends LitElement {
+    snippets?: string[];
+    viewSize: string;
+    render(): TemplateResult<1>;
+    private get viewSizeClass();
+    private get containerClasses();
+    /**
+     * An array of HTML templates derived from the snippets, with ellipses inserted
+     * at the beginning, end, and between each pair of snippets.
+     */
+    private get ellipsisJoinedSnippets();
+    /**
+     * Returns an array of HTML span templates containing this item's snippets with all of
+     * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
+     *
+     * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
+     * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
+     *
+     * Note on `<em>` vs. `<mark>`:
+     * The old search page snippets had search keywords demarcated with `<em>` tags.
+     * The `<mark>` tag is semantically more accurate for this use case than `<em>`,
+     * but screen-reader behavior may be different. `<em>` will likely be read in a
+     * different tone, while `<mark>` is often read no differently than ordinary text
+     * in many screen-readers (though there are ways to work around this if needed).
+     */
+    private get snippetTemplates();
+    static get styles(): CSSResultGroup;
+}