@internetarchive/collection-browser 0.2.22 → 0.3.0-alpha.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"
@@ -35,9 +35,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);
@@ -63,20 +63,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,7 @@
-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;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,21 +1,21 @@
-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() {
+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;
@@ -27,17 +27,17 @@ let IconOverlay = class IconOverlay extends LitElement {
         height: 50%;
         z-index: 2;
       }
-    `;
-    }
-};
-__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 };
+    `;
+    }
+};
+__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/text-overlay.d.ts

@@ -1,8 +1,8 @@
-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;
+    render(): import("lit-html").TemplateResult<1>;
+    private get textDisplay();
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,21 +1,21 @@
-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';
+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 `
       :host {
         align-items: center;
@@ -41,17 +41,17 @@ let TextOverlay = class TextOverlay extends LitElement {
         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);
+TextOverlay = __decorate([
+    customElement('text-overlay')
+], TextOverlay);
+export { TextOverlay };
 //# sourceMappingURL=text-overlay.js.map

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

package/dist/src/tiles/text-snippet-block.js

@@ -1,80 +1,80 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { join } from 'lit/directives/join.js';
-let TextSnippetBlock = class TextSnippetBlock extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.snippets = [];
-        this.viewSize = 'desktop';
-    }
-    render() {
-        var _a;
-        if (!((_a = this.snippets) === null || _a === void 0 ? void 0 : _a.length))
-            return html `${nothing}`;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { join } from 'lit/directives/join.js';
+let TextSnippetBlock = class TextSnippetBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.snippets = [];
+        this.viewSize = 'desktop';
+    }
+    render() {
+        var _a;
+        if (!((_a = this.snippets) === null || _a === void 0 ? void 0 : _a.length))
+            return html `${nothing}`;
         return html `
       <div class="${this.containerClasses}">${this.ellipsisJoinedSnippets}</div>
 
