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

package/src/tiles/tile-dispatcher.ts

@@ -5,52 +5,84 @@ 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';
 
 @customElement('tile-dispatcher')
 export class TileDispatcher
   extends LitElement
   implements SharedResizeObserverResizeHandlerInterface
 {
-  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';
+  @property({ type: String }) tileDisplayMode?: TileDisplayMode;
 
   @property({ type: Object }) model?: TileModel;
 
   @property({ type: String }) baseNavigationUrl?: string;
 
-  @property({ type: Boolean }) showDeleteButton = false;
-
   @property({ type: Number }) currentWidth?: number;
 
   @property({ type: Number }) currentHeight?: number;
 
   @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
 
-  @property({ type: Object }) sortParam?: SortParam;
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
 
   @query('#container') private container!: HTMLDivElement;
 
+  @property({ type: Number }) mobileBreakpoint?: number;
+
   render() {
     return html`
       <div id="container">
-        ${this.showDeleteButton
-          ? html`<button id="delete-button">X</button>`
-          : nothing}
-        <a
-          href="${this.baseNavigationUrl}/details/${this.model?.identifier}"
-          title=${ifDefined(this.model?.title)}
-        >
-          ${this.tile}
-        </a>
+        ${this.tileDisplayMode === 'list-header'
+          ? this.headerTemplate
+          : this.tileTemplate}
       </div>
     `;
   }
 
+  private 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>
+    `;
+  }
+
+  private get tileTemplate() {
+    return html`
+      ${this.tileDisplayMode === 'list-detail'
+        ? this.tile
+        : this.linkTileTemplate}
+    `;
+  }
+
+  private get linkTileTemplate() {
+    return html`
+      <a
+        href="${this.baseNavigationUrl}/details/${this.model?.identifier}"
+        title=${ifDefined(this.model?.title)}
+      >
+        ${this.tile}
+      </a>
+    `;
+  }
+
   handleResize(entry: ResizeObserverEntry): void {
     this.currentWidth = entry.contentRect.width;
     this.currentHeight = entry.contentRect.height;
@@ -86,12 +118,18 @@ export class TileDispatcher
   }
 
   private 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':
@@ -113,17 +151,27 @@ export class TileDispatcher
               .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;

package/src/utils/format-date.ts

@@ -19,8 +19,8 @@ export function formatDate(
   };
   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/test/collection-browser.test.ts

@@ -1 +1,20 @@
-describe('YourWebComponent', () => {});
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { CollectionBrowser } from '../src/collection-browser';
+import '../src/collection-browser';
+
+describe('Collection Browser', () => {
+  it('should render with a sort bar, facets, and infinite scroller', async () => {
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser></collection-browser>`
+    );
+
+    const facets = el.shadowRoot?.querySelector('collection-facets');
+    const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
+    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
+    expect(facets).to.exist;
+    expect(sortBar).to.exist;
+    expect(infiniteScroller).to.exist;
+  });
+});

package/test/mediatype-config.test.ts

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

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

@@ -9,7 +9,7 @@ describe('formatDate', () => {
   });
 
   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', () => {

package/web-dev-server.config.mjs

@@ -24,5 +24,7 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
     // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
   ],
 
-  // See documentation for all available options
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
 });

package/dist/src/mediatype-icon.js

