@internetarchive/collection-browser 0.2.15 → 0.2.16-alpha1

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

@@ -0,0 +1,57 @@
+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;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        padding: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+        white-space: pre-wrap; // for the newline character
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TextOverlay.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextOverlay.prototype, "loginRequired", void 0);
+TextOverlay = __decorate([
+    customElement('text-overlay')
+], TextOverlay);
+export { TextOverlay };
+//# sourceMappingURL=text-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAC+B,aAAQ,GAAG,KAAK,CAAC;QAEjB,kBAAa,GAAG,KAAK,CAAC;IAwCrD,CAAC;IAtCC,MAAM;QACJ,OAAO,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS,CAAC;IAC3E,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YACzC,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,8BAA8B,CAAC;IACrC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AA1C8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAuB;AAHxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2CvB;SA3CY,WAAW","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Boolean }) loginRequired = false;\n\n  render() {\n    return html` <div class=\"overlay no-preview\">${this.textDisplay}</div> `;\n  }\n\n  private get textDisplay() {\n    return this.loginRequired && !this.loggedIn\n      ? 'Log in\\nto view this item'\n      : 'Content may be inappropriate';\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        width: auto;\n        height: auto;\n        padding: 5px;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n        white-space: pre-wrap; // for the newline character\n      }\n    `;\n  }\n}\n"]}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,215 @@
+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.tileTemplate}
+      </div>
+    `;
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam, mobileBreakpoint } = this;
+        return html `
+      <tile-list-compact-header
+        class="header"
+        .currentWidth=${currentWidth}
+        .sortParam=${sortParam}
+        .mobileBreakpoint=${mobileBreakpoint}
+      >
+      </tile-list-compact-header>
+    `;
+    }
+    get tileTemplate() {
+        return html `
+      ${this.tileDisplayMode === 'list-detail'
+            ? this.tile
+            : this.linkTileTemplate}
+    `;
+    }
+    get linkTileTemplate() {
+        var _a, _b;
+        return html `
+      <a
+        href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
+        title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
+      >
+        ${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':
+                        return html `<collection-tile
+              .model=${model}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+            >
+            </collection-tile>`;
+                    case 'account':
+                        return html `<account-tile
+              .model=${model}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+            >
+            </account-tile>`;
+                    default:
+                        return html `<item-tile
+              .model=${model}
+              .currentWidth=${this.currentWidth}
+              .currentHeight=${this.currentHeight}
+              .collectionNameCache=${this.collectionNameCache}
+              .baseImageUrl=${this.baseImageUrl}
+              .sortParam=${sortParam}
+              .loggedIn=${this.loggedIn}
+            >
+            </item-tile>`;
+                }
+            case 'list-compact':
+                return html `<tile-list-compact
+          .model=${model}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .mobileBreakpoint=${mobileBreakpoint}
+          .baseImageUrl=${this.baseImageUrl}
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-list-compact>`;
+            case 'list-detail':
+                return html `<tile-list
+          .model=${model}
+          .collectionNameCache=${this.collectionNameCache}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .mobileBreakpoint=${mobileBreakpoint}
+          .baseImageUrl=${this.baseImageUrl}
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-list>`;
+            default:
+                return nothing;
+        }
+    }
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      #container {
+        height: 100%;
+      }
+
+      #delete-button {
+        float: right;
+      }
+
+      a {
+        display: block;
+        height: 100%;
+        color: unset;
+        text-decoration: none;
+      }
+
+      a :first-child {
+        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 };
+//# sourceMappingURL=tile-dispatcher.js.map

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

@@ -0,0 +1 @@
+{"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      >\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              .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"]}

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

