@internetarchive/collection-browser 0.0.1-alpha.1

package/dist/src/sort-filter-bar/alpha-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/alpha-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA8CmB,aAAQ,GAAG,4BAA4B,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAmCrE,CAAC;IA5EC,IAAY,uBAAuB;;QACjC,OAAO,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,QAAQ;;;YAGb,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;0BAEQ,MAAM,KAAK,IAAI,CAAC,uBAAuB;YAC7C,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,OAAO;;uCAEU,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;sBACjD,MAAM;;;eAGb,CACJ;;;KAGN,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,IAAI,MAAM,KAAK,IAAI,CAAC,uBAAuB,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACjC;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;SAC9B;QACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,uBAAuB,EAAE;SACzD,CAAC,CACH,CAAC;IACJ,CAAC;CAqCF,CAAA;AAjCQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgClB,CAAC;AA/E0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyB;AAHzC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiFpB;SAjFY,QAAQ","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('alpha-bar')\nexport class AlphaBar extends LitElement {\n  @property({ type: String }) headline?: string;\n\n  @property({ type: String }) selectedLetter?: string;\n\n  private get selectedUppercaseLetter(): string | undefined {\n    return this.selectedLetter?.toUpperCase();\n  }\n\n  render() {\n    return html`\n      <h1>${this.headline}</h1>\n      <div id=\"container\">\n        <ul>\n          ${this.alphabet.map(\n            letter =>\n              html`\n                <li\n                  class=${letter === this.selectedUppercaseLetter\n                    ? 'selected'\n                    : nothing}\n                >\n                  <a href=\"#\" @click=${() => this.letterClicked(letter)}>\n                    ${letter}\n                  </a>\n                </li>\n              `\n          )}\n        </ul>\n      </div>\n    `;\n  }\n\n  private letterClicked(letter: string) {\n    if (letter === this.selectedUppercaseLetter) {\n      this.selectedLetter = undefined;\n    } else {\n      this.selectedLetter = letter;\n    }\n    this.dispatchEvent(\n      new CustomEvent('letterChanged', {\n        detail: { selectedLetter: this.selectedUppercaseLetter },\n      })\n    );\n  }\n\n  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\n\n  static styles = css`\n    h1 {\n      font-size: 1.2rem;\n    }\n\n    #container {\n      background-color: #ddd;\n      color: #333;\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0.5rem 1rem;\n      justify-content: space-between;\n    }\n\n    a {\n      color: #333;\n      text-decoration: none;\n      padding: 0.5rem 0.7rem;\n      display: block;\n    }\n\n    .selected {\n      background-color: darkgray;\n    }\n\n    .selected a {\n      color: white;\n    }\n  `;\n}\n"]}

package/dist/src/sort-filter-bar/sort-filter-bar.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, PropertyValues } from 'lit';
+import { CollectionDisplayMode } from '../models';
+import './alpha-bar';
+export declare class SortFilterBar extends LitElement {
+    displayMode: CollectionDisplayMode;
+    sortDirection: 'asc' | 'desc';
+    sortField: string;
+    titleSelectorVisible: boolean;
+    creatorSelectorVisible: boolean;
+    dateSortSelectorVisible: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    private get dateSortSelector();
+    private get titleSelectorBar();
+    private get creatorSelectorBar();
+    private titleLetterChanged;
+    private creatorLetterChanged;
+    private gridSelected;
+    private listSelected;
+    private detailSelected;
+    private displayModeChanged;
+    private sortChanged;
+    static styles: import("lit").CSSResult;
+}

package/dist/src/sort-filter-bar/sort-filter-bar.js

