@internetarchive/collection-browser 0.0.1-alpha.7 → 0.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,aAAa,CAAC;AAGrB,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAC8B,gBAAW,GAA0B,MAAM,CAAC;QAE5C,kBAAa,GAAmB,MAAM,CAAC;QAEvC,cAAS,GAAG,MAAM,CAAC;QAEtC,yBAAoB,GAAY,KAAK,CAAC;QAEtC,2BAAsB,GAAY,KAAK,CAAC;QAExC,4BAAuB,GAAG,KAAK,CAAC;IA4S3C,CAAC;IA1SC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;6BASc,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC7B,CAAC;;;;;;6BAMQ,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC9B,CAAC;;;;;;;;;;2BAUM,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QAC1B,CAAC;;;;;;;;2BAQQ,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;QACjC,CAAC;;;;;;;;2BAQQ,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,uBAAuB;gBAC1B,CAAC,IAAI,CAAC,uBAAuB,CAAC;QAClC,CAAC;;;;;;;;2BAQQ,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;YAC3D,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACnC,CAAC;;;;;;;;;;gBAUH,IAAI,CAAC,WAAW,KAAK,MAAM;YAC3B,CAAC,CAAC,IAAI,CAAA;oDAC8B,IAAI,CAAC,cAAc;;wBAE/C;YACR,CAAC,CAAC,OAAO;;;kDAGyB,IAAI,CAAC,YAAY;;;;;kDAKjB,IAAI,CAAC,YAAY;;;;;;;;UAQzD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO;UAC9D,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO;UAC3D,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO;;;;KAIpE,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5D,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;IACH,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;;;;;uBAKQ,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;;;;;;;uBAOQ,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QAC1B,CAAC;;;;;;;uBAOQ,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;;;;;;;uBAOQ,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC/B,CAAC;;;;;;;KAOV,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,kBAAkB;kBAC5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,oBAAoB;kBAC9B,CAAC;IACjB,CAAC;IAEO,kBAAkB,CACxB,CAAsD;QAEtD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAClD,MAAM,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE;SACpD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,oBAAoB,CAC1B,CAAsD;QAEtD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACpD,MAAM,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE;SACpD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;IAC5B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;IACpC,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;YACvD,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,cAAc,CAAC;IACrB,CAAC;IAEO,kBAAkB;QACxB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAClD,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,WAAW;QACjB,MAAM,IAAI,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/D,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC3C,MAAM,EAAE,EAAE,IAAI,EAAE;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;CA2EF,CAAA;AAzEQ,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwElB,CAAC;AArT0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA6C;AAE5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;2DAAuC;AAEtC;IAAR,KAAK,EAAE;6DAAyC;AAExC;IAAR,KAAK,EAAE;8DAAiC;AAX9B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuTzB;SAvTY,aAAa","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=\"container\">\n        <div id=\"sort-bar\">\n          <div id=\"sort-selector\">\n            <ul>\n              <li>\n                <div id=\"sort-direction-container\">\n                  <button\n                    class=\"sort-button\"\n                    @click=${() => {\n                      this.sortDirection = 'asc';\n                    }}\n                  >\n                    ▲\n                  </button>\n                  <button\n                    class=\"sort-button\"\n                    @click=${() => {\n                      this.sortDirection = 'desc';\n                    }}\n                  >\n                    ▼\n                  </button>\n                </div>\n              </li>\n              <li>Sort By</li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.sortField = 'week';\n                  }}\n                >\n                  Views\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.titleSelectorVisible = !this.titleSelectorVisible;\n                    this.sortField = 'titleSorter';\n                  }}\n                >\n                  Title\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.dateSortSelectorVisible =\n                      !this.dateSortSelectorVisible;\n                  }}\n                >\n                  Date Archived\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.creatorSelectorVisible = !this.creatorSelectorVisible;\n                    this.sortField = 'creatorSorter';\n                  }}\n                >\n                  Creator\n                </a>\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}>\n                  Grid\n                </button>\n              </li>\n              <li>\n                <button id=\"list-button\" @click=${this.listSelected}>\n                  List\n                </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        <div id=\"bottom-shadow\"></div>\n      </div>\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    #container {\n      margin: 0 1rem 2.5rem 1rem;\n    }\n\n    #sort-bar {\n      display: flex;\n      justify-content: space-between;\n      border: 1px solid rgb(232, 232, 232);\n      align-items: center;\n      padding: 0.1rem 0.5rem;\n    }\n\n    #bottom-shadow {\n      height: 1px;\n      width: 100%;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n      background-color: #bbb;\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-button {\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      font: inherit;\n      cursor: pointer;\n      outline: inherit;\n    }\n\n    #sort-direction-container {\n      display: flex;\n      flex-direction: column;\n    }\n\n    #sort-selector li {\n      display: flex;\n      align-items: center;\n    }\n\n    #sort-selector li a {\n      text-decoration: none;\n      text-transform: uppercase;\n      font-size: 1.4rem;\n      color: #333;\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"]}
+{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,GAAG,EACH,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAK1E,OAAO,EAEL,SAAS,EACT,oBAAoB,GACrB,MAAM,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAK5C,IAAa,aAAa,GAA1B,MAAa,aACX,SAAQ,UAAU;IADpB;;QAM8B,kBAAa,GAA0B,IAAI,CAAC;QAE5C,iBAAY,GAAc,SAAS,CAAC,SAAS,CAAC;QAE9C,wBAAmB,GAAkB,IAAI,CAAC;QAE1C,0BAAqB,GAAkB,IAAI,CAAC;QAE3C,kBAAa,GAAY,IAAI,CAAC;QAIlD,yBAAoB,GAAyB,IAAI,CAAC;QAElD,4BAAuB,GAAG,KAAK,CAAC;QAEhC,4BAAuB,GAAG,CAAC,CAAC;QAE5B,8BAAyB,GAAG,CAAC,CAAC;QAE9B,gCAA2B,GAAG,KAAK,CAAC;QA8ErC,oCAA+B,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC7D,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACtB,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;aACtC;QACH,CAAC,CAAC;IAkmBJ,CAAC;IA5qBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,6BAA6B;;;;cAIlC,IAAI,CAAC,0BAA0B;cAC/B,IAAI,CAAC,2BAA2B;;;6CAGD,IAAI,CAAC,qBAAqB;;;UAG7D,IAAI,CAAC,uBAAuB,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAC3D,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,gBAAgB;;;;KAI1B,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;YAC9D,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;SAC7B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAClE,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;SACrC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE;YACtE,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;SACvC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,EAAE;YAC1C,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YACjC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAC7B,gBAAgB,CACgB,CAAC;YACnC,IAAI,WAAW;gBAAE,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC;YAC5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,QAAQ,CAAC,gBAAgB,CACvB,SAAS,EACT,IAAI,CAAC,+BAA+B,CACrC,CAAC;SACH;aAAM;YACL,QAAQ,CAAC,mBAAmB,CAC1B,SAAS,EACT,IAAI,CAAC,+BAA+B,CACrC,CAAC;SACH;IACH,CAAC;IAQD,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SACpD;IACH,CAAC;IAEO,wBAAwB,CAC9B,cAA6C;QAE7C,cAAc,CAAC,cAAc,CAAC;YAC5B,MAAM,EAAE,IAAI,CAAC,qBAAqB;YAClC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,cAAc,CAAC,cAAc,CAAC;YAC5B,MAAM,EAAE,IAAI,CAAC,mBAAmB;YAChC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACjC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;YAC9B,MAAM,EAAE,IAAI,CAAC,qBAAqB;YAClC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;YAC9B,MAAM,EAAE,IAAI,CAAC,mBAAmB;YAChC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,yBAAyB,GAAG,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC;IAC5E,CAAC;IAED,IAAY,gBAAgB;QAC1B,IAAI,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;YAAE,OAAO,OAAO,CAAC;QAEtE,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,EAAE;YACtC,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,OAAO,IAAI,CAAC,kBAAkB,CAAC;YACpE,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC,gBAAgB,CAAC;SACjE;aAAM;YACL,OAAO,IAAI,CAAC,oBAAoB,KAAK,SAAS;gBAC5C,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBACzB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;SAC3B;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,mBAAmB,EAAE;YAC7C,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;SACxD;aAAM,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,EAAE;YACtD,IAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;SAC1D;IACH,CAAC;IAED,IAAY,6BAA6B;QACvC,OAAO,IAAI,CAAA;;;;+BAIgB,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;sBACvD,IAAI,CAAC,YAAY,KAAK,WAAW;mBACpC,GAAG,EAAE;YACZ,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;;YAEC,QAAQ;;;;+BAIW,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;sBACxD,IAAI,CAAC,YAAY,KAAK,WAAW;mBACpC,GAAG,EAAE;YACZ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;;YAEC,QAAQ;;;KAGf,CAAC;IACJ,CAAC;IAED,IAAY,2BAA2B;QACrC,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;;;;YAIrD,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,SAAS,CAAC;YAChD,CAAC,CAAC,OAAO;;cAEP,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC;;YAE5C,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,KAAK,EAAE;YAC3C,UAAU,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;gBACpC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;gBAClC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;gBACrC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACvC,CAAC;SACF,CAAC;;;YAGA,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,IAAI,EAAE;YAC1C,UAAU,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,IAAI,CAAC,kBAAkB;oBAC1B,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACvC,IAAI,CAAC,uBAAuB,GAAG,CAAC,IAAI,CAAC,uBAAuB,CAAC;gBAC7D,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;gBACjC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;gBAClC,IAAI,CAAC,2BAA2B,EAAE,CAAC;gBACnC,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACvC,CAAC;YACD,WAAW,EAAE,IAAI,CAAA,GAAG,IAAI,CAAC,aAAa,EAAE;YACxC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB;SAC1C,CAAC;;;YAGA,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,OAAO,EAAE;YAC7C,UAAU,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;gBACtC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;gBACrC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBACxC,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACrC,CAAC;SACF,CAAC;;;KAGP,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;OAYG;IACK,oBAAoB,CAC1B,SAAoB,EACpB,OAIC;;QAED,MAAM,UAAU,GACd,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,mCAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC;QACjE,MAAM,WAAW,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC5E,OAAO,IAAI,CAAA;;;iBAGE,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAE;gBACvB,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACvB;iBAAM;gBACL,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;gBACjC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;gBACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;gBAChC,IAAI,CAAC,2BAA2B,EAAE,CAAC;gBACnC,IAAI,CAAC,6BAA6B,EAAE,CAAC;aACtC;QACH,CAAC;gBACO,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;UAEpC,WAAW;;KAEhB,CAAC;IACJ,CAAC;IAED,IAAY,0BAA0B;QACpC,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,iBAAiB;gBACxB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;;UAEvD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAC1B,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;6BACM,KAAK,eAAe,IAAI,CAAC,YAAY,KAAK,KAAK;gBAC5D,oBAAoB,CAAC,KAAkB,CAAC;;WAE7C,CACF;;KAEJ,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAkB,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;;;;;qBAKM,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC5B,CAAC;oBACO,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;cAEjD,QAAQ;;;;;;qBAMD,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;QACnC,CAAC;oBACO,IAAI,CAAC,WAAW,KAAK,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;cAExD,QAAQ;;;;;;qBAMD,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;QACpC,CAAC;oBACO,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;cAEzD,WAAW;;;;KAIpB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;;;iBAGE,GAAG,EAAE;YACZ,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACvC,CAAC;iBACQ,GAAG,EAAE;YACZ,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACvC,CAAC;;;;gBAIO,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,YAAY,CAAC;gBAC9C,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC;gBACtC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,YAAY,CAAC;gBAC9C,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC;;;KAGtD,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,SAAoB;QAC5C,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC;gBACO,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;UAEvD,oBAAoB,CAAC,SAAS,CAAC;;KAEpC,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,SAAoB;QACzC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACrC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;IAEO,iBAAiB,CAAC,aAA6B;QACrD,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,eAAe,CAAC,IAAe;QACrC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED;;;;;;;;;OASG;IACH,IAAY,kBAAkB;QAC5B,MAAM,cAAc,GAAgB;YAClC,SAAS,CAAC,YAAY;YACtB,SAAS,CAAC,IAAI;YACd,SAAS,CAAC,YAAY;YACtB,SAAS,CAAC,SAAS;SACpB,CAAC;QACF,OAAO,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,aAAa;;QACvB,MAAM,WAAW,GAAG,oBAAoB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACzD,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB;YAClC,CAAC,CAAC,MAAA,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,mCAAI,WAAW;YACxD,CAAC,CAAC,WAAW,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,mBAAmB;uBACzB,IAAI,CAAC,kBAAkB;kBAC5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,qBAAqB;uBAC3B,IAAI,CAAC,oBAAoB;kBAC9B,CAAC;IACjB,CAAC;IAEO,kBAAkB,CACxB,CAAsD;;QAEtD,IAAI,CAAC,mBAAmB,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,cAAc,mCAAI,IAAI,CAAC;QAC3D,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAEO,oBAAoB,CAC1B,CAAsD;;QAEtD,IAAI,CAAC,qBAAqB,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,cAAc,mCAAI,IAAI,CAAC;QAC7D,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,2BAA2B;QACjC,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,oBAAoB,EACpB;YACE,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,mBAAmB,EAAE;SACrD,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,6BAA6B;QACnC,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,sBAAsB,EACtB;YACE,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAAE;SACvD,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAClD,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,IAAI,WAAW,CAG1B,aAAa,EAAE;YAChB,MAAM,EAAE;gBACN,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;CA2MF,CAAA;AAzMQ,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwMlB,CAAC;AAzsB0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA6C;AAE5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA+C;AAE9C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA6C;AAE3C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA+B;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAgD;AAElE;IAAR,KAAK,EAAE;2DAAmD;AAElD;IAAR,KAAK,EAAE;8DAAiC;AAEhC;IAAR,KAAK,EAAE;8DAA6B;AAE5B;IAAR,KAAK,EAAE;gEAA+B;AAE9B;IAAR,KAAK,EAAE;kEAAqC;AAG7C;IADC,KAAK,CAAC,wBAAwB,CAAC;0DACe;AAG/C;IADC,KAAK,CAAC,0BAA0B,CAAC;4DACa;AAhCpC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA8sBzB;SA9sBY,aAAa","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n  CollectionDisplayMode,\n  SortField,\n  SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: String }) sortDirection: 'asc' | 'desc' | null = null;\n\n  @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n  @property({ type: String }) selectedTitleFilter: string | null = null;\n\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n  @property({ type: Boolean }) showRelevance: boolean = true;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n  @state() dateSortSelectorVisible = false;\n\n  @state() desktopSelectorBarWidth = 0;\n\n  @state() selectorBarContainerWidth = 0;\n\n  @state() hoveringOverDateSortOptions = false;\n\n  @query('#desktop-sort-selector')\n  private desktopSortSelector!: HTMLUListElement;\n\n  @query('#sort-selector-container')\n  private sortSelectorContainer!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <div id=\"sort-bar\">\n          <div id=\"sort-direction-container\">\n            ${this.sortDirectionSelectorTemplate}\n          </div>\n\n          <div id=\"sort-selector-container\">\n            ${this.mobileSortSelectorTemplate}\n            ${this.desktopSortSelectorTemplate}\n          </div>\n\n          <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n        </div>\n\n        ${this.dateSortSelectorVisible && !this.mobileSelectorVisible\n          ? this.dateSortSelector\n          : nothing}\n        ${this.alphaBarTemplate}\n\n        <div id=\"bottom-shadow\"></div>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\n    }\n\n    if (changed.has('selectedSort') && this.sortDirection === null) {\n      this.sortDirection = 'desc';\n    }\n\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n      this.alphaSelectorVisible = 'title';\n    }\n\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n      this.alphaSelectorVisible = 'creator';\n    }\n\n    if (changed.has('dateSortSelectorVisible')) {\n      this.setupEscapeListeners();\n    }\n\n    if (changed.has('resizeObserver')) {\n      const oldObserver = changed.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      if (oldObserver) this.disconnectResizeObserver(oldObserver);\n      this.setupResizeObserver();\n    }\n  }\n\n  private setupEscapeListeners() {\n    if (this.dateSortSelectorVisible) {\n      document.addEventListener(\n        'keydown',\n        this.boundDateSelectorEscapeListener\n      );\n    } else {\n      document.removeEventListener(\n        'keydown',\n        this.boundDateSelectorEscapeListener\n      );\n    }\n  }\n\n  private boundDateSelectorEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.dateSortSelectorVisible = false;\n    }\n  };\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver) {\n      this.disconnectResizeObserver(this.resizeObserver);\n    }\n  }\n\n  private disconnectResizeObserver(\n    resizeObserver: SharedResizeObserverInterface\n  ) {\n    resizeObserver.removeObserver({\n      target: this.sortSelectorContainer,\n      handler: this,\n    });\n\n    resizeObserver.removeObserver({\n      target: this.desktopSortSelector,\n      handler: this,\n    });\n  }\n\n  private setupResizeObserver() {\n    if (!this.resizeObserver) return;\n    this.resizeObserver.addObserver({\n      target: this.sortSelectorContainer,\n      handler: this,\n    });\n\n    this.resizeObserver.addObserver({\n      target: this.desktopSortSelector,\n      handler: this,\n    });\n  }\n\n  private get mobileSelectorVisible() {\n    return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n  }\n\n  private get alphaBarTemplate(): TemplateResult | typeof nothing {\n    if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n    if (this.alphaSelectorVisible === null) {\n      if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n      if (this.selectedSort === 'title') return this.titleSelectorBar;\n    } else {\n      return this.alphaSelectorVisible === 'creator'\n        ? this.creatorSelectorBar\n        : this.titleSelectorBar;\n    }\n\n    return nothing;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    if (entry.target === this.desktopSortSelector) {\n      this.desktopSelectorBarWidth = entry.contentRect.width;\n    } else if (entry.target === this.sortSelectorContainer) {\n      this.selectorBarContainerWidth = entry.contentRect.width;\n    }\n  }\n\n  private get sortDirectionSelectorTemplate() {\n    return html`\n      <div id=\"sort-direction-selector\">\n        <button\n          id=\"sort-ascending-btn\"\n          class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n          ?disabled=${this.selectedSort === 'relevance'}\n          @click=${() => {\n            this.setSortDirections('asc');\n          }}\n        >\n          ${sortIcon}\n        </button>\n        <button\n          id=\"sort-descending-btn\"\n          class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n          ?disabled=${this.selectedSort === 'relevance'}\n          @click=${() => {\n            this.setSortDirections('desc');\n          }}\n        >\n          ${sortIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  private get desktopSortSelectorTemplate() {\n    return html`\n      <ul\n        id=\"desktop-sort-selector\"\n        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n      >\n        <li id=\"sort-by-text\">Sort By</li>\n        <li>\n          ${this.showRelevance\n            ? this.getSortDisplayOption(SortField.relevance)\n            : nothing}\n        </li>\n        <li>${this.getSortDisplayOption(SortField.views)}</li>\n        <li>\n          ${this.getSortDisplayOption(SortField.title, {\n            clickEvent: () => {\n              this.alphaSelectorVisible = 'title';\n              this.selectedCreatorFilter = null;\n              this.dateSortSelectorVisible = false;\n              this.setSelectedSort(SortField.title);\n              this.emitCreatorLetterChangedEvent();\n            },\n          })}\n        </li>\n        <li>\n          ${this.getSortDisplayOption(SortField.date, {\n            clickEvent: () => {\n              if (!this.dateOptionSelected)\n                this.setSelectedSort(SortField.date);\n              this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n              this.alphaSelectorVisible = null;\n              this.selectedTitleFilter = null;\n              this.selectedCreatorFilter = null;\n              this.emitTitleLetterChangedEvent();\n              this.emitCreatorLetterChangedEvent();\n            },\n            displayName: html`${this.dateSortField}`,\n            isSelected: () => this.dateOptionSelected,\n          })}\n        </li>\n        <li>\n          ${this.getSortDisplayOption(SortField.creator, {\n            clickEvent: () => {\n              this.alphaSelectorVisible = 'creator';\n              this.selectedTitleFilter = null;\n              this.dateSortSelectorVisible = false;\n              this.setSelectedSort(SortField.creator);\n              this.emitTitleLetterChangedEvent();\n            },\n          })}\n        </li>\n      </ul>\n    `;\n  }\n\n  /**\n   * This generates each of the sort option links.\n   *\n   * It manages the display value and the selected state of the option.\n   *\n   * @param sortField\n   * @param options {\n   *    additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.\n   *    displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n   *    isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n   * }\n   * @returns\n   */\n  private getSortDisplayOption(\n    sortField: SortField,\n    options?: {\n      clickEvent?: (e: Event) => void;\n      isSelected?: () => boolean;\n      displayName?: TemplateResult;\n    }\n  ): TemplateResult {\n    const isSelected =\n      options?.isSelected ?? (() => this.selectedSort === sortField);\n    const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n    return html`\n      <a\n        href=\"#\"\n        @click=${(e: Event) => {\n          e.preventDefault();\n          if (options?.clickEvent) {\n            options.clickEvent(e);\n          } else {\n            this.alphaSelectorVisible = null;\n            this.dateSortSelectorVisible = false;\n            this.selectedTitleFilter = null;\n            this.selectedCreatorFilter = null;\n            this.setSelectedSort(sortField);\n            this.emitTitleLetterChangedEvent();\n            this.emitCreatorLetterChangedEvent();\n          }\n        }}\n        class=${isSelected() ? 'selected' : ''}\n      >\n        ${displayName}\n      </a>\n    `;\n  }\n\n  private get mobileSortSelectorTemplate() {\n    return html`\n      <select\n        id=\"mobile-sort-selector\"\n        @change=${this.mobileSortChanged}\n        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n      >\n        ${Object.keys(SortField).map(\n          field => html`\n            <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n              ${SortFieldDisplayName[field as SortField]}\n            </option>\n          `\n        )}\n      </select>\n    `;\n  }\n\n  private mobileSortChanged(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    this.setSelectedSort(target.value as SortField);\n  }\n\n  private get displayOptionTemplate() {\n    return html`\n      <ul>\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${() => {\n              this.displayMode = 'grid';\n            }}\n            class=${this.displayMode === 'grid' ? 'active' : ''}\n          >\n            ${tileIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${() => {\n              this.displayMode = 'list-detail';\n            }}\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\n          >\n            ${listIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-button\"\n            @click=${() => {\n              this.displayMode = 'list-compact';\n            }}\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\n          >\n            ${compactIcon}\n          </button>\n        </li>\n      </ul>\n    `;\n  }\n\n  private get dateSortSelector() {\n    return html`\n      <div\n        id=\"date-sort-selector-backdrop\"\n        @keyup=${() => {\n          this.dateSortSelectorVisible = false;\n        }}\n        @click=${() => {\n          this.dateSortSelectorVisible = false;\n        }}\n      ></div>\n      <div id=\"date-sort-selector\">\n        <ul>\n          <li>${this.getDateSortButton(SortField.datearchived)}</li>\n          <li>${this.getDateSortButton(SortField.date)}</li>\n          <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n          <li>${this.getDateSortButton(SortField.dateadded)}</li>\n        </ul>\n      </div>\n    `;\n  }\n\n  private getDateSortButton(sortField: SortField) {\n    return html`\n      <button\n        @click=${() => {\n          this.selectDateSort(sortField);\n        }}\n        class=${this.selectedSort === sortField ? 'selected' : ''}\n      >\n        ${SortFieldDisplayName[sortField]}\n      </button>\n    `;\n  }\n\n  private selectDateSort(sortField: SortField) {\n    this.dateSortSelectorVisible = false;\n    this.setSelectedSort(sortField);\n  }\n\n  private setSortDirections(sortDirection: 'asc' | 'desc') {\n    this.sortDirection = sortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  private setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    this.emitSortChangedEvent();\n  }\n\n  /**\n   * There are four date sort options.\n   *\n   * This checks to see if the current sort is one of them.\n   *\n   * @readonly\n   * @private\n   * @type {boolean}\n   * @memberof SortFilterBar\n   */\n  private get dateOptionSelected(): boolean {\n    const dateSortFields: SortField[] = [\n      SortField.datearchived,\n      SortField.date,\n      SortField.datereviewed,\n      SortField.dateadded,\n    ];\n    return dateSortFields.includes(this.selectedSort);\n  }\n\n  /**\n   * The display name of the current date field\n   *\n   * @readonly\n   * @private\n   * @type {string}\n   * @memberof SortFilterBar\n   */\n  private get dateSortField(): string {\n    const defaultSort = SortFieldDisplayName[SortField.date];\n    const name = this.dateOptionSelected\n      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n      : defaultSort;\n    return name;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedTitleFilter}\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedCreatorFilter}\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n    this.emitTitleLetterChangedEvent();\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private emitTitleLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'titleLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedTitleFilter },\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  private emitCreatorLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'creatorLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedCreatorFilter },\n      }\n    );\n    this.dispatchEvent(event);\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 emitSortChangedEvent() {\n    const event = new CustomEvent<{\n      selectedSort: SortField;\n      sortDirection: 'asc' | 'desc' | null;\n    }>('sortChanged', {\n      detail: {\n        selectedSort: this.selectedSort,\n        sortDirection: this.sortDirection,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static styles = css`\n    #container {\n      position: relative;\n    }\n\n    #sort-bar {\n      display: flex;\n      justify-content: space-between;\n      border: 1px solid rgb(232, 232, 232);\n      align-items: center;\n      padding: 0.5rem 1.5rem;\n    }\n\n    #sort-direction-container {\n      flex: 0;\n    }\n\n    #sort-by-text {\n      text-transform: uppercase;\n    }\n\n    #bottom-shadow {\n      height: 1px;\n      width: 100%;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n      background-color: #bbb;\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;\n    }\n\n    .sort-button {\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      outline: inherit;\n      width: 12px;\n      height: 12px;\n      opacity: 0.5;\n    }\n\n    .sort-button.selected {\n      opacity: 1;\n    }\n\n    .sort-button:disabled {\n      opacity: 0.25;\n      cursor: default;\n    }\n\n    #date-sort-selector {\n      position: absolute;\n      left: 150px;\n      top: 45px;\n\n      z-index: 1;\n      padding: 1rem;\n      background-color: white;\n      border-radius: 2.5rem;\n      border: 1px solid #404142;\n    }\n\n    #date-sort-selector button {\n      background: none;\n      border-radius: 15px;\n      color: #404142;\n      border: none;\n      appearance: none;\n      cursor: pointer;\n      -webkit-appearance: none;\n      font-size: 1.4rem;\n      font-weight: 400;\n      padding: 0.5rem 1.2rem;\n    }\n\n    #date-sort-selector button.selected {\n      background-color: #404142;\n      color: white;\n    }\n\n    #show-details {\n      text-transform: uppercase;\n      cursor: pointer;\n      display: flex;\n    }\n\n    #show-details input {\n      margin-right: 0.5rem;\n      flex: 0 0 12px;\n    }\n\n    #sort-descending-btn {\n      transform: rotate(180deg);\n    }\n\n    #sort-direction-selector {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n      margin-right: 1rem;\n    }\n\n    #sort-selector-container {\n      flex: 1;\n    }\n\n    /*\n      we move the desktop sort selector offscreen instead of display: none\n      because we need to observe the width of it vs its container to determine\n      if it's wide enough to display the desktop version and if you displY: none,\n      the width becomes 0\n    */\n    #desktop-sort-selector.hidden {\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n\n    #mobile-sort-selector.hidden {\n      display: none;\n    }\n\n    #date-sort-selector-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 1;\n      background-color: rgba(255, 255, 255, 0.5);\n    }\n\n    #desktop-sort-selector {\n      display: inline-flex;\n    }\n\n    #desktop-sort-selector li {\n      display: flex;\n      align-items: center;\n    }\n\n    #desktop-sort-selector li a {\n      text-decoration: none;\n      text-transform: uppercase;\n      font-size: 1.4rem;\n      color: #333;\n      line-height: 2.5;\n    }\n\n    #desktop-sort-selector li a.selected {\n      font-weight: bold;\n    }\n\n    #desktop-sort-selector li::after {\n      content: '•';\n      padding-left: 1rem;\n      padding-right: 1rem;\n    }\n\n    #desktop-sort-selector li:first-child::after {\n      content: '';\n    }\n\n    #desktop-sort-selector li:last-child::after {\n      content: '';\n    }\n\n    #display-style-selector {\n      flex: 0;\n    }\n\n    #display-style-selector button {\n      background: none;\n      color: inherit;\n      border: none;\n      appearance: none;\n      cursor: pointer;\n      -webkit-appearance: none;\n      opacity: 0.5;\n    }\n\n    #display-style-selector button.active {\n      opacity: 1;\n    }\n\n    #display-style-selector button svg {\n      width: 24px;\n      height: 24px;\n    }\n  `;\n}\n"]}

