@internetarchive/collection-browser 0.4.9 → 0.4.10-alpha.2

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

@@ -1,47 +1,47 @@
-var TileDispatcher_1;
-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 './hover/tile-hover-pane';
-import './list/tile-list';
-import './list/tile-list-compact';
-import './list/tile-list-compact-header';
-import { HoverPaneController, } from './hover/hover-pane-controller';
-let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortParam = null;
-        this.loggedIn = false;
-        /** Whether this tile should include a hover pane at all (for applicable tile modes) */
-        this.enableHoverPane = false;
-    }
-    render() {
-        var _a, _b;
-        const isGridMode = this.tileDisplayMode === 'grid';
-        const hoverPaneTemplate = (_b = (_a = this.hoverPaneController) === null || _a === void 0 ? void 0 : _a.getTemplate()) !== null && _b !== void 0 ? _b : nothing;
+var TileDispatcher_1;
+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 './hover/tile-hover-pane';
+import './list/tile-list';
+import './list/tile-list-compact';
+import './list/tile-list-compact-header';
+import { HoverPaneController, } from './hover/hover-pane-controller';
+let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sortParam = null;
+        this.loggedIn = false;
+        /** Whether this tile should include a hover pane at all (for applicable tile modes) */
+        this.enableHoverPane = false;
+    }
+    render() {
+        var _a, _b;
+        const isGridMode = this.tileDisplayMode === 'grid';
+        const hoverPaneTemplate = (_b = (_a = this.hoverPaneController) === null || _a === void 0 ? void 0 : _a.getTemplate()) !== null && _b !== void 0 ? _b : nothing;
         return html `
       <div id="container" class=${isGridMode ? 'hoverable' : nothing}>
-        ${this.tileDisplayMode === 'list-header'
-            ? this.headerTemplate
+        ${this.tileDisplayMode === 'list-header'
+            ? this.headerTemplate
             : this.tileTemplate}
         ${hoverPaneTemplate}
       </div>
-    `;
-    }
-    firstUpdated() {
-        if (this.shouldPrepareHoverPane) {
-            this.hoverPaneController = new HoverPaneController(this, {
-                mobileBreakpoint: this.mobileBreakpoint,
-                enableLongPress: false,
-            });
-        }
-    }
-    get headerTemplate() {
-        const { currentWidth, sortParam, mobileBreakpoint } = this;
+    `;
+    }
+    firstUpdated() {
+        if (this.shouldPrepareHoverPane) {
+            this.hoverPaneController = new HoverPaneController(this, {
+                mobileBreakpoint: this.mobileBreakpoint,
+                enableLongPress: false,
+            });
+        }
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam, mobileBreakpoint } = this;
         return html `
       <tile-list-compact-header
         class="header"
@@ -50,100 +50,100 @@ let TileDispatcher = TileDispatcher_1 = 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;
+    `;
+    }
+    get linkTileTemplate() {
+        var _a;
         return html `
       <a
         href="${this.linkTileHref}"
-        title=${this.shouldPrepareHoverPane
-            ? nothing // Don't show title tooltips when we have the tile info popups
+        title=${this.shouldPrepareHoverPane
+            ? nothing // Don't show title tooltips when we have the tile info popups
             : ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.title)}
         @click=${() => this.dispatchEvent(new CustomEvent('resultSelected', { detail: this.model }))}
       >
         ${this.tile}
       </a>
-    `;
-    }
-    get linkTileHref() {
-        var _a, _b, _c;
-        // Use the server-specified href if available.
-        // Otherwise, construct a details page URL from the item identifier.
-        return ((_a = this.model) === null || _a === void 0 ? void 0 : _a.href)
-            ? `${this.baseNavigationUrl}${(_b = this.model) === null || _b === void 0 ? void 0 : _b.href}`
-            : `${this.baseNavigationUrl}/details/${(_c = this.model) === null || _c === void 0 ? void 0 : _c.identifier}`;
-    }
-    /**
-     * Whether hover pane behavior should be prepared for this tile
-     * (e.g., whether mouse listeners should be attached, etc.)
-     */
-    get shouldPrepareHoverPane() {
-        return (this.enableHoverPane &&
-            !!this.tileDisplayMode &&
-            TileDispatcher_1.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]);
-    }
-    get isHoverEnabled() {
-        return window.matchMedia('(hover: hover)').matches;
-    }
-    /** @inheritdoc */
-    getHoverPane() {
-        return this.hoverPane;
-    }
-    /** @inheritdoc */
-    getHoverPaneProps() {
-        return this;
-    }
-    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();
-        }
-    }
-    tileInfoButtonPressed(e) {
-        var _a;
-        (_a = this.hoverPaneController) === null || _a === void 0 ? void 0 : _a.toggleHoverPane({
-            coords: e.detail,
-            enableTouchBackdrop: true,
-        });
-    }
-    get tile() {
-        const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam, mobileBreakpoint, } = this;
-        if (!model)
-            return nothing;
-        switch (this.tileDisplayMode) {
-            case 'grid':
-                switch (model.mediatype) {
-                    case 'collection':
+    `;
+    }
+    get linkTileHref() {
+        var _a, _b, _c;
+        // Use the server-specified href if available.
+        // Otherwise, construct a details page URL from the item identifier.
+        return ((_a = this.model) === null || _a === void 0 ? void 0 : _a.href)
+            ? `${this.baseNavigationUrl}${(_b = this.model) === null || _b === void 0 ? void 0 : _b.href}`
+            : `${this.baseNavigationUrl}/details/${(_c = this.model) === null || _c === void 0 ? void 0 : _c.identifier}`;
+    }
+    /**
+     * Whether hover pane behavior should be prepared for this tile
+     * (e.g., whether mouse listeners should be attached, etc.)
+     */
+    get shouldPrepareHoverPane() {
+        return (this.enableHoverPane &&
+            !!this.tileDisplayMode &&
+            TileDispatcher_1.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]);
+    }
+    get isHoverEnabled() {
+        return window.matchMedia('(hover: hover)').matches;
+    }
+    /** @inheritdoc */
+    getHoverPane() {
+        return this.hoverPane;
+    }
+    /** @inheritdoc */
+    getHoverPaneProps() {
+        return this;
+    }
+    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();
+        }
+    }
+    tileInfoButtonPressed(e) {
+        var _a;
+        (_a = this.hoverPaneController) === null || _a === void 0 ? void 0 : _a.toggleHoverPane({
+            coords: e.detail,
+            enableTouchBackdrop: true,
+        });
+    }
+    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}
@@ -152,8 +152,8 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
-            </collection-tile>`;
-                    case 'account':
+            </collection-tile>`;
+                    case 'account':
                         return html `<account-tile
               .model=${model}
               .baseImageUrl=${this.baseImageUrl}
@@ -162,8 +162,8 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
-            </account-tile>`;
-                    default:
+            </account-tile>`;
+                    default:
                         return html `<item-tile
               .model=${model}
               .currentWidth=${this.currentWidth}