@@ -0,0 +1,257 @@
+import { __decorate } from "tslib";
+import { SortParam } from '@internetarchive/search-service';
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './alpha-bar';
+let SortFilterBar = class SortFilterBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.displayMode = 'grid';
+        this.sortDirection = 'desc';
+        this.sortField = 'week';
+        this.titleSelectorVisible = false;
+        this.creatorSelectorVisible = false;
+        this.dateSortSelectorVisible = false;
+    }
+    render() {
+        return html `
+      <div id="sort-bar">
+        <div id="sort-selector">
+          <ul>
+            <li>
+              <button
+                @click=${() => {
+            this.sortDirection = 'desc';
+        }}
+              >
+                Desc
+              </button>
+              <button
+                @click=${() => {
+            this.sortDirection = 'asc';
+        }}
+              >
+                Asc</button
+              >Sort By
+            </li>
+            <li>
+              <button
+                @click=${() => {
+            this.sortField = 'week';
+        }}
+              >
+                Views
+              </button>
+            </li>
+            <li>
+              <button
+                @click=${() => {
+            this.titleSelectorVisible = !this.titleSelectorVisible;
+            this.sortField = 'titleSorter';
+        }}
+              >
+                Title
+              </button>
+            </li>
+            <li>
+              <button
+                @click=${() => {
+            this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+        }}
+              >
+                Date Archived
+              </button>
+            </li>
+            <li>
+              <button
+                @click=${() => {
+            this.creatorSelectorVisible = !this.creatorSelectorVisible;
+            this.sortField = 'creatorSorter';
+        }}
+              >
+                Creator
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <div id="display-style">
+          <ul>
+            ${this.displayMode !== 'grid'
+            ? html `<li>
+                  <input type="checkbox" @click=${this.detailSelected} />
+                  Details
+                </li>`
+            : nothing}
+
+            <li>
+              <button id="grid-button" @click=${this.gridSelected}>Grid</button>
+            </li>
+            <li>
+              <button id="list-button" @click=${this.listSelected}>List</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}
+      ${this.titleSelectorVisible ? this.titleSelectorBar : nothing}
+      ${this.creatorSelectorVisible ? this.creatorSelectorBar : nothing}
+    `;
+    }
+    updated(changed) {
+        if (changed.has('displayMode')) {
+            this.displayModeChanged();
+        }
+        if (changed.has('sortDirection') || changed.has('sortField')) {
+            this.sortChanged();
+        }
+    }
+    get dateSortSelector() {
+        return html `
+      <div id="date-sort-selector">
+        <ul>
+          <li>
+            <button
+              @click=${() => {
+            this.sortField = 'publicdate';
+        }}
+            >
+              Date Archived
+            </button>
+          </li>
+          <li>
+            <button
+              @click=${() => {
+            this.sortField = 'date';
+        }}
+            >
+              Date Published
+            </button>
+          </li>
+          <li>
+            <button
+              @click=${() => {
+            this.sortField = 'reviewdate';
+        }}
+            >
+              Date Reviewed
+            </button>
+          </li>
+          <li>
+            <button
+              @click=${() => {
+            this.sortField = 'addeddate';
+        }}
+            >
+              Date Added
+            </button>
+          </li>
+        </ul>
+      </div>
+    `;
+    }
+    get titleSelectorBar() {
+        return html ` <alpha-bar
+      headline="Title Starts With"
+      @letterChanged=${this.titleLetterChanged}
+    ></alpha-bar>`;
+    }
+    get creatorSelectorBar() {
+        return html ` <alpha-bar
+      headline="Creator Starts With"
+      @letterChanged=${this.creatorLetterChanged}
+    ></alpha-bar>`;
+    }
+    titleLetterChanged(e) {
+        const event = new CustomEvent('titleLetterChanged', {
+            detail: { selectedLetter: e.detail.selectedLetter },
+        });
+        this.dispatchEvent(event);
+    }
+    creatorLetterChanged(e) {
+        const event = new CustomEvent('creatorLetterChanged', {
+            detail: { selectedLetter: e.detail.selectedLetter },
+        });
+        this.dispatchEvent(event);
+    }
+    gridSelected() {
+        this.displayMode = 'grid';
+    }
+    listSelected() {
+        this.displayMode = 'list-compact';
+    }
+    detailSelected(e) {
+        this.displayMode = e.target.checked
+            ? 'list-detail'
+            : 'list-compact';
+    }
+    displayModeChanged() {
+        const event = new CustomEvent('displayModeChanged', {
+            detail: { displayMode: this.displayMode },
+        });
+        this.dispatchEvent(event);
+    }
+    sortChanged() {
+        const sort = new SortParam(this.sortField, this.sortDirection);
+        const event = new CustomEvent('sortChanged', {
+            detail: { sort },
+        });
+        this.dispatchEvent(event);
+    }
+};
+SortFilterBar.styles = css `
+    #sort-bar {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    ul {
+      list-style: none;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      align-items: center;
+    }
+
+    li {
+      padding: 0.5rem 0 0.5rem 0;
+    }
+
+    #sort-selector li::after {
+      content: '•';
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    #sort-selector li:first-child::after {
+      content: '';
+    }
+
+    #sort-selector li:last-child::after {
+      content: '';
+    }
+  `;
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "displayMode", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "sortDirection", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "sortField", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "titleSelectorVisible", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "creatorSelectorVisible", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "dateSortSelectorVisible", void 0);
+SortFilterBar = __decorate([
+    customElement('sort-filter-bar')
+], SortFilterBar);
+export { SortFilterBar };
+//# sourceMappingURL=sort-filter-bar.js.map

