@internetarchive/collection-browser 0.0.1-alpha.1

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

@@ -0,0 +1,160 @@
+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';
+let TileDispatcher = class TileDispatcher extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.displayMode = 'grid';
+        this.showDeleteButton = false;
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div id="container">
+        ${this.showDeleteButton
+            ? html `<button id="delete-button">X</button>`
+            : nothing}
+        <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>
+      </div>
+    `;
+    }
+    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 } = this;
+        if (!model)
+            return nothing;
+        switch (this.displayMode) {
+            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=${currentWidth}
+              .currentHeight=${currentHeight}
+            ></item-tile>`;
+                }
+            case 'list-compact':
+            case 'list-detail':
+                return html `<tile-list
+          .model=${model}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .displayMode=${this.displayMode}
+        ></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, "displayMode", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "showDeleteButton", 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, "sortParam", void 0);
+__decorate([
+    query('#container')
+], TileDispatcher.prototype, "container", 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 {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\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 }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.showDeleteButton\n          ? html`<button id=\"delete-button\">X</button>`\n          : nothing}\n        <a\n          href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n          title=${ifDefined(this.model?.title)}\n        >\n          ${this.tile}\n        </a>\n      </div>\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 { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\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            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .displayMode=${this.displayMode}\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 = '2-digit';
+            options.year = '2-digit';
+            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,SAAS,CAAC;YAC1B,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' // 12/20\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 = '2-digit';\n      options.year = '2-digit';\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/src/utils/format-string.d.ts

@@ -0,0 +1,2 @@
+export declare function strHasSpace(str: string): boolean;
+export declare function isStrOneLiner(str: string): boolean;

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

@@ -0,0 +1,7 @@
+export function strHasSpace(str) {
+    return /\s/.test(str);
+}
+export function isStrOneLiner(str) {
+    return !strHasSpace(str) && str.length >= 24;
+}
+//# sourceMappingURL=format-string.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-string.js","sourceRoot":"","sources":["../../../src/utils/format-string.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,GAAW;IACrC,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAW;IACvC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,IAAI,EAAE,CAAC;AAC/C,CAAC","sourcesContent":["export function strHasSpace(str: string): boolean {\n  return /\\s/.test(str);\n}\n\nexport function isStrOneLiner(str: string): boolean {\n  return !strHasSpace(str) && str.length >= 24;\n}\n"]}

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

@@ -0,0 +1,3 @@
+"use strict";
+describe('YourWebComponent', () => { });
+//# 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":";AAAA,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {});\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import { expect } from '@open-wc/testing';
+import { formatCount } from '../../src/utils/format-count';
+const testCount = 805342;
+describe('formatCount', () => {
+    it('returns blank when undefined number', () => {
+        expect(formatCount(undefined)).to.equal('');
+    });
+    it('returns blank when negative number', () => {
+        expect(formatCount(testCount * -1)).to.equal('');
+    });
+    it('returns long number when no NumberFormat', () => {
+        expect(formatCount(testCount)).to.equal('805,342');
+    });
+    it('returns short number when short NumberFormat', () => {
+        expect(formatCount(testCount, 'short')).to.equal('805K');
+    });
+    it('returns decimal when value of significant digits < 10', () => {
+        expect(formatCount(testCount * 10, 'short', 'long')).to.equal('8.1 million');
+    });
+    it('returns locale formatted number', () => {
+        expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');
+    });
+});
+//# sourceMappingURL=format-count.test.js.map