@@ -0,0 +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;

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

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+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-count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-count.js","sourceRoot":"","sources":["../../../src/utils/format-count.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAUzC;;GAEG;AACH,SAAS,SAAS,CAAC,MAAc,EAAE,YAA0B;IAC3D,IAAI,OAAO,GAAY,CAAC,CAAC;IACzB,IAAI,MAAM,IAAI,UAAa,EAAE;QAC3B,OAAO,GAAG,UAAa,CAAC;KACzB;SAAM,IAAI,MAAM,IAAI,OAAS,EAAE;QAC9B,OAAO,GAAG,OAAS,CAAC;KACrB;SAAM,IAAI,MAAM,IAAI,IAAK,IAAI,YAAY,KAAK,OAAO,EAAE;QACtD,OAAO,GAAG,IAAK,CAAC;KACjB;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;GAGG;AACH,SAAS,KAAK,CAAC,SAAiB,CAAC,EAAE,OAAgB;IACjD,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAChC,MAAM,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/B,IAAI,OAAO,GAAW,CAAC,CAAC;IACxB,IAAI,UAAU,EAAE;QACd,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;KAC3D;SAAM;QACL,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC9B;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;GAEG;AACH,SAAS,QAAQ,CACf,OAAe,EACf,OAAgB,EAChB,MAAmB,EACnB,MAAc;IAEd,QAAQ,OAAO,EAAE;QACf,KAAK,UAAa;YAChB,IAAI,MAAM,KAAK,OAAO,EAAE;gBACtB,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,GAAG,CAAC,CAAC;aAC9B;YACD,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,UAAU,CAAC,CAAC;QACtC,KAAK,OAAS;YACZ,IAAI,MAAM,KAAK,OAAO,EAAE;gBACtB,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,GAAG,CAAC,CAAC;aAC9B;YACD,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,UAAU,CAAC,CAAC;QACtC,KAAK,IAAK;YACR,IAAI,MAAM,KAAK,OAAO,EAAE;gBACtB,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,GAAG,CAAC,CAAC;aAC9B;YACD,OAAO,GAAG,CAAC,GAAG,CAAA,GAAG,OAAO,WAAW,CAAC,CAAC;QAEvC;YACE,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;KACxD;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,KAAyB,EACzB,eAA6B,MAAM,EACnC,cAA2B,OAAO,EAClC,SAAiB,OAAO;IAExB,4BAA4B;IAC5B,MAAM,MAAM,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,CAAC;IAC3B,IAAI,MAAM,GAAG,CAAC,EAAE;QACd,OAAO,EAAE,CAAC;KACX;IACD,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC","sourcesContent":["/*\n * Replaces Petabox www/common/Util::number_format()\n * For positive numbers only.\n */\nimport { msg, str } from '@lit/localize';\n\nexport type NumberFormat =\n  | 'short' // 1.2 [K | thousand]\n  | 'long'; // 1,200 [No label for numbers < 1,000,000]\nexport type LabelFormat =\n  | 'short' // [1.2]K\n  | 'long'; // [1.2] thousand\ntype Divisor = 1_000_000_000 | 1_000_000 | 1_000 | 1;\n\n/**\n * Return the magnitude of a number.\n */\nfunction magnitude(number: number, numberFormat: NumberFormat): Divisor {\n  let divisor: Divisor = 1;\n  if (number >= 1_000_000_000) {\n    divisor = 1_000_000_000;\n  } else if (number >= 1_000_000) {\n    divisor = 1_000_000;\n  } else if (number >= 1_000 && numberFormat === 'short') {\n    divisor = 1_000;\n  }\n  return divisor;\n}\n\n/**\n * Round a number given passed magnitude.\n * Significant digits of value less than 10 get a decimal.\n */\nfunction round(number: number = 0, divisor: Divisor): number {\n  const result = number / divisor;\n  const roundToOne = result < 10;\n  let rounded: number = 0;\n  if (roundToOne) {\n    rounded = Math.round((result + Number.EPSILON) * 10) / 10;\n  } else {\n    rounded = Math.round(result);\n  }\n  return rounded;\n}\n\n/**\n * Return a label for a number and format.\n */\nfunction labelize(\n  rounded: number,\n  divisor: Divisor,\n  format: LabelFormat,\n  locale: string\n): string {\n  switch (divisor) {\n    case 1_000_000_000:\n      if (format === 'short') {\n        return msg(str`${rounded}B`);\n      }\n      return msg(str`${rounded} billion`);\n    case 1_000_000:\n      if (format === 'short') {\n        return msg(str`${rounded}M`);\n      }\n      return msg(str`${rounded} million`);\n    case 1_000:\n      if (format === 'short') {\n        return msg(str`${rounded}K`);\n      }\n      return msg(str`${rounded} thousand`);\n\n    default:\n      return new Intl.NumberFormat(locale).format(rounded);\n  }\n}\n\n/**\n * Format a \"count\" number into short \"icon\" or longer text string.\n * For positive numbers only.\n */\nexport function formatCount(\n  count: number | undefined,\n  numberFormat: NumberFormat = 'long',\n  labelFormat: LabelFormat = 'short',\n  locale: string = 'en-US'\n): string {\n  // Return blank if undefined\n  const number = count ?? -1;\n  if (number < 0) {\n    return '';\n  }\n  const divisor = magnitude(number, numberFormat);\n  const rounded = round(number, divisor);\n  return labelize(rounded, divisor, labelFormat, locale);\n}\n"]}

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +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);
+}
+//# sourceMappingURL=format-date.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-date.js","sourceRoot":"","sources":["../../../src/utils/format-date.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,UAAU,CACxB,IAAsB,EACtB,SAAqB,OAAO,EAC5B,SAAiB,OAAO;IAExB,4BAA4B;IAC5B,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,MAAM,OAAO,GAA+B;QAC1C,QAAQ,EAAE,KAAK,EAAE,4BAA4B;KAC9C,CAAC;IACF,QAAQ,MAAM,EAAE;QACd,KAAK,OAAO;YACV,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,MAAM;QACR,KAAK,MAAM;YACT,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;YACzB,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;YACxB,OAAO,CAAC,GAAG,GAAG,SAAS,CAAC;YACxB,MAAM;QACR;YACE,MAAM;KACT;IAED,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/D,OAAO,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC","sourcesContent":["/*\n * Display date\n * Override browser timezone to always display same date as in data\n */\nexport type DateFormat =\n  | 'short' // Dec 2020\n  | 'long'; // Dec 20, 2020\n\nexport function formatDate(\n  date: Date | undefined,\n  format: DateFormat = 'short',\n  locale: string = 'en-US'\n): string {\n  // Return blank if undefined\n  if (!date) return '';\n\n  const options: Intl.DateTimeFormatOptions = {\n    timeZone: 'UTC', // Override browser timezone\n  };\n  switch (format) {\n    case 'short':\n      options.month = 'short';\n      options.year = 'numeric';\n      break;\n    case 'long':\n      options.year = 'numeric';\n      options.month = 'short';\n      options.day = '2-digit';\n      break;\n    default:\n      break;\n  }\n\n  const dateFormatter = new Intl.DateTimeFormat(locale, options);\n  return dateFormatter.format(date);\n}\n"]}

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

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