package/dist/src/sort-filter-bar/sort-filter-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { SortParam } from '@internetarchive/search-service';\nimport { LitElement, html, css, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { CollectionDisplayMode } from '../models';\nimport './alpha-bar';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar extends LitElement {\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: String }) sortDirection: 'asc' | 'desc' = 'desc';\n\n  @property({ type: String }) sortField = 'week';\n\n  @state() titleSelectorVisible: boolean = false;\n\n  @state() creatorSelectorVisible: boolean = false;\n\n  @state() dateSortSelectorVisible = false;\n\n  render() {\n    return html`\n      <div id=\"sort-bar\">\n        <div id=\"sort-selector\">\n          <ul>\n            <li>\n              <button\n                @click=${() => {\n                  this.sortDirection = 'desc';\n                }}\n              >\n                Desc\n              </button>\n              <button\n                @click=${() => {\n                  this.sortDirection = 'asc';\n                }}\n              >\n                Asc</button\n              >Sort By\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.sortField = 'week';\n                }}\n              >\n                Views\n              </button>\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.titleSelectorVisible = !this.titleSelectorVisible;\n                  this.sortField = 'titleSorter';\n                }}\n              >\n                Title\n              </button>\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n                }}\n              >\n                Date Archived\n              </button>\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.creatorSelectorVisible = !this.creatorSelectorVisible;\n                  this.sortField = 'creatorSorter';\n                }}\n              >\n                Creator\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <div id=\"display-style\">\n          <ul>\n            ${this.displayMode !== 'grid'\n              ? html`<li>\n                  <input type=\"checkbox\" @click=${this.detailSelected} />\n                  Details\n                </li>`\n              : nothing}\n\n            <li>\n              <button id=\"grid-button\" @click=${this.gridSelected}>Grid</button>\n            </li>\n            <li>\n              <button id=\"list-button\" @click=${this.listSelected}>List</button>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}\n      ${this.titleSelectorVisible ? this.titleSelectorBar : nothing}\n      ${this.creatorSelectorVisible ? this.creatorSelectorBar : nothing}\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\n    }\n\n    if (changed.has('sortDirection') || changed.has('sortField')) {\n      this.sortChanged();\n    }\n  }\n\n  private get dateSortSelector() {\n    return html`\n      <div id=\"date-sort-selector\">\n        <ul>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'publicdate';\n              }}\n            >\n              Date Archived\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'date';\n              }}\n            >\n              Date Published\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'reviewdate';\n              }}\n            >\n              Date Reviewed\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'addeddate';\n              }}\n            >\n              Date Added\n            </button>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      headline=\"Title Starts With\"\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      headline=\"Creator Starts With\"\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    const event = new CustomEvent('titleLetterChanged', {\n      detail: { selectedLetter: e.detail.selectedLetter },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    const event = new CustomEvent('creatorLetterChanged', {\n      detail: { selectedLetter: e.detail.selectedLetter },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private gridSelected() {\n    this.displayMode = 'grid';\n  }\n\n  private listSelected() {\n    this.displayMode = 'list-compact';\n  }\n\n  private detailSelected(e: Event) {\n    this.displayMode = (e.target as HTMLInputElement).checked\n      ? 'list-detail'\n      : 'list-compact';\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent('displayModeChanged', {\n      detail: { displayMode: this.displayMode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private sortChanged() {\n    const sort = new SortParam(this.sortField, this.sortDirection);\n    const event = new CustomEvent('sortChanged', {\n      detail: { sort },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static styles = css`\n    #sort-bar {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0;\n      align-items: center;\n    }\n\n    li {\n      padding: 0.5rem 0 0.5rem 0;\n    }\n\n    #sort-selector li::after {\n      content: '•';\n      padding-left: 1rem;\n      padding-right: 1rem;\n    }\n\n    #sort-selector li:first-child::after {\n      content: '';\n    }\n\n    #sort-selector li:last-child::after {\n      content: '';\n    }\n  `;\n}\n"]}