package/dist/src/tiles/{loading-tile.d.ts → collection-browser-loading-tile.d.ts}

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

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

@@ -0,0 +1,32 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let CollectionBrowserLoadingTile = class CollectionBrowserLoadingTile extends LitElement {
+    render() {
+        return html ` <div id="container"></div> `;
+    }
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      #container {
+        background: linear-gradient(
+          to right,
+          rgba(25, 69, 154, 0.1),
+          rgb(105, 161, 234, 0.2)
+        );
+        background-size: 100% 100%;
+        display: block;
+        height: 100%;
+      }
+    `;
+    }
+};
+CollectionBrowserLoadingTile = __decorate([
+    customElement('collection-browser-loading-tile')
+], CollectionBrowserLoadingTile);
+export { CollectionBrowserLoadingTile };
+//# sourceMappingURL=collection-browser-loading-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collection-browser-loading-tile.js","sourceRoot":"","sources":["../../../src/tiles/collection-browser-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,4BAA4B,GAAzC,MAAa,4BAA6B,SAAQ,UAAU;IAC1D,MAAM;QACJ,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBT,CAAC;IACJ,CAAC;CACF,CAAA;AAxBY,4BAA4B;IADxC,aAAa,CAAC,iCAAiC,CAAC;GACpC,4BAA4B,CAwBxC;SAxBY,4BAA4B","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('collection-browser-loading-tile')\nexport class CollectionBrowserLoadingTile extends LitElement {\n  render() {\n    return html` <div id=\"container\"></div> `;\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        background: linear-gradient(\n          to right,\n          rgba(25, 69, 154, 0.1),\n          rgb(105, 161, 234, 0.2)\n        );\n        background-size: 100% 100%;\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}

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

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

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