-      ${this.viewSize === 'grid'
-            ? html `<div class="separator"></div>`
+      ${this.viewSize === 'grid'
+            ? html `<div class="separator"></div>`
             : nothing}
-    `;
-    }
-    get viewSizeClass() {
-        return this.viewSize === 'grid' ? 'grid' : 'list';
-    }
-    get containerClasses() {
-        return `container ${this.viewSizeClass}`;
-    }
-    /**
-     * An array of HTML templates derived from the snippets, with ellipses inserted
-     * at the beginning, end, and between each pair of snippets.
-     */
-    get ellipsisJoinedSnippets() {
+    `;
+    }
+    get viewSizeClass() {
+        return this.viewSize === 'grid' ? 'grid' : 'list';
+    }
+    get containerClasses() {
+        return `container ${this.viewSizeClass}`;
+    }
+    /**
+     * An array of HTML templates derived from the snippets, with ellipses inserted
+     * at the beginning, end, and between each pair of snippets.
+     */
+    get ellipsisJoinedSnippets() {
         return html `
       &hellip; ${join(this.snippetTemplates, html ` &hellip; `)} &hellip;
-    `;
-    }
-    /**
-     * 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).
-     */
-    get snippetTemplates() {
-        var _a;
-        return (_a = this.snippets) === null || _a === void 0 ? void 0 : _a.map(s => {
-            const matches = s.matchAll(/{{{(.+?)}}}/g);
-            const templates = [];
-            // Convert each match into an HTML template that includes:
-            //  - Everything from the end of the previous match (or the beginning of the
-            //      string) up to the current match, as raw text.
-            //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.
-            let index = 0;
-            for (const match of matches) {
-                if (match.index != null) {
+    `;
+    }
+    /**
+     * 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).
+     */
+    get snippetTemplates() {
+        var _a;
+        return (_a = this.snippets) === null || _a === void 0 ? void 0 : _a.map(s => {
+            const matches = s.matchAll(/{{{(.+?)}}}/gs);
+            const templates = [];
+            // Convert each match into an HTML template that includes:
+            //  - Everything from the end of the previous match (or the beginning of the
+            //      string) up to the current match, as raw text.
+            //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.
+            let index = 0;
+            for (const match of matches) {
+                if (match.index != null) {
                     templates.push(html `
             ${s.slice(index, match.index)}
             <mark>${match[1]}</mark>
-          `);
-                    index = match.index + match[0].length;
-                }
-            }
-            // Include any text from the last match to the end
-            templates.push(html `${s.slice(index)}`);
-            // Squash everything into a single span template
-            return html `<span>${templates}</span>`;
-        });
-    }
-    static get styles() {
+          `);
+                    index = match.index + match[0].length;
+                }
+            }
+            // Include any text from the last match to the end
+            templates.push(html `${s.slice(index)}`);
+            // Squash everything into a single span template
+            return html `<span>${templates}</span>`;
+        });
+    }
+    static get styles() {
         return css `
       .container {
         display: -webkit-box;
@@ -112,17 +112,17 @@ let TextSnippetBlock = class TextSnippetBlock extends LitElement {
         background-color: #0000ff33;
         color: inherit;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: Array })
-], TextSnippetBlock.prototype, "snippets", void 0);
-__decorate([
-    property({ type: String })
-], TextSnippetBlock.prototype, "viewSize", void 0);
-TextSnippetBlock = __decorate([
-    customElement('text-snippet-block')
-], TextSnippetBlock);
-export { TextSnippetBlock };
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TextSnippetBlock.prototype, "snippets", void 0);
+__decorate([
+    property({ type: String })
+], TextSnippetBlock.prototype, "viewSize", void 0);
+TextSnippetBlock = __decorate([
+    customElement('text-snippet-block')
+], TextSnippetBlock);
+export { TextSnippetBlock };
 //# sourceMappingURL=text-snippet-block.js.map

package/dist/src/tiles/text-snippet-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IAkH3D,CAAC;IAhHC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,sBAAsB;;QAEjE,IAAI,CAAC,QAAQ,KAAK,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA,+BAA+B;YACrC,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACpD,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,aAAa,IAAI,CAAC,aAAa,EAAE,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;YAC3C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AApH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqH5B;SArHY,gBAAgB","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n  @property({ type: Array }) snippets?: string[] = [];\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.snippets?.length) return html`${nothing}`;\n\n    return html`\n      <div class=\"${this.containerClasses}\">${this.ellipsisJoinedSnippets}</div>\n\n      ${this.viewSize === 'grid'\n        ? html`<div class=\"separator\"></div>`\n        : nothing}\n    `;\n  }\n\n  private get viewSizeClass() {\n    return this.viewSize === 'grid' ? 'grid' : 'list';\n  }\n\n  private get containerClasses() {\n    return `container ${this.viewSizeClass}`;\n  }\n\n  /**\n   * An array of HTML templates derived from the snippets, with ellipses inserted\n   * at the beginning, end, and between each pair of snippets.\n   */\n  private get ellipsisJoinedSnippets(): TemplateResult {\n    return html`\n      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n    `;\n  }\n\n  /**\n   * Returns an array of HTML span templates containing this item's snippets with all of\n   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n   *\n   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n   *\n   * Note on `<em>` vs. `<mark>`:\n   * The old search page snippets had search keywords demarcated with `<em>` tags.\n   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n   * but screen-reader behavior may be different. `<em>` will likely be read in a\n   * different tone, while `<mark>` is often read no differently than ordinary text\n   * in many screen-readers (though there are ways to work around this if needed).\n   */\n  private get snippetTemplates(): TemplateResult[] | undefined {\n    return this.snippets?.map(s => {\n      const matches = s.matchAll(/{{{(.+?)}}}/g);\n      const templates: TemplateResult[] = [];\n\n      // Convert each match into an HTML template that includes:\n      //  - Everything from the end of the previous match (or the beginning of the\n      //      string) up to the current match, as raw text.\n      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n      let index = 0;\n      for (const match of matches) {\n        if (match.index != null) {\n          templates.push(html`\n            ${s.slice(index, match.index)}\n            <mark>${match[1]}</mark>\n          `);\n          index = match.index + match[0].length;\n        }\n      }\n\n      // Include any text from the last match to the end\n      templates.push(html`${s.slice(index)}`);\n\n      // Squash everything into a single span template\n      return html`<span>${templates}</span>`;\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        display: -webkit-box;\n        font-family: 'Times New Roman', serif;\n        overflow: hidden;\n        overflow-wrap: break-word;\n        -webkit-line-clamp: var(--maxLines, 3);\n        -webkit-box-orient: vertical;\n      }\n\n      .separator {\n        /* Border line should extend to the edges of the tile */\n        margin: 0 -5px;\n        border-bottom: 1px solid #bbb;\n      }\n\n      .grid {\n        /* Bottom margin reduced by 1px to account for the separator */\n        margin: 0.5rem 0 0.4rem;\n        font-size: 1.2rem;\n        line-height: 1.5rem;\n      }\n\n      .list {\n        margin: 1rem 0 0;\n        padding: 0 0 0 1.5rem;\n        border-left: 0.5rem solid #194880;\n        border-radius: 3px;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n\n      mark {\n        /* blue, 20% transparency */\n        background-color: #0000ff33;\n        color: inherit;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IAkH3D,CAAC;IAhHC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,sBAAsB;;QAEjE,IAAI,CAAC,QAAQ,KAAK,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA,+BAA+B;YACrC,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACpD,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,aAAa,IAAI,CAAC,aAAa,EAAE,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC5C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AApH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqH5B;SArHY,gBAAgB","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n  @property({ type: Array }) snippets?: string[] = [];\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.snippets?.length) return html`${nothing}`;\n\n    return html`\n      <div class=\"${this.containerClasses}\">${this.ellipsisJoinedSnippets}</div>\n\n      ${this.viewSize === 'grid'\n        ? html`<div class=\"separator\"></div>`\n        : nothing}\n    `;\n  }\n\n  private get viewSizeClass() {\n    return this.viewSize === 'grid' ? 'grid' : 'list';\n  }\n\n  private get containerClasses() {\n    return `container ${this.viewSizeClass}`;\n  }\n\n  /**\n   * An array of HTML templates derived from the snippets, with ellipses inserted\n   * at the beginning, end, and between each pair of snippets.\n   */\n  private get ellipsisJoinedSnippets(): TemplateResult {\n    return html`\n      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n    `;\n  }\n\n  /**\n   * Returns an array of HTML span templates containing this item's snippets with all of\n   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n   *\n   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n   *\n   * Note on `<em>` vs. `<mark>`:\n   * The old search page snippets had search keywords demarcated with `<em>` tags.\n   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n   * but screen-reader behavior may be different. `<em>` will likely be read in a\n   * different tone, while `<mark>` is often read no differently than ordinary text\n   * in many screen-readers (though there are ways to work around this if needed).\n   */\n  private get snippetTemplates(): TemplateResult[] | undefined {\n    return this.snippets?.map(s => {\n      const matches = s.matchAll(/{{{(.+?)}}}/gs);\n      const templates: TemplateResult[] = [];\n\n      // Convert each match into an HTML template that includes:\n      //  - Everything from the end of the previous match (or the beginning of the\n      //      string) up to the current match, as raw text.\n      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n      let index = 0;\n      for (const match of matches) {\n        if (match.index != null) {\n          templates.push(html`\n            ${s.slice(index, match.index)}\n            <mark>${match[1]}</mark>\n          `);\n          index = match.index + match[0].length;\n        }\n      }\n\n      // Include any text from the last match to the end\n      templates.push(html`${s.slice(index)}`);\n\n      // Squash everything into a single span template\n      return html`<span>${templates}</span>`;\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        display: -webkit-box;\n        font-family: 'Times New Roman', serif;\n        overflow: hidden;\n        overflow-wrap: break-word;\n        -webkit-line-clamp: var(--maxLines, 3);\n        -webkit-box-orient: vertical;\n      }\n\n      .separator {\n        /* Border line should extend to the edges of the tile */\n        margin: 0 -5px;\n        border-bottom: 1px solid #bbb;\n      }\n\n      .grid {\n        /* Bottom margin reduced by 1px to account for the separator */\n        margin: 0.5rem 0 0.4rem;\n        font-size: 1.2rem;\n        line-height: 1.5rem;\n      }\n\n      .list {\n        margin: 1rem 0 0;\n        padding: 0 0 0 1.5rem;\n        border-left: 0.5rem solid #194880;\n        border-radius: 3px;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n\n      mark {\n        /* blue, 20% transparency */\n        background-color: #0000ff33;\n        color: inherit;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/tile-dispatcher.d.ts

@@ -1,36 +1,36 @@
-import { LitElement, PropertyValues } from 'lit';
-import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileDisplayMode, TileModel } from '../models';
-import './grid/collection-tile';
-import './grid/item-tile';
-import './grid/account-tile';
-import './list/tile-list';
-import './list/tile-list-compact';
-import './list/tile-list-compact-header';
-export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface {
-    tileDisplayMode?: TileDisplayMode;
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    currentWidth?: number;
-    currentHeight?: number;
-    resizeObserver?: SharedResizeObserverInterface;
-    collectionNameCache?: CollectionNameCacheInterface;
-    sortParam: SortParam | null;
-    private container;
-    mobileBreakpoint?: number;
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    private get headerTemplate();
-    private get tileTemplate();
-    private get linkTileTemplate();
-    handleResize(entry: ResizeObserverEntry): void;
-    disconnectedCallback(): void;
-    private stopResizeObservation;
-    private startResizeObservation;
-    updated(props: PropertyValues): void;
-    private get tile();
-    static get styles(): import("lit").CSSResult;
-}
+import { LitElement, PropertyValues } from 'lit';
+import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileDisplayMode, TileModel } from '../models';
+import './grid/collection-tile';
+import './grid/item-tile';
+import './grid/account-tile';
+import './list/tile-list';
+import './list/tile-list-compact';
+import './list/tile-list-compact-header';
+export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface {
+    tileDisplayMode?: TileDisplayMode;
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    currentWidth?: number;
+    currentHeight?: number;
+    resizeObserver?: SharedResizeObserverInterface;
+    collectionNameCache?: CollectionNameCacheInterface;
+    sortParam: SortParam | null;
+    private container;
+    mobileBreakpoint?: number;
+    baseImageUrl?: string;
+    loggedIn: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private get headerTemplate();
+    private get tileTemplate();
+    private get linkTileTemplate();
+    handleResize(entry: ResizeObserverEntry): void;
+    disconnectedCallback(): void;
+    private stopResizeObservation;
+    private startResizeObservation;
+    updated(props: PropertyValues): void;
+    private get tile();
+    static get styles(): import("lit").CSSResult;
+}