package/dist/test/collection-browser.test.js

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../src/collection-browser';
+import { MockSearchService } from './mocks/mock-search-service';
+import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';
+describe('Collection Browser', () => {
+    it('should render with a sort bar, facets, and infinite scroller', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<collection-browser></collection-browser>`);
+        el.baseQuery = 'hello';
+        await el.updateComplete;
+        const facets = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('collection-facets');
+        const sortBar = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('sort-filter-bar');
+        const infiniteScroller = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('infinite-scroller');
+        expect(facets).to.exist;
+        expect(sortBar).to.exist;
+        expect(infiniteScroller).to.exist;
+    });
+    it('queries the search service when given a base query', async () => {
+        var _a;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`);
+        el.baseQuery = 'collection:foo';
+        await el.updateComplete;
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo');
+    });
+    it('queries for collection names after a fetch', async () => {
+        const searchService = new MockSearchService();
+        const collectionNameCache = new MockCollectionNameCache();
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .collectionNameCache=${collectionNameCache}
+      ></collection-browser>`);
+        el.baseQuery = 'blahblah';
+        await el.updateComplete;
+        expect(collectionNameCache.preloadIdentifiersRequested).to.deep.equal([
+            'foo',
+            'bar',
+            'baz',
+            'boop',
+        ]);
+    });
+    it('refreshes when certain properties change', async () => {
+        var _a;
+        const searchService = new MockSearchService();
+        const collectionNameCache = new MockCollectionNameCache();
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .collectionNameCache=${collectionNameCache}
+      ></collection-browser>`);
+        const infiniteScrollerRefreshSpy = sinon.spy();
+        const infiniteScroller = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('infinite-scroller');
+        infiniteScroller.reload = infiniteScrollerRefreshSpy;
+        expect(infiniteScrollerRefreshSpy.called).to.be.false;
+        expect(infiniteScrollerRefreshSpy.callCount).to.equal(0);
+        // testing: `loggedIn`
+        el.loggedIn = true;
+        await el.updateComplete;
+        expect(infiniteScrollerRefreshSpy.called).to.be.true;
+        expect(infiniteScrollerRefreshSpy.callCount).to.equal(1);
+        el.loggedIn = false;
+        await el.updateComplete;
+        expect(infiniteScrollerRefreshSpy.callCount).to.equal(2);
+        // testing: `displayMode`
+        el.displayMode = 'list-compact';
+        await el.updateComplete;
+        expect(infiniteScrollerRefreshSpy.callCount).to.equal(3);
+        // testing: `baseNavigationUrl`
+        el.baseNavigationUrl = 'https://funtestsite.com';
+        await el.updateComplete;
+        expect(infiniteScrollerRefreshSpy.callCount).to.equal(4);
+        // testing: `baseImageUrl`
+        el.baseImageUrl = 'https://funtestsiteforimages.com';
+        await el.updateComplete;
+        expect(infiniteScrollerRefreshSpy.callCount).to.equal(5);
+    });
+});
+//# sourceMappingURL=collection-browser.test.js.map