@@ -5,7 +5,7 @@ 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 {
+let AccountTile = class AccountTile extends LitElement {
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         return html `
@@ -136,9 +136,9 @@ let UserTile = class UserTile extends LitElement {
 };
 __decorate([
     property({ type: Object })
-], UserTile.prototype, "model", void 0);
-UserTile = __decorate([
+], AccountTile.prototype, "model", void 0);
+AccountTile = __decorate([
     customElement('account-tile')
-], UserTile);
-export { UserTile };
+], AccountTile);
+export { AccountTile };
 //# sourceMappingURL=account-tile.js.map

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

@@ -1 +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"]}
+{"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,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,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;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkIvB;SAlIY,WAAW","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 AccountTile 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.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { localized, msg } from '@lit/localize';
+import { 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';
@@ -153,7 +153,6 @@ __decorate([
     property({ type: Object })
 ], CollectionTile.prototype, "model", void 0);
 CollectionTile = __decorate([
-    localized(),
     customElement('collection-tile')
 ], CollectionTile);
 export { CollectionTile };

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

@@ -1 +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"]}
+{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,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;AAI7E,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;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoJ1B;SApJY,cAAc","sourcesContent":["import { 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@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/views.d.ts

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

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

@@ -1,5 +1,5 @@
-import { html } from 'lit';
-export default html `
+import { svg } from 'lit';
+export default svg `
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

package/dist/src/tiles/grid/icons/views.js.map

@@ -1 +1 @@
-{"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,eAAe,IAAI,CAAA;;;;;;;;CAQlB,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport default html`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\"\n      fill=\"#333\"\n    />\n    <title>Eye icon</title>\n  </svg>\n`;\n"]}
+{"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;CAQjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\"\n      fill=\"#333\"\n    />\n    <title>Eye icon</title>\n  </svg>\n`;\n"]}

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

