@internetarchive/collection-browser 0.1.3 → 0.1.4

package/dist/src/tiles/item-image.js

@@ -7,6 +7,7 @@ let ItemImage = class ItemImage extends LitElement {
         super(...arguments);
         this.isListTile = false;
         this.isDeemphasize = false;
+        this.isWaveform = false;
     }
     updated(changed) {
         if (changed.has('model')) {
@@ -45,9 +46,9 @@ let ItemImage = class ItemImage extends LitElement {
     get waveformTemplate() {
         var _a;
         return html `
-      <div class="box" id=${this.randomGradient}>
+      <div class=${this.boxWaveformClass}>
         <img
-          class="item-image"
+          class=${this.itemImageWaveformClass}
           src="${this.imageSrc}"
           alt="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)}"
           @load=${this.onLoadItemImageCheck}
@@ -67,7 +68,7 @@ let ItemImage = class ItemImage extends LitElement {
         const aspectRatio = this.itemImageWaveform.naturalWidth /
             this.itemImageWaveform.naturalHeight;
         if (aspectRatio === 4) {
-            this.itemImageWaveform.classList.add('waveform');
+            this.isWaveform = true;
         }
     }
     // Classes
@@ -77,6 +78,12 @@ let ItemImage = class ItemImage extends LitElement {
     get imageBoxClass() {
         return this.isDeemphasize ? 'item-image-box' : undefined;
     }
+    get boxWaveformClass() {
+        return `item-audio${this.isWaveform ? ` ${this.randomGradient}` : ''}`;
+    }
+    get itemImageWaveformClass() {
+        return `item-image${this.isWaveform ? ' waveform' : ''}`;
+    }
     get randomGradient() {
         return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;
     }
@@ -137,7 +144,7 @@ let ItemImage = class ItemImage extends LitElement {
         text-align: center;
       }
 
-      #grad1 {
+      .grad1 {
         background: linear-gradient(
           hsl(300, 80%, 55%),
           hsl(330, 80%, 33%) 35%,
@@ -146,7 +153,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad2 {
+      .grad2 {
         background: linear-gradient(
           hsl(200, 80%, 55%),
           hsl(230, 80%, 33%) 35%,
@@ -155,7 +162,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad3 {
+      .grad3 {
         background: linear-gradient(
           hsl(160, 80%, 55%),
           hsl(190, 80%, 33%) 35%,
@@ -164,7 +171,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad4 {
+      .grad4 {
         background: linear-gradient(
           hsl(250, 80%, 55%),
           hsl(280, 80%, 33%) 35%,
@@ -173,7 +180,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad5 {
+      .grad5 {
         background: linear-gradient(
           hsl(280, 80%, 55%),
           hsl(310, 80%, 33%) 35%,
@@ -182,7 +189,7 @@ let ItemImage = class ItemImage extends LitElement {
         );
       }
 
-      #grad6 {
+      .grad6 {
         background: linear-gradient(
           hsl(340, 80%, 55%),
           hsl(0, 80%, 33%) 35%,
@@ -205,6 +212,9 @@ __decorate([
 __decorate([
     state()
 ], ItemImage.prototype, "isDeemphasize", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isWaveform", void 0);
 __decorate([
     query('.item-image')
 ], ItemImage.prototype, "itemImageWaveform", void 0);

package/dist/src/tiles/item-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  nothing,\n  PropertyValues,\n  LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @state() private isDeemphasize = false;\n\n  @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.setDeemphsize();\n    }\n  }\n\n  private setDeemphsize() {\n    this.isDeemphasize =\n      this.model?.collections.includes('deemphasize') ?? false;\n  }\n\n  render() {\n    return html`\n      <div class=${ifDefined(this.imageBoxClass)}>\n        ${this.model?.mediatype === 'audio'\n          ? this.waveformTemplate\n          : this.backgroundImageTemplate}\n        ${this.tileActionTemplate}\n      </div>\n    `;\n  }\n\n  private get imageSrc() {\n    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  // Templates\n  private get backgroundImageTemplate() {\n    return html`\n      <div\n        class=${this.imageClass}\n        style=\"background-image:url(${this.imageSrc})\"\n      ></div>\n    `;\n  }\n\n  private get waveformTemplate() {\n    return html`\n      <div class=\"box\" id=${this.randomGradient}>\n        <img\n          class=\"item-image\"\n          src=\"${this.imageSrc}\"\n          alt=\"${ifDefined(this.model?.identifier)}\"\n          @load=${this.onLoadItemImageCheck}\n        />\n      </div>\n    `;\n  }\n\n  private get tileActionTemplate() {\n    if (!this.isDeemphasize) {\n      return nothing;\n    }\n    return html`\n      <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n    `;\n  }\n\n  private onLoadItemImageCheck() {\n    const aspectRatio =\n      this.itemImageWaveform.naturalWidth /\n      this.itemImageWaveform.naturalHeight;\n    if (aspectRatio === 4) {\n      this.itemImageWaveform.classList.add('waveform');\n    }\n  }\n\n  // Classes\n  private get imageClass() {\n    return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n  }\n\n  private get imageBoxClass() {\n    return this.isDeemphasize ? 'item-image-box' : undefined;\n  }\n\n  private get randomGradient() {\n    return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .item-image-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: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .waveform {\n        mix-blend-mode: screen;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\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"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  nothing,\n  PropertyValues,\n  LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @state() private isDeemphasize: boolean = false;\n\n  @state() private isWaveform: boolean = false;\n\n  @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.setDeemphsize();\n    }\n  }\n\n  private setDeemphsize() {\n    this.isDeemphasize =\n      this.model?.collections.includes('deemphasize') ?? false;\n  }\n\n  render() {\n    return html`\n      <div class=${ifDefined(this.imageBoxClass)}>\n        ${this.model?.mediatype === 'audio'\n          ? this.waveformTemplate\n          : this.backgroundImageTemplate}\n        ${this.tileActionTemplate}\n      </div>\n    `;\n  }\n\n  private get imageSrc() {\n    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n  }\n\n  // Templates\n  private get backgroundImageTemplate() {\n    return html`\n      <div\n        class=${this.imageClass}\n        style=\"background-image:url(${this.imageSrc})\"\n      ></div>\n    `;\n  }\n\n  private get waveformTemplate() {\n    return html`\n      <div class=${this.boxWaveformClass}>\n        <img\n          class=${this.itemImageWaveformClass}\n          src=\"${this.imageSrc}\"\n          alt=\"${ifDefined(this.model?.identifier)}\"\n          @load=${this.onLoadItemImageCheck}\n        />\n      </div>\n    `;\n  }\n\n  private get tileActionTemplate() {\n    if (!this.isDeemphasize) {\n      return nothing;\n    }\n    return html`\n      <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n    `;\n  }\n\n  private onLoadItemImageCheck() {\n    const aspectRatio =\n      this.itemImageWaveform.naturalWidth /\n      this.itemImageWaveform.naturalHeight;\n    if (aspectRatio === 4) {\n      this.isWaveform = true;\n    }\n  }\n\n  // Classes\n  private get imageClass() {\n    return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n  }\n\n  private get imageBoxClass() {\n    return this.isDeemphasize ? 'item-image-box' : undefined;\n  }\n\n  private get boxWaveformClass() {\n    return `item-audio${this.isWaveform ? ` ${this.randomGradient}` : ''}`;\n  }\n\n  private get itemImageWaveformClass() {\n    return `item-image${this.isWaveform ? ' waveform' : ''}`;\n  }\n\n  private get randomGradient() {\n    return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .item-image-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: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .waveform {\n        mix-blend-mode: screen;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\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/tiles/list/tile-list-detail.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class LoadingTile extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
+}

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

@@ -0,0 +1,32 @@
+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: 100% 100%;
+        display: block;
+        height: 100%;
+      }
+    `;
+    }
+};
+LoadingTile = __decorate([
+    customElement('loading-tile')
+], LoadingTile);
+export { LoadingTile };
+//# sourceMappingURL=loading-tile.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;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/utils/format-string.d.ts

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

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

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

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

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

package/dist/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/mediatype-icon.test.js

@@ -0,0 +1,3 @@
+"use strict";
+describe('MediatypeIcon', () => { });
+//# sourceMappingURL=mediatype-icon.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.test.js","sourceRoot":"","sources":["../../test/mediatype-icon.test.ts"],"names":[],"mappings":";AAAA,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC","sourcesContent":["describe('MediatypeIcon', () => {});\n"]}

package/dist/test/mediatypeConfig.test.d.ts

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

package/dist/test/mediatypeConfig.test.js

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

package/dist/test/mediatypeConfig.test.js.map

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+import '../src/your-webcomponent';

package/dist/test/your-webcomponent.test.js

@@ -0,0 +1,23 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/your-webcomponent';
+describe('YourWebComponent', () => {
+    it('has a default title "Hey there" and counter 5', async () => {
+        const el = await fixture(html `<your-webcomponent></your-webcomponent>`);
+        expect(el.title).to.equal('Hey there');
+        expect(el.counter).to.equal(5);
+    });
+    it('increases the counter on button click', async () => {
+        const el = await fixture(html `<your-webcomponent></your-webcomponent>`);
+        el.shadowRoot.querySelector('button').click();
+        expect(el.counter).to.equal(6);
+    });
+    it('can override the title via attribute', async () => {
+        const el = await fixture(html `<your-webcomponent title="attribute title"></your-webcomponent>`);
+        expect(el.title).to.equal('attribute title');
+    });
+    it('passes the a11y audit', async () => {
+        const el = await fixture(html `<your-webcomponent></your-webcomponent>`);
+        await expect(el).shadowDom.to.be.accessible();
+    });
+});
+//# sourceMappingURL=your-webcomponent.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"your-webcomponent.test.js","sourceRoot":"","sources":["../../test/your-webcomponent.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,0BAA0B,CAAC;AAElC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,yCAAyC,CAC9C,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACvC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,yCAAyC,CAC9C,CAAC;QACF,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAC;QAEhD,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,iEAAiE,CACtE,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,yCAAyC,CAC9C,CAAC;QAEF,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\n\nimport type { YourWebComponent } from '../src/your-webcomponent';\nimport '../src/your-webcomponent';\n\ndescribe('YourWebComponent', () => {\n  it('has a default title \"Hey there\" and counter 5', async () => {\n    const el = await fixture<YourWebComponent>(\n      html`<your-webcomponent></your-webcomponent>`\n    );\n\n    expect(el.title).to.equal('Hey there');\n    expect(el.counter).to.equal(5);\n  });\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<YourWebComponent>(\n      html`<your-webcomponent></your-webcomponent>`\n    );\n    el.shadowRoot!.querySelector('button')!.click();\n\n    expect(el.counter).to.equal(6);\n  });\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<YourWebComponent>(\n      html`<your-webcomponent title=\"attribute title\"></your-webcomponent>`\n    );\n\n    expect(el.title).to.equal('attribute title');\n  });\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<YourWebComponent>(\n      html`<your-webcomponent></your-webcomponent>`\n    );\n\n    await expect(el).shadowDom.to.be.accessible();\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {