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

package/dist/src/search-handler.d.ts

@@ -1,11 +0,0 @@
-export declare class SearchHandler {
-    private searchService?;
-    /**
-     * This method is similar to fetching the facets above,
-     * but only fetching the year histogram. There is a subtle difference
-     * in how you have to fetch the year histogram where you can't use the
-     * advanced JSON syntax like the other aggregations. It's a special
-     * case that @ximm put it place.
-     */
-    private fetchFullYearHistogram;
-}

package/dist/src/search-handler.js

@@ -1,34 +0,0 @@
-import { SearchParams, AggregateSearchParams, } from '@internetarchive/search-service/dist/src/search-params';
-export class SearchHandler {
-    /**
-     * This method is similar to fetching the facets above,
-     * but only fetching the year histogram. There is a subtle difference
-     * in how you have to fetch the year histogram where you can't use the
-     * advanced JSON syntax like the other aggregations. It's a special
-     * case that @ximm put it place.
-     */
-    async fetchFullYearHistogram() {
-        // const { fullQueryNoDateKey } = this;
-        // if (
-        //   !this.fullQueryWithoutDate ||
-        //   fullQueryNoDateKey === this.previousFullQueryNoDate
-        // )
-        //   return;
-        // this.previousFullQueryNoDate = fullQueryNoDateKey;
-        var _a, _b, _c, _d;
-        const aggregations = new AggregateSearchParams({
-            simpleParams: ['year'],
-        });
-        const params = new SearchParams({
-            query: 'foo',
-            fields: ['identifier'],
-            aggregations,
-            rows: 1,
-        });
-        // this.fullYearAggregationLoading = true;
-        const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params));
-        // this.fullYearAggregationLoading = false;
-        return (_d = (_c = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.aggregations) === null || _d === void 0 ? void 0 : _d.year_histogram;
-    }
-}
-//# sourceMappingURL=search-handler.js.map

package/dist/src/search-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-handler.js","sourceRoot":"","sources":["../../src/search-handler.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,YAAY,EACZ,qBAAqB,GACtB,MAAM,wDAAwD,CAAC;AAEhE,MAAM,OAAO,aAAa;IAGxB;;;;;;OAMG;IACK,KAAK,CAAC,sBAAsB;QAClC,uCAAuC;QACvC,OAAO;QACP,kCAAkC;QAClC,wDAAwD;QACxD,IAAI;QACJ,YAAY;QACZ,qDAAqD;;QAErD,MAAM,YAAY,GAAG,IAAI,qBAAqB,CAAC;YAC7C,YAAY,EAAE,CAAC,MAAM,CAAC;SACvB,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,IAAI,YAAY,CAAC;YAC9B,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,CAAC,YAAY,CAAC;YACtB,YAAY;YACZ,IAAI,EAAE,CAAC;SACR,CAAC,CAAC;QAEH,0CAA0C;QAC1C,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAC,MAAM,CAAC,CAAA,CAAC;QACzD,2CAA2C;QAE3C,OAAO,MAAA,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,QAAQ,0CAAE,YAAY,0CAAE,cAAc,CAAC;IAClE,CAAC;CACF","sourcesContent":["import {\n  Aggregation,\n  SearchServiceInterface,\n} from '@internetarchive/search-service';\nimport {\n  SearchParams,\n  AggregateSearchParams,\n} from '@internetarchive/search-service/dist/src/search-params';\n\nexport class SearchHandler {\n  private searchService?: SearchServiceInterface;\n\n  /**\n   * This method is similar to fetching the facets above,\n   * but only fetching the year histogram. There is a subtle difference\n   * in how you have to fetch the year histogram where you can't use the\n   * advanced JSON syntax like the other aggregations. It's a special\n   * case that @ximm put it place.\n   */\n  private async fetchFullYearHistogram(): Promise<Aggregation | undefined> {\n    // const { fullQueryNoDateKey } = this;\n    // if (\n    //   !this.fullQueryWithoutDate ||\n    //   fullQueryNoDateKey === this.previousFullQueryNoDate\n    // )\n    //   return;\n    // this.previousFullQueryNoDate = fullQueryNoDateKey;\n\n    const aggregations = new AggregateSearchParams({\n      simpleParams: ['year'],\n    });\n\n    const params = new SearchParams({\n      query: 'foo',\n      fields: ['identifier'],\n      aggregations,\n      rows: 1,\n    });\n\n    // this.fullYearAggregationLoading = true;\n    const results = await this.searchService?.search(params);\n    // this.fullYearAggregationLoading = false;\n\n    return results?.success?.response?.aggregations?.year_histogram;\n  }\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/dist/src/utils/format-string.d.ts

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

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

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

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

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

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

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

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

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

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

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

package/src/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/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%;
-        }
-      }
-    `;
-  }
-}