@internetarchive/collection-browser 0.0.1-alpha.1

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

@@ -0,0 +1,181 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { formatCount } from '../../utils/format-count';
+import { formatDate } from '../../utils/format-date';
+import '../../mediatype-icon';
+/*
+at 750 creator, title trimmed
+at 530
+*/
+let TileListDetail = class TileListDetail extends LitElement {
+    render() {
+        var _a, _b, _c, _d, _e;
+        return html `
+      <div id="list-detail-1" class="${this.classSize}">
+        <div id="views">
+          ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
+        </div>
+        <div id="title">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</div>
+        <div id="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="creator">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.creator}</div>
+        <div id="icon">
+          <mediatype-icon .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}></mediatype-icon>
+        </div>
+      </div>
+      <div id="list-detail-2" class="${this.classSize}">
+        <div></div>
+        <div id="details">${this.description()}</div>
+        <div></div>
+      </div>
+    `;
+    }
+    description() {
+        var _a, _b;
+        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.description) {
+            return html `
+        <div id="description">
+          <div id="description">${(_b = this.model) === null || _b === void 0 ? void 0 : _b.description}</div>
+        </div>
+      `;
+        }
+        return html ``;
+    }
+    /*
+     * TODO: fix field names to match model in src/collection-browser.ts
+     * private get dateSortSelector()
+     * @see src/models.ts
+     */
+    get date() {
+        var _a, _b, _c, _d, _e;
+        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
+            case 'date':
+                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
+            case 'reviewdate':
+                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
+            case 'addeddate':
+                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
+            default:
+                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived; // publicdate
+        }
+    }
+    get classSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'mobile' : 'desktop';
+    }
+    get formatSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'short' : 'long';
+    }
+    static get styles() {
+        return css `
+      .mobile div {
+        font-size: 11px;
+      }
+      .desktop div {
+        font-size: 14px;
+      }
+
+      #list-detail-1 {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        border-top: 1px solid #ddd !important;
+        padding-top: 5px;
+        align-items: center;
+      }
+
+      #list-detail-1.mobile {
+        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+      }
+      #list-detail-1.desktop {
+        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+      }
+
+      #list-detail-1:hover #title {
+        text-decoration: underline;
+      }
+
+      #list-detail-2 {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        align-items: center;
+      }
+
+      #list-detail-2.mobile {
+        grid-template-columns: 33px auto 29.5px;
+      }
+
+      #list-detail-2.desktop {
+        grid-template-columns: 60px auto 29.5px;
+      }
+
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+      }
+
+      /*
+    #details {
+      /*
+      max-height:3rem;
+      overflow:hidden;
+    }
+*/
+      #description {
+        overflow: hidden;
+        font-size: 12px;
+        overflow-y: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        word-break: break-word;
+        -webkit-line-clamp: 3; /* number of lines to show */
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        text-align: left;
+      }
+
+      #title,
+      #creator #description {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      #views,
+      #date {
+        text-align: right;
+      }
+
+      #views,
+      #details {
+        color: #767676;
+      }
+      #icon {
+        padding-right: 6px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileListDetail.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], TileListDetail.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Number })
+], TileListDetail.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Number })
+], TileListDetail.prototype, "currentHeight", void 0);
+__decorate([
+    property({ type: Object })
+], TileListDetail.prototype, "sortParam", 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;AAG5D,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,sBAAsB,CAAC;AAE9B;;;EAGE;AAGF,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAW5C,MAAM;;QACJ,OAAO,IAAI,CAAA;uCACwB,IAAI,CAAC,SAAS;;YAEzC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;0BAE1C,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;yBAClB,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;4BACnC,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO;;uCAER,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;uCAGrB,IAAI,CAAC,SAAS;;4BAEzB,IAAI,CAAC,WAAW,EAAE;;;KAGzC,CAAC;IACJ,CAAC;IAEO,WAAW;;QACjB,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE;YAC3B,OAAO,IAAI,CAAA;;kCAEiB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;OAElD,CAAC;SACH;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;;QACnB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAY,UAAU;;QACpB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFT,CAAC;IACJ,CAAC;CACF,CAAA;AA/J6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AATvC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAgK1B;SAhKY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n/*\nat 750 creator, title trimmed\nat 530\n*/\n\n@customElement('tile-list-detail')\nexport class TileListDetail extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-detail-1\" class=\"${this.classSize}\">\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"title\">${this.model?.title}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${this.model?.creator}</div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n      <div id=\"list-detail-2\" class=\"${this.classSize}\">\n        <div></div>\n        <div id=\"details\">${this.description()}</div>\n        <div></div>\n      </div>\n    `;\n  }\n\n  private description() {\n    if (this.model?.description) {\n      return html`\n        <div id=\"description\">\n          <div id=\"description\">${this.model?.description}</div>\n        </div>\n      `;\n    }\n    return html``;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      .mobile div {\n        font-size: 11px;\n      }\n      .desktop div {\n        font-size: 14px;\n      }\n\n      #list-detail-1 {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        border-top: 1px solid #ddd !important;\n        padding-top: 5px;\n        align-items: center;\n      }\n\n      #list-detail-1.mobile {\n        grid-template-columns: 33px 3fr 30px 2fr 29.5px;\n      }\n      #list-detail-1.desktop {\n        grid-template-columns: 60px 3fr 90px 2fr 29.5px;\n      }\n\n      #list-detail-1:hover #title {\n        text-decoration: underline;\n      }\n\n      #list-detail-2 {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        align-items: center;\n      }\n\n      #list-detail-2.mobile {\n        grid-template-columns: 33px auto 29.5px;\n      }\n\n      #list-detail-2.desktop {\n        grid-template-columns: 60px auto 29.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      /*\n    #details {\n      /*\n      max-height:3rem;\n      overflow:hidden;\n    }\n*/\n      #description {\n        overflow: hidden;\n        font-size: 12px;\n        overflow-y: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      #title,\n      #creator #description {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views,\n      #date {\n        text-align: right;\n      }\n\n      #views,\n      #details {\n        color: #767676;\n      }\n      #icon {\n        padding-right: 6px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { SortParam } from '@internetarchive/search-service';
+import { CollectionDisplayMode, TileModel } from '../../models';
+import '../../mediatype-icon';
+export declare class TileList extends LitElement {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    currentWidth?: number;
+    currentHeight?: number;
+    sortParam?: SortParam;
+    displayMode: CollectionDisplayMode;
+    render(): import("lit-html").TemplateResult<1>;
+    private detail;
+    private description;
+    private topic;
+    private source;
+    private get date();
+    private get classSize();
+    private get formatSize();
+    static get styles(): import("lit").CSSResult;
+}

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

@@ -0,0 +1,229 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import DOMPurify from 'dompurify';
+import { formatCount } from '../../utils/format-count';
+import { formatDate } from '../../utils/format-date';
+import '../../mediatype-icon';
+/*
+at 750 creator, title trimmed
+at 530
+*/
+let TileList = class TileList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.displayMode = 'list-compact';
+    }
+    // private HtmlSanitizer = HtmlSanitizer();
+    render() {
+        var _a, _b, _c, _d, _e;
+        return html `
+      <div id="list-line" class="${this.classSize}">
+        <div id="views">
+          ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
+        </div>
+        <div id="title">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</div>
+        <div id="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="creator">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.creator}</div>
+        <div id="icon">
+          <mediatype-icon .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}></mediatype-icon>
+        </div>
+      </div>
+      ${this.displayMode === 'list-detail' ? this.detail() : html ``}
+    `;
+    }
+    detail() {
+        const descriptionHtml = this.description();
+        const topicHtml = this.topic();
+        const sourceHtml = this.source();
+        if (descriptionHtml || topicHtml || sourceHtml) {
+            return html `
+        <div id="list-detail" class="${this.classSize}">
+          <div></div>
+          <div id="details">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>
+          <div></div>
+        </div>
+      `;
+        }
+        return html ``;
+    }
+    description() {
+        var _a, _b;
+        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.description) {
+            const description = DOMPurify.sanitize(`${(_b = this.model) === null || _b === void 0 ? void 0 : _b.description}`);
+            return html ` <div id="description">${description}</div> `;
+        }
+        return html ``;
+    }
+    topic() {
+        var _a, _b;
+        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.subject) {
+            return html ` <div id="topic">Topic: ${(_b = this.model) === null || _b === void 0 ? void 0 : _b.subject}</div> `;
+        }
+        return html ``;
+    }
+    source() {
+        var _a, _b;
+        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.source) {
+            return html ` <div id="source">Source: ${(_b = this.model) === null || _b === void 0 ? void 0 : _b.source}</div> `;
+        }
+        return html ``;
+    }
+    /*
+     * TODO: fix field names to match model in src/collection-browser.ts
+     * private get dateSortSelector()
+     * @see src/models.ts
+     */
+    get date() {
+        var _a, _b, _c, _d, _e;
+        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
+            case 'date':
+                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
+            case 'reviewdate':
+                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
+            case 'addeddate':
+                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
+            default:
+                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived; // publicdate
+        }
+    }
+    get classSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'mobile' : 'desktop';
+    }
+    get formatSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'short' : 'long';
+    }
+    static get styles() {
+        return css `
+      .mobile div {
+        font-size: 11px;
+      }
+      .desktop div {
+        font-size: 14px;
+      }
+
+      /* fields */
+
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+      }
+
+      #title,
+      #creator,
+      #topic,
+      #source {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      #title,
+      #creator {
+        white-space: nowrap;
+      }
+
+      #views,
+      #date {
+        text-align: right;
+      }
+
+      #views,
+      #details {
+        color: #767676;
+      }
+
+      #icon {
+        padding-right: 6px;
+      }
+
+      .desktop #description,
+      .desktop #topic,
+      .desktop #source {
+        font-size: 12px;
+      }
+
+      .mobile #description,
+      .mobile #topic,
+      .mobile #source {
+        font-size: 11px;
+      }
+
+      #description {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        word-break: break-word;
+        -webkit-line-clamp: 3; /* number of lines to show */
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        text-align: left;
+      }
+
+      /* list-line */
+
+      #list-line {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        border-top: 1px solid #ddd !important;
+        padding-top: 5px;
+        align-items: center;
+      }
+
+      #list-line.mobile {
+        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+      }
+      #list-line.desktop {
+        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+      }
+
+      #list-line:hover #title {
+        text-decoration: underline;
+      }
+
+      /* list-detail */
+
+      #list-detail {
+        display: grid;
+        column-gap: 10px;
+        line-height: 1.42857143;
+        align-items: center;
+      }
+
+      #list-detail.mobile {
+        grid-template-columns: 33px auto 29.5px;
+      }
+
+      #list-detail.desktop {
+        grid-template-columns: 60px auto 29.5px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileList.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], TileList.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Number })
+], TileList.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Number })
+], TileList.prototype, "currentHeight", void 0);
+__decorate([
+    property({ type: Object })
+], TileList.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: String })
+], TileList.prototype, "displayMode", void 0);
+TileList = __decorate([
+    customElement('tile-list')
+], TileList);
+export { TileList };
+//# sourceMappingURL=tile-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n// import * as HtmlSanitizer from '@jitbit/htmlsanitizer';\n// import sanitizeHtml from 'sanitize-html';\n// - error\n// import DOMPurify from 'dompurify';\n// - no types\nimport { CollectionDisplayMode, TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n/*\nat 750 creator, title trimmed\nat 530\n*/\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: String }) displayMode: CollectionDisplayMode =\n    'list-compact';\n\n  // private HtmlSanitizer = HtmlSanitizer();\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"title\">${this.model?.title}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${this.model?.creator}</div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n      ${this.displayMode === 'list-detail' ? this.detail() : html``}\n    `;\n  }\n\n  private detail() {\n    const descriptionHtml = this.description();\n    const topicHtml = this.topic();\n    const sourceHtml = this.source();\n\n    if (descriptionHtml || topicHtml || sourceHtml) {\n      return html`\n        <div id=\"list-detail\" class=\"${this.classSize}\">\n          <div></div>\n          <div id=\"details\">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>\n          <div></div>\n        </div>\n      `;\n    }\n    return html``;\n  }\n\n  private description() {\n    if (this.model?.description) {\n      const description = DOMPurify.sanitize(`${this.model?.description}`);\n      return html` <div id=\"description\">${description}</div> `;\n    }\n    return html``;\n  }\n\n  private topic() {\n    if (this.model?.subject) {\n      return html` <div id=\"topic\">Topic: ${this.model?.subject}</div> `;\n    }\n    return html``;\n  }\n\n  private source() {\n    if (this.model?.source) {\n      return html` <div id=\"source\">Source: ${this.model?.source}</div> `;\n    }\n    return html``;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      .mobile div {\n        font-size: 11px;\n      }\n      .desktop div {\n        font-size: 14px;\n      }\n\n      /* fields */\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #title,\n      #creator {\n        white-space: nowrap;\n      }\n\n      #views,\n      #date {\n        text-align: right;\n      }\n\n      #views,\n      #details {\n        color: #767676;\n      }\n\n      #icon {\n        padding-right: 6px;\n      }\n\n      .desktop #description,\n      .desktop #topic,\n      .desktop #source {\n        font-size: 12px;\n      }\n\n      .mobile #description,\n      .mobile #topic,\n      .mobile #source {\n        font-size: 11px;\n      }\n\n      #description {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        border-top: 1px solid #ddd !important;\n        padding-top: 5px;\n        align-items: center;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 33px 3fr 30px 2fr 29.5px;\n      }\n      #list-line.desktop {\n        grid-template-columns: 60px 3fr 90px 2fr 29.5px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      /* list-detail */\n\n      #list-detail {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        align-items: center;\n      }\n\n      #list-detail.mobile {\n        grid-template-columns: 33px auto 29.5px;\n      }\n\n      #list-detail.desktop {\n        grid-template-columns: 60px auto 29.5px;\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,73 @@
+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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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/tiles/tile-dispatcher.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, PropertyValues } from 'lit';
+import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
+import { SortParam } from '@internetarchive/search-service';
+import type { CollectionDisplayMode, TileModel } from '../models';
+import './grid/collection-tile';
+import './grid/item-tile';
+import './grid/account-tile';
+import './list/tile-list';
+export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface {
+    displayMode: CollectionDisplayMode;
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    showDeleteButton: boolean;
+    currentWidth?: number;
+    currentHeight?: number;
+    resizeObserver?: SharedResizeObserverInterface;
+    sortParam?: SortParam;
+    private container;
+    render(): import("lit-html").TemplateResult<1>;
+    handleResize(entry: ResizeObserverEntry): void;
+    disconnectedCallback(): void;
+    private stopResizeObservation;
+    private startResizeObservation;
+    updated(props: PropertyValues): void;
+    private get tile();
+    static get styles(): import("lit").CSSResult;
+}