@@ -175,9 +175,9 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
-            </item-tile>`;
-                }
-            case 'list-compact':
+            </item-tile>`;
+                }
+            case 'list-compact':
                 return html `<tile-list-compact
           .model=${model}
           .currentWidth=${currentWidth}
@@ -188,8 +188,8 @@ let TileDispatcher = TileDispatcher_1 = 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}
@@ -201,12 +201,12 @@ let TileDispatcher = TileDispatcher_1 = 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;
@@ -269,60 +269,60 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement
         left: -9999px;
         z-index: 2;
       }
-    `;
-    }
-};
-/** Maps each display mode to whether hover panes should appear in that mode */
-TileDispatcher.HOVER_PANE_DISPLAY_MODES = {
-    grid: true,
-    'list-compact': true,
-    'list-detail': false,
-    'list-header': false,
-};
-__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([
-    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);
-__decorate([
-    property({ type: Boolean })
-], TileDispatcher.prototype, "enableHoverPane", void 0);
-__decorate([
-    query('#container')
-], TileDispatcher.prototype, "container", void 0);
-__decorate([
-    query('tile-hover-pane')
-], TileDispatcher.prototype, "hoverPane", void 0);
-TileDispatcher = TileDispatcher_1 = __decorate([
-    customElement('tile-dispatcher')
-], TileDispatcher);
-export { TileDispatcher };
+    `;
+    }
+};
+/** Maps each display mode to whether hover panes should appear in that mode */
+TileDispatcher.HOVER_PANE_DISPLAY_MODES = {
+    grid: true,
+    'list-compact': true,
+    'list-detail': false,
+    'list-header': false,
+};
+__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([
+    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);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "enableHoverPane", void 0);
+__decorate([
+    query('#container')
+], TileDispatcher.prototype, "container", void 0);
+__decorate([
+    query('tile-hover-pane')
+], TileDispatcher.prototype, "hoverPane", void 0);
+TileDispatcher = TileDispatcher_1 = __decorate([
+    customElement('tile-dispatcher')
+], TileDispatcher);
+export { TileDispatcher };
 //# sourceMappingURL=tile-dispatcher.js.map

package/dist/src/utils/analytics-events.d.ts

@@ -1,22 +1,22 @@
-/**
- * Analytics categories and events. Used when building actions in
- */
-export declare enum analyticsCategories {
-    default = "collection-browser"
-}
-export declare enum analyticsActions {
-    sortBy = "sortBy",
-    filterByCreator = "filterByCreator",
-    filterByTitle = "filterByTitle",
-    displayMode = "displayMode",
-    facetSelected = "facetSelected",
-    facetDeselected = "facetDeselected",
-    facetNegativeSelected = "facetNegativeSelected",
-    facetNegativeDeselected = "facetNegativeDeselected",
-    histogramChanged = "histogramChanged",
-    resultSelected = "resultSelected",
-    moreFacetsPageChange = "moreFacetsPageChange",
-    showMoreFacetsModal = "showMoreFacetsModal",
-    closeMoreFacetsModal = "closeMoreFacetsModal",
-    applyMoreFacetsModal = "applyMoreFacetsModal"
-}
+/**
+ * Analytics categories and events. Used when building actions in
+ */
+export declare enum analyticsCategories {
+    default = "collection-browser"
+}
+export declare enum analyticsActions {
+    sortBy = "sortBy",
+    filterByCreator = "filterByCreator",
+    filterByTitle = "filterByTitle",
+    displayMode = "displayMode",
+    facetSelected = "facetSelected",
+    facetDeselected = "facetDeselected",
+    facetNegativeSelected = "facetNegativeSelected",
+    facetNegativeDeselected = "facetNegativeDeselected",
+    histogramChanged = "histogramChanged",
+    resultSelected = "resultSelected",
+    moreFacetsPageChange = "moreFacetsPageChange",
+    showMoreFacetsModal = "showMoreFacetsModal",
+    closeMoreFacetsModal = "closeMoreFacetsModal",
+    applyMoreFacetsModal = "applyMoreFacetsModal"
+}

package/dist/src/utils/analytics-events.js

@@ -1,25 +1,25 @@
-/**
- * Analytics categories and events. Used when building actions in
- */
-export var analyticsCategories;
-(function (analyticsCategories) {
-    analyticsCategories["default"] = "collection-browser";
-})(analyticsCategories || (analyticsCategories = {}));
-export var analyticsActions;
-(function (analyticsActions) {
-    analyticsActions["sortBy"] = "sortBy";
-    analyticsActions["filterByCreator"] = "filterByCreator";
-    analyticsActions["filterByTitle"] = "filterByTitle";
-    analyticsActions["displayMode"] = "displayMode";
-    analyticsActions["facetSelected"] = "facetSelected";
-    analyticsActions["facetDeselected"] = "facetDeselected";
-    analyticsActions["facetNegativeSelected"] = "facetNegativeSelected";
-    analyticsActions["facetNegativeDeselected"] = "facetNegativeDeselected";
-    analyticsActions["histogramChanged"] = "histogramChanged";
-    analyticsActions["resultSelected"] = "resultSelected";
-    analyticsActions["moreFacetsPageChange"] = "moreFacetsPageChange";
-    analyticsActions["showMoreFacetsModal"] = "showMoreFacetsModal";
-    analyticsActions["closeMoreFacetsModal"] = "closeMoreFacetsModal";
-    analyticsActions["applyMoreFacetsModal"] = "applyMoreFacetsModal";
-})(analyticsActions || (analyticsActions = {}));
+/**
+ * Analytics categories and events. Used when building actions in
+ */
+export var analyticsCategories;
+(function (analyticsCategories) {
+    analyticsCategories["default"] = "collection-browser";
+})(analyticsCategories || (analyticsCategories = {}));
+export var analyticsActions;
+(function (analyticsActions) {
+    analyticsActions["sortBy"] = "sortBy";
+    analyticsActions["filterByCreator"] = "filterByCreator";
+    analyticsActions["filterByTitle"] = "filterByTitle";
+    analyticsActions["displayMode"] = "displayMode";
+    analyticsActions["facetSelected"] = "facetSelected";
+    analyticsActions["facetDeselected"] = "facetDeselected";
+    analyticsActions["facetNegativeSelected"] = "facetNegativeSelected";
+    analyticsActions["facetNegativeDeselected"] = "facetNegativeDeselected";
+    analyticsActions["histogramChanged"] = "histogramChanged";
+    analyticsActions["resultSelected"] = "resultSelected";
+    analyticsActions["moreFacetsPageChange"] = "moreFacetsPageChange";
+    analyticsActions["showMoreFacetsModal"] = "showMoreFacetsModal";
+    analyticsActions["closeMoreFacetsModal"] = "closeMoreFacetsModal";
+    analyticsActions["applyMoreFacetsModal"] = "applyMoreFacetsModal";
+})(analyticsActions || (analyticsActions = {}));
 //# sourceMappingURL=analytics-events.js.map

package/dist/src/utils/format-count.d.ts

@@ -1,7 +1,7 @@
-export declare type NumberFormat = 'short' | 'long';
-export declare type LabelFormat = 'short' | 'long';
-/**
- * Format a "count" number into short "icon" or longer text string.
- * For positive numbers only.
- */
-export declare function formatCount(count: number | undefined, numberFormat?: NumberFormat, labelFormat?: LabelFormat, locale?: string): string;
+export declare type NumberFormat = 'short' | 'long';
+export declare type LabelFormat = 'short' | 'long';
+/**
+ * Format a "count" number into short "icon" or longer text string.
+ * For positive numbers only.
+ */
+export declare function formatCount(count: number | undefined, numberFormat?: NumberFormat, labelFormat?: LabelFormat, locale?: string): string;