@@ -1,89 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { audioIcon } from './assets/img/icons/mediatype/audio';
-import { etreeIcon } from './assets/img/icons/mediatype/etree';
-import { imagesIcon } from './assets/img/icons/mediatype/images';
-import { filmIcon } from './assets/img/icons/mediatype/film';
-import { softwareIcon } from './assets/img/icons/mediatype/software';
-import { textsIcon } from './assets/img/icons/mediatype/texts';
-import { tvIcon } from './assets/img/icons/mediatype/tv';
-import { videoIcon } from './assets/img/icons/mediatype/video';
-import { webIcon } from './assets/img/icons/mediatype/web';
-import { collectionIcon } from './assets/img/icons/mediatype/collection';
-let MediatypeIcon = class MediatypeIcon extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.showText = false;
-        this.mediatypeIcons = {
-            audio: audioIcon,
-            collection: collectionIcon,
-            data: etreeIcon,
-            etree: etreeIcon,
-            film: filmIcon,
-            image: imagesIcon,
-            movies: filmIcon,
-            software: softwareIcon,
-            texts: textsIcon,
-            tv: tvIcon,
-            video: videoIcon,
-            web: webIcon,
-        };
-        this.mediatypeText = {
-            audio: 'Audio',
-            collection: 'Collection',
-            data: 'Data',
-            etree: 'E-tree',
-            film: 'Film',
-            image: 'Image',
-            movies: 'Movie',
-            software: 'Software',
-            texts: 'Text',
-            tv: 'TV',
-            video: 'Video',
-            web: 'Web',
-        };
-    }
-    render() {
-        if (!this.mediatype) {
-            return html ``;
-        }
-        return html `
-      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}">
-        ${this.mediatypeIcons[this.mediatype]}
-        <p class="status-text">${this.mediatypeText[this.mediatype]}</p>
-      </div>
-    `;
-    }
-    static get styles() {
-        return css `
-      .status-text {
-        font-size: 14px;
-        color: #2c2c2c;
-        margin: auto;
-        display: block;
-        text-align: center;
-      }
-
-      #icon.hide-text p {
-        display: none;
-      }
-
-      #icon.show-text svg {
-        height: 10px;
-        width: 10px;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], MediatypeIcon.prototype, "mediatype", 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/mediatype-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/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,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAGzE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAG+B,aAAQ,GAAG,KAAK,CAAC;QAE7B,mBAAc,GAA2B;YACxD,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,cAAc;YAC1B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,YAAY;YACtB,KAAK,EAAE,SAAS;YAChB,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,OAAO;SACb,CAAC;QAEe,kBAAa,GAA2B;YACvD,KAAK,EAAE,OAAO;YACd,UAAU,EAAE,YAAY;YACxB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,EAAE,EAAE,IAAI;YACR,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,KAAK;SACX,CAAC;IAkCJ,CAAC;IAhCC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QACD,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;UAC7D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;iCACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;;KAE9D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBT,CAAC;IACJ,CAAC;CACF,CAAA;AAlE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AAHnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAmEzB;SAnEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { audioIcon } from './assets/img/icons/mediatype/audio';\nimport { etreeIcon } from './assets/img/icons/mediatype/etree';\nimport { imagesIcon } from './assets/img/icons/mediatype/images';\nimport { filmIcon } from './assets/img/icons/mediatype/film';\nimport { softwareIcon } from './assets/img/icons/mediatype/software';\nimport { textsIcon } from './assets/img/icons/mediatype/texts';\nimport { tvIcon } from './assets/img/icons/mediatype/tv';\nimport { videoIcon } from './assets/img/icons/mediatype/video';\nimport { webIcon } from './assets/img/icons/mediatype/web';\nimport { collectionIcon } from './assets/img/icons/mediatype/collection';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private readonly mediatypeIcons: { [key: string]: any } = {\n    audio: audioIcon,\n    collection: collectionIcon,\n    data: etreeIcon,\n    etree: etreeIcon,\n    film: filmIcon,\n    image: imagesIcon,\n    movies: filmIcon,\n    software: softwareIcon,\n    texts: textsIcon,\n    tv: tvIcon,\n    video: videoIcon,\n    web: webIcon,\n  };\n\n  private readonly mediatypeText: { [key: string]: any } = {\n    audio: 'Audio',\n    collection: 'Collection',\n    data: 'Data',\n    etree: 'E-tree',\n    film: 'Film',\n    image: 'Image',\n    movies: 'Movie',\n    software: 'Software',\n    texts: 'Text',\n    tv: 'TV',\n    video: 'Video',\n    web: 'Web',\n  };\n\n  render() {\n    if (!this.mediatype) {\n      return html``;\n    }\n    return html`\n      <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\">\n        ${this.mediatypeIcons[this.mediatype]}\n        <p class=\"status-text\">${this.mediatypeText[this.mediatype]}</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: center;\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      #icon.show-text svg {\n        height: 10px;\n        width: 10px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/sort-filter-bar/img/grid.d.ts

@@ -1 +0,0 @@
-export declare const gridIcon: import("lit-html").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/grid.js

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-export const gridIcon = svg `
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z"/></svg>
-`;
-//# sourceMappingURL=grid.js.map

package/dist/src/sort-filter-bar/img/grid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;CAE1B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const gridIcon = svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z\"/></svg>\n`;\n"]}

package/dist/src/tiles/list/tile-list-detail.d.ts

@@ -1,7 +0,0 @@
-import { LitElement } from 'lit';
-import { TileModel } from '../../models';
-export declare class TileListDetail extends LitElement {
-    model?: TileModel;
-    render(): import("lit-html").TemplateResult<1>;
-    static get styles(): import("lit").CSSResult;
-}

package/dist/src/tiles/list/tile-list-detail.js