package/dist/test/utils/format-count.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-count.test.js","sourceRoot":"","sources":["../../../test/utils/format-count.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAC3D,aAAa,CACd,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { formatCount } from '../../src/utils/format-count';\n\nconst testCount = 805342;\n\ndescribe('formatCount', () => {\n  it('returns blank when undefined number', () => {\n    expect(formatCount(undefined)).to.equal('');\n  });\n\n  it('returns blank when negative number', () => {\n    expect(formatCount(testCount * -1)).to.equal('');\n  });\n\n  it('returns long number when no NumberFormat', () => {\n    expect(formatCount(testCount)).to.equal('805,342');\n  });\n\n  it('returns short number when short NumberFormat', () => {\n    expect(formatCount(testCount, 'short')).to.equal('805K');\n  });\n\n  it('returns decimal when value of significant digits < 10', () => {\n    expect(formatCount(testCount * 10, 'short', 'long')).to.equal(\n      '8.1 million'\n    );\n  });\n\n  it('returns locale formatted number', () => {\n    expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');\n  });\n});\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+import { expect } from '@open-wc/testing';
+import { formatDate } from '../../src/utils/format-date';
+const testDate = new Date(Date.UTC(2020, 11, 9));
+describe('formatDate', () => {
+    it('returns blank when undefined date', () => {
+        expect(formatDate(undefined)).to.equal('');
+    });
+    it('returns short date when no DateFormat', () => {
+        expect(formatDate(testDate)).to.equal('12/20');
+    });
+    it('returns long date when long DateFormat', () => {
+        expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
+    });
+    it('returns locale formatted date', () => {
+        expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');
+    });
+});
+//# sourceMappingURL=format-date.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-date.test.js","sourceRoot":"","sources":["../../../test/utils/format-date.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { formatDate } from '../../src/utils/format-date';\n\nconst testDate = new Date(Date.UTC(2020, 11, 9));\n\ndescribe('formatDate', () => {\n  it('returns blank when undefined date', () => {\n    expect(formatDate(undefined)).to.equal('');\n  });\n\n  it('returns short date when no DateFormat', () => {\n    expect(formatDate(testDate)).to.equal('12/20');\n  });\n\n  it('returns long date when long DateFormat', () => {\n    expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');\n  });\n\n  it('returns locale formatted date', () => {\n    expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');\n  });\n});\n"]}

package/dist/test/utils/format-string.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/utils/format-string.test.js

@@ -0,0 +1,17 @@
+import { expect } from '@open-wc/testing';
+import { isStrOneLiner } from '../../src/utils/format-string';
+const testShortTextNoSpaces = 'Loremipsumdolorsitamet';
+const testLongText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua';
+const testLongOnelineText = 'Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua';
+describe('isStrOneLiner', () => {
+    it('returns true if string has no spaces and have long text', () => {
+        expect(isStrOneLiner(testLongOnelineText)).to.equal(true);
+    });
+    it('returns false if string has no spaces but text length not more than 24', () => {
+        expect(isStrOneLiner(testShortTextNoSpaces)).to.equal(false);
+    });
+    it('returns false if string has spaces', () => {
+        expect(isStrOneLiner(testLongText)).to.equal(false);
+    });
+});
+//# sourceMappingURL=format-string.test.js.map

package/dist/test/utils/format-string.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-string.test.js","sourceRoot":"","sources":["../../../test/utils/format-string.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AACvD,MAAM,YAAY,GAChB,4HAA4H,CAAC;AAC/H,MAAM,mBAAmB,GACvB,0GAA0G,CAAC;AAE7G,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE,GAAG,EAAE;QAChF,MAAM,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { isStrOneLiner } from '../../src/utils/format-string';\n\nconst testShortTextNoSpaces = 'Loremipsumdolorsitamet';\nconst testLongText =\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua';\nconst testLongOnelineText =\n  'Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua';\n\ndescribe('isStrOneLiner', () => {\n  it('returns true if string has no spaces and have long text', () => {\n    expect(isStrOneLiner(testLongOnelineText)).to.equal(true);\n  });\n\n  it('returns false if string has no spaces but text length not more than 24', () => {\n    expect(isStrOneLiner(testShortTextNoSpaces)).to.equal(false);\n  });\n\n  it('returns false if string has spaces', () => {\n    expect(isStrOneLiner(testLongText)).to.equal(false);\n  });\n});\n"]}

package/index.ts

@@ -0,0 +1,3 @@
+export { CollectionBrowser } from './src/collection-browser';
+export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
+export { CollectionDisplayMode } from './src/models';

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@internetarchive/collection-browser",
+  "description": "The Internet Archive Collection Browser.",
+  "license": "AGPL-3.0-only",
+  "author": "Internet Archive",
+  "version": "0.0.1-alpha.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepare": "tsc && husky install",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "circular": "madge --circular --extensions ts .",
+    "test": "tsc && yarn run lint && yarn run circular && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@internetarchive/field-parsers": "0.1.1-alpha.1",
+    "@internetarchive/histogram-date-range": "^0.1.6",
+    "@internetarchive/infinite-scroller": "0.0.1-alpha.17",
+    "@internetarchive/search-service": "0.3.0-alpha.2",
+    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "@lit/localize": "^0.11.2",
+    "dompurify": "^2.3.6",
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@open-wc/eslint-config": "^7.0.0",
+    "@open-wc/testing": "^3.0.3",
+    "@types/dompurify": "^2.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "@web/dev-server": "^0.1.28",
+    "@web/test-runner": "^0.13.22",
+    "concurrently": "^6.3.0",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-lit-a11y": "^2.2.0",
+    "eslint-plugin-wc": "^1.3.2",
+    "husky": "^7.0.0",
+    "madge": "^5.0.1",
+    "prettier": "^2.4.1",
+    "sinon": "^12.0.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": [
+        "error"
+      ],
+      "class-methods-use-this": "off",
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "off",
+        "ignorePackages",
+        {
+          "js": "never",
+          "ts": "never"
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
+}

package/src/assets/img/icons/mediatype/account.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+
+export default html`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of a person</title>
+  </svg>
+`;

package/src/assets/img/icons/mediatype/audio.ts

@@ -0,0 +1,11 @@
+import { svg } from 'lit';
+
+export const audioIcon = svg`
+  <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+    <path 
+      d="m225.568345 20c20.949641 0 28.431655 8.5714286 28.431655 28.5714286-.928802 21.2807881-.704608 42.5615763-.400898 63.8423644l.153512 10.640394c.13351 9.458128.247386 18.916256.247386 28.374384v100c0 18.571429-5.985612 28.571429-28.431655 28.571429-50.877698-1.428571-100.258992-1.428571-151.1366903 0-20.9496403 0-28.4316547-8.571429-28.4316547-28.571429v-202.8571424c0-18.5714286 5.9856115-28.5714286 28.4316547-28.5714286 50.8776983 1.4285714 100.2589923 1.4285714 151.1366903 0zm-74.268345 127.4c-30.251351 0-53.3 24.489189-53.3 53.3 0 30.251351 24.489189 53.3 53.3 53.3 30.251351 0 53.3-24.489189 53.3-53.3s-24.489189-53.3-53.3-53.3zm0 39c7.897672 0 14.3 6.402328 14.3 14.3s-6.402328 14.3-14.3 14.3-14.3-6.402328-14.3-14.3 6.402328-14.3 14.3-14.3zm-1.3-137.8c-20.384 0-36.4 16.016-36.4 36.4s16.016 36.4 36.4 36.4 36.4-16.016 36.4-36.4-17.472-36.4-36.4-36.4z" fill="gray"
+      fill-rule="evenodd"/>
+    />
+    <title>Icon of a speaker</title>
+  </svg>
+`;

package/src/assets/img/icons/mediatype/collection.ts

@@ -0,0 +1,9 @@
+import { svg } from 'lit';
+
+export const collectionIcon = svg`
+  <svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m280 262.122891v-156.834044c0-4.877026-2.063112-9.1444235-6.189337-12.8021929s-8.220563-5.4866541-12.283013-5.4866541h-225.4946834c-4.4642309 0-8.2524498 1.726748-11.3646565 5.1802441s-4.6683101 7.8230299-4.6683101 13.1086029v156.834044c0 5.279189 1.5210273 9.578505 4.5630818 12.897946 3.0420545 3.319442 6.8653495 4.979163 11.4698848 4.979163h225.4946834c4.06245 0 8.156788-1.726748 12.283013-5.180244s6.189337-7.685784 6.189337-12.696865zm-200.9382244-131.440315v7.918783c0 1.487366-.7780516 3.00984-2.334155 4.567424-1.5561034 1.557585-3.1472828 2.336377-4.7735384 2.336377h-14.8180581c-1.7601825 0-3.4183254-.743683-4.9744288-2.231048-1.5561033-1.487365-2.334155-3.044949-2.334155-4.672753v-7.918783c0-1.761858.8131278-3.964179 2.4393834-6.606966 1.6262555-2.642786 3.2493223-3.964179 4.8692004-3.964179h14.8180581c1.4859512 0 3.0420545 1.321393 4.6683101 3.964179 1.6262556 2.642787 2.4393833 4.845108 2.4393833 6.606966zm169.2740724 0v7.918783c0 1.627804-.711089 3.185388-2.133265 4.672753-1.422177 1.487365-3.080319 2.231048-4.974429 2.231048h-131.114463c-2.028037 0-3.753143-.743683-5.175319-2.231048-1.422177-1.487365-2.133265-3.044949-2.133265-4.672753v-7.918783c0-1.895912.742975-4.130152 2.228927-6.702719 1.485951-2.572567 3.175981-3.858851 5.070091-3.858851h131.114463c1.760182 0 3.383249 1.286284 4.8692 3.858851 1.485952 2.572567 2.228927 4.806807 2.228927 6.702719zm-169.2740724 50.988539v7.918784c0 1.487365-.7780516 2.977922-2.334155 4.471671s-3.1472828 2.237431-4.7735384 2.231088h-14.8180581c-1.7601825 0-3.4183254-.743723-4.9744288-2.231088-1.5561033-1.487365-2.334155-2.977922-2.334155-4.471671v-7.918784c0-1.895912.8131278-4.165261 2.4393834-6.808047 1.6262555-2.642786 3.2493223-3.964179 4.8692004-3.964179h14.8180581c1.4859512 0 3.0420545 1.353311 4.6683101 4.059932 1.6262556 2.706622 2.4393833 4.940861 2.4393833 6.702719zm169.2740724 0v7.918784c0 1.487365-.711089 2.977922-2.133265 4.471671-1.422177 1.493749-3.080319 2.237431-4.974429 2.231088h-131.114463c-2.028037 0-3.753143-.743723-5.175319-2.231088-1.422177-1.487365-2.133265-2.977922-2.133265-4.471671v-7.918784c0-2.029966.742975-4.331233 2.228927-6.9038 1.485951-2.572567 3.175981-3.858851 5.070091-3.858851h131.114463c1.760182 0 3.383249 1.321393 4.8692 3.964179 1.485952 2.642787 2.228927 4.912136 2.228927 6.808048zm-169.2740724 51.400278v6.9038c0 1.761858-.7780516 3.421579-2.334155 4.979163s-3.1472828 2.336376-4.7735384 2.336376h-14.8180581c-1.7601825 0-3.4183254-.778792-4.9744288-2.336376-1.5561033-1.557584-2.334155-3.217305-2.334155-4.979163v-6.9038c0-2.029966.7780517-4.366342 2.334155-7.009129 1.5561034-2.642786 3.2142463-3.964179 4.9744288-3.964179h14.8180581c1.4859512 0 3.0420545 1.321393 4.6683101 3.964179 1.6262556 2.642787 2.4393833 4.979163 2.4393833 7.009129zm169.2740724 0v6.9038c0 1.761858-.711089 3.421579-2.133265 4.979163-1.422177 1.557584-3.080319 2.336376-4.974429 2.336376h-131.114463c-2.028037 0-3.753143-.778792-5.175319-2.336376-1.422177-1.557584-2.133265-3.217305-2.133265-4.979163v-6.9038c0-2.170404.742975-4.54189 2.228927-7.114457 1.485951-2.572567 3.175981-3.858851 5.070091-3.858851h131.114463c1.760182 0 3.383249 1.321393 4.8692 3.964179 1.485952 2.642787 2.228927 4.979163 2.228927 7.009129z" fill="black"/>
+
+</svg>
+`;

package/src/assets/img/icons/mediatype/etree.ts

@@ -0,0 +1,9 @@
+import { svg } from 'lit';
+
+export const etreeIcon = svg`
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m136.125893 117.288073c14.41013-4.850562 27.83316-2.109766 39.480173 7.796632 10.335962 8.792594 14.330094 20.428621 14.288498 33.809481-.091795 25.476855-.015572 50.965113-.049872 76.441968-.003811 2.805419-.034301 5.648851-.457344 8.401051-3.376719 21.854139-21.133078 36.299386-43.127486 35.204588-20.210769-1.003564-37.307792-18.132586-37.799436-38.393946-.346818-14.513672-.060979-29.057755-.301084-43.586633 0-12.597776-.06479-25.191751.034301-37.789527.0343-3.656928.16007-7.401288.903253-10.963182 3.18997-15.36138 12.272049-25.963431 27.028997-30.920432zm69.082871-95.288073v20.8201628h-42.6892v27.2482979s2.61448.5740085 3.574902.8363038c23.797103 6.5155667 41.073252 15.8669636 55.262332 37.0824705 8.594246 12.852468 11.643202 31.380398 11.643202 46.760785v15.304359h-20.889162c0-5.538611.099091-10.750305-.038112-15.961998-.099091-3.896415-.167692-7.857454-.842274-11.689246-5.328051-30.262793-30.775402-49.8170956-57.026916-51.5315184-29.311903-1.9120945-57.1907972 18.1858064-64.1500399 46.8520184-1.6657464 6.843753-1.7799637 13.736569-1.7780383 20.63947l.0023262 1.88283c.0030489 1.883022.0050308 3.76653-.0231721 5.649734-.0228671 1.364696 0 2.72559 0 4.052272h-20.5918884c-5.5529117-51.542923 24.3078039-93.7420516 70.1221835-99.8660762v-27.3889489h-42.6205979v-20.6909159z" fill="black" fill-rule="evenodd" transform="matrix(1 0 0 -1 0 301)"/>
+
+</svg>
+`;

package/src/assets/img/icons/mediatype/film.ts

@@ -0,0 +1,13 @@
+import { svg } from 'lit';
+
+export const filmIcon = svg`
+  <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m272 280h-9.268431c.276116-.74734.440961-1.53597.440961-2.365889v-6.775607c0-3.831666-3.082608-6.920121-6.882294-6.920121h-12.701336c-3.795565 0-6.882294 3.100842-6.882294 6.920121v6.775607c0 .829919.164845 1.626807.432719 2.365889h-172.3623223c.2678738-.74734.4368403-1.53597.4368403-2.365889v-6.775607c0-3.831666-3.0826085-6.920121-6.8864155-6.920121h-12.6930937c-3.803807 0-6.8905366 3.100842-6.8905366 6.920121v6.775607c0 .829919.1689665 1.626807.4368402 2.365889h-11.1806374v-260h11.1806374c-.2678737.74734-.4368402 1.5359695-.4368402 2.3700175v6.7673495c0 3.8399238 3.0826085 6.9242496 6.8905366 6.9242496h12.6930937c3.7955647 0 6.8864155-3.0967127 6.8864155-6.9242496v-6.7673495c0-.8381769-.1689665-1.6309354-.4368403-2.3700175h172.3664433c-.271995.74734-.43684 1.5359695-.43684 2.3700175v6.7673495c0 3.8399238 3.078487 6.9242496 6.882294 6.9242496h12.701336c3.795565 0 6.882294-3.0967127 6.882294-6.9242496v-6.7673495c0-.8381769-.164845-1.6309354-.43684-2.3700175h9.26431zm-206.786157-222.1333969c0-3.8357948-3.0826085-6.9242496-6.8864155-6.9242496h-12.6930937c-3.803807 0-6.8905366 3.1008417-6.8905366 6.9242496v6.7714785c0 3.8399238 3.0826085 6.9283786 6.8905366 6.9283786h12.6930937c3.7955647 0 6.8864155-3.1008417 6.8864155-6.9283786zm0 35.5007147c0-3.8357949-3.0826085-6.9242497-6.8864155-6.9242497h-12.6930937c-3.803807 0-6.8905366 3.1008417-6.8905366 6.9242497v6.7714782c0 3.835795 3.0826085 6.920121 6.8905366 6.920121h12.6930937c3.7955647 0 6.8864155-3.096713 6.8864155-6.920121zm0 35.4965852c0-3.839923-3.0826085-6.924249-6.8864155-6.924249h-12.6930937c-3.803807 0-6.8905366 3.100841-6.8905366 6.924249v6.771479c0 3.839924 3.0826085 6.92425 6.8905366 6.92425h12.6930937c3.7955647 0 6.8864155-3.100842 6.8864155-6.92425zm0 35.500715c0-3.839924-3.0826085-6.92425-6.8864155-6.92425h-12.6930937c-3.803807 0-6.8905366 3.096713-6.8905366 6.92425v6.771479c0 3.839923 3.0826085 6.928378 6.8905366 6.928378h12.6930937c3.7955647 0 6.8864155-3.10497 6.8864155-6.928378zm0 35.496586c0-3.827537-3.0826085-6.92425-6.8864155-6.92425h-12.6930937c-3.803807 0-6.8905366 3.104971-6.8905366 6.92425v6.771478c0 3.839924 3.0826085 6.928379 6.8905366 6.928379h12.6930937c3.7955647 0 6.8864155-3.104971 6.8864155-6.928379zm0 35.500714c0-3.835794-3.0826085-6.924249-6.8864155-6.924249h-12.6930937c-3.803807 0-6.8905366 3.10497-6.8905366 6.924249v6.771479c0 3.835795 3.0826085 6.928378 6.8905366 6.928378h12.6930937c3.7955647 0 6.8864155-3.10497 6.8864155-6.928378zm155.247251-186.2734632c0-5.8672383-4.805242-10.6692075-10.673738-10.6692075h-119.5788334c-5.8684952 0-10.6737379 4.8019692-10.6737379 10.6692075v74.7009692c0 5.867238 4.8052427 10.665078 10.6737379 10.665078h119.5788334c5.868496 0 10.673738-4.79784 10.673738-10.665078zm.366781 121.3663652c0-5.90027-4.83409-10.727013-10.731434-10.727013h-120.1970034c-5.8973433 0-10.7273127 4.826743-10.7273127 10.727013v75.084961c0 5.896141 4.8299694 10.718755 10.7273127 10.718755h120.1970034c5.897344 0 10.731434-4.822614 10.731434-10.718755zm42.344655-112.5882169c0-3.8357948-3.082608-6.9242496-6.882294-6.9242496h-12.701336c-3.795565 0-6.882294 3.1008417-6.882294 6.9242496v6.7714785c0 3.8399238 3.078487 6.9283786 6.882294 6.9283786h12.701336c3.795565 0 6.882294-3.1008417 6.882294-6.9283786zm0 35.5007147c0-3.8357949-3.082608-6.9242497-6.882294-6.9242497h-12.701336c-3.795565 0-6.882294 3.1008417-6.882294 6.9242497v6.7714782c0 3.835795 3.078487 6.920121 6.882294 6.920121h12.701336c3.795565 0 6.882294-3.096713 6.882294-6.920121zm0 35.4965852c0-3.839923-3.082608-6.924249-6.882294-6.924249h-12.701336c-3.795565 0-6.882294 3.100841-6.882294 6.924249v6.771479c0 3.839924 3.078487 6.92425 6.882294 6.92425h12.701336c3.795565 0 6.882294-3.100842 6.882294-6.92425zm0 35.500715c0-3.839924-3.082608-6.92425-6.882294-6.92425h-12.701336c-3.795565 0-6.882294 3.096713-6.882294 6.92425v6.771479c0 3.839923 3.078487 6.928378 6.882294 6.928378h12.701336c3.795565 0 6.882294-3.10497 6.882294-6.928378zm0 35.496586c0-3.827537-3.082608-6.92425-6.882294-6.92425h-12.701336c-3.795565 0-6.882294 3.104971-6.882294 6.92425v6.771478c0 3.839924 3.078487 6.928379 6.882294 6.928379h12.701336c3.795565 0 6.882294-3.104971 6.882294-6.928379zm0 35.500714c0-3.835794-3.082608-6.924249-6.882294-6.924249h-12.701336c-3.795565 0-6.882294 3.10497-6.882294 6.924249v6.771479c0 3.835795 3.078487 6.928378 6.882294 6.928378h12.701336c3.795565 0 6.882294-3.10497 6.882294-6.928378z"
+      fill="gray"
+      fill-rule="evenodd"
+      transform="matrix(1 0 0 -1 0 300)"
+    />
+    <title>Icon of a film</title>
+  </svg>
+`;

package/src/assets/img/icons/mediatype/foo.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="m136.125893 117.288073c14.41013-4.850562 27.83316-2.109766 39.480173 7.796632 10.335962 8.792594 14.330094 20.428621 14.288498 33.809481-.091795 25.476855-.015572 50.965113-.049872 76.441968-.003811 2.805419-.034301 5.648851-.457344 8.401051-3.376719 21.854139-21.133078 36.299386-43.127486 35.204588-20.210769-1.003564-37.307792-18.132586-37.799436-38.393946-.346818-14.513672-.060979-29.057755-.301084-43.586633 0-12.597776-.06479-25.191751.034301-37.789527.0343-3.656928.16007-7.401288.903253-10.963182 3.18997-15.36138 12.272049-25.963431 27.028997-30.920432zm69.082871-95.288073v20.8201628h-42.6892v27.2482979s2.61448.5740085 3.574902.8363038c23.797103 6.5155667 41.073252 15.8669636 55.262332 37.0824705 8.594246 12.852468 11.643202 31.380398 11.643202 46.760785v15.304359h-20.889162c0-5.538611.099091-10.750305-.038112-15.961998-.099091-3.896415-.167692-7.857454-.842274-11.689246-5.328051-30.262793-30.775402-49.8170956-57.026916-51.5315184-29.311903-1.9120945-57.1907972 18.1858064-64.1500399 46.8520184-1.6657464 6.843753-1.7799637 13.736569-1.7780383 20.63947l.0023262 1.88283c.0030489 1.883022.0050308 3.76653-.0231721 5.649734-.0228671 1.364696 0 2.72559 0 4.052272h-20.5918884c-5.5529117-51.542923 24.3078039-93.7420516 70.1221835-99.8660762v-27.3889489h-42.6205979v-20.6909159z" fill="black" fill-rule="evenodd"/>
+
+</svg>

package/src/assets/img/icons/mediatype/images.ts

@@ -0,0 +1,10 @@
+import { svg } from 'lit';
+
+export const imagesIcon = svg`
+<svg viewBox="0 0 300 300"
+  xmlns="http://www.w3.org/2000/svg">
+<path d="m43.0952612 181.159979c2.1744514 0 21.7161099 3.336499 21.7161099 3.336499v21.030628l-44.8113711-6.289709c4.5382599-51.29161 9.6729948-105.5332879 14.6089046-156.237397 66.1329874 6.484496 144.5110704 16.1138469 211.0385514 22.4035567-.987813 6.4876377-1.581132 21.8160564-1.972471 28.3005524-4.939065-.5906421-15.599873 0-20.535783-.5906421v-9.0418506c-56.065498-5.3032118-112.326666-12.180422-168.3953197-17.6847035 0 0-7.7005244 74.2858081-11.6486211 114.7730661zm31.7867547-81.562016h205.1179841v158.402037h-205.1179841zm18.9514955 140.126691h167.8051566v-64.461671l-21.122791 35.963191-28.428821-67.408598-24.2819 28.891194-66.530637-54.634392h-27.4410076zm64.5550106-40.487257c0-11.394994-9.082832-20.436845-20.731453-20.436845-11.250971 0-20.923965 9.041851-20.923965 20.436845 0 11.203349 9.672994 20.439986 20.923965 20.439986 11.648621 0 20.731453-9.236637 20.731453-20.439986z" fill="black" transform="matrix(1 0 0 -1 0 301)"/>
+
+
+</svg>
+`;