package/dist/src/tiles/grid/account-tile.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import { TileModel } from '../../models';
+export declare class UserTile extends LitElement {
+    model?: TileModel;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
+}

package/dist/src/tiles/grid/account-tile.js

@@ -0,0 +1,144 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { accountIcon } from './icons/account';
+import { favoriteFilledIcon } from './icons/favorite-filled';
+import { reviewsIcon } from './icons/reviews';
+import { uploadIcon } from './icons/upload';
+let UserTile = class UserTile extends LitElement {
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return html `
+      <div class="outer-holder">
+        <div class="inner-holder">
+          <div id="header-holder">
+            <div id="title-holder">
+              <h1>${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
+            </div>
+            <div id="avatar-holder">
+              <div
+                id="avatar"
+                style="background-image: url('https://archive.org/services/img/${(_b = this
+            .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
+              ></div>
+            </div>
+          </div>
+          <div id="year-holder">
+            <div id="archivist-since">
+              <h3>Archivist Since</h3>
+            </div>
+            <div id="year-holder">
+              <h3>${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}</h3>
+            </div>
+          </div>
+          <div id="status-holder">
+            <div id="patron-icon">${accountIcon}</div>
+            <div class="stat-icon">
+              ${uploadIcon}
+              <h3>${(_e = this.model) === null || _e === void 0 ? void 0 : _e.itemCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${favoriteFilledIcon}
+              <h3>${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}</h3>
+            </div>
+            <div class="stat-icon">
+              ${reviewsIcon}
+              <h3>${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      h1 {
+        color: black;
+        font-size: 16px;
+        margin: 0;
+      }
+
+      h3 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2c2c2c;
+        margin: 0px;
+      }
+
+      .outer-holder {
+        background-color: #fcf5e6;
+        border: 1px #2c2c2c;
+        border-radius: 4px;
+        box-shadow: 1px 1px 2px 0px;
+        height: 100%;
+        display: flex;
+        text-align: center;
+        width: 100%;
+      }
+
+      .inner-holder {
+        padding: 5px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #header-holder {
+        flex: 1;
+      }
+
+      #title-holder {
+        height: 40px;
+        margin-bottom: 5px;
+      }
+
+      #avatar-holder {
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #avatar {
+        background-position: 50% 50%;
+        border-radius: 50%;
+        width: 160px;
+        height: 160px;
+        box-shadow: 1px 1px 2px #888888;
+      }
+
+      #year-holder {
+        margin-bottom: 5px;
+        height: 40px;
+      }
+
+      #year-holder {
+        margin: 0px;
+      }
+
+      #status-holder {
+        height: 25px;
+        display: flex;
+        justify-content: space-evenly;
+      }
+
+      #patron-icon {
+        height: 25px;
+        width: 25px;
+      }
+
+      .stat-icon {
+        height: 10px;
+        width: 10px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], UserTile.prototype, "model", void 0);
+UserTile = __decorate([
+    customElement('account-tile')
+], UserTile);
+export { UserTile };
+//# sourceMappingURL=account-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.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,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAGtC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;;oBAKK,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;iFAKuC,MAAA,IAAI;aAClE,KAAK,0CAAE,UAAU;;;;;;;;;oBAShB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;oCAIpB,WAAW;;gBAE/B,UAAU;oBACN,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;gBAGzB,kBAAkB;oBACd,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;;;gBAGxB,WAAW;oBACP,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;;KAKvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgFT,CAAC;IACJ,CAAC;CACF,CAAA;AAjI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AADnC,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CAkIpB;SAlIY,QAAQ","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport { accountIcon } from './icons/account';\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport { uploadIcon } from './icons/upload';\n\n@customElement('account-tile')\nexport class UserTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div class=\"outer-holder\">\n        <div class=\"inner-holder\">\n          <div id=\"header-holder\">\n            <div id=\"title-holder\">\n              <h1>${this.model?.identifier}</h1>\n            </div>\n            <div id=\"avatar-holder\">\n              <div\n                id=\"avatar\"\n                style=\"background-image: url('https://archive.org/services/img/${this\n                  .model?.identifier}')\"\n              ></div>\n            </div>\n          </div>\n          <div id=\"year-holder\">\n            <div id=\"archivist-since\">\n              <h3>Archivist Since</h3>\n            </div>\n            <div id=\"year-holder\">\n              <h3>${this.model?.dateAdded?.getFullYear()}</h3>\n            </div>\n          </div>\n          <div id=\"status-holder\">\n            <div id=\"patron-icon\">${accountIcon}</div>\n            <div class=\"stat-icon\">\n              ${uploadIcon}\n              <h3>${this.model?.itemCount}</h3>\n            </div>\n            <div class=\"stat-icon\">\n              ${favoriteFilledIcon}\n              <h3>${this.model?.favCount}</h3>\n            </div>\n            <div class=\"stat-icon\">\n              ${reviewsIcon}\n              <h3>${this.model?.commentCount}</h3>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        color: black;\n        font-size: 16px;\n        margin: 0;\n      }\n\n      h3 {\n        font-size: 14px;\n        font-weight: bold;\n        color: #2c2c2c;\n        margin: 0px;\n      }\n\n      .outer-holder {\n        background-color: #fcf5e6;\n        border: 1px #2c2c2c;\n        border-radius: 4px;\n        box-shadow: 1px 1px 2px 0px;\n        height: 100%;\n        display: flex;\n        text-align: center;\n        width: 100%;\n      }\n\n      .inner-holder {\n        padding: 5px;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #header-holder {\n        flex: 1;\n      }\n\n      #title-holder {\n        height: 40px;\n        margin-bottom: 5px;\n      }\n\n      #avatar-holder {\n        margin-bottom: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      #avatar {\n        background-position: 50% 50%;\n        border-radius: 50%;\n        width: 160px;\n        height: 160px;\n        box-shadow: 1px 1px 2px #888888;\n      }\n\n      #year-holder {\n        margin-bottom: 5px;\n        height: 40px;\n      }\n\n      #year-holder {\n        margin: 0px;\n      }\n\n      #status-holder {\n        height: 25px;\n        display: flex;\n        justify-content: space-evenly;\n      }\n\n      #patron-icon {\n        height: 25px;\n        width: 25px;\n      }\n\n      .stat-icon {\n        height: 10px;\n        width: 10px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/grid/collection-tile.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup, LitElement } from 'lit';
+import { TileModel } from '../../models';
+export declare class CollectionTile extends LitElement {
+    model?: TileModel;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/grid/collection-tile.js

@@ -0,0 +1,160 @@
+import { __decorate } from "tslib";
+import { localized, msg } from '@lit/localize';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+let CollectionTile = class CollectionTile extends LitElement {
+    render() {
+        var _a, _b, _c;
+        return html `
+      <div id="container">
+        <div id="collection-image-title">
+          <div id="collection-title">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</div>
+          <div id="collection-image-container">
+            <div
+              id="collection-image"
+              style="background-image:url('https://archive.org/services/img/${(_b = this
+            .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
+            ></div>
+          </div>
+        </div>
+        <div id="item-count-container">
+          <div id="item-count-image-container">${collectionIcon}</div>
+          <div id="item-count-stacked-text">
+            <div id="item-count">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.itemCount.toLocaleString()}</div>
+            <div id="items-text">${msg('items')}</div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static get styles() {
+        const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
+        return css `
+      #collection-image-container {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+      }
+
+      #collection-image {
+        width: 16rem;
+        height: 16rem;
+        border-radius: 0.8rem;
+        overflow: hidden;
+        box-shadow: 1px 1px 2px 0px;
+        object-fit: cover;
+        background-position: center;
+        background-size: cover;
+      }
+
+      #item-count-image-container svg {
+        filter: invert(100%);
+      }
+
+      #collection-image-title {
+        background-color: #666;
+        border: 1px solid #2c2c2c;
+        padding: 0.5rem;
+        border-top-left-radius: ${cornerRadiusCss};
+        border-top-right-radius: ${cornerRadiusCss};
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+
+      #collection-title {
+        font-weight: bold;
+        color: #fff;
+        font-size: 1.6rem;
+        text-align: center;
+        margin-bottom: 0.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 2rem;
+        height: 4rem;
+      }
+
+      #container {
+        box-shadow: 1px 1px 2px 0px;
+        border-radius: ${cornerRadiusCss};
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #container:hover > #collection-image-title > #collection-title {
+        text-decoration: underline;
+      }
+
+      /* this is a workaround for Safari 15 where the hover effects are not working */
+      #collection-image-title:hover > #collection-title {
+        text-decoration: underline;
+      }
+
+      #container:hover > #collection-image-title {
+        background-color: #757575;
+      }
+
+      #item-count-container {
+        background-color: #444;
+        border-bottom: 1px solid #2c2c2c;
+        border-left: 1px solid #2c2c2c;
+        border-right: 1px solid #2c2c2c;
+        border-bottom-left-radius: ${cornerRadiusCss};
+        border-bottom-right-radius: ${cornerRadiusCss};
+        display: flex;
+        padding: 0rem 0.5rem;
+        height: 5.5rem;
+        align-items: center;
+      }
+
+      #item-count-image-container {
+        margin-right: 0.5rem;
+      }
+
+      #item-count-stacked-text {
+        display: flex;
+        align-items: baseline;
+        color: #fff;
+      }
+      #item-count-image-container svg {
+        height: 2.5rem;
+        align-items: baseline;
+      }
+
+      #container:hover > #item-count-container {
+        background-color: #575757;
+      }
+
+      #item-count {
+        font-size: 1.4rem;
+        font-weight: bold;
+      }
+
+      #item-count-image {
+        width: 3rem;
+        height: 3rem;
+        margin-right: 1rem;
+      }
+
+      #items-text {
+        font-size: 1.4rem;
+        font-weight: bold;
+        margin-left: 0.5rem;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CollectionTile.prototype, "model", void 0);
+CollectionTile = __decorate([
+    localized(),
+    customElement('collection-tile')
+], CollectionTile);
+export { CollectionTile };
+//# sourceMappingURL=collection-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAK7E,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAG5C,MAAM;;QACJ,OAAO,IAAI,CAAA;;;uCAGwB,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;;8EAIsB,MAAA,IAAI;aACjE,KAAK,0CAAE,UAAU;;;;;iDAKe,cAAc;;mCAE5B,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC,cAAc,EAAE;mCACtC,GAAG,CAAC,OAAO,CAAC;;;;KAI1C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;kCA0BoB,eAAe;mCACd,eAAe;;;;;;;;;;;;;;;;;;;;;;;yBAuBzB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;qCAwBH,eAAe;sCACd,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyChD,CAAC;IACJ,CAAC;CACF,CAAA;AAnJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AADnC,cAAc;IAF1B,SAAS,EAAE;IACX,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoJ1B;SApJY,cAAc","sourcesContent":["import { localized, msg } from '@lit/localize';\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { TileModel } from '../../models';\n\n@localized()\n@customElement('collection-tile')\nexport class CollectionTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <div id=\"collection-image-title\">\n          <div id=\"collection-title\">${this.model?.title}</div>\n          <div id=\"collection-image-container\">\n            <div\n              id=\"collection-image\"\n              style=\"background-image:url('https://archive.org/services/img/${this\n                .model?.identifier}')\"\n            ></div>\n          </div>\n        </div>\n        <div id=\"item-count-container\">\n          <div id=\"item-count-image-container\">${collectionIcon}</div>\n          <div id=\"item-count-stacked-text\">\n            <div id=\"item-count\">${this.model?.itemCount.toLocaleString()}</div>\n            <div id=\"items-text\">${msg('items')}</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #collection-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #collection-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-count-image-container svg {\n        filter: invert(100%);\n      }\n\n      #collection-image-title {\n        background-color: #666;\n        border: 1px solid #2c2c2c;\n        padding: 0.5rem;\n        border-top-left-radius: ${cornerRadiusCss};\n        border-top-right-radius: ${cornerRadiusCss};\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n      }\n\n      #collection-title {\n        font-weight: bold;\n        color: #fff;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #container {\n        box-shadow: 1px 1px 2px 0px;\n        border-radius: ${cornerRadiusCss};\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #container:hover > #collection-image-title > #collection-title {\n        text-decoration: underline;\n      }\n\n      /* this is a workaround for Safari 15 where the hover effects are not working */\n      #collection-image-title:hover > #collection-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #collection-image-title {\n        background-color: #757575;\n      }\n\n      #item-count-container {\n        background-color: #444;\n        border-bottom: 1px solid #2c2c2c;\n        border-left: 1px solid #2c2c2c;\n        border-right: 1px solid #2c2c2c;\n        border-bottom-left-radius: ${cornerRadiusCss};\n        border-bottom-right-radius: ${cornerRadiusCss};\n        display: flex;\n        padding: 0rem 0.5rem;\n        height: 5.5rem;\n        align-items: center;\n      }\n\n      #item-count-image-container {\n        margin-right: 0.5rem;\n      }\n\n      #item-count-stacked-text {\n        display: flex;\n        align-items: baseline;\n        color: #fff;\n      }\n      #item-count-image-container svg {\n        height: 2.5rem;\n        align-items: baseline;\n      }\n\n      #container:hover > #item-count-container {\n        background-color: #575757;\n      }\n\n      #item-count {\n        font-size: 1.4rem;\n        font-weight: bold;\n      }\n\n      #item-count-image {\n        width: 3rem;\n        height: 3rem;\n        margin-right: 1rem;\n      }\n\n      #items-text {\n        font-size: 1.4rem;\n        font-weight: bold;\n        margin-left: 0.5rem;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/grid/icons/account.d.ts

@@ -0,0 +1 @@
+export declare const accountIcon: import("lit-html").TemplateResult<2>;

package/dist/src/tiles/grid/icons/account.js

@@ -0,0 +1,12 @@
+import { svg } from 'lit';
+export const accountIcon = svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
+      fill="#333"
+      fill-rule="evenodd"
+    />
+    <title>Icon of a person</title>
+  </svg>
+`;
+//# sourceMappingURL=account.js.map