@internetarchive/collection-browser 0.0.1-alpha.7 → 0.1.0

package/dist/src/tiles/mediatype-icon.js

@@ -0,0 +1,78 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { mediatypeConfig } from '../mediatype/mediatype-config';
+let MediatypeIcon = class MediatypeIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.showText = false;
+    }
+    get displayMediatype() {
+        var _a, _b;
+        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+        const radioIdentifier = ['radio', 'radioprogram'];
+        if (this.mediatype === 'movies' &&
+            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
+            return 'tv';
+        }
+        if (this.mediatype === 'audio' &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
+            return 'radio';
+        }
+        return this.mediatype || '';
+    }
+    render() {
+        const config = mediatypeConfig[this.displayMediatype];
+        if (!config) {
+            return html ``;
+        }
+        return html `
+      <div
+        id="icon"
+        class="${this.showText ? 'show-text' : 'hide-text'}"
+        style="--iconFillColor: ${config.color}"
+      >
+        ${config.icon}
+        <p class="status-text">${config.text}</p>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: var(--iconTextAlign, center);
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MediatypeIcon.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Array })
+], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "showText", void 0);
+MediatypeIcon = __decorate([
+    customElement('mediatype-icon')
+], MediatypeIcon);
+export { MediatypeIcon };
+//# sourceMappingURL=mediatype-icon.js.map

package/dist/src/tiles/mediatype-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.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;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IA+DhD,CAAC;IA7DC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB;SApEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,22 +1,29 @@
 import { LitElement, PropertyValues } from 'lit';
 import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import { SortParam } from '@internetarchive/search-service';
-import type { CollectionDisplayMode, TileModel } from '../models';
+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 {
-    displayMode: CollectionDisplayMode;
+    tileDisplayMode?: TileDisplayMode;
     model?: TileModel;
     baseNavigationUrl?: string;
-    showDeleteButton: boolean;
     currentWidth?: number;
     currentHeight?: number;
     resizeObserver?: SharedResizeObserverInterface;
-    sortParam?: SortParam;
+    collectionNameCache?: CollectionNameCacheInterface;
+    sortParam: SortParam | null;
     private container;
+    mobileBreakpoint?: number;
     render(): import("lit-html").TemplateResult<1>;
+    private get headerTemplate();
+    private get tileTemplate();
+    private get linkTileTemplate();
     handleResize(entry: ResizeObserverEntry): void;
     disconnectedCallback(): void;
     private stopResizeObservation;

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

@@ -6,28 +6,52 @@ 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.displayMode = 'grid';
-        this.showDeleteButton = false;
+        this.sortParam = null;
     }
     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>
+        ${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;
@@ -57,10 +81,10 @@ let TileDispatcher = class TileDispatcher extends LitElement {
         }
     }
     get tile() {
-        const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } = this;
+        const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam, mobileBreakpoint, } = this;
         if (!model)
             return nothing;
-        switch (this.displayMode) {
+        switch (this.tileDisplayMode) {
             case 'grid':
                 switch (model.mediatype) {
                     case 'collection':
@@ -82,17 +106,27 @@ let TileDispatcher = class TileDispatcher extends LitElement {
               .baseNavigationUrl=${this.baseNavigationUrl}
               .currentWidth=${this.currentWidth}
               .currentHeight=${this.currentHeight}
+              .collectionNameCache=${this.collectionNameCache}
             ></item-tile>`;
                 }
             case 'list-compact':
+                return html `<tile-list-compact
+          .model=${model}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .mobileBreakpoint=${mobileBreakpoint}
+        ></tile-list-compact>`;
             case 'list-detail':
                 return html `<tile-list
           .model=${model}
+          .collectionNameCache=${this.collectionNameCache}
           .currentWidth=${currentWidth}
           .currentHeight=${currentHeight}
           .baseNavigationUrl=${baseNavigationUrl}
           .sortParam=${sortParam}
-          .displayMode=${this.displayMode}
+          .mobileBreakpoint=${mobileBreakpoint}
         ></tile-list>`;
             default:
                 return nothing;
@@ -129,16 +163,13 @@ let TileDispatcher = class TileDispatcher extends LitElement {
 };
 __decorate([
     property({ type: String })
-], TileDispatcher.prototype, "displayMode", void 0);
+], 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: Boolean })
-], TileDispatcher.prototype, "showDeleteButton", void 0);
 __decorate([
     property({ type: Number })
 ], TileDispatcher.prototype, "currentWidth", void 0);