@@ -1,10 +1,10 @@
 import { CSSResultGroup, LitElement } from 'lit';
 import { TileModel } from '../../models';
-import '../../mediatype-icon';
+import '../mediatype-icon';
+import '../item-image';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
     baseNavigationUrl?: string;
-    get renderItemImageView(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;
 }

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

@@ -1,68 +1,65 @@
 import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { formatCount } from '../../utils/format-count';
-import '../../mediatype-icon';
 import { favoriteFilledIcon } from './icons/favorite-filled';
 import { reviewsIcon } from './icons/reviews';
 import viewsIcon from './icons/views';
+import '../mediatype-icon';
+import '../item-image';
 let ItemTile = class ItemTile extends LitElement {
-    get renderItemImageView() {
-        var _a, _b;
-        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
-        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collections.includes('deemphasize');
-        return !containsDeemphasize
-            ? html `<div
-          id="item-image"
-          style="background-image:url(${imgSrcUrl})"
-        ></div>`
-            : html `<div id="item-image-box">
-          <div
-            id="item-image-deemphasize"
-            style="background-image:url(${imgSrcUrl})"
-          ></div>
-          <div class="tile-action no-preview">Content may be inappropriate</div>
-        </div>`;
-    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.collections[0]}`;
-        const itemTitle = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.title) || '';
-        const itemCreator = ((_c = this.model) === null || _c === void 0 ? void 0 : _c.creator) || '-';
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || '';
+        const itemCreator = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator) || '-';
         return html `
       <div id="container">
-        <div id="stealth-popup">
-          <div id="collection-image" style="background-image:url(${imgSrcUrl})"></div>
-          <p id="collection-name">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.collections[0]}</p>
-        </div>
         <div id="title-image-container">
