@internetarchive/collection-browser 0.0.1-alpha.8 → 0.1.1

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

@@ -18,51 +18,10 @@ let LoadingTile = class LoadingTile extends LitElement {
           rgba(25, 69, 154, 0.1),
           rgb(105, 161, 234, 0.2)
         );
-        background-size: 400% 400%;
-
-        -webkit-animation: AnimationName 4s ease infinite;
-        -moz-animation: AnimationName 4s ease infinite;
-        animation: AnimationName 4s ease infinite;
-
+        background-size: 100% 100%;
         display: block;
         height: 100%;
       }
-
-      @-webkit-keyframes AnimationName {
-        0% {
-          background-position: 0% 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-        100% {
-          background-position: 0% 50%;
-        }
-      }
-
-      @-moz-keyframes AnimationName {
-        0% {
-          background-position: 0% 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-        100% {
-          background-position: 0% 50%;
-        }
-      }
-
-      @keyframes AnimationName {
-        0% {
-          background-position: 0% 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-        100% {
-          background-position: 0% 50%;
-        }
-      }
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"loading-tile.js","sourceRoot":"","sources":["../../../src/tiles/loading-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IACzC,MAAM;QACJ,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDT,CAAC;IACJ,CAAC;CACF,CAAA;AAjEY,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiEvB;SAjEY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('loading-tile')\nexport class LoadingTile extends LitElement {\n  render() {\n    return html` <div id=\"container\"></div> `;\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        background: linear-gradient(\n          to right,\n          rgba(25, 69, 154, 0.1),\n          rgb(105, 161, 234, 0.2)\n        );\n        background-size: 400% 400%;\n\n        -webkit-animation: AnimationName 4s ease infinite;\n        -moz-animation: AnimationName 4s ease infinite;\n        animation: AnimationName 4s ease infinite;\n\n        display: block;\n        height: 100%;\n      }\n\n      @-webkit-keyframes AnimationName {\n        0% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n        100% {\n          background-position: 0% 50%;\n        }\n      }\n\n      @-moz-keyframes AnimationName {\n        0% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n        100% {\n          background-position: 0% 50%;\n        }\n      }\n\n      @keyframes AnimationName {\n        0% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n        100% {\n          background-position: 0% 50%;\n        }\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"loading-tile.js","sourceRoot":"","sources":["../../../src/tiles/loading-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IACzC,MAAM;QACJ,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBT,CAAC;IACJ,CAAC;CACF,CAAA;AAxBY,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwBvB;SAxBY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('loading-tile')\nexport class LoadingTile extends LitElement {\n  render() {\n    return html` <div id=\"container\"></div> `;\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        background: linear-gradient(\n          to right,\n          rgba(25, 69, 154, 0.1),\n          rgb(105, 161, 234, 0.2)\n        );\n        background-size: 100% 100%;\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/mediatype-icon.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class MediatypeIcon extends LitElement {
+    mediatype: string | undefined;
+    collections: string[] | undefined;
+    showText: boolean;
+    private get displayMediatype();
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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/src/waveform-thumbnail.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class WaveformThumbnail extends LitElement {
+    baseNavigationUrl?: string;
+    identifier?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/waveform-thumbnail.js

@@ -0,0 +1,106 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let WaveformThumbnail = class WaveformThumbnail extends LitElement {
+    render() {
+        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.identifier}`;
+        const randomGradient = `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;
+        return html `
+      <div class="box" id=${randomGradient}>
+        <div
+          class="item-image"
+          style="background-image:url(${imgSrcUrl})"
+        ></div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .box {
+        width: 16rem;
+        height: 16rem;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 1px 1px 2px 0px;
+        display: flex;
+      }
+
+      .item-image {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: relative;
+        -webkit-appearance: none;
+        overflow: visible;
+        mix-blend-mode: screen;
+      }
+
+      #grad1 {
+        background: linear-gradient(
+          hsl(300, 80%, 55%),
+          hsl(330, 80%, 33%) 35%,
+          hsl(330, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad2 {
+        background: linear-gradient(
+          hsl(200, 80%, 55%),
+          hsl(230, 80%, 33%) 35%,
+          hsl(230, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad3 {
+        background: linear-gradient(
+          hsl(160, 80%, 55%),
+          hsl(190, 80%, 33%) 35%,
+          hsl(190, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad4 {
+        background: linear-gradient(
+          hsl(250, 80%, 55%),
+          hsl(280, 80%, 33%) 35%,
+          hsl(280, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad5 {
+        background: linear-gradient(
+          hsl(280, 80%, 55%),
+          hsl(310, 80%, 33%) 35%,
+          hsl(310, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad6 {
+        background: linear-gradient(
+          hsl(340, 80%, 55%),
+          hsl(0, 80%, 33%) 35%,
+          hsl(0, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], WaveformThumbnail.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: String })
+], WaveformThumbnail.prototype, "identifier", void 0);
+WaveformThumbnail = __decorate([
+    customElement('waveform-thumbnail')
+], WaveformThumbnail);
+export { WaveformThumbnail };
+//# sourceMappingURL=waveform-thumbnail.js.map

package/dist/src/waveform-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveform-thumbnail.js","sourceRoot":"","sources":["../../src/waveform-thumbnail.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAK/C,MAAM;QACJ,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,iBAAiB,iBAAiB,IAAI,CAAC,UAAU,EAAE,CAAC;QAC9E,MAAM,cAAc,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QAExE,OAAO,IAAI,CAAA;4BACa,cAAc;;;wCAGF,SAAS;;;KAG5C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2ET,CAAC;IACJ,CAAC;CACF,CAAA;AAhG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAqB;AAHrC,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAiG7B;SAjGY,iBAAiB","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('waveform-thumbnail')\nexport class WaveformThumbnail extends LitElement {\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: String }) identifier?: string;\n\n  render() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.identifier}`;\n    const randomGradient = `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;\n\n    return html`\n      <div class=\"box\" id=${randomGradient}>\n        <div\n          class=\"item-image\"\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n        mix-blend-mode: screen;\n      }\n\n      #grad1 {\n        background: linear-gradient(\n          hsl(300, 80%, 55%),\n          hsl(330, 80%, 33%) 35%,\n          hsl(330, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad2 {\n        background: linear-gradient(\n          hsl(200, 80%, 55%),\n          hsl(230, 80%, 33%) 35%,\n          hsl(230, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad3 {\n        background: linear-gradient(\n          hsl(160, 80%, 55%),\n          hsl(190, 80%, 33%) 35%,\n          hsl(190, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad4 {\n        background: linear-gradient(\n          hsl(250, 80%, 55%),\n          hsl(280, 80%, 33%) 35%,\n          hsl(280, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad5 {\n        background: linear-gradient(\n          hsl(280, 80%, 55%),\n          hsl(310, 80%, 33%) 35%,\n          hsl(310, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n\n      #grad6 {\n        background: linear-gradient(\n          hsl(340, 80%, 55%),\n          hsl(0, 80%, 33%) 35%,\n          hsl(0, 80%, 22%) 70%,\n          hsl(0, 0%, 0%)\n        );\n      }\n    `;\n  }\n}\n"]}

package/dist/src/waveform-view.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=waveform-view.js.map

package/dist/src/waveform-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveform-view.js","sourceRoot":"","sources":["../../src/waveform-view.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/src/your-webcomponent.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class YourWebComponent extends LitElement {
+    title: string;
+    counter: number;
+    private increment;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/src/your-webcomponent.js

@@ -0,0 +1,38 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+let YourWebComponent = class YourWebComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = 'Hey there';
+        this.counter = 5;
+    }
+    increment() {
+        this.counter += 1;
+    }
+    render() {
+        return html `
+      <h2>${this.title}, Number: ${this.counter}!</h2>
+      <button @click=${this.increment}>increment</button>
+      <slot name="my-slot"> </slot>
+    `;
+    }
+};
+YourWebComponent.styles = css `
+    :host {
+      display: block;
+      padding: 25px;
+      color: var(--your-webcomponent-text-color, #000);
+    }
+  `;
+__decorate([
+    property({ type: String })
+], YourWebComponent.prototype, "title", void 0);
+__decorate([
+    property({ type: Number })
+], YourWebComponent.prototype, "counter", void 0);
+YourWebComponent = __decorate([
+    customElement('your-webcomponent')
+], YourWebComponent);
+export { YourWebComponent };
+//# sourceMappingURL=your-webcomponent.js.map

package/dist/src/your-webcomponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"your-webcomponent.js","sourceRoot":"","sources":["../../src/your-webcomponent.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC8B,UAAK,GAAG,WAAW,CAAC;QAEpB,YAAO,GAAG,CAAC,CAAC;IAqB1C,CAAC;IAnBS,SAAS;QACf,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,OAAO;uBACxB,IAAI,CAAC,SAAS;;KAEhC,CAAC;IACJ,CAAC;CASF,CAAA;AAPQ,uBAAM,GAAG,GAAG,CAAA;;;;;;GAMlB,CAAC;AAtB0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAqB;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAa;AAH7B,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAwB5B;SAxBY,gBAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\n@customElement('your-webcomponent')\nexport class YourWebComponent extends LitElement {\n  @property({ type: String }) title = 'Hey there';\n\n  @property({ type: Number }) counter = 5;\n\n  private increment() {\n    this.counter += 1;\n  }\n\n  render() {\n    return html`\n      <h2>${this.title}, Number: ${this.counter}!</h2>\n      <button @click=${this.increment}>increment</button>\n      <slot name=\"my-slot\"> </slot>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      padding: 25px;\n      color: var(--your-webcomponent-text-color, #000);\n    }\n  `;\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.d.ts

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