@internetarchive/collection-browser 0.2.11 → 0.2.12

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

@@ -1,84 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { dateLabel } from './date-label';
-let TileListCompactHeader = class TileListCompactHeader extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortParam = null;
-    }
-    render() {
-        var _a;
-        return html `
-      <div id="list-line-header" class="${this.classSize}">
-        <div id="thumb"></div>
-        <div id="title">Title</div>
-        <div id="creator">Creator</div>
-        <div id="date">${dateLabel((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field)}</div>
-        <div id="icon"></div>
-        <div id="views">Views</div>
-      </div>
-    `;
-    }
-    get classSize() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'mobile';
-        }
-        return 'desktop';
-    }
-    static get styles() {
-        return css `
-      html {
-        font-size: unset;
-      }
-
-      div {
-        font-size: 14px;
-        font-weight: bold;
-        line-height: 20px;
-      }
-
-      .mobile #views {
-        display: none;
-      }
-
-      #views {
-        text-align: right;
-      }
-
-      #list-line-header {
-        display: grid;
-        column-gap: 10px;
-        align-items: flex-end;
-        padding-bottom: 2px;
-      }
-
-      #list-line-header.mobile {
-        grid-template-columns: 36px 3fr 2fr 91px;
-      }
-
-      #list-line-header.desktop {
-        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], TileListCompactHeader.prototype, "model", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompactHeader.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Object })
-], TileListCompactHeader.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompactHeader.prototype, "mobileBreakpoint", void 0);
-TileListCompactHeader = __decorate([
-    customElement('tile-list-compact-header')
-], TileListCompactHeader);
-export { TileListCompactHeader };
-//# sourceMappingURL=tile-list-compact-header.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.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;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IAArD;;QAK8B,cAAS,GAAqB,IAAI,CAAC;IAgEjE,CAAC;IA5DC,MAAM;;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;;;yBAI/B,SAAS,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC;;;;KAIpD,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AApE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA2B;AAP3C,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAqEjC;SArEY,qBAAqB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport { dateLabel } from './date-label';\nimport { TileModel } from '../../models';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  render() {\n    return html`\n      <div id=\"list-line-header\" class=\"${this.classSize}\">\n        <div id=\"thumb\"></div>\n        <div id=\"title\">Title</div>\n        <div id=\"creator\">Creator</div>\n        <div id=\"date\">${dateLabel(this.sortParam?.field)}</div>\n        <div id=\"icon\"></div>\n        <div id=\"views\">Views</div>\n      </div>\n    `;\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: flex-end;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 36px 3fr 2fr 91px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,20 +0,0 @@
-import { LitElement } from 'lit';
-import { SortParam } from '@internetarchive/search-service';
-import { TileModel } from '../../models';
-import '../item-image';
-import '../mediatype-icon';
-export declare class TileListCompact extends LitElement {
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    currentWidth?: number;
-    currentHeight?: number;
-    sortParam: SortParam | null;
-    mobileBreakpoint?: number;
-    baseImageUrl?: string;
-    render(): import("lit-html").TemplateResult<1>;
-    private get imageTemplate();
-    private get date();
-    private get classSize();
-    private get formatSize();
-    static get styles(): import("lit").CSSResult;
-}

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

@@ -1,215 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { customElement, property } from 'lit/decorators.js';
-import DOMPurify from 'dompurify';
-import { formatCount } from '../../utils/format-count';
-import { formatDate } from '../../utils/format-date';
-import { accountLabel } from './account-label';
-import '../item-image';
-import '../mediatype-icon';
-let TileListCompact = class TileListCompact extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortParam = null;
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        return html `
-      <div id="list-line" class="${this.classSize}">
-        <div id="thumb" class="${ifDefined((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype)}">
-          ${this.imageTemplate}
-        </div>
-        <div id="title">${DOMPurify.sanitize((_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '')}</div>
-        <div id="creator">
-          ${((_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype) === 'account'
-            ? accountLabel((_e = this.model) === null || _e === void 0 ? void 0 : _e.dateAdded)
-            : DOMPurify.sanitize((_g = (_f = this.model) === null || _f === void 0 ? void 0 : _f.creator) !== null && _g !== void 0 ? _g : '')}
-        </div>
-        <div id="date">${formatDate(this.date, this.formatSize)}</div>
-        <div id="icon">
-          <mediatype-icon
-            .mediatype=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.mediatype}
-            .collections=${(_j = this.model) === null || _j === void 0 ? void 0 : _j.collections}
-          >
-          </mediatype-icon>
-        </div>
-        <div id="views">
-          ${formatCount((_l = (_k = this.model) === null || _k === void 0 ? void 0 : _k.viewCount) !== null && _l !== void 0 ? _l : 0, this.formatSize)}
-        </div>
-      </div>
-    `;
-    }
-    get imageTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
-            return nothing;
-        }
-        return html `
-      <item-image
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .isListTile=${true}
-        .isCompactTile=${true}
-        style="--imgHeight: 100%; --imgWidth: 100%"
-      >
-      </item-image>
-    `;
-    }
-    /*
-     * 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() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'mobile';
-        }
-        return 'desktop';
-    }
-    get formatSize() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'short';
-        }
-        return 'long';
-    }
-    static get styles() {
-        return css `
-      html {
-        font-size: unset;
-      }
-
-      div {
-        font-size: 14px;
-      }
-
-      #list-line {
-        display: grid;
-        column-gap: 10px;
-        border-top: 1px solid #ddd;
-        align-items: center;
-        line-height: 20px;
-      }
-
-      #list-line.mobile {
-        grid-template-columns: 36px 3fr 2fr 62px 19px;
-      }
-
-      #list-line.desktop {
-        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;
-      }
-
-      #list-line:hover #title {
-        text-decoration: underline;
-      }
-
-      /* fields */
-      #thumb {
-        object-fit: cover;
-        display: block;
-      }
-
-      .mobile #thumb {
-        width: 30px;
-        height: 30px;
-        padding-top: 2px;
-        padding-bottom: 2px;
-        padding-left: 4px;
-      }
-
-      .desktop #thumb {
-        width: 45px;
-        height: 45px;
-        padding-top: 5px;
-        padding-bottom: 5px;
-        padding-left: 6px;
-      }
-
-      #thumb.collection {
-        --border-radius: 8px;
-      }
-
-      .mobile #thumb.account {
-        --border-radius: 15px;
-      }
-
-      .desktop #thumb.account {
-        --border-radius: 22.5px;
-      }
-
-      #title {
-        color: #4b64ff;
-        text-decoration: none;
-      }
-
-      #title,
-      #creator {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      #views {
-        text-align: right;
-        padding-right: 8px;
-      }
-
-      .mobile #views {
-        display: none;
-      }
-
-      .mobile mediatype-icon {
-        --iconHeight: 14px;
-        --iconWidth: 14px;
-      }
-
-      .desktop #icon {
-        --iconHeight: 20px;
-        --iconWidth: 20px;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], TileListCompact.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], TileListCompact.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompact.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompact.prototype, "currentHeight", void 0);
-__decorate([
-    property({ type: Object })
-], TileListCompact.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompact.prototype, "mobileBreakpoint", void 0);
-__decorate([
-    property({ type: String })
-], TileListCompact.prototype, "baseImageUrl", void 0);
-TileListCompact = __decorate([
-    customElement('tile-list-compact')
-], TileListCompact);
-export { TileListCompact };
-//# sourceMappingURL=tile-list-compact.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\n\nimport '../item-image';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact 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 | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n          ${this.imageTemplate}\n        </div>\n        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? accountLabel(this.model?.dateAdded)\n            : DOMPurify.sanitize(this.model?.creator ?? '')}\n        </div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"icon\">\n          <mediatype-icon\n            .mediatype=${this.model?.mediatype}\n            .collections=${this.model?.collections}\n          >\n          </mediatype-icon>\n        </div>\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n      </div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html`\n      <item-image\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .isListTile=${true}\n        .isCompactTile=${true}\n        style=\"--imgHeight: 100%; --imgWidth: 100%\"\n      >\n      </item-image>\n    `;\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    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 36px 3fr 2fr 62px 19px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      /* fields */\n      #thumb {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb {\n        width: 30px;\n        height: 30px;\n        padding-top: 2px;\n        padding-bottom: 2px;\n        padding-left: 4px;\n      }\n\n      .desktop #thumb {\n        width: 45px;\n        height: 45px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n        padding-left: 6px;\n      }\n\n      #thumb.collection {\n        --border-radius: 8px;\n      }\n\n      .mobile #thumb.account {\n        --border-radius: 15px;\n      }\n\n      .desktop #thumb.account {\n        --border-radius: 22.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      .mobile mediatype-icon {\n        --iconHeight: 14px;\n        --iconWidth: 14px;\n      }\n\n      .desktop #icon {\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,47 +0,0 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
-import { TileModel } from '../../models';
-import '../item-image';
-import '../mediatype-icon';
-export declare class TileList extends LitElement {
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    collectionNameCache?: CollectionNameCacheInterface;
-    currentWidth?: number;
-    currentHeight?: number;
-    sortParam: SortParam | null;
-    mobileBreakpoint?: number;
-    private collectionLinks;
-    baseImageUrl?: string;
-    protected updated(changed: PropertyValues): void;
-    private fetchCollectionNames;
-    render(): TemplateResult<1>;
-    private get mobileTemplate();
-    private get desktopTemplate();
-    private get detailsTemplate();
-    private get imgTemplate();
-    private get iconRightTemplate();
-    private get titleTemplate();
-    private get itemLineTemplate();
-    private get sourceTemplate();
-    private get volumeTemplate();
-    private get issueTemplate();
-    private get creatorTemplate();
-    private get datePublishedTemplate();
-    private get dateSortByTemplate();
-    private get viewsTemplate();
-    private get ratingTemplate();
-    private get reviewsTemplate();
-    private get topicsTemplate();
-    private get collectionsTemplate();
-    private get descriptionTemplate();
-    private metadataTemplate;
-    private labelTemplate;
-    private searchLink;
-    private detailsLink;
-    private get date();
-    private get classSize();
-    private get formatSize();
-    static get styles(): import("lit").CSSResult;
-}