-          <p id="item-title" title=${itemTitle}>
-            ${(_e = this.model) === null || _e === void 0 ? void 0 : _e.title}
-          </p>
+          <h1 id="item-title" title=${itemTitle}>${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</h1>
           <div id="item-image-container">
-            ${this.renderItemImageView}
+            <item-image
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+            >
+            </item-image>
           </div>
           <div class="item-creator">
-            <span id="text-by">By:</span>
-            <span>${itemCreator}</span>
+            <div class="truncated">
+              <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+            </div>
           </div>
         </div>
+
+        <div class="hr"></div>
+
         <div id="item-stats-container">
           <div id="stats-holder">
             <div class="col">
-              <mediatype-icon mediatype="${(_f = this.model) === null || _f === void 0 ? void 0 : _f.mediatype}" showText="true">
+              <mediatype-icon
+                .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
+                .collection=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.collections}
+                ?showText=${true}
+              >
+              </mediatype-icon>
             </div>
             <div class="col">
               ${viewsIcon}
-              <p class="status-text">${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.viewCount, 'short', 'short')}</p>
+              <p class="status-text">
+                ${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.viewCount, 'short', 'short')}
+              </p>
             </div>
             <div class="col">
               ${favoriteFilledIcon}
-              <p class="status-text">${formatCount((_h = this.model) === null || _h === void 0 ? void 0 : _h.itemCount, 'short', 'short')}</p>
+              <p class="status-text">
+                ${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.itemCount, 'short', 'short')}
+              </p>
             </div>
             <div class="col">
               ${reviewsIcon}
