@internetarchive/collection-browser 0.4.3-alpha.9 → 0.4.4-alpha

package/dist/src/tiles/grid/tile-stats.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.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,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QACvE,MAAM,oBAAoB,GAAG,WAAW,CACtC,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,OAAO,CACR,CAAC;QAEF,MAAM,mBAAmB,GACvB,IAAI,CAAC,SAAS,KAAK,SAAS;YAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU;YAC7B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC;QAEzC,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;;;yCAKhC,IAAI,CAAC,SAAS;;mCAEpB,mBAAmB;cACxC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;gBAEtD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;mCAGoB,iBAAiB;cACtC,kBAAkB;;;gBAGhB,iBAAiB;;;mCAGE,oBAAoB;cACzC,WAAW;;;gBAGT,oBAAoB;;;;;KAK/B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DT,CAAC;IACJ,CAAC;CACF,CAAA;AAlI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmIrB;SAnIY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n    const formattedReviewCount = formatCount(\n      this.commentCount,\n      'short',\n      'short'\n    );\n\n    const uploadsOrViewsTitle =\n      this.mediatype === 'account'\n        ? `${this.itemCount} uploads`\n        : `${this.viewCount} all-time views`;\n\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">Mediatype:</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account' ? this.itemCount : this.viewCount,\n                'short',\n                'short'\n              )}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedFavCount} favorites\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Favorites:</span>\n              ${formattedFavCount}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedReviewCount} reviews\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Reviews:</span>\n              ${formattedReviewCount}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      mediatype-icon {\n        --iconHeight: 25px;\n        --iconWidth: 25px;\n      }\n\n      ul {\n        all: unset; // unset all property values\n        list-style-type: none; // remove default list-style\n      }\n\n      li {\n        list-style-type: none; // remove default list-style\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n        display: block;\n        margin: auto;\n        pointer-events: none;\n      }\n\n      .item-stats {\n        height: 35px;\n        padding-left: 5px;\n        padding-right: 5px;\n      }\n\n      #stats-row {\n        display: flex;\n        flex-wrap: wrap;\n        width: 100%;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      .col {\n        width: 25%;\n        height: 25px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        height: 15px;\n        color: #2c2c2c;\n        line-height: 20px;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.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,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QACvE,MAAM,oBAAoB,GAAG,WAAW,CACtC,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,OAAO,CACR,CAAC;QAEF,MAAM,mBAAmB,GACvB,IAAI,CAAC,SAAS,KAAK,SAAS;YAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU;YAC7B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC;QAEzC,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;;;yCAKhC,IAAI,CAAC,SAAS;;mCAEpB,mBAAmB;cACxC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;gBAEtD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;mCAGoB,iBAAiB;cACtC,kBAAkB;;;gBAGhB,iBAAiB;;;mCAGE,oBAAoB;cACzC,WAAW;;;gBAGT,oBAAoB;;;;;KAK/B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;IACJ,CAAC;CACF,CAAA;AAnI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoIrB;SApIY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n    const formattedReviewCount = formatCount(\n      this.commentCount,\n      'short',\n      'short'\n    );\n\n    const uploadsOrViewsTitle =\n      this.mediatype === 'account'\n        ? `${this.itemCount} uploads`\n        : `${this.viewCount} all-time views`;\n\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">Mediatype:</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account' ? this.itemCount : this.viewCount,\n                'short',\n                'short'\n              )}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedFavCount} favorites\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Favorites:</span>\n              ${formattedFavCount}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedReviewCount} reviews\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Reviews:</span>\n              ${formattedReviewCount}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      mediatype-icon {\n        --iconHeight: 25px;\n        --iconWidth: 25px;\n      }\n\n      ul {\n        all: unset; // unset all property values\n        list-style-type: none; // remove default list-style\n      }\n\n      li {\n        list-style-type: none; // remove default list-style\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n        display: block;\n        margin: auto;\n        pointer-events: none;\n      }\n\n      .item-stats {\n        height: 35px;\n        padding-left: 5px;\n        padding-right: 5px;\n        font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n      }\n\n      #stats-row {\n        display: flex;\n        flex-wrap: wrap;\n        width: 100%;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      .col {\n        width: 25%;\n        height: 25px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        height: 15px;\n        color: #2c2c2c;\n        line-height: 20px;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/image-block.d.ts