@@ -148,12 +179,18 @@ __decorate([
 __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);
 TileDispatcher = __decorate([
     customElement('tile-dispatcher')
 ], TileDispatcher);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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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              .baseNavigationUrl=${this.baseNavigationUrl}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.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"]}
+{"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 type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { 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  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            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${this.baseNavigationUrl}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\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        ></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        ></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-date.js

@@ -7,8 +7,8 @@ export function formatDate(date, format = 'short', locale = 'en-US') {
     };
     switch (format) {
         case 'short':
-            options.month = '2-digit';
-            options.year = '2-digit';
+            options.month = 'short';
+            options.year = 'numeric';
             break;
         case 'long':
             options.year = 'numeric';

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

@@ -1 +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"]}
+{"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' // 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 = '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

@@ -1,3 +1,17 @@
-"use strict";
-describe('YourWebComponent', () => { });
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/collection-browser';
+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>`);
+        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;
+    });
+});
 //# sourceMappingURL=collection-browser.test.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"collection-browser.test.js","sourceRoot":"","sources":["../../test/collection-browser.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,2BAA2B,CAAC;AAEnC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;;QAC5E,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,2CAA2C,CAChD,CAAC;QAEF,MAAM,MAAM,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACjE,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAChE,MAAM,gBAAgB,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAC3E,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACzB,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\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    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"]}

package/dist/test/mediatype-config.test.js

@@ -0,0 +1,17 @@
+import { expect } from '@open-wc/testing';
+import { mediatypeConfig } from '../src/mediatype/mediatype-config';
+describe('mediatypeConfig', () => {
+    it('returns undefined', () => {
+        expect(mediatypeConfig['']).to.equal(undefined);
+        expect(mediatypeConfig.test).to.equal(undefined);
+        expect(mediatypeConfig.media).to.equal(undefined);
+        expect(mediatypeConfig.testing).to.equal(undefined);
+    });
+    it('returns audio', () => {
+        expect(mediatypeConfig.audio).to.exist;
+        expect(mediatypeConfig.audio.color).to.exist;
+        expect(mediatypeConfig.audio.icon).to.exist;
+        expect(mediatypeConfig.audio.text).to.exist;
+    });
+});
+//# sourceMappingURL=mediatype-config.test.js.map

package/dist/test/mediatype-config.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-config.test.js","sourceRoot":"","sources":["../../test/mediatype-config.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACjD,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAClD,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7C,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5C,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { mediatypeConfig } from '../src/mediatype/mediatype-config';\n\ndescribe('mediatypeConfig', () => {\n  it('returns undefined', () => {\n    expect(mediatypeConfig['']).to.equal(undefined);\n    expect(mediatypeConfig.test).to.equal(undefined);\n    expect(mediatypeConfig.media).to.equal(undefined);\n    expect(mediatypeConfig.testing).to.equal(undefined);\n  });\n\n  it('returns audio', () => {\n    expect(mediatypeConfig.audio).to.exist;\n    expect(mediatypeConfig.audio.color).to.exist;\n    expect(mediatypeConfig.audio.icon).to.exist;\n    expect(mediatypeConfig.audio.text).to.exist;\n  });\n});\n"]}

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

@@ -6,7 +6,7 @@ describe('formatDate', () => {
         expect(formatDate(undefined)).to.equal('');
     });
     it('returns short date when no DateFormat', () => {
-        expect(formatDate(testDate)).to.equal('12/20');
+        expect(formatDate(testDate)).to.equal('Dec 2020');
     });
     it('returns long date when long DateFormat', () => {
         expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');

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

@@ -1 +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"]}
+{"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,UAAU,CAAC,CAAC;IACpD,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('Dec 2020');\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/index.ts

@@ -1,3 +1,9 @@
 export { CollectionBrowser } from './src/collection-browser';
 export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
 export { CollectionDisplayMode } from './src/models';
+export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
+export { CollectionTile } from './src/tiles/grid/collection-tile';
+export { AccountTile } from './src/tiles/grid/account-tile';
+export { ItemTile } from './src/tiles/grid/item-tile';
+export { TileList } from './src/tiles/list/tile-list';
+export { TileListCompact } from './src/tiles/list/tile-list-compact';

package/local.archive.org.cert

@@ -0,0 +1,86 @@
+Certificate:
+    Data:
+        Version: 3 (0x2)
+        Serial Number: 1 (0x1)
+    Signature Algorithm: sha256WithRSAEncryption
+        Issuer: CN=devcert
+        Validity
+            Not Before: Apr 27 16:27:46 2022 GMT
+            Not After : Jul 30 16:27:46 2024 GMT
+        Subject: CN=local.archive.org
+        Subject Public Key Info:
+            Public Key Algorithm: rsaEncryption
+                Public-Key: (2048 bit)
+                Modulus:
+                    00:a9:54:ca:34:ff:8b:32:02:39:97:61:bd:f5:12:
+                    5c:4a:d0:87:2e:d6:42:63:72:ea:b4:90:95:cc:4a:
+                    ef:5a:66:09:9f:1d:08:0d:b2:f4:2e:b3:55:59:9c:
+                    0f:77:37:1e:d7:a3:5c:b7:3d:81:84:fc:55:af:20:
+                    e7:3c:bd:9e:2b:2b:9e:d1:95:9d:14:90:70:7c:99:
+                    78:f1:dd:42:2b:fd:87:b9:09:f0:f6:50:c7:90:41:
+                    de:e2:ee:dd:a0:4a:4d:de:20:6a:e8:1b:81:7f:d9:
+                    17:0d:f5:f2:a1:dc:89:d8:e9:89:9c:ff:40:b7:0e:
+                    bb:16:db:d1:e0:67:5f:24:de:3b:b8:18:b8:a6:dd:
+                    d5:26:8a:2a:a4:f2:03:b1:a8:15:23:31:c9:65:de:
+                    9b:5a:b0:f0:4f:ef:77:f1:8b:7b:91:95:a0:61:be:
+                    1f:64:29:c6:2e:2c:03:1b:f0:91:96:b6:ab:fb:11:
+                    b7:1c:41:bc:43:6e:1b:6f:28:88:40:bd:a8:47:28:
+                    9e:a4:64:31:e0:a5:72:db:09:cb:b0:9e:7a:d5:d0:
+                    7f:15:15:75:d4:d6:78:41:c9:a1:54:73:48:19:4f:
+                    72:95:a1:31:b3:4c:81:41:13:43:d9:9b:8c:d0:2e:
+                    29:09:a2:59:6b:15:6d:5c:93:22:03:f5:72:f0:46:
+                    be:65
+                Exponent: 65537 (0x10001)
+        X509v3 extensions:
+            X509v3 Basic Constraints: critical
+                CA:FALSE
+            X509v3 Subject Key Identifier: 
+                E1:20:A8:89:51:79:0C:23:66:20:B7:A5:A4:42:8F:40:7F:7E:C0:CE
+            X509v3 Authority Key Identifier: 
+                keyid:A8:C7:C5:69:35:49:1B:B6:77:E7:2E:16:5B:B0:75:8C:B7:03:5C:04
+                DirName:/CN=devcert
+                serial:DB:1E:4C:08:75:57:8D:4E
+
+            X509v3 Key Usage: critical
+                Digital Signature, Key Encipherment
+            X509v3 Extended Key Usage: 
+                TLS Web Server Authentication
+            X509v3 Subject Alternative Name: 
+                DNS:local.archive.org, DNS:*.local.archive.org
+    Signature Algorithm: sha256WithRSAEncryption
+         5a:20:54:0b:6f:c3:35:e6:70:c1:bd:5c:58:e8:cf:7b:73:33:
+         38:80:70:c1:1c:60:2a:ea:5c:0c:eb:63:6a:15:48:fe:4d:f6:
+         18:89:e1:89:73:40:45:52:7d:bc:3a:d6:0e:d3:65:2c:e7:b9:
+         ab:3b:c6:ea:6e:74:74:39:4f:53:3f:bb:59:d9:91:83:db:92:
+         96:32:97:25:5f:c2:8d:85:ce:b3:c7:b1:4d:37:b7:bd:81:de:
+         f7:9f:34:5b:12:70:21:a8:03:8d:94:ed:d7:41:7f:2a:87:30:
+         bd:4f:07:22:b2:9a:06:ab:bc:41:2c:2f:7c:be:e0:a2:90:60:
+         21:79:d4:a1:08:26:c1:f4:83:b2:0a:ff:7d:0a:15:dc:ed:d0:
+         49:f9:37:ad:fe:68:d7:59:9d:f8:25:4e:10:01:bf:a5:be:ec:
+         21:a8:bf:77:6c:ff:d4:b7:d4:11:9c:43:4a:64:e8:31:76:9a:
+         01:3a:54:d9:c0:8a:a6:2c:7a:df:0a:c4:26:6e:19:52:26:9d:
+         25:b5:b1:db:6f:12:91:92:83:ab:6c:28:52:e1:e4:63:c2:cf:
+         45:f7:b4:da:7d:13:66:47:62:90:e6:8d:2c:b8:aa:d4:2b:8c:
+         d6:c0:5c:fc:83:e7:1f:71:5f:cb:38:b6:c3:a5:77:7d:97:04:
+         87:14:44:83
+-----BEGIN CERTIFICATE-----
+MIIDdjCCAl6gAwIBAgIBATANBgkqhkiG9w0BAQsFADASMRAwDgYDVQQDDAdkZXZj
+ZXJ0MB4XDTIyMDQyNzE2Mjc0NloXDTI0MDczMDE2Mjc0NlowHDEaMBgGA1UEAwwR
+bG9jYWwuYXJjaGl2ZS5vcmcwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIB
+AQCpVMo0/4syAjmXYb31ElxK0Icu1kJjcuq0kJXMSu9aZgmfHQgNsvQus1VZnA93
+Nx7Xo1y3PYGE/FWvIOc8vZ4rK57RlZ0UkHB8mXjx3UIr/Ye5CfD2UMeQQd7i7t2g
+Sk3eIGroG4F/2RcN9fKh3InY6Ymc/0C3DrsW29HgZ18k3ju4GLim3dUmiiqk8gOx
+qBUjMcll3ptasPBP73fxi3uRlaBhvh9kKcYuLAMb8JGWtqv7EbccQbxDbhtvKIhA
+vahHKJ6kZDHgpXLbCcuwnnrV0H8VFXXU1nhByaFUc0gZT3KVoTGzTIFBE0PZm4zQ
+LikJollrFW1ckyID9XLwRr5lAgMBAAGjgcwwgckwDAYDVR0TAQH/BAIwADAdBgNV
+HQ4EFgQU4SCoiVF5DCNmILelpEKPQH9+wM4wQgYDVR0jBDswOYAUqMfFaTVJG7Z3
+5y4WW7B1jLcDXAShFqQUMBIxEDAOBgNVBAMMB2RldmNlcnSCCQDbHkwIdVeNTjAO
+BgNVHQ8BAf8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwMQYDVR0RBCowKIIR
+bG9jYWwuYXJjaGl2ZS5vcmeCEyoubG9jYWwuYXJjaGl2ZS5vcmcwDQYJKoZIhvcN
+AQELBQADggEBAFogVAtvwzXmcMG9XFjoz3tzMziAcMEcYCrqXAzrY2oVSP5N9hiJ
+4YlzQEVSfbw61g7TZSznuas7xupudHQ5T1M/u1nZkYPbkpYylyVfwo2FzrPHsU03
+t72B3vefNFsScCGoA42U7ddBfyqHML1PByKymgarvEEsL3y+4KKQYCF51KEIJsH0
+g7IK/30KFdzt0En5N63+aNdZnfglThABv6W+7CGov3ds/9S31BGcQ0pk6DF2mgE6
+VNnAiqYset8KxCZuGVImnSW1sdtvEpGSg6tsKFLh5GPCz0X3tNp9E2ZHYpDmjSy4
+qtQrjNbAXPyD5x9xX8s4tsOld32XBIcURIM=
+-----END CERTIFICATE-----

package/local.archive.org.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAqVTKNP+LMgI5l2G99RJcStCHLtZCY3LqtJCVzErvWmYJnx0I
+DbL0LrNVWZwPdzce16Nctz2BhPxVryDnPL2eKyue0ZWdFJBwfJl48d1CK/2HuQnw
+9lDHkEHe4u7doEpN3iBq6BuBf9kXDfXyodyJ2OmJnP9Atw67FtvR4GdfJN47uBi4
+pt3VJooqpPIDsagVIzHJZd6bWrDwT+938Yt7kZWgYb4fZCnGLiwDG/CRlrar+xG3
+HEG8Q24bbyiIQL2oRyiepGQx4KVy2wnLsJ561dB/FRV11NZ4QcmhVHNIGU9ylaEx
+s0yBQRND2ZuM0C4pCaJZaxVtXJMiA/Vy8Ea+ZQIDAQABAoIBAAQgUdEazQyJ61da
+BWP8b41PKYwlonaD7V47C7tvtAdy5xcegPy8eKDOs+y8FdBk4naEv5Sjhg10jK34
+0kmzoTASHwuiZrKClosivkS+jIc/5VfH+zw1WbeVM1Y6VeI7DUy1Y4WGbhBsfNhV
+PvVcx2smvbi6q5wKWtrCvomGW1YtngNBXJBPDWXysaVZdpF+6iWtw0RjWxbKEeMb
+fjZ2sxl7h1EkTXxQR9pfl9WVgl6vRRXp1o+N71M14jp5t95xCyf49YzeEuZmc1Fc
+dD77LNGcxr3kpkcQH5FdDP/spla+lR+JKb78FVqhEdPP3WcJ1qcrAstG2npAfKpj
+MD9AhsECgYEA3BddOjeK9epaGbTZRKgmIOSgGEHo8WbVHqBHhyQKAb8kFVEPn+Hl
+sq2EEQZf0ZJ/HhlVBc0Gj4/2PI8vj1Lzh+QWJnFu+XN/doOm5X62Ctz13qC5oWJp
+foQ9HXcg4GAXhm/o3KUIntLrUwoi/UW8YOSRFXS8RSJtuh1rI5P2jjECgYEAxPVP
+o/9+12Fc2ujdm8cQ1tB1Ab9Z73/vloG/xit0uMp89OqXUHEmtud/WzaIQvNxdaWi
+9/BqAG9Oml51T3cuYPxNDkSmtd2fieq9Nh17dw8zYGMk0cSYeecgvCJOrRIJnebW
+Glyt8vzBb3eD6FzhZoVNOVYareainSP1cwl5YnUCgYAsr2m0OjayeyRT983tDJ7B
+Kun+QtOCv7ghgbVEEOMfO6md0llzwq+aOXSI6Fxn9nBssgP7K4dbeoUqAoBLfzIG
+sx50K6+2YebNLymhirp3NimNS+CkjZCRqVOnOdqo85mTKAGFWtSHOpegwnwcJB59
+Jar3Sj43YygYE4T/Mjlq4QKBgQC8zUcdt2J4xl1Df6xHkuiic0tmdG6a9jHOPex+
+49NM/NYR1Ptd4kmxVXKxFjJCs6jUlQYG1NBYQFrCAcBEf8PWtqSLA+YnOh6gD4R3
+ZoWfGNQwFnoKF4HugU/Q6LYwk7TiR5B/zs30urQWzSOGT9rF8wyW5OJIR2kkZ373
+WmKgrQKBgGaw32CMejz3wBpzOAXsYJcMsVfNCMD4bJ2EbXhYuY8HB8IEEv6wqMsp
+wtXIgHJubfIiA3MlVsfaUkRdtHMHbN+Us1oynu6nByLhYlAMKpOsJFzPVHHwGB/1
+g3WtzfFk5eOoZltJBm5K41zjS7lyr1t05648pT6niy9snu6LaF94
+-----END RSA PRIVATE KEY-----

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.7",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -18,17 +18,21 @@
   },
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@internetarchive/collection-name-cache": "^0.1.2",
     "@internetarchive/feature-feedback": "^0.1.2",
-    "@internetarchive/field-parsers": "0.1.1-alpha.1",
+    "@internetarchive/field-parsers": "^0.1.3",
     "@internetarchive/histogram-date-range": "^0.1.6",
-    "@internetarchive/infinite-scroller": "0.0.1-alpha.17",
-    "@internetarchive/search-service": "0.3.0-alpha.2",
+    "@internetarchive/infinite-scroller": "^0.1.0",
+    "@internetarchive/search-service": "^0.3.2",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
     "dompurify": "^2.3.6",
-    "lit": "^2.0.2"
+    "lit": "^2.2.2",
+    "typescript-cookie": "^1.0.3"
   },
   "devDependencies": {
+    "@internetarchive/local-cache": "^0.2.1",
+    "@internetarchive/result-type": "^0.0.1",
     "@open-wc/eslint-config": "^7.0.0",
     "@open-wc/testing": "^3.0.3",
     "@types/dompurify": "^2.3.3",

package/src/assets/img/icons/chevron.ts

@@ -0,0 +1,4 @@
+import { svg } from 'lit';
+
+export default svg`<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z"/></svg>
+`;

package/src/assets/img/icons/eye-closed.ts

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export default svg`
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z" fill="#000"/></svg>
+`;

package/src/assets/img/icons/eye.ts

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export default svg`
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z" fill="#000"/></svg>
+`;

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

@@ -1,10 +1,12 @@
-import { html } from 'lit';
+import { svg } from 'lit';
 
-export default html`
-  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+export const accountIcon = svg`
+  <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="black"
+      class="fill-color"
       fill-rule="evenodd"
     />
     <title>Icon of a person</title>