-              <p class="status-text">${formatCount((_j = this.model) === null || _j === void 0 ? void 0 : _j.favCount, 'short', 'short')}</p>
+              <p class="status-text">
+                ${formatCount((_h = this.model) === null || _h === void 0 ? void 0 : _h.favCount, 'short', 'short')}
+              </p>
             </div>
           </div>
         </div>
@@ -79,18 +76,18 @@ let ItemTile = class ItemTile extends LitElement {
         display: flex;
         flex-direction: column;
         height: 100%;
+        position: relative;
       }
 
       #title-image-container {
         display: flex;
         flex: 1;
         flex-direction: column;
-        padding: 0.5rem;
+        padding: 0.5rem 0.5rem 0 0.5rem;
       }
 
       #item-title {
-        font-weight: bold;
-        color: #000000;
+        color: #2c2c2c;
         font-size: 1.6rem;
         text-align: center;
         margin-top: 0rem;
@@ -110,59 +107,6 @@ let ItemTile = class ItemTile extends LitElement {
         flex: 1;
       }
 
-      #item-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-image-box {
-        width: 16rem;
-        height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        border: 5px solid #0000000;
-        position: relative;
-        display: flex;
-      }
-
-      #item-image-deemphasize {
-        width: 16rem;
-        height: 16rem;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
-        filter: blur(15px);
-        position: absolute;
-        z-index: 1;
-      }
-
-      .tile-action {
-        border: 2px solid currentColor;
-        border-radius: 1px;
-        padding: 5px;
-        font-weight: 500;
-        width: auto;
-        position: absolute;
-        z-index: 2;
-        display: flex;
-        top: 5.5rem;
-      }
-
-      .no-preview {
-        background-color: #fffecb;
-        color: #000000;
-        font-size: 1.4rem;
-        line-height: 2rem;
-        text-align: center;
-      }
-
       .hidden {
         display: none;
       }