package/dist/test/collection-browser.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-browser.test.js","sourceRoot":"","sources":["../../test/collection-browser.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport sinon from 'sinon';\nimport type { InfiniteScroller } from '@internetarchive/infinite-scroller';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\nimport { MockSearchService } from './mocks/mock-search-service';\nimport { MockCollectionNameCache } from './mocks/mock-collection-name-cache';\n\ndescribe('Collection Browser', () => {\n  it('should render with a sort bar, facets, and infinite scroller', async () => {\n    const el = await fixture<CollectionBrowser>(\n      html`<collection-browser></collection-browser>`\n    );\n\n    el.baseQuery = 'hello';\n    await el.updateComplete;\n\n    const facets = el.shadowRoot?.querySelector('collection-facets');\n    const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');\n    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');\n    expect(facets).to.exist;\n    expect(sortBar).to.exist;\n    expect(infiniteScroller).to.exist;\n  });\n\n  it('queries the search service when given a base query', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<CollectionBrowser>(\n      html`<collection-browser\n        .searchService=${searchService}\n      ></collection-browser>`\n    );\n\n    el.baseQuery = 'collection:foo';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.equal('collection:foo');\n  });\n\n  it('queries for collection names after a fetch', async () => {\n    const searchService = new MockSearchService();\n    const collectionNameCache = new MockCollectionNameCache();\n\n    const el = await fixture<CollectionBrowser>(\n      html`<collection-browser\n        .searchService=${searchService}\n        .collectionNameCache=${collectionNameCache}\n      ></collection-browser>`\n    );\n\n    el.baseQuery = 'blahblah';\n    await el.updateComplete;\n\n    expect(collectionNameCache.preloadIdentifiersRequested).to.deep.equal([\n      'foo',\n      'bar',\n      'baz',\n      'boop',\n    ]);\n  });\n  it('refreshes when certain properties change', async () => {\n    const searchService = new MockSearchService();\n    const collectionNameCache = new MockCollectionNameCache();\n    const el = await fixture<CollectionBrowser>(\n      html`<collection-browser\n        .searchService=${searchService}\n        .collectionNameCache=${collectionNameCache}\n      ></collection-browser>`\n    );\n    const infiniteScrollerRefreshSpy = sinon.spy();\n\n    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');\n    (infiniteScroller as InfiniteScroller).reload = infiniteScrollerRefreshSpy;\n    expect(infiniteScrollerRefreshSpy.called).to.be.false;\n    expect(infiniteScrollerRefreshSpy.callCount).to.equal(0);\n\n    // testing: `loggedIn`\n    el.loggedIn = true;\n    await el.updateComplete;\n    expect(infiniteScrollerRefreshSpy.called).to.be.true;\n    expect(infiniteScrollerRefreshSpy.callCount).to.equal(1);\n\n    el.loggedIn = false;\n    await el.updateComplete;\n    expect(infiniteScrollerRefreshSpy.callCount).to.equal(2);\n\n    // testing: `displayMode`\n    el.displayMode = 'list-compact';\n    await el.updateComplete;\n    expect(infiniteScrollerRefreshSpy.callCount).to.equal(3);\n\n    // testing: `baseNavigationUrl`\n    el.baseNavigationUrl = 'https://funtestsite.com';\n    await el.updateComplete;\n    expect(infiniteScrollerRefreshSpy.callCount).to.equal(4);\n\n    // testing: `baseImageUrl`\n    el.baseImageUrl = 'https://funtestsiteforimages.com';\n    await el.updateComplete;\n    expect(infiniteScrollerRefreshSpy.callCount).to.equal(5);\n  });\n});\n"]}

package/dist/test/collection-facets/more-facets-content.test.d.ts

@@ -0,0 +1 @@
+import '../../src/collection-facets/more-facets-content';

package/dist/test/collection-facets/more-facets-content.test.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../src/collection-facets/more-facets-content';
+import { MockSearchService } from '../mocks/mock-search-service';
+describe('More facets content', () => {
+    it('should render more facets template', async () => {
+        var _a;
+        const el = await fixture(html `<more-facets-content></more-facets-content>`);
+        el.facetsLoading = false;
+        await el.updateComplete;
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.facets-content')).to.exist;
+    });
+    it('should render more facets loader template', async () => {
+        var _a;
+        const el = await fixture(html `<more-facets-content></more-facets-content>`);
+        el.facetsLoading = true;
+        await el.updateComplete;
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.facets-loader')).to.exist;
+    });
+    it('should render more facets empty template', async () => {
+        var _a, _b;
+        const el = await fixture(html `<more-facets-content></more-facets-content>`);
+        el.facetsLoading = false;
+        el.paginationSize = 0;
+        await el.updateComplete;
+        expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#more-facets-page')) === null || _b === void 0 ? void 0 : _b.textContent).to.contains('No result found. please try again later.');
+    });
+    it('should render pagination for more facets', async () => {
+        var _a;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`);
+        el.facetKey = 'mediatype';
+        el.facetsLoading = false;
+        el.paginationSize = 6;
+        await el.updateComplete;
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('more-facets-pagination')).to.exist;
+    });
+    it('query for more facets content using search service', async () => {
+        var _a;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`);
+        el.facetKey = 'collection';
+        el.fullQuery = 'title:hello';
+        await el.updateComplete;
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('title:hello');
+    });
+    it('query for specific facets data', async () => {
+        var _a;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`);
+        el.facetKey = 'language';
+        el.facetsLoading = false;
+        await el.updateComplete;
+        expect(el.paginationSize).to.equal(1);
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.facet-list')).to.exist;
+        expect(Object.keys(el.castedBuckets).length).to.equal(7);
+    });
+    it('page number clicked event', async () => {
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`);
+        setTimeout(() => el.dispatchEvent(new CustomEvent('pageNumberClicked', { detail: { page: 15 } })));
+        const { detail } = await oneEvent(el, 'pageNumberClicked');
+        expect(detail === null || detail === void 0 ? void 0 : detail.page).to.equal(15);
+    });
+});
+//# sourceMappingURL=more-facets-content.test.js.map