@internetarchive/collection-browser 0.4.3-alpha.9 → 0.4.4-alpha

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

@@ -1,74 +1,74 @@
-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="container">
         <div class="snippet-view ${this.viewSize}">
           ${this.ellipsisJoinedSnippets}
         </div>
       </div>
-    `;
-    }
-    /**
-     * An array of HTML templates derived from the snippets, with ellipses inserted
-     * at the beginning, end, and between each pair of snippets.
-     */
-    get ellipsisJoinedSnippets() {
+    `;
+    }
+    /**
+     * 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(/{{{(.+?)}}}/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) {
+    `;
+    }
+    /**
+     * 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: flex;
@@ -110,17 +110,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/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;
+}

package/dist/src/tiles/tile-dispatcher.js

@@ -1,30 +1,30 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-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';
-let TileDispatcher = class TileDispatcher extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortParam = null;
-        this.loggedIn = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+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';
+let TileDispatcher = class TileDispatcher extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sortParam = null;
+        this.loggedIn = false;
+    }
+    render() {
         return html `
       <div id="container">
-        ${this.tileDisplayMode === 'list-header'
-            ? this.headerTemplate
+        ${this.tileDisplayMode === 'list-header'
+            ? this.headerTemplate
             : this.tileTemplate}
       </div>
-    `;
-    }
-    get headerTemplate() {
-        const { currentWidth, sortParam, mobileBreakpoint } = this;
+    `;
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam, mobileBreakpoint } = this;
         return html `
       <tile-list-compact-header
         class="header"
@@ -33,17 +33,17 @@ let TileDispatcher = class TileDispatcher extends LitElement {
         .mobileBreakpoint=${mobileBreakpoint}
       >
       </tile-list-compact-header>
-    `;
-    }
-    get tileTemplate() {
+    `;
+    }
+    get tileTemplate() {
         return html `
-      ${this.tileDisplayMode === 'list-detail'
-            ? this.tile
+      ${this.tileDisplayMode === 'list-detail'
+            ? this.tile
             : this.linkTileTemplate}
-    `;
-    }
-    get linkTileTemplate() {
-        var _a, _b;
+    `;
+    }
+    get linkTileTemplate() {
+        var _a, _b;
         return html `
       <a
         href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
@@ -52,59 +52,60 @@ let TileDispatcher = class TileDispatcher extends LitElement {
       >
         ${this.tile}
       </a>
-    `;
-    }
-    handleResize(entry) {
-        this.currentWidth = entry.contentRect.width;
-        this.currentHeight = entry.contentRect.height;
-    }
-    disconnectedCallback() {
-        this.stopResizeObservation(this.resizeObserver);
-    }
-    stopResizeObservation(observer) {
-        observer === null || observer === void 0 ? void 0 : observer.removeObserver({
-            handler: this,
-            target: this.container,
-        });
-    }
-    startResizeObservation() {
-        var _a;
-        this.stopResizeObservation(this.resizeObserver);
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.addObserver({
-            handler: this,
-            target: this.container,
-        });
-    }
-    updated(props) {
-        if (props.has('resizeObserver')) {
-            const previousObserver = props.get('resizeObserver');
-            this.stopResizeObservation(previousObserver);
-            this.startResizeObservation();
-        }
-    }
-    get tile() {
-        const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam, mobileBreakpoint, } = this;
-        if (!model)
-            return nothing;
-        switch (this.tileDisplayMode) {
-            case 'grid':
-                switch (model.mediatype) {
-                    case 'collection':
+    `;
+    }
+    handleResize(entry) {
+        this.currentWidth = entry.contentRect.width;
+        this.currentHeight = entry.contentRect.height;
+    }
+    disconnectedCallback() {
+        this.stopResizeObservation(this.resizeObserver);
+    }
+    stopResizeObservation(observer) {
+        observer === null || observer === void 0 ? void 0 : observer.removeObserver({
+            handler: this,
+            target: this.container,
+        });
+    }
+    startResizeObservation() {
+        var _a;
+        this.stopResizeObservation(this.resizeObserver);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.addObserver({
+            handler: this,
+            target: this.container,
+        });
+    }
+    updated(props) {
+        if (props.has('resizeObserver')) {
+            const previousObserver = props.get('resizeObserver');
+            this.stopResizeObservation(previousObserver);
+            this.startResizeObservation();
+        }
+    }
+    get tile() {
+        const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam, mobileBreakpoint, } = this;
+        if (!model)
+            return nothing;
+        switch (this.tileDisplayMode) {
+            case 'grid':
+                switch (model.mediatype) {
+                    case 'collection':
                         return html `<collection-tile
               .model=${model}
+              .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
             >
-            </collection-tile>`;
-                    case 'account':
+            </collection-tile>`;
+                    case 'account':
                         return html `<account-tile
               .model=${model}
               .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
             >
-            </account-tile>`;
-                    default:
+            </account-tile>`;
+                    default:
                         return html `<item-tile
               .model=${model}
               .currentWidth=${this.currentWidth}
@@ -114,9 +115,9 @@ let TileDispatcher = class TileDispatcher extends LitElement {
               .sortParam=${sortParam}
               .loggedIn=${this.loggedIn}
             >
-            </item-tile>`;
-                }
-            case 'list-compact':
+            </item-tile>`;
+                }
+            case 'list-compact':
                 return html `<tile-list-compact
           .model=${model}
           .currentWidth=${currentWidth}
@@ -127,8 +128,8 @@ let TileDispatcher = class TileDispatcher extends LitElement {
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
         >
-        </tile-list-compact>`;
-            case 'list-detail':
+        </tile-list-compact>`;
+            case 'list-detail':
                 return html `<tile-list
           .model=${model}
           .collectionNameCache=${this.collectionNameCache}
@@ -140,18 +141,34 @@ let TileDispatcher = class TileDispatcher extends LitElement {
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
         >
-        </tile-list>`;
-            default:
-                return nothing;
-        }
-    }
-    static get styles() {
+        </tile-list>`;
+            default:
+                return nothing;
+        }
+    }
+    static get styles() {
         return css `
       :host {
         display: block;
         height: 100%;
       }
 
+      collection-tile {
+        --tileBorderColor: #555555;
+        --tileBackgroundColor: #666666;
+        --imageBlockBackgroundColor: #666666;
+      }
+
+      account-tile {
+        --tileBorderColor: #dddddd;
+        --imageBlockBackgroundColor: #fcf5e6;
+      }
+
+      item-tile {
+        --tileBorderColor: #dddddd;
+        --imageBlockBackgroundColor: #f1f1f4;
+      }
+
       #container {
         height: 100%;
       }
@@ -171,47 +188,47 @@ let TileDispatcher = class TileDispatcher extends LitElement {
         display: block;
         height: 100%;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], TileDispatcher.prototype, "tileDisplayMode", void 0);
-__decorate([
-    property({ type: Object })
-], TileDispatcher.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], TileDispatcher.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: Number })
-], TileDispatcher.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Number })
-], TileDispatcher.prototype, "currentHeight", void 0);
-__decorate([
-    property({ type: Object })
-], TileDispatcher.prototype, "resizeObserver", void 0);
-__decorate([
-    property({ type: Object })
-], TileDispatcher.prototype, "collectionNameCache", void 0);
-__decorate([
-    property({ type: Object })
-], TileDispatcher.prototype, "sortParam", void 0);
-__decorate([
-    query('#container')
-], TileDispatcher.prototype, "container", void 0);
-__decorate([
-    property({ type: Number })
-], TileDispatcher.prototype, "mobileBreakpoint", void 0);
-__decorate([
-    property({ type: String })
-], TileDispatcher.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileDispatcher.prototype, "loggedIn", void 0);
-TileDispatcher = __decorate([
-    customElement('tile-dispatcher')
-], TileDispatcher);
-export { TileDispatcher };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "tileDisplayMode", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Number })
+], TileDispatcher.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Number })
+], TileDispatcher.prototype, "currentHeight", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "resizeObserver", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "collectionNameCache", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "sortParam", void 0);
+__decorate([
+    query('#container')
+], TileDispatcher.prototype, "container", void 0);
+__decorate([
+    property({ type: Number })
+], TileDispatcher.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "loggedIn", void 0);
+TileDispatcher = __decorate([
+    customElement('tile-dispatcher')
+], TileDispatcher);
+export { TileDispatcher };
 //# sourceMappingURL=tile-dispatcher.js.map

package/dist/src/tiles/tile-dispatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAQzD,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AAGzC,IAAa,cAAc,GAA3B,MAAa,cACX,SAAQ,UAAU;IADpB;;QAmB8B,cAAS,GAAqB,IAAI,CAAC;QAQlC,aAAQ,GAAG,KAAK,CAAC;IAsLhD,CAAC;IApLC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,eAAe,KAAK,aAAa;YACtC,CAAC,CAAC,IAAI,CAAC,cAAc;YACrB,CAAC,CAAC,IAAI,CAAC,YAAY;;KAExB,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAC3D,OAAO,IAAI,CAAA;;;wBAGS,YAAY;qBACf,SAAS;4BACF,gBAAgB;;;KAGvC,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,KAAK,aAAa;YACtC,CAAC,CAAC,IAAI,CAAC,IAAI;YACX,CAAC,CAAC,IAAI,CAAC,gBAAgB;KAC1B,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,iBAAiB,YAAY,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;gBACxD,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC;iBAC3B,GAAG,EAAE,CACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAC1D;;UAED,IAAI,CAAC,IAAI;;KAEd,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAClD,CAAC;IAEO,qBAAqB,CAAC,QAAwC;QACpE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,cAAc,CAAC;YACvB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAC;IACL,CAAC;IAEO,sBAAsB;;QAC5B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAC;YAC/B,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAqB;QAC3B,IAAI,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YAC/B,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAChC,gBAAgB,CACgB,CAAC;YACnC,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;YAC7C,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;IACH,CAAC;IAED,IAAY,IAAI;QACd,MAAM,EACJ,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAE3B,QAAQ,IAAI,CAAC,eAAe,EAAE;YAC5B,KAAK,MAAM;gBACT,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACvB,KAAK,YAAY;wBACf,OAAO,IAAI,CAAA;uBACA,KAAK;8BACE,YAAY;+BACX,aAAa;;+BAEb,CAAC;oBACtB,KAAK,SAAS;wBACZ,OAAO,IAAI,CAAA;uBACA,KAAK;8BACE,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;;4BAEhB,CAAC;oBACnB;wBACE,OAAO,IAAI,CAAA;uBACA,KAAK;8BACE,IAAI,CAAC,YAAY;+BAChB,IAAI,CAAC,aAAa;qCACZ,IAAI,CAAC,mBAAmB;8BAC/B,IAAI,CAAC,YAAY;2BACpB,SAAS;0BACV,IAAI,CAAC,QAAQ;;yBAEd,CAAC;iBACjB;YACH,KAAK,cAAc;gBACjB,OAAO,IAAI,CAAA;mBACA,KAAK;0BACE,YAAY;2BACX,aAAa;+BACT,iBAAiB;uBACzB,SAAS;8BACF,gBAAgB;0BACpB,IAAI,CAAC,YAAY;sBACrB,IAAI,CAAC,QAAQ;;6BAEN,CAAC;YACxB,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAA;mBACA,KAAK;iCACS,IAAI,CAAC,mBAAmB;0BAC/B,YAAY;2BACX,aAAa;+BACT,iBAAiB;uBACzB,SAAS;8BACF,gBAAgB;0BACpB,IAAI,CAAC,YAAY;sBACrB,IAAI,CAAC,QAAQ;;qBAEd,CAAC;YAChB;gBACE,OAAO,OAAO,CAAC;SAClB;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AA7M6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAmC;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAgD;AAG3E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAoC;AAE1C;IAApB,KAAK,CAAC,YAAY,CAAC;iDAAoC;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAkB;AA3BnC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAiN1B;SAjNY,cAAc","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, mobileBreakpoint } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n        @click=${() =>\n          this.dispatchEvent(\n            new CustomEvent('resultSelected', { detail: this.model })\n          )}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const {\n      model,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      mobileBreakpoint,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam}\n              .loggedIn=${this.loggedIn}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionNameCache=${this.collectionNameCache}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, mobileBreakpoint } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n        @click=${() =>\n          this.dispatchEvent(\n            new CustomEvent('resultSelected', { detail: this.model })\n          )}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const {\n      model,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      mobileBreakpoint,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam}\n              .loggedIn=${this.loggedIn}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionNameCache=${this.collectionNameCache}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      collection-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n      }\n\n      account-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #fcf5e6;\n      }\n\n      item-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #f1f1f4;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}