@@ -181,21 +125,33 @@ let ItemTile = class ItemTile extends LitElement {
       }
 
       .item-creator {
-        color: #000000;
-        display: -webkit-box;
-        font-size: 1.4rem;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
-        margin: 0px;
-        overflow: hidden;
-        padding: 0.5rem;
-        text-align: center;
-        text-overflow: ellipsis;
+        padding-top: 1rem;
+      }
+
+      .truncated {
+        flex: 1;
+        min-width: 0; /* Important for long words! */
+      }
+
+      .truncated span {
+        font-size: 1.4rem;
+        color: #2c2c2c;
         -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
         -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        line-height: 2rem;
+        text-align: center;
       }
 
-      #text-by {
-        font-weight: bold;
+      .hr {
+        border: 0.5px solid #ccc;
       }
 
       #item-stats-container {
@@ -231,54 +187,6 @@ let ItemTile = class ItemTile extends LitElement {
       .col {
         width: 25%;
       }
-
-      #container:hover #stealth-popup {
-        margin-top: -30px;
-        visiblity: visible;
-        opacity: 1;
-      }
-
-      #stealth-popup {
-        transition: margin-top 0.3s ease, opacity 0.3s ease;
-        position: absolute;
-        visiblity: hidden;
-        z-index: 1;
-        opacity: 0;
-        color: black;
-        margin-top: -15px;
-        margin-left: -15px;
-        text-align: left;
-        display: flex;
-        align-items: center;
-      }
-
-      #collection-image {
-        transition: opacity 0.3s ease;
-        width: 4.5rem;
-        height: 4.5rem;
-        border-radius: 22px;
-        box-shadow: 0px 0px 10px #ccc;
-        background-color: white;
-        border: 2px solid #ddd;
-        overflow: hidden;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
-      }
-
-      #collection-name {
-        width: 160px;
-        line-height: 1;
-        max-height: 25px;
-        font-size: 12px;
-        font-weight: bold;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        bottom: 20px;
-        padding: 1rem;
-      }
     `;
     }
 };