@@ -1,17 +1,17 @@
-import { CSSResultGroup, LitElement, nothing } from 'lit';
-import type { TileModel } from '../models';
-import './overlay/icon-overlay';
-import './overlay/text-overlay';
-export declare class ImageBlock extends LitElement {
-    baseImageUrl?: string;
-    isCompactTile: boolean;
-    isListTile: boolean;
-    loggedIn: boolean;
-    model?: TileModel;
-    viewSize: string;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
-    private get baseClass();
-    private get iconOverlayTemplate();
-    private get textOverlayTemplate();
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement, nothing } from 'lit';
+import type { TileModel } from '../models';
+import './overlay/icon-overlay';
+import './overlay/text-overlay';
+export declare class ImageBlock extends LitElement {
+    baseImageUrl?: string;
+    isCompactTile: boolean;
+    isListTile: boolean;
+    loggedIn: boolean;
+    model?: TileModel;
+    viewSize: string;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private get baseClass();
+    private get iconOverlayTemplate();
+    private get textOverlayTemplate();
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,21 +1,21 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import './overlay/icon-overlay';
-import './overlay/text-overlay';
-let ImageBlock = class ImageBlock extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isCompactTile = false;
-        this.isListTile = false;
-        this.loggedIn = false;
-        this.viewSize = 'desktop';
-    }
-    render() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier))
-            return nothing;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import './overlay/icon-overlay';
+import './overlay/text-overlay';
+let ImageBlock = class ImageBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isCompactTile = false;
+        this.isListTile = false;
+        this.loggedIn = false;
+        this.viewSize = 'desktop';
+    }
+    render() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier))
+            return nothing;
         return html `
       <div class=${classMap(this.baseClass)}>
         <item-image
@@ -29,21 +29,23 @@ let ImageBlock = class ImageBlock extends LitElement {
         </item-image>
         ${this.textOverlayTemplate} ${this.iconOverlayTemplate}
       </div>
-    `;
-    }
-    get baseClass() {
-        return {
-            list: this.isListTile && !this.isCompactTile,
-            'list-compact': this.isListTile && this.isCompactTile,
-            [this.viewSize]: true,
-        };
-    }
-    get iconOverlayTemplate() {
-        var _a, _b, _c;
-        if (!this.isListTile)
-            return nothing;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
-            return nothing;
+    `;
+    }
+    get baseClass() {
+        var _a;
+        return {
+            list: this.isListTile && !this.isCompactTile,
+            'list-compact': this.isListTile && this.isCompactTile,
+            collection: ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'collection',
+            [this.viewSize]: true,
+        };
+    }
+    get iconOverlayTemplate() {
+        var _a, _b, _c;
+        if (!this.isListTile)
+            return nothing;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
+            return nothing;
         return html `
       <icon-overlay
         .loggedIn=${this.loggedIn}
@@ -51,14 +53,14 @@ let ImageBlock = class ImageBlock extends LitElement {
         .isCompactTile=${this.isCompactTile}
       >
       </icon-overlay>
-    `;
-    }
-    get textOverlayTemplate() {
-        var _a, _b, _c;
-        if (this.isListTile)
-            return nothing;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
-            return nothing;
+    `;
+    }
+    get textOverlayTemplate() {
+        var _a, _b, _c;
+        if (this.isListTile)
+            return nothing;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning))
+            return nothing;
         return html `
       <text-overlay
         .loggedIn=${this.loggedIn}
@@ -66,18 +68,16 @@ let ImageBlock = class ImageBlock extends LitElement {
         ?iconRequired=${true}
       >
       </text-overlay>
-    `;
-    }
-    static get styles() {
-        const imageBlockBackgroundColor = css `var(--imageBlockBackgroundColor, #f1f1f4)`;
-        const imageBlockBorderColor = css `var(--imageBlockBorderColor, #dddddd)`;
+    `;
+    }
+    static get styles() {
+        const imageBlockBackgroundColor = css `var(--imageBlockBackgroundColor, #f1f1f4)`;
         return css `
       div {
         display: flex;
         justify-content: center;
         position: relative;
         background-color: ${imageBlockBackgroundColor};
-        border: 1px solid ${imageBlockBorderColor};
       }
 
       .grid {
@@ -87,6 +87,10 @@ let ImageBlock = class ImageBlock extends LitElement {
         padding: 5px;
       }
 
+      .collection.grid {
+        display: block;
+      }
+
       /** tile-list view */
       .list.desktop {
         width: 100px;
@@ -116,29 +120,29 @@ let ImageBlock = class ImageBlock extends LitElement {
         width: 30px;
         height: 30px;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], ImageBlock.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "isCompactTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "isListTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ImageBlock.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Object })
-], ImageBlock.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ImageBlock.prototype, "viewSize", void 0);
-ImageBlock = __decorate([
-    customElement('image-block')
-], ImageBlock);
-export { ImageBlock };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ImageBlock.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "isListTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ImageBlock.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Object })
+], ImageBlock.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ImageBlock.prototype, "viewSize", void 0);
+ImageBlock = __decorate([
+    customElement('image-block')
+], ImageBlock);
+export { ImageBlock };
 //# sourceMappingURL=image-block.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        .isCompactTile=${this.isCompactTile}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        ?iconRequired=${true}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;\n    const imageBlockBorderColor = css`var(--imageBlockBorderColor, #dddddd)`;\n\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        background-color: ${imageBlockBackgroundColor};\n        border: 1px solid ${imageBlockBorderColor};\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        position: initial;\n        padding: 5px;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n        text-align: center;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) return nothing;\n\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      collection: this.model?.mediatype === 'collection', // fill the image in container\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        .isCompactTile=${this.isCompactTile}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning)\n      return nothing;\n\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        ?iconRequired=${true}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;\n\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        background-color: ${imageBlockBackgroundColor};\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n        position: initial;\n        padding: 5px;\n      }\n\n      .collection.grid {\n        display: block;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n        display: inline-block;\n        position: relative;\n        text-align: center;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n        text-align: center;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/item-image.d.ts

@@ -1,35 +1,35 @@
-import { CSSResultGroup, LitElement } from 'lit';
-import type { TileModel } from '../models';
-export declare class ItemImage extends LitElement {
-    model?: TileModel;
-    baseImageUrl?: string;
-    isListTile: boolean;
-    isCompactTile: boolean;
-    loggedIn: boolean;
-    private isWaveform;
-    private baseImage;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Helpers
-     */
-    private get imageSrc();
-    private get hashBasedGradient();
-    private hashStrToInt;
-    /**
-     * Classes
-     */
-    private get itemBaseClass();
-    private get itemImageClass();
-    /**
-     * Helper function to determine if border radius is needed
-     */
-    private get itemImageRadius();
-    /**
-     * Event listener sets isWaveform true if image is waveform
-     */
-    private onLoad;
-    /**
-     * CSS
-     */
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement } from 'lit';
+import type { TileModel } from '../models';
+export declare class ItemImage extends LitElement {
+    model?: TileModel;
+    baseImageUrl?: string;
+    isListTile: boolean;
+    isCompactTile: boolean;
+    loggedIn: boolean;
+    private isWaveform;
+    private baseImage;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Helpers
+     */
+    private get imageSrc();
+    private get hashBasedGradient();
+    private hashStrToInt;
+    /**
+     * Classes
+     */
+    private get itemBaseClass();
+    private get itemImageClass();
+    /**
+     * Helper function to determine if account tile image
+     */
+    private get isAccountImage();
+    /**
+     * Event listener sets isWaveform true if image is waveform
+     */
+    private onLoad;
+    /**
+     * CSS
+     */
+    static get styles(): CSSResultGroup;
+}

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

@@ -1,17 +1,17 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
-let ItemImage = class ItemImage extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isListTile = false;
-        this.isCompactTile = false;
-        this.loggedIn = false;
-        this.isWaveform = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { baseItemImageStyles, waveformGradientStyles, } from '../styles/item-image-styles';
+let ItemImage = class ItemImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isListTile = false;
+        this.isCompactTile = false;
+        this.loggedIn = false;
+        this.isWaveform = false;
+    }
+    render() {
         return html `
       <div class=${classMap(this.itemBaseClass)}>
         <img
@@ -21,111 +21,112 @@ let ItemImage = class ItemImage extends LitElement {
           @load=${this.onLoad}
         />
       </div>
-    `;
-    }
-    /**
-     * Helpers
-     */
-    get imageSrc() {
-        var _a;
-        // Don't try to load invalid image URLs
-        return this.baseImageUrl && ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)
-            ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
-            : nothing;
-    }
-    get hashBasedGradient() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
-            return 'waveform-grad0';
-        }
-        const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
-        return `waveform-grad${gradient}`;
-    }
-    hashStrToInt(str) {
-        return str
-            .split('')
-            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-    }
-    /**
-     * Classes
-     */
-    get itemBaseClass() {
-        return {
-            'drop-shadow': true,
-            'list-box': this.isListTile,
-            [this.hashBasedGradient]: this.isWaveform,
-        };
-    }
-    get itemImageClass() {
-        var _a, _b;
-        const toBlur = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || ((_b = this.model) === null || _b === void 0 ? void 0 : _b.loginRequired);
-        return {
-            contain: !this.isCompactTile && !this.isWaveform,
-            cover: this.isCompactTile,
-            blur: toBlur || false,
-            waveform: this.isWaveform,
-            radius50: this.itemImageRadius,
-        };
-    }
-    /**
-     * Helper function to determine if border radius is needed
-     */
-    get itemImageRadius() {
-        var _a;
-        return (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account' &&
-            !this.isCompactTile &&
-            !this.isListTile);
-    }
-    /**
-     * Event listener sets isWaveform true if image is waveform
-     */
-    onLoad() {
-        var _a, _b;
-        if ((((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' ||
-            ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree') &&
-            this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
-            this.isWaveform = true;
-        }
-    }
-    /**
-     * CSS
-     */
-    static get styles() {
-        return [
-            baseItemImageStyles,
-            waveformGradientStyles,
+    `;
+    }
+    /**
+     * Helpers
+     */
+    get imageSrc() {
+        var _a;
+        // Don't try to load invalid image URLs
+        return this.baseImageUrl && ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)
+            ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
+            : nothing;
+    }
+    get hashBasedGradient() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return 'waveform-grad0';
+        }
+        const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
+        return `waveform-grad${gradient}`;
+    }
+    hashStrToInt(str) {
+        return str
+            .split('')
+            .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    }
+    /**
+     * Classes
+     */
+    get itemBaseClass() {
+        return {
+            'drop-shadow': true,
+            'list-box': this.isListTile,
+            [this.hashBasedGradient]: this.isWaveform,
+        };
+    }
+    get itemImageClass() {
+        var _a, _b, _c;
+        const toBlur = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.contentWarning) || ((_b = this.model) === null || _b === void 0 ? void 0 : _b.loginRequired);
+        return {
+            contain: !this.isCompactTile && !this.isWaveform,
+            cover: this.isCompactTile,
+            blur: toBlur || false,
+            waveform: this.isWaveform,
+            'account-image': this.isAccountImage,
+            'collection-image': ((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'collection', // for collection tile image
+        };
+    }
+    /**
+     * Helper function to determine if account tile image
+     */
+    get isAccountImage() {
+        var _a;
+        return (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account' &&
+            !this.isCompactTile &&
+            !this.isListTile);
+    }
+    /**
+     * Event listener sets isWaveform true if image is waveform
+     */
+    onLoad() {
+        var _a, _b;
+        if ((((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'audio' ||
+            ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'etree') &&
+            this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4) {
+            this.isWaveform = true;
+        }
+    }
+    /**
+     * CSS
+     */
+    static get styles() {
+        return [
+            baseItemImageStyles,
+            waveformGradientStyles,
             css `
         img {
           height: var(--imgHeight, 16rem);
           width: var(--imgWidth, 16rem);
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], ItemImage.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], ItemImage.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "isListTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "isCompactTile", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemImage.prototype, "loggedIn", void 0);
-__decorate([
-    state()
-], ItemImage.prototype, "isWaveform", void 0);
-__decorate([
-    query('img')
-], ItemImage.prototype, "baseImage", void 0);
-ItemImage = __decorate([
-    customElement('item-image')
-], ItemImage);
-export { ItemImage };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], ItemImage.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ItemImage.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isListTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "isCompactTile", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemImage.prototype, "loggedIn", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isWaveform", void 0);
+__decorate([
+    query('img')
+], ItemImage.prototype, "baseImage", void 0);
+ItemImage = __decorate([
+    customElement('item-image')
+], ItemImage);
+export { ItemImage };
 //# sourceMappingURL=item-image.js.map

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 { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\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  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>\n        <img\n          class=${classMap(this.itemImageClass)}\n          src=\"${this.imageSrc}\"\n          alt=\"\"\n          @load=${this.onLoad}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n      radius50: this.itemImageRadius,\n    };\n  }\n\n  /**\n   * Helper function to determine if border radius is needed\n   */\n  private get itemImageRadius() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\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 { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\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  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>\n        <img\n          class=${classMap(this.itemImageClass)}\n          src=\"${this.imageSrc}\"\n          alt=\"\"\n          @load=${this.onLoad}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/list/account-label.d.ts

@@ -1 +1 @@
-export declare function accountLabel(date: Date | undefined): string;
+export declare function accountLabel(date: Date | undefined): string;