@@ -1,28 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let TileListDetail = class TileListDetail extends LitElement {
-    render() {
-        var _a, _b, _c, _d;
-        return html `
-      <h1>${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
-      <h2>${(_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished) === null || _c === void 0 ? void 0 : _c.toDateString()}</h2>
-      <p>${(_d = this.model) === null || _d === void 0 ? void 0 : _d.description}</p>
-    `;
-    }
-    static get styles() {
-        return css `
-      h1 {
-        margin-top: 0;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], TileListDetail.prototype, "model", void 0);
-TileListDetail = __decorate([
-    customElement('tile-list-detail')
-], TileListDetail);
-export { TileListDetail };
-//# sourceMappingURL=tile-list-detail.js.map

package/dist/src/tiles/list/tile-list-detail.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tile-list-detail.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-detail.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAG5C,MAAM;;QACJ,OAAO,IAAI,CAAA;YACH,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;YACjB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,0CAAE,YAAY,EAAE;WAC1C,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;KAC7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;CACF,CAAA;AAjB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AADnC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkB1B;SAlBY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\n@customElement('tile-list-detail')\nexport class TileListDetail extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <h1>${this.model?.title}</h1>\n      <h2>${this.model?.datePublished?.toDateString()}</h2>\n      <p>${this.model?.description}</p>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        margin-top: 0;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,73 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let LoadingTile = class LoadingTile extends LitElement {
-    render() {
-        return html ` <div id="container"></div> `;
-    }
-    static get styles() {
-        return css `
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      #container {
-        background: linear-gradient(
-          to right,
-          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;
-
-        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%;
-        }
-      }
-    `;
-    }
-};
-LoadingTile = __decorate([
-    customElement('loading-tile')
-], LoadingTile);
-export { LoadingTile };
-//# sourceMappingURL=loading-tile.js.map

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

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

package/src/mediatype-icon.ts

@@ -1,83 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { audioIcon } from './assets/img/icons/mediatype/audio';
-import { etreeIcon } from './assets/img/icons/mediatype/etree';
-import { imagesIcon } from './assets/img/icons/mediatype/images';
-import { filmIcon } from './assets/img/icons/mediatype/film';
-import { softwareIcon } from './assets/img/icons/mediatype/software';
-import { textsIcon } from './assets/img/icons/mediatype/texts';
-import { tvIcon } from './assets/img/icons/mediatype/tv';
-import { videoIcon } from './assets/img/icons/mediatype/video';
-import { webIcon } from './assets/img/icons/mediatype/web';
-import { collectionIcon } from './assets/img/icons/mediatype/collection';
-
-@customElement('mediatype-icon')
-export class MediatypeIcon extends LitElement {
-  @property({ type: String }) mediatype: string | undefined;
-
-  @property({ type: Boolean }) showText = false;
-
-  private readonly mediatypeIcons: { [key: string]: any } = {
-    audio: audioIcon,
-    collection: collectionIcon,
-    data: etreeIcon,
-    etree: etreeIcon,
-    film: filmIcon,
-    image: imagesIcon,
-    movies: filmIcon,
-    software: softwareIcon,
-    texts: textsIcon,
-    tv: tvIcon,
-    video: videoIcon,
-    web: webIcon,
-  };
-
-  private readonly mediatypeText: { [key: string]: any } = {
-    audio: 'Audio',
-    collection: 'Collection',
-    data: 'Data',
-    etree: 'E-tree',
-    film: 'Film',
-    image: 'Image',
-    movies: 'Movie',
-    software: 'Software',
-    texts: 'Text',
-    tv: 'TV',
-    video: 'Video',
-    web: 'Web',
-  };
-
-  render() {
-    if (!this.mediatype) {
-      return html``;
-    }
-    return html`
-      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}">
-        ${this.mediatypeIcons[this.mediatype]}
-        <p class="status-text">${this.mediatypeText[this.mediatype]}</p>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .status-text {
-        font-size: 14px;
-        color: #2c2c2c;
-        margin: auto;
-        display: block;
-        text-align: center;
-      }
-
-      #icon.hide-text p {
-        display: none;
-      }
-
-      #icon.show-text svg {
-        height: 10px;
-        width: 10px;
-      }
-    `;
-  }
-}

package/src/sort-filter-bar/img/grid.ts

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-
-export const gridIcon = svg`
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m45 13h-45v60h45zm55 0h-45v32h45zm0 42h-45v32h45z"/></svg>
-`;

package/src/tiles/loading-tile.ts

@@ -1,70 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@customElement('loading-tile')
-export class LoadingTile extends LitElement {
-  render() {
-    return html` <div id="container"></div> `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      #container {
-        background: linear-gradient(
-          to right,
-          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;
-
-        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%;
-        }
-      }
-    `;
-  }
-}