@internetarchive/collection-browser 0.3.2 → 0.3.3-alpha.1

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,58 +52,58 @@ 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}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
             >
-            </collection-tile>`;
-                    case 'account':
+            </collection-tile>`;
+                    case 'account':
                         return html `<account-tile
               .model=${model}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
             >
-            </account-tile>`;
-                    default:
+            </account-tile>`;
+                    default:
                         return html `<item-tile
               .model=${model}
               .currentWidth=${this.currentWidth}
@@ -113,9 +113,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}
@@ -126,8 +126,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}
@@ -139,12 +139,12 @@ 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;
@@ -170,47 +170,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/utils/analytics-events.d.ts

@@ -1,18 +1,18 @@
-/**
- * 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"
-}
+/**
+ * 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"
+}

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

@@ -1,21 +1,21 @@
-/**
- * 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 || (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 || (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;

package/dist/src/utils/format-count.js

@@ -1,77 +1,77 @@
-/*
- * Replaces Petabox www/common/Util::number_format()
- * For positive numbers only.
- */
-import { msg, str } from '@lit/localize';
-/**
- * Return the magnitude of a number.
- */
-function magnitude(number, numberFormat) {
-    let divisor = 1;
-    if (number >= 1000000000) {
-        divisor = 1000000000;
-    }
-    else if (number >= 1000000) {
-        divisor = 1000000;
-    }
-    else if (number >= 1000 && numberFormat === 'short') {
-        divisor = 1000;
-    }
-    return divisor;
-}
-/**
- * Round a number given passed magnitude.
- * Significant digits of value less than 10 get a decimal.
- */
-// eslint-disable-next-line default-param-last
-function round(number = 0, divisor) {
-    const result = number / divisor;
-    const roundToOne = result < 10;
-    let rounded = 0;
-    if (roundToOne) {
-        rounded = Math.round((result + Number.EPSILON) * 10) / 10;
-    }
-    else {
-        rounded = Math.round(result);
-    }
-    return rounded;
-}
-/**
- * Return a label for a number and format.
- */
-function labelize(rounded, divisor, format, locale) {
-    switch (divisor) {
-        case 1000000000:
-            if (format === 'short') {
-                return msg(str `${rounded}B`);
-            }
-            return msg(str `${rounded} billion`);
-        case 1000000:
-            if (format === 'short') {
-                return msg(str `${rounded}M`);
-            }
-            return msg(str `${rounded} million`);
-        case 1000:
-            if (format === 'short') {
-                return msg(str `${rounded}K`);
-            }
-            return msg(str `${rounded} thousand`);
-        default:
-            return new Intl.NumberFormat(locale).format(rounded);
-    }
-}
-/**
- * Format a "count" number into short "icon" or longer text string.
- * For positive numbers only.
- */
-export function formatCount(count, numberFormat = 'long', labelFormat = 'short', locale = 'en-US') {
-    // Return blank if undefined
-    const number = count !== null && count !== void 0 ? count : -1;
-    if (number < 0) {
-        return '';
-    }
-    const divisor = magnitude(number, numberFormat);
-    const rounded = round(number, divisor);
-    return labelize(rounded, divisor, labelFormat, locale);
-}
+/*
+ * Replaces Petabox www/common/Util::number_format()
+ * For positive numbers only.
+ */
+import { msg, str } from '@lit/localize';
+/**
+ * Return the magnitude of a number.
+ */
+function magnitude(number, numberFormat) {
+    let divisor = 1;
+    if (number >= 1000000000) {
+        divisor = 1000000000;
+    }
+    else if (number >= 1000000) {
+        divisor = 1000000;
+    }
+    else if (number >= 1000 && numberFormat === 'short') {
+        divisor = 1000;
+    }
+    return divisor;
+}
+/**
+ * Round a number given passed magnitude.
+ * Significant digits of value less than 10 get a decimal.
+ */
+// eslint-disable-next-line default-param-last
+function round(number = 0, divisor) {
+    const result = number / divisor;
+    const roundToOne = result < 10;
+    let rounded = 0;
+    if (roundToOne) {
+        rounded = Math.round((result + Number.EPSILON) * 10) / 10;
+    }
+    else {
+        rounded = Math.round(result);
+    }
+    return rounded;
+}
+/**
+ * Return a label for a number and format.
+ */
+function labelize(rounded, divisor, format, locale) {
+    switch (divisor) {
+        case 1000000000:
+            if (format === 'short') {
+                return msg(str `${rounded}B`);
+            }
+            return msg(str `${rounded} billion`);
+        case 1000000:
+            if (format === 'short') {
+                return msg(str `${rounded}M`);
+            }
+            return msg(str `${rounded} million`);
+        case 1000:
+            if (format === 'short') {
+                return msg(str `${rounded}K`);
+            }
+            return msg(str `${rounded} thousand`);
+        default:
+            return new Intl.NumberFormat(locale).format(rounded);
+    }
+}
+/**
+ * Format a "count" number into short "icon" or longer text string.
+ * For positive numbers only.
+ */
+export function formatCount(count, numberFormat = 'long', labelFormat = 'short', locale = 'en-US') {
+    // Return blank if undefined
+    const number = count !== null && count !== void 0 ? count : -1;
+    if (number < 0) {
+        return '';
+    }
+    const divisor = magnitude(number, numberFormat);
+    const rounded = round(number, divisor);
+    return labelize(rounded, divisor, labelFormat, locale);
+}
 //# sourceMappingURL=format-count.js.map

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

@@ -1,2 +1,2 @@
-export declare type DateFormat = 'short' | 'long';
-export declare function formatDate(date: Date | undefined, format?: DateFormat, locale?: string): string;
+export declare type DateFormat = 'short' | 'long';
+export declare function formatDate(date: Date | undefined, format?: DateFormat, locale?: string): string;

package/dist/src/utils/format-date.js

@@ -1,24 +1,24 @@
-export function formatDate(date, format = 'short', locale = 'en-US') {
-    // Return blank if undefined
-    if (!date)
-        return '';
-    const options = {
-        timeZone: 'UTC', // Override browser timezone
-    };
-    switch (format) {
-        case 'short':
-            options.month = 'short';
-            options.year = 'numeric';
-            break;
-        case 'long':
-            options.year = 'numeric';
-            options.month = 'short';
-            options.day = '2-digit';
-            break;
-        default:
-            break;
-    }
-    const dateFormatter = new Intl.DateTimeFormat(locale, options);
-    return dateFormatter.format(date);
-}
+export function formatDate(date, format = 'short', locale = 'en-US') {
+    // Return blank if undefined
+    if (!date)
+        return '';
+    const options = {
+        timeZone: 'UTC', // Override browser timezone
+    };
+    switch (format) {
+        case 'short':
+            options.month = 'short';
+            options.year = 'numeric';
+            break;
+        case 'long':
+            options.year = 'numeric';
+            options.month = 'short';
+            options.day = '2-digit';
+            break;
+        default:
+            break;
+    }
+    const dateFormatter = new Intl.DateTimeFormat(locale, options);
+    return dateFormatter.format(date);
+}
 //# sourceMappingURL=format-date.js.map

package/dist/test/collection-browser.test.d.ts

@@ -1 +1 @@
-import '../src/collection-browser';
+import '